Work through these steps once, in order. Each takes a few minutes.
1. Install and preview
- Online Store > Themes > Add theme. Keep your current theme live while you set Dais up.
- Click Customize on Dais. The editor opens on the home page; switch pages with the page picker at the top.
2. Brand
Theme settings > Logo and favicon. Upload a logo, or leave it empty to use your store name as a text logo (with an optional accent dot). Set the logo width for desktop and mobile.
Theme settings > Colors. Dais has six color schemes. Each scheme sets background, surface (cards and panels), media background, text, secondary text, border, accent, buttons and inputs. Every section has a Color scheme setting, so changing a scheme changes every section that uses it.
- Scheme 1 is the page background. Scheme 4 is the dark band used by testimonials and the footer. Scheme 5 is the accent field used by the mosaic feature card.
- Accent buttons automatically use a slightly deeper or lighter accent when needed so their label stays readable.
Theme settings > Typography. Pick a heading font and a body font from Shopify’s font library. Headings can be uppercase or as typed, with their own letter spacing, line height and size. Turn on Use display optical size for variable fonts with an optical size axis (the default Bricolage Grotesque has one).
Theme settings > Layout / Buttons / Product cards / Badges. Page width and margins, section spacing, corner radii, button shape and height, and how product cards look (image shape, fit, background, hover, frame, price position, swatches, quick add).
3. Menus
Online Store > Navigation.
- Main menu: top-level links. A link with nested links opens a mega menu; nested links that have their own links become columns. Add a Menu feature card block in the header to show an image card in a mega menu (match it to the top-level link by name).
- Footer: add one or more Menu blocks in the footer and pick a menu for each.
- Collection tabs: on a collection page, Product grid > Tabs menu shows a menu as tabs above the grid. A short menu of your main collections works best.
4. Products and collections
Dais works with plain Shopify product data. These extras make it shine:
| What | Where | Used by |
|---|---|---|
| Option names | Products > Options | Options listed in Theme settings > Product cards > Options shown as swatches (default Color, Colour, Pattern, Finish) show as swatches. The first other option becomes the quick-add choice. |
| Swatch colors | Shopify swatches on option values (recommended), or the custom.swatch_colors metafield (list of colors, one per option value, in order; two per value for two-tone swatches) |
Cards, product page, hero |
| Variant images | Assign an image to each color variant | The gallery groups images per color; the hero and cards switch image with the swatch |
| Short title | custom.short_title (single line text) |
The big word in the product stage hero |
| Card text | custom.card_text (single line text) |
One line under the product name on cards, notes |
| Features | custom.features (list of single line text) |
Feature chips on the product page |
| Specs | custom.specs (list of single line text, each “value · label”, for example 240 g · a shoe, US 9) |
Product spotlight and the product details panel (first three) |
| Materials, Care, Fit, Made in | custom.materials (list), custom.care, custom.fit, custom.made_in |
Collapsible rows and detail rows (any metafield works; type its namespace.key) |
| Rating | A reviews app’s reviews.rating / reviews.rating_count, or custom.rating_value (decimal) + custom.rating_count (integer) |
Stars on cards and the product page |
| Reviews fallback | custom.review_text (multi-line text) |
Product reviews section when no reviews app is installed |
| Collection title suffix | custom.title_suffix on collections (single line text) |
The grey words after a collection title, for example “Running shoes“ |
Create metafield definitions in Settings > Custom data. Turn on Storefront access for each one.
Tags: a product tagged badge:New (or any badge: text) shows that badge on cards when Badges > Custom badge tag uses the badge: prefix.
5. Pages
Create pages in Online Store > Pages and choose a template:
- page.contact: page heading + contact form with contact details.
- page.help: page heading with a contact card, jump links, FAQ sections (each with a Link name like shipping so /pages/help#shipping works) and a contact form.
- page.size-guide: a size finder, how-to-measure panel, size chart table and products with fit notes.
- page.about: a photo band, facts, numbered steps and two story panels.
- page: a page heading and the page’s own content.
6. Apps
- Reviews: install any reviews app. Add its app block to the Product reviews section (product template) and, if it offers one, to the product information section for the star rating. Dais reads
reviews.ratingfor card stars automatically. - Wishlist: install a wishlist app and add its app block to the header and product information section.
- Search and Discovery (free, by Shopify): adds filters for color, size, product type and more on collection and search pages, and better product recommendations. Without it, collections filter by availability and price. Tip: if your color option values are combinations (“Black / Chalk”), add a simple list metafield such as
custom.color_family(Black, Blue…) and use it as the Color filter’s source; Dais paints filter values that are color names as dots. - Anything else: use the Apps section or the @app slot in Custom section.
7. Customer accounts
Shopify offers two account systems (Settings > Customer accounts):
- Customer accounts (the new default): sign-in, orders and profile are hosted by Shopify and styled from Settings > Checkout and accounts. The header account icon links there. Nothing to set up in the theme.
- Legacy customer accounts: the theme’s own sign-in, create account, account, order, addresses, reset and activate pages are used. Their images, headings and perks are editable in the editor (choose the Customer templates in the page picker).
8. Before you publish
- Theme settings > Social media: add your profiles (used by the footer and structured data).
- Preferences: page title and meta description, social sharing image.
- Check the password page (Online Store > Preferences > Password protection) if you launch later.
- Open the store on a phone and walk through: home, a collection, a product, add to cart, checkout.