Duskline Theme docs

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.

  • Version 1.0.0
  • 3 presets
  • Online Store 2.0

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.