Duskline Theme docs

Customize

Theme settings

Global settings apply to the whole store. Open them in the theme editor with the Theme settings icon.

The defaults listed on this page are those of the Duskline preset. The Gilt and Rally presets start with other values for some settings. See Presets.

Logo
Your logo image, shown in the header. Without a logo, the header shows your store name.
Logo width
Width of the logo in the header.50px to 300px. Default 120px. On phones, the logo is at most 140px wide.
Inverse logo
Shown when the header is transparent over a hero image. Use a light version of your logo. See transparent header.
Favicon
The icon in the browser tab. Displayed at 32 x 32px.

Colors

Colors are organized in color schemes. Every section chooses one scheme in its Color scheme setting. Select a scheme to edit its colors, or add a new scheme. Each preset includes six schemes. Those of the Duskline preset are described in Getting started.

Background
The section background.
Background gradient
Gradient replaces solid background color.
Text
Body text, links and icons.
Headings
Heading text.
Secondary text
Smaller supporting text, such as captions, vendor names and notes.
Borders
Lines, dividers and outlines.
Accent
Eyebrow text above headings, link hover color, sale prices, form error messages and the free shipping progress bar.

Buttons

Primary button background
Fill color of primary buttons, such as Add to cart and Check out.
Primary button label
Text color on primary buttons.
Secondary button label and border
Secondary buttons have a transparent fill; this color is used for their text and outline.

Inputs

Input background
Background of text fields, dropdowns and other form fields.
Input text
Text inside form fields.

Typography

Headings

Font
The heading font, from Shopify's font library.Default: Marcellus.
Font size scale
Scales every heading size up or down.80% to 140%. Default 100%.
Letter case
Default keeps your text as typed. Uppercase shows headings in capital letters.
Letter spacing
The space between the letters of headings. In hundredths of the font size. Negative values tighten headings, positive values open them up.-4 to 12. Default -1.

Body text

Font
The font for body text, buttons, menus and forms.Default: Mulish.
Font size scale
Scales body text up or down.80% to 130%. Default 100%.

Layout

Page width
The maximum width of page content on large screens.1000px to 1600px, in steps of 100px. Default 1300px.
Space between template sections
Adds space between sections in a template. At 0, sections sit directly against each other and only their own padding separates them.0px to 100px. Default 0px.

Buttons and inputs

Button corner radius
Rounds the corners of buttons. The highest value gives fully rounded pill buttons.0px to 40px. Default 40px (pill).
Input corner radius
Rounds the corners of text fields and dropdowns.0px to 24px. Default 24px.
Image corner radius
Rounds the corners of images and media.0px to 24px. Default 16px. Use 0px for square corners.

Product cards

Product cards appear in collections, search results, the Featured collection section and Product recommendations. How product cards work.

Image ratio
Shape of card images: Adapt to image, Portrait (4:5), Square or Tall (2:3).Default: Portrait (4:5).
Show second image on hover
On desktop, hovering a card shows the product's second image. On touch screens, shoppers can swipe through up to five product images. When this is off, cards show one image.
Show color swatches
Shows swatches under the price for the option named in Swatch option names. Selecting a swatch changes the card's image and link.
Swatch option names
Separate option names with a comma. Swatches show for the first matching option. Matching ignores upper and lower case.Default: Color, Colour, Print, Pattern.
Enable quick add
Adds a quick add button to cards. Products with one variant are added in one tap; products with options open a small dialog to choose them.
Show vendor
Shows the product vendor above the title.
Text alignment
Left or Center.

Badges

Position on cards
Top left, Top right or Bottom left of the card image.
Sale badge color scheme
Color scheme for sale badges.Default: Scheme 4.
Sold out badge color scheme
Color scheme for sold out badges.Default: Scheme 3.
Sale badge text
Sale shows the word "Sale". Percentage off shows the discount, calculated from the compare-at price.

Swatches

Swatch colors and images come from your product option values. You can set a color or image for each option value in your Shopify admin. Learn more about swatches.

Shape
Circle or Square.
Size
Small or Medium. Applies to swatches on product cards. Product pages always use medium swatches.

When an option value has no swatch color or image set in Shopify, Duskline guesses a color from common color words in the value's name, such as "sage", "navy" or "terracotta". If no color word matches, the swatch is neutral: an outlined shape with a diagonal line. Why are some swatches empty?

Cart

Cart type
Drawer opens the cart in a panel from the side of the screen. Page takes shoppers to the cart page.Default: Drawer.
Enable order notes
Lets customers add a note to their order in the cart.

Free shipping progress

Free shipping threshold
Amount in your store's currency. Use 0 to hide the progress bar. Make sure it matches your shipping rates.Default: 0 (hidden).
Show confetti when free shipping is reached
Plays a short confetti burst once when the cart reaches the threshold. Not played for visitors who prefer reduced motion.Default: on.

Complementary products

Show complementary products
Shows product suggestions in the cart drawer and on the cart page. Uses complementary products from the Search and Discovery app, or related products when none are set.
Heading
Heading above the suggestions.Default: Pair it with.

Details are on the Cart page.

Delivery estimate

Used by the Delivery estimate block on product pages and by the delivery estimate in the cart. Order cutoff times use your store's time zone. How the estimate is calculated.

Minimum business days
The earliest delivery, in business days after the order ships.Default: 3.
Maximum business days
The latest delivery, in business days after the order ships. If it is lower than the minimum, the minimum is used.Default: 7.
Order cutoff hour
Orders placed after this hour ship the next business day. Uses the 24-hour clock in your store's time zone.0h to 23h. Default 14h (2 PM).
Skip weekends
When on, Saturdays and Sundays are not counted as business days.
Holidays
Days you do not ship or deliver. One date per line, YYYY-MM-DD, for example 2026-12-25.
Enable search suggestions
Shows products, collections, pages, blog posts and suggested searches in the search dialog as shoppers type.
Show product vendor
Shows the vendor on products in search suggestions.
Show product price
Shows the price on products in search suggestions.

Social media

Under Social media accounts, enter the full address of each profile, for example https://instagram.com/yourstore. Icons appear in the footer's Social media icons block and in the mobile menu, when Show social media icons is on in the header. Leave a field empty to hide that icon.

Available accounts: Facebook, Instagram, TikTok, Pinterest, X, YouTube, Snapchat, Tumblr, Vimeo, Threads and LinkedIn. Your X address is also used for link previews when your pages are shared on X.

Animations

Reveal sections on scroll
Sections fade in gently as they scroll into view. Visitors who have asked their device to reduce motion do not see the animation.
Hover effect
Affects cards and buttons. None leaves them still. Lift raises buttons slightly and gently enlarges card images when shoppers hover them.Default: None.

Currency format

Cart and checkout prices always show currency codes. Example: $1.00 USD.

Show currency codes
Also shows the currency code with prices across the rest of the store, such as on product pages and collections.