Theme settings

Open the paintbrush icon in the theme editor. Colors have their own article.

Typography

• Primary: the font for everything. Bold and italic load automatically.
• Display font: a second font for large headings. Sections such as Editorial and Journal use it when Heading font is set to Display font.
• Base text size (14–18px) and Heading size (80–120%) scale the whole type system together.
• Heading weight: Regular, Medium or Semibold. Regular headings rely on size and spacing for hierarchy.

Layout

• Favicon: the small icon in the browser tab, 32 x 32px.
• Page width: Narrow, Medium or Wide, the widest the content column grows on large screens.
• Page margin (16–80px): the space between content and the edge of the screen on large screens.
• Space between sections: Compact, Normal or Roomy changes the space around every section at once. Each section also has Space above and Space below (None, Small, Default, Large) for fine-tuning one section, and Space on phones (Same as larger screens, Less or None) to tighten it on phones only.

Product cards

How products look in every grid and row: collections, search, featured collections, related products and more.

• Image shape: Portrait (4:5), Square (1:1), Tall portrait (3:4), or Match each product's photo.
• Show second image on hover: the product's second photo appears when a visitor points at the card.
• Text alignment, Show brand, Show rating, Show quick add button (with Products with options: open a panel to choose, or add the first option straight away) and Show in-stock note.
• Show specs and pack size: up to two short facts as small pills, and the pack size beside the price (such as $12.00 · 300 g), from the product's Specs and Pack size metafields. See Show different details on each product.
• Show color swatches: for a color option with swatches set in Shopify, dots under the price instead of "3 color options". Pointing at a dot shows that color's photo, when the variant has one. To add swatches, open the product, pick its category, and connect the color option to the category's Color field (Shopify's guide: Adding swatches to product options).
• Show subtitle: a short line under each product's name, from Shopify's Product subtitle field. See Product details with no setup.
• Sale badge: the word Sale, the percentage off (−20%), or the amount saved (Save $5).
• Show sold-out badge, and Show your own badges: badges you add to products yourself, from a Badges metafield or tags that start with badge:, such as badge:Bestseller.

Corners and buttons

• Corner radius (0–24px) rounds cards, images and inputs; large panels and the hero use twice the value.
• Button shape: Pill, Rounded or Square.
• Hover effect: how buttons change when pointed at. Shade darkens a filled button and firms an outline; Swap colors turns a button into its opposite colors; No color change keeps them as they are. The colors always come from the section's color scheme, and phones (with no pointer) never show a hover.

Search

• Search box text: what the search box says before someone types. Keep it to three or four words so it fits, such as "Search the pantry". Leave it empty for "Search the shop".
• Popular searches: words separated by commas, offered when the search field is empty.
• Quick links menu: a menu shown beside the popular searches, usually your main collections. The menu's name is the heading, and collections show their picture.
• Recommended products: up to four products shown when someone opens search. Computers show the first three; phones swipe through all four.

Navigation, cart and product photos

• Show back to top button: a small button that appears once a visitor has scrolled a long way down.
• Cart: a note field in the cart drawer, gift wrapping customers can add, and an optional gift message. Note character limit caps how long the note can be (0 means no limit). See Cart drawer, gift wrap and discounts.
• Product photos: Fill the panel shows photos as shot, edge to edge, and suits a catalog where every photo shares one ratio and background. Inset on the panel sets photos shot on white into the card color.

Store details

Social sharing image: the picture a link shows when someone shares a page that has no picture of its own, such as your home page, on social media or in a message. 1200 × 628 px works best: your logo on one of your photos. An image set in Online Store → Preferences comes first, and product, collection and article pages always share their own picture.

Return window and Return shipping tell search engines and AI shopping assistants about your returns, so they can show them next to your products. Leave Return window on Don't share if you'd rather not; keep it the same as your refund policy in Settings → Policies.

Motion

Use animations turns the theme's fades, slides and reveals on or off. They are always off for visitors who ask their device for reduced motion.

With animations on, the theme also: rises the hero's words in on load; reveals section headings, product cards and large pictures once, as they first scroll into view (anything already on screen shows at once); flies the product's picture into the cart icon when it's added; counts the figures in the Numbers section up once; and glides accordions open and shut. All of it stops for visitors who ask their device for reduced motion.

Scroll reveals move each card as a whole. A tile, panel, step, person or photo rises a little and settles into place. Nothing is cropped on the way, so rounded corners and words over a picture stay in view the whole time.

Two effects have their own switch in their section: Count up in the Numbers section, and Heading effect (Typewriter) in Collection tiles, Image steps and Team. Both also stay still when Use animations is off, or when a visitor asks their device for reduced motion. The full number or heading then simply shows.

Page transitions: going from one page to the next, the page fades across instead of flashing white, the header stays still, and a product's picture moves from the card that was tapped onto the product page. It works in browsers that support it (Chrome, Edge and Safari today); others change page as before. It is off in the theme editor and for visitors who ask for reduced motion.