Shopify theme documentation
Duskline
An editorial Online Store 2.0 theme with a hero that follows the time of day and product pages built for apparel. It comes with three presets: Duskline, Gilt and Rally. This guide explains every setting in the theme editor, in the same words the editor uses.
Quick links
Getting started
Install the theme, set up menus, color schemes, fonts and your logo.
Presets
Duskline, Gilt and Rally: what each is for and how to switch.
Theme settings
Every global setting, group by group.
Sections
All sections and blocks you can add from the theme editor.
Product pages
Variant picker, swatches, size guide, material details, delivery estimate and more.
Collections and search
Filtering, sorting, product cards, quick add and search suggestions.
Cart
Drawer or page, free shipping progress, complementary products and notes.
FAQ
Answers to the questions merchants ask most.
Support
Our support policy and the contact form.
Signature features
Time of day hero
The Time of day hero section changes with each visitor's local time. You choose an image or a video, an optional mobile image, an optional small inset image, an eyebrow and a color scheme for each of three phases: day, dusk and night. You also choose the hour each phase starts. The phase is picked before the page is drawn, so there is no visible jump when it loads. On desktop, a triptych layout can show the media in three panes side by side. Set up the hero.
Swatch product cards
Product cards can show color swatches. Selecting a swatch changes the card's photo to that color and points the card's link to that variant, without leaving the page. On desktop, hovering a swatch previews it. On touch screens, shoppers can swipe through a card's photos. Product cards and swatches.
In-place variant switching
On the product page, choosing an option updates the price, photos and buttons without reloading the page. When an option value belongs to another product, as with combined listings, the product page is swapped in place and the address bar is updated. Variant picker and swatches.
Size guide dialog
A Size guide block opens a split dialog with your size chart on one side and a full-height "how to measure" image on the other. The chart can come from a page, from a rich text setting, or from a product metafield through a dynamic source. When the shopper has already picked a size, the matching row of the chart is highlighted. A chart with inch and centimeter columns gets a unit switch, a size finder suggests a size from the shopper's measurements, and numbered measuring points can be placed on the image. Set up the size guide.
Cart with free shipping progress
Use a cart drawer or a cart page. A progress bar or ring shows how far the cart is from free shipping, based on one amount you set in theme settings. The cart can suggest complementary products and show a delivery estimate. Cart settings.
Delivery estimate
A Delivery estimate block shows a real date range calculated from your business days, order cutoff hour, weekends and holidays. It shows no countdowns and no invented urgency. Set up the delivery estimate.
Transparent header
On the home page, the header can sit transparently over a full-width hero or image banner, and switch to a light version of your logo. Header settings.
About this documentation
Setting names on this site match the labels in the theme editor. Paths are written like Theme settings > Cart, which means: in the theme editor, select the Theme settings icon, then open Cart.
If something here does not match what you see in your theme editor, check that you are on the latest version on the changelog, then contact support.