Getting started
Getting started
From installing Duskline to a store that looks like yours: menus, colors, fonts and logo.
Install the theme
- Open Duskline's page in the Shopify Theme Store and select the preset you want to start from: Duskline, Gilt or Rally. Select Try theme to preview it in your store for free, or buy it to add it to your theme library.
- In your Shopify admin, go to Online Store > Themes. Duskline appears in your theme library, unpublished.
- Select Customize on Duskline to set it up. Your live store does not change while you work.
- When you are ready, select Publish from the theme's menu in the theme library.
Before large changes, use Duplicate from the theme's menu in Online Store > Themes. A copy keeps all your settings and lets you go back at any time.
Choose a preset
Duskline ships with three presets. A preset is a starting point: a set of colors, fonts, shapes and page layouts. Every setting and section is available whichever preset you start from.
- Duskline: warm neutrals, Marcellus headings and Mulish body text, pill-shaped buttons and softly rounded images. Made for sleepwear, loungewear and apparel.
- Gilt: square corners, Cormorant headings, deep green and burgundy with gold accents. Made for jewelry and gifts.
- Rally: uppercase condensed headings, navy and blue with lime accents. Made for sports gear and equipment.
Compare the presets and learn how to switch. The rest of this page describes the Duskline preset.
The home page of the Duskline preset contains these sections, in order. You can reorder, hide or remove any of them.
- Time of day hero
- Featured collection
- Editorial band
- Lookbook mosaic
- Multicolumn
- Image with text
- Testimonials
- Collapsible content
The header group holds the Announcement bar and the Header. The footer group holds the Footer, with two Menu blocks, a Text block and an Email signup block.
Open the theme editor
In Online Store > Themes, select Customize. Use the page selector at the top of the editor to switch between templates such as Home page, Products, Collections and Cart. Global settings are under the Theme settings icon. See Theme settings for each group.
Set up menus
Menus are created in your Shopify admin under Content > Menus. Duskline uses them like this:
| Where | Setting | Default menu |
|---|---|---|
| Header, main navigation | Header > Menu | main-menu |
| Shop panel and mobile menu, for help or company links | Header > Secondary menu | None |
| Customer account links | Header > Customer account menu | customer-account-main-menu |
| Footer columns | Footer > Menu block, Menu setting | footer |
Main menu and mega menus
The header menu supports up to three levels. On desktop, a top-level item with one level of links below it opens a dropdown, and a top-level item with two levels of links below it opens a full-width mega menu. To show an image in a mega menu, add a Mega menu image block to the header and type the top-level menu item's heading in Menu item, exactly as it appears in your menu. A top-level item with a matching Mega menu image block always opens as a mega menu, even with only one level of links. See Header.
With Show shop panel on in the header, top-level items that link straight to a collection, to all products or to the collections list, and have no submenu, open one shared panel with images on desktop and show as image tiles in the mobile menu. See Shop panel.
Footer menus
Each Menu block in the footer shows one menu as a column. It shows top-level menu items only, so build footer menus as flat lists. The block's Heading is the column title.
Color schemes
Every section has a Color scheme setting. You edit the schemes themselves in Theme settings > Colors. Changing a scheme updates every section that uses it.
The Duskline preset includes six schemes. The Gilt and Rally presets have six schemes with their own colors.
| Scheme | Background | Text | Used by default for |
|---|---|---|---|
| Scheme 1 | White #FFFFFF | Warm brown #4A3F38, espresso #332822 headings | Most sections, product pages, header |
| Scheme 2 | Warm white #F6F3EF | Warm brown, espresso headings | Image with text, testimonials, collapsible content, gift guide, timeline, cart page summary |
| Scheme 3 | Espresso #332822 | White #FFFFFF | Announcement bar, footer, hero day and night phases, editorial band, image banner, slides, sold out badge |
| Scheme 4 | Clay #9A4F2E | White | Hero dusk phase, sale badge |
| Scheme 5 | Sand #F3ECE4 | Warm brown, espresso headings | Email signup |
| Scheme 6 | Near black #1B1816 | Light gray #BBBAB9, white headings | Not used by default. Try it for a darker footer or hero phase. |
Each scheme has these colors: Background, Background gradient, Text, Headings, Secondary text, Borders, Accent, Primary button background, Primary button label, Secondary button label and border, Input background and Input text. What each color does.
When you change a scheme, check that text and buttons stand out clearly from the background. A contrast ratio of at least 4.5:1 for body text helps every visitor read your store.
Fonts
Go to Theme settings > Typography.
- Headings > Font: the font for headings. The preset uses Marcellus.
- Headings > Font size scale: makes all headings larger or smaller, from 80% to 140%.
- Headings > Letter case: Default or Uppercase.
- Headings > Letter spacing: tightens or opens the space between heading letters.
- Body text > Font: the font for body text, buttons and forms. The preset uses Mulish.
- Body text > Font size scale: from 80% to 130%.
Fonts come from Shopify's font library and are served by Shopify, so they load quickly and need no extra setup.
Logo and favicon
Go to Theme settings > Logo.
- Logo: your logo image. Without one, the header shows your store name.
- Logo width: from 50px to 300px. On phones, the logo is shown a little smaller, and at most 140px wide.
- Inverse logo: a light version of your logo, shown when the header is transparent over a hero image on the home page.
- Favicon: the small icon in the browser tab, displayed at 32 x 32px. Use a square image.
Languages
Duskline's storefront text, such as "Add to cart" and the cart messages, comes translated into English, French, German, Spanish, Italian, Brazilian Portuguese, Dutch, Japanese and Danish. Shoppers see a translation when that language is published in your store under Settings > Languages. See How do I translate the theme or change its text?
Next steps
- Set up the Time of day hero with an image for each phase.
- Set up your product page: size guide, delivery estimate and swatches.
- Set your free shipping threshold.
- Set up filters with the Search and Discovery app.