Customize

Sections

Sections are the building blocks of each page. In the theme editor, select Add section to add one, and drag sections to reorder them.

Settings most sections share

Color scheme: Which of your color schemes the section uses. Edit schemes in Theme settings > Colors.
Eyebrow: A short line of small uppercase text above the heading. Leave empty to hide it.
Section padding: Top padding, Bottom padding: Space above and below the section's content.0px to 100px or 0px to 140px, depending on the section. On phones, padding is reduced by a quarter.

When an image setting is empty, Duskline shows a placeholder illustration so you can see the layout while you work.

Background videos

The Time of day hero, Image banner, Editorial band and Gift guide sections have a Video setting for a video uploaded to your store. Background videos play muted on loop and always come with a pause button. The video is loaded only when the section is on screen. Visitors who prefer reduced motion, use a data saver or are on a very slow connection see the image instead.

The header is part of the header group and appears on every page. Change your logo, inverse logo and logo width in Theme settings > Logo.

Desktop layout: Logo center, menu left, Logo left, menu center or Logo left, menu left.
Menu: The main menu. Supports up to three levels. Menu items with three levels open a mega menu.Default: main-menu.
Show shop panel: Menu items that link to a collection, all products or the collections list, and have no submenu, open one shared panel on desktop and show as image tiles in the mobile menu. See Shop panel.
Secondary menu: Shown in the shop panel and in the mobile menu, for help or company links. Links already in the main menu are skipped.
Sticky header: None: the header scrolls away. Always: the header stays at the top. On scroll up: the header hides while scrolling down and returns when scrolling up.Default: Always.
Show separator line: A thin line under the header.
Color scheme: Colors of the header bar.
Menu color scheme: Used by dropdowns, mega menus and the mobile menu.

Transparent header

Use transparent header on home page: On the home page, the header sits transparently over the first section when that section supports it: a Time of day hero or Image banner with Use header overlay turned on. The header becomes solid as the page scrolls. Add an Inverse logo in Theme settings > Logo so your logo stays visible.
Transparent header text: Color of menu text and icons while the header is transparent. Shown when the transparent header is on.Default: white.

Icons

Cart icon: Bag or Cart.
Customer account menu: Links shown with the account icon.Default: customer-account-main-menu.

Country/region and language

Show country/region selector: Shown in the header on desktop and in the mobile menu. Add countries and regions in your Markets settings.
Show language selector: Add languages in your language settings.

Featured card

Image, Label, Heading, Button label, Link: A promotional card shown in the shop panel and at the top of the mobile menu.Default label: New in. Default button label: Shop now.

Shop panel

Featured product: A product shown in the shop panel.
Featured product label: A short label for the featured product.Default: Bestseller.
Perks: One per line. Shown along the bottom of the shop panel and the mobile menu. Use [free_shipping_threshold] to show the free shipping threshold from Theme settings > Cart.

Mobile menu

Show social media icons: Shows your social media icons in the mobile menu. Add the links in Theme settings > Social media.

Shop panel

With Show shop panel on, top-level menu items that link to a collection, to all products or to the collections list, and that have no submenu, share one full-width panel on desktop. The panel lists those shop links with a small image, your other menu links and the secondary menu, the featured card, the featured product and your perks. In the mobile menu, the same shop links show as image tiles. Menu items with a submenu keep their dropdown or mega menu. Turn the setting off to show every menu item as a plain link, dropdown or mega menu.

Block: Mega menu image

Adds an image to one mega menu. Up to 12 blocks.

Menu item: Enter a top-level menu item heading exactly as it appears in your menu. Its submenu opens as a mega menu with this image.
Image: The image.
Heading: Text shown with the image.
Link: Where the image leads. Defaults to the menu item link.

Announcement bar

A narrow bar above the header for short messages. It belongs to the header group.

Color scheme: Default: Scheme 3.
Auto-rotate announcements: With more than one announcement, shows them one at a time.
Change announcements every: Shown when auto-rotate is on. 3 to 10 seconds. Default 5 seconds.

Country/region and language

Show country/region selector: Shown on desktop.
Show language selector: Shown on desktop.

Block: Announcement

Up to 6 announcements.

Text: The message. Use [free_shipping_threshold] to show the free shipping threshold from Theme settings > Cart, for example "Free shipping on orders over [free_shipping_threshold]". The announcement is hidden while the threshold is 0.
Link: Makes the announcement a link.

Multiple currencies

The [free_shipping_threshold] placeholder shows the amount you entered in your store's currency. It is not converted for shoppers browsing in another currency, so if you sell in several currencies, write the amount in words that suit all markets or leave the placeholder out. The progress bar in the cart is converted. See Cart.

Part of the footer group, shown on every page. Up to 8 blocks.

Color scheme: Default: Scheme 3.
Show large store name: Shows your store name in large, faint letters along the bottom edge.

Country/region and language

Show country/region selector: Add countries and regions in your Markets settings.
Show language selector: Add languages in your language settings.

Follow on Shop

Show Follow on Shop: Lets customers follow your store on the Shop app. Shop Pay must be enabled.

Utilities

Show payment icons: Icons for the payment methods your store accepts.
Payment icon style: Subtle or Full color. Shown when payment icons are on.Default: Subtle.
Show policy links: Links to your store policies. Add policies in your policy settings.
Copyright note: Short line shown after your store name, for example the company that operates the store.
Contact email: Shown after the copyright line as an email link. Leave empty to hide it.

Section padding

Top padding, Bottom padding: Defaults 100px and 32px.

Footer blocks

Menu: Heading and Menu. Shows top-level menu items only.Default menu: footer.
Text: Heading and Text, for contact details, store information or brand content.
Email signup: Heading, Text and Button label for an email field. Subscribers are added to your customer list with marketing consent. One per footer.
Image: Image, Image width (50px to 300px) and Link. Useful for a badge or a second logo.
Social media icons: Heading. Add your social media links in Theme settings > Social media. One per footer. Without any social media links, the block is not shown.

Time of day hero

Duskline's signature hero. The hero follows each visitor's local time. Set an image, optional video, color scheme and eyebrow for day, dusk and night. A phase without its own image or video uses the day image and video.

How the phases work

The hero reads the clock on the visitor's device and chooses a phase:

Day: from Day starts at until Dusk starts at.
Dusk: from Dusk starts at until Night starts at.
Night: from Night starts at until Day starts at the next morning.

With the defaults, a visitor sees day from 6:00 to 16:59, dusk from 17:00 to 20:59 and night from 21:00 to 5:59. The heading, subheading and button are the same in every phase; the image, mobile image, video, inset image, eyebrow and color scheme change. Only the media for the current phase is downloaded.

Preview phase in the editor: Visitor's local time, Day, Dusk or Night. Only applies in the theme editor. Visitors always see the phase for their local time.
Day starts at: Hours use the 24-hour clock.0h to 23h. Default 6h.
Dusk starts at: Default 17h.
Night starts at: Default 21h.

Day, Dusk, Night (one group each)

Image: The full-width image for the phase.
Mobile image: Optional. Shown on screens under 750px. A phase without its own image also uses the day mobile image.
Video: Plays muted on loop. Its first frame shows until it starts, so the image above is not used while a video is set. See Video in the hero.
Inset image: Optional small framed image shown over the hero. A phase without its own inset uses the day inset.
Eyebrow: Short text above the heading, with a sun, sunset or moon icon.Defaults: Morning light, Golden hour, After dark.
Color scheme: Text and button colors for the phase.Defaults: Scheme 3 (day), Scheme 4 (dusk), Scheme 3 (night).

Text

Heading: The large heading. Line breaks you type are kept.
Subheading: A short paragraph under the heading.
Button label: Leave empty to hide the button.
Button link: Where the button leads. When empty, it leads to all products.
Use heading as the page's main heading: Turn on only when no other section on the page has a main heading.

Layout

Text position: Bottom left, Middle left, Bottom center, Middle center, Middle right or Bottom right.
Height: Small, Medium, Large or Full screen.Default: Large.
Desktop layout: Full width or Triptych. Triptych shows portrait media three times side by side on desktop. A video plays in all three, each a few seconds apart. Mobile always shows one full-width image or video.Default: Full width.
Overlay opacity: Darkens the media so text stays readable.0% to 90%. Default 55%.
Show sound button: Lets visitors turn on the video's sound. Use only for videos with sound. Videos always start muted.Default: off.
Use header overlay: Makes the header transparent over this section when it is the first section on the home page and Use transparent header on home page is on in the header.

Video in the hero

Each phase can have a Video uploaded to your store.

First frame as the poster. While a video is set, the hero shows the video's own first frame until the video starts, so there is no visible jump from a different picture. The phase's Image and Mobile image are not used. The image is only a fallback for the short time after upload while Shopify is still preparing the video's preview.
Phases. A phase with its own video plays it. A phase with neither its own image nor its own video uses the day image and video. A phase with its own image and no video shows that image.
Pause button. A pause and play button appears on the hero whenever a video is playing.
Sound button. With Show sound button on, a second button lets visitors turn the sound on and off. Videos always start muted, because browsers do not allow sound before a visitor asks for it.
When the video does not play. Visitors who prefer reduced motion, use a data saver or are on a very slow connection see the first frame as a still image.

Triptych layout

Set Desktop layout to Triptych to show the phase's media in three portrait panes side by side on desktop screens (990px and wider). Use a portrait image or video. A video is downloaded once and plays in all three panes, each a few seconds apart. On smaller screens the hero shows one full-width image or video.

Tip

Use three photos or clips from the same shoot at different times of day, or the same scene with different light. Keep the subject in a similar place in each one so the text position works for all three.

Slideshow

Full-width image slides with text. Up to 5 slides.

Full width: When off, the slideshow is limited to the page width.
Slide height: Small, Medium, Large or Full screen.
Auto-rotate slides: Slides stop rotating on hover, focus and when visitors prefer reduced motion. A pause button is always shown.
Change slides every: 3 to 9 seconds. Default 6 seconds.

Accessibility

Slideshow description: Describes the slideshow for people using screen readers.

Block: Slide

Image, Mobile image: The slide image, and an optional image for phones.
Eyebrow, Heading, Subheading: Slide text.
Button label, Button link: Leave the label empty to hide the button.
Text position: Bottom left, Bottom center or Middle center.
Overlay opacity: 0% to 90%. Default 50%.
Color scheme: Text and button colors for this slide.

A single full-width image or video with text over it.

Image, Mobile image: The banner image, and an optional image for phones.
Video: Plays muted on loop. The image is used as the poster and on slow connections. See Background videos.
Height: Small, Medium, Large or Full screen.
Text position: Bottom left, Middle left, Bottom center or Middle center.
Overlay opacity: 0% to 90%. Default 40%.
Use header overlay: Makes the header transparent over this section when it is the first section on the home page and the header's transparent setting is on.

Text

Eyebrow, Heading, Body text: Banner text.
Button label, Button link: Leave the label empty to hide the button.
Color scheme: Text and button colors.

Image with text

Pair text with an image to focus on your chosen product, collection or story.

Image: The image.
Image ratio: Adapt to image, Portrait, Square or Landscape.
Image position: Left or Right on desktop.
Full width split: The image runs to the edge of the screen with text on a color panel. Section padding is not used.

Text

Eyebrow, Heading, Body text: The text.
Text alignment: Left or Center.
Button label, Button link: Leave the label empty to hide the button.
Button style: Primary, Secondary or Text link.

Rich text

Text-only content, such as a brand statement.

Alignment: Left or Center.
Width: Narrow or Normal.

Blocks

Eyebrow: Text. One per section.
Heading: Heading and Heading size (Small, Medium or Large). Up to two per section.
Text: Body text.
Button: Button label, Button link and Button style. One per section.

Featured collection

Products from one collection, as a grid or as one row. Cards follow Theme settings > Product cards.

Eyebrow, Heading: Text above the products.
Collection: The collection to show.
Layout: Grid or Product row. Product row shows one horizontal row with arrows on desktop and swipe on mobile.Default: Grid.
Maximum products to show: 2 to 12. Default 4.
Number of columns on desktop: 2 to 4. Default 4.
Show "View all" button: Shown when the collection has more products than are displayed, or when a custom link is set.
"View all" label: Optional. Replaces the default label.
"View all" link: Optional. Defaults to the collection.

Mobile layout

Number of columns on mobile: 1 column or 2 columns.
Enable swipe on mobile: Shows products in a row that shoppers swipe sideways on phones.

Use Product row when you want to show more products than fit in one line without making the section taller: set Maximum products to show higher than Number of columns on desktop, and shoppers move through the row with the arrows. The arrows are hidden when all products fit.

Collection list

Image links to your collections. Up to 12 collections.

Eyebrow, Heading: Text above the list.
Image ratio: Adapt to image, Tall, Portrait, Square or Landscape.Default: Tall.
Card style: Title on the image or Title below the image.
Number of columns on desktop: 2 to 5. Default 4.
Mobile layout: Swipe row, 1 column or 2 columns.Default: Swipe row.
Button label: Shown next to the heading on larger screens. Leave empty to hide.
Button link: Defaults to the list of all collections.

Block: Collection

Collection: The collection.
Image: Optional. Replaces the collection's featured image.
Heading: Optional. Replaces the collection title.
Link: Optional. Replaces the link to the collection, for example a search for a print.

Swatch

Swatch color: Optional. Shows a small dot next to the heading.
Second swatch color: Used by the stripes, checks and spots patterns.
Swatch pattern: Solid, Stripes, Checks or Spots.

Multicolumn

Columns with an icon or image, a heading and text. Up to 8 columns.

Eyebrow, Heading: Text above the columns.
Style: Columns, Cards or Compact strip.
Number of columns on desktop: 1 to 4. Default 3.
Text alignment: Left or Center.
Image ratio: Adapt to image, Portrait, Square or Landscape.

Block: Column

Icon: One of the built-in icons, or None.
Image: Replaces the icon.
Heading, Body text: Column text.
Link label, Link: An optional link under the text.

Collapsible content

Questions and answers, or any content in expandable rows.

Eyebrow, Heading, Body text: Introduction shown beside the rows on desktop.
Image: Optional image under the introduction.
Heading position on desktop: Left or Right: which side the introduction (heading, text and image) appears on.
Open first row: Shows the first row expanded when the page loads.

Block: Collapsible row

Heading: The row title, such as a question.
Row content: The text shown when the row is opened.
Row content from page: Also shows the content of the page you choose, after the row content.

Lookbook mosaic

An editorial grid of images. Add three to five images. The layout adjusts to the number of images.

Eyebrow, Heading: Text above the images.
Link label, Link: A link beside the heading, for example to a collection.

Block: Image

Image: The image.
Caption: Shown with the image. Also used as the link's name for screen readers.
Link: Makes the image a link.

Shop the look

A row of look photos with product hotspots. Selecting a hotspot opens a small card with the product's image, title, color and price, and a link to the product. Up to 12 looks, each with up to 4 products.

Eyebrow, Heading, Text: Text above the looks.
Image ratio: Portrait, Tall or Square.
Show quick add in product cards: Adds a quick add button to the card a hotspot opens.
List products under each look: Also lists each look's products under its photo.
Product card color scheme: Colors of the card a hotspot opens.

Block: Look

Add up to 4 products. Place each hotspot with the horizontal and vertical position, measured from the image's top left corner.

Image: The look photo.

Product 1 to Product 4 (one group each)

Product: The product the hotspot shows.
Horizontal position: 0% (left edge) to 100% (right edge).
Vertical position: 0% (top edge) to 100% (bottom edge).

Editorial band

A wide band with one statement over an image or video, or on its own on a color scheme.

Image: The background image.
Video: Plays muted on loop. The image is used as the poster and on slow connections. See Background videos.
Show placeholder when no image is selected: Turn off to use the section as a text statement on its color scheme.
Height: Small, Medium or Large.
Text position: Bottom left or Middle center.
Overlay opacity: 0% to 90%. Default 70%.

Text

Eyebrow: Small text above the statement.
Heading: The statement.
Button label, Button link: An optional button.

Gift guide

A large image or video beside a heading, text, a button and a short list of gift ideas. Up to 4 Product blocks.

Image: The large image.
Video: Optional. Plays muted on loop over the image. See Background videos.
Media ratio: Portrait, Square or Landscape.
Media position on desktop: Left or Right.

Text

Eyebrow, Heading, Text: The introduction.
Button label, Button link: An optional button.
Gift ideas style: Rows with thumbnails or Product cards.

Order deadline

Order deadline: Optional. Enter a real date as YYYY-MM-DD. The deadline is the end of that day in your store's time zone, and the line hides once the date has passed.
Deadline label: Use [date] to insert the deadline date.Default: Order by [date] for delivery before the holidays.
Show days and hours left: Shows the time left until the deadline you entered. Nothing shows when the date is empty, not a valid date or in the past.

Block: Product

Product: The product to suggest.
Heading: Optional. For example, who the gift is for.
Text: A short line under the heading.
Link: Optional. Rows link here instead of the product, for example to a collection.
Image: Optional. Replaces the product image in rows.

Timeline

Walk customers through a day with your products, one moment at a time. Up to 6 moments.

Eyebrow, Heading, Subheading: Text above the moments.
Style: Photo cards or Photo with text below. Photo cards show the time and heading on the image, in a swipe row on mobile.
Heading alignment: Left or Center.
Image ratio: Portrait, Square or Landscape.
Button label: Leave empty to hide.
Button link: Where the button leads.

Block: Moment

Time label: Any text, for example 6:30 pm or Morning.
Image: The photo for the moment.
Heading, Text: The moment's text.
Link: Optional. Links the card, or the heading when text shows below the photo.
Link label: Optional. Adds a text link under the moment when text shows below the photo.

Video

Eyebrow, Heading: Text above the video.
Shopify-hosted video: A video uploaded to your store. Replaces the external video below.
YouTube or Vimeo link: A video from YouTube or Vimeo. It loads only when the visitor presses play.
Cover image: Shown before the video plays.
Video alt text: Describe the video for customers using screen readers.
Full width: Runs the video to the edges of the screen.

Testimonials

Customer quotes. Up to 9. Only share words your customers actually wrote, with their permission.

Eyebrow, Heading: Text above the quotes.
Enable swipe on mobile: Shows quotes in a row that shoppers swipe sideways on phones.

Block: Testimonial

Eyebrow: Optional short note, such as the product name.
Quote: The customer's words.
Author, Author detail: Who said it, and an optional detail such as their city.
Author image: Optional photo.

Logo list

A row of logos, such as press mentions or partners. Up to 12 logos.

Heading: Default: As featured in.
Logo height: 20px to 80px. Default 36px.

Block: Logo

Image: The logo.
Name: Read by screen readers when the image has no alt text.
Link: Makes the logo a link.

An email field for your newsletter. Subscribers are added to your customer list with the tag newsletter.

Eyebrow, Heading, Body text: Text above the field.
Button label: Default: Subscribe.
Color scheme: Default: Scheme 5.

Blog posts

Contact form

A form with name, email, optional phone number and message fields. Messages go to your store's sender email address. The theme's page.contact template already includes this section; assign it to your contact page in Online Store > Pages.

Heading, Body text: Text above the form.
Show phone number field: Adds an optional phone field.

Product recommendations

Available on product templates. Recommendations update over time based on order and product data. You can also choose related products with the Search and Discovery app.

Heading, Heading size: Default heading: You may also like.
Button label: Leave empty to hide the button.Default: Shop all.
Button link: Links to all products when empty.
Maximum products to show: 2 to 10. Default 4.
Number of columns on desktop: 2 to 5. Default 4.
Enable swipe on mobile: Shows products in a row that shoppers swipe sideways on phones.

Custom Liquid

Add app snippets or other code to create advanced customizations.

Liquid code: Your Liquid, HTML, CSS or JavaScript.
Full width: Removes the page width limit.

Custom code is not covered by support

We can't help write or fix code added in Custom Liquid. If a page breaks after adding code, hide the section to restore it. See the support policy.

Apps

Holds app blocks from apps you have installed.

Make section margins the same as theme: When on, the app content is limited to the page width like other sections.

Product information and Featured product also accept app blocks directly.

Template sections

These sections hold the main content of a template. They can't be removed, but they have settings.

Section	Template	Settings
Product information	Products	See Product pages.
Collection	Collections	See Collections and search.
Search results	Search	See Collections and search.
Cart	Cart	See Cart.
Collections list page	Collections list	Eyebrow; Heading; Sort collections (alphabetically, by date or by product count, applied to the collections shown on each page); Image ratio; Text position (On the image or Below the image); Columns on desktop (2 to 4); Columns on mobile; Show product count.
Blog posts	Blogs	Feature the first post; Image ratio; Show featured image; Show date; Show author; Show tag filter.
Blog post	Blog posts	Show featured image; Featured image height (Adapt to image, Small, Medium); Show author; Show share button.
Page	Pages	Content width: Narrow or Normal.
Page not found	404 page	Section padding.
Password page	Password	Background image; Overlay opacity; Show email signup; Email signup text; Color scheme.

The cart drawer is also a section with its own settings. See Cart drawer section.

Sections

Settings most sections share

Background videos

Header

Shop panel

Block: Mega menu image

Announcement bar

Block: Announcement

Footer

Footer blocks

Time of day hero

How the phases work

Video in the hero

Triptych layout

Slideshow

Block: Slide

Image banner

Image with text

Rich text

Blocks

Featured collection

Collection list

Block: Collection

Multicolumn

Block: Column

Collapsible content

Block: Collapsible row

Lookbook mosaic

Block: Image

Shop the look

Block: Look

Editorial band

Gift guide

Block: Product

Timeline

Block: Moment

Video

Testimonials

Block: Testimonial

Logo list

Block: Logo

Email signup

Blog posts

Contact form

Featured product

Product recommendations

Custom Liquid

Apps

Template sections