# Wonder Theme — Complete Documentation
> This file contains the complete documentation for the Wonder Theme, a premium Shopify theme by Nethype. It covers installation, theme settings, all sections, product page blocks, developer APIs, and troubleshooting. Current version: v2.2.1.
> Source: https://support.wonder-theme.com
> Last generated: 2026-08-19
============================================================
# Getting Started
============================================================
---
## Accessibility
# Accessibility
## Our Commitment
Accessibility is what enables customers with disabilities - whether visual, motor, cognitive, or auditory - to browse and purchase from your store with ease. The Wonder Theme is built with accessibility best practices at its core, ensuring your store is usable by the widest possible audience.
## Built-in Accessibility Features
The Wonder Theme includes numerous accessibility features out of the box:
- **Semantic HTML** - proper heading hierarchy (H1–H6), landmark regions, and meaningful element structure for screen readers
- **Keyboard Navigation** - all interactive elements (links, buttons, forms, menus) are fully navigable via keyboard
- **ARIA Labels** - descriptive labels on interactive elements to provide context for assistive technologies
- **Focus Management** - visible focus indicators on all interactive elements, with proper focus trapping in modals and drawers
- **Skip Navigation** - a "Skip to content" link for keyboard users to bypass repetitive navigation
- **Color Contrast** - default color schemes designed to meet WCAG AA contrast requirements
- **Responsive Text** - scalable typography that respects browser zoom and text size preferences
- **Alt Text Support** - all image fields support alternative text for screen readers
## ADA & WCAG Compliance
The [Americans with Disabilities Act (ADA)](https://www.ada.gov/) and [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) set the standards for web accessibility.
While we continuously work to improve accessibility and follow WCAG 2.1 best practices, **full compliance depends on how you configure and use the theme**. The theme provides the foundation - but merchants are responsible for ensuring their content, images, and third-party apps meet accessibility standards.
## Best Practices for Merchants
To maintain and improve accessibility on your store:
### Use Descriptive Link Text
Avoid generic text like "Click here" or "Learn more." Instead, use descriptive labels that explain where the link leads:
- **Good**: "View our summer dress collection"
- **Avoid**: "Click here"
### Add Alt Text to All Images
Every image in your store should have meaningful alternative text that describes the image content. This is critical for screen readers and also improves SEO.
### Maintain Color Contrast
Ensure sufficient contrast between text and background colors. Use a [contrast checker tool](https://webaim.org/resources/contrastchecker/) to verify your color combinations meet at least **WCAG AA level** (4.5:1 for normal text, 3:1 for large text).
### Be Cautious with Third-Party Apps
Apps may introduce elements that are not accessible. Before installing an app, consider:
- Does the app support keyboard navigation?
- Does it provide proper ARIA labels?
- Does it maintain focus management?
Contact the app developer about their accessibility practices if you are unsure.
### Minimize Video as Primary Content
Use images with alt text and written descriptions as the primary way to convey information. Videos should supplement content, not replace it. When using video, provide captions or transcripts where possible.
### Test Your Store
Regularly test your store's accessibility:
- Navigate your entire store using only the keyboard (Tab, Enter, Escape)
- Use a screen reader (VoiceOver on Mac, NVDA on Windows) to browse your store
- Run an automated audit with [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/) or [WAVE](https://wave.webaim.org/)
## Reporting Issues
If you encounter an accessibility issue with the Wonder Theme, please contact our support team. We take accessibility feedback seriously and are committed to continuous improvement.
---
## About Theme
import DocCardList from '@theme/DocCardList';
# About Theme
Licensing, support, accessibility, and refund information for the Wonder Theme.
---
## Refund Policy
# Refund Policy
## Free Trial
A **free trial period** is available directly in your Shopify admin before purchasing. The trial provides complete access to all theme features, sections, and settings - allowing you to fully evaluate the theme with your actual products and content.
## Purchases & Refunds
All theme purchases are processed through the **Shopify Theme Store** and are subject to Shopify's purchasing terms. Since themes are digital products, Shopify enforces a **no-refund policy** on all paid theme purchases. This policy is displayed at checkout.
For any billing-related questions - including purchases, charges, or refunds - please contact [Shopify Support](https://help.shopify.com/) directly. All payment and billing matters are handled exclusively by Shopify.
---
## Support Policy
# Support Policy
## Business Hours
Our support team operates **Monday through Friday, 9:00 AM to 6:00 PM CET**. We aim to respond within 24 hours, though faster responses are common. Requests are handled in the order received.
## Eligibility for Support
Free support applies to merchants who purchased themes through the **Shopify Theme Store** or directly from Wonder Theme. Theme updates are complimentary. Support is unavailable for themes obtained from other sources; proof of purchase may be required. We reserve the right to deny support for abusive conduct.
### What We Can Help With
- Bug fixes in unmodified installations
- Feature and settings questions
- Built-in feature setup assistance
- Complimentary theme updates
### What's Outside Our Scope
- Design or code customization
- Modified theme troubleshooting
- Shopify admin interface issues
- Third-party app conflicts
- Code transfers between theme versions
- App installation or uninstallation
- Unlimited support requests
## Customizations
Paid customization services are available for design adjustments, feature integrations, and custom functionality. [Contact us](https://services.nethype.co) for pricing details.
## Theme Updates
Updates deliver new features, design improvements, and performance optimizations. Updates are optional but recommended. We cannot guarantee that updated themes will match previous versions if design changes have occurred.
## Limitation of Liability
Wonder Theme disclaims responsibility for direct, indirect, incidental, or consequential damages from theme or support service use. Support is provided without guarantees or warranties.
---
## Theme Licensing & Transfers
# Theme Licensing & Transfers
## License Overview
Every Wonder Theme purchase grants a **single-store license**. This means each Shopify store running the Wonder Theme requires its own separate license, purchased through the [Shopify Theme Store](https://themes.shopify.com/themes/wonder/styles/developer-preview).
This is in accordance with [Shopify's Terms of Service (Section 9.4)](https://www.shopify.com/legal/terms), which requires merchants to hold a valid license for any theme in use.
## One License, One Store
- Each license covers **one live Shopify store**
- Running the Wonder Theme on multiple stores requires a separate purchase for each store
- Licenses are tied to the store where the purchase was made
## Multiple Markets on One Store
If you operate **multiple markets** from a single Shopify store (for example, a US market and a European market), you only need **one license**. Multiple markets within the same Shopify store are covered by a single purchase.
However, if you run separate Shopify stores for different markets, each store needs its own license.
## Development & Staging Stores
You may install the Wonder Theme on a **Shopify development store** (password-protected, not processing real payments) without purchasing a separate license, provided that:
- The theme has been purchased on the **production store** it is intended for
- When contacting support about a development store, provide the production store URL so we can verify your license
This allows agencies and freelancers to build and test client stores before going live.
## Unlicensed Usage
Themes obtained from sources other than the Shopify Theme Store are **not legitimate** and are not eligible for support or updates. If you are using an unlicensed copy, we strongly recommend purchasing a valid license or uninstalling the theme.
We reserve the right to report unlicensed usage to Shopify in accordance with their intellectual property policies.
## License Transfers
License transfers between stores are managed by **Shopify directly**. If you need to move your theme license to a different store, please contact [Shopify Support](https://help.shopify.com/) for assistance with the transfer process.
:::note
License transfers typically require closing the original store. Contact Shopify Support for the most current transfer policy.
:::
## Verifying Your License
If you need to verify your theme license status, you can:
1. Check your Shopify admin under **Online Store > Themes**
2. Contact [Shopify Support](https://help.shopify.com/) for license confirmation
3. Reach out to our support team with your store URL
---
## Customizing Your Theme by Editing Theme Files
## Customizing Your Theme by Editing Theme Files
While the Wonder Theme offers a wide range of built-in settings through the Theme Editor, there are cases where you may need more advanced customization. If you're comfortable with HTML, CSS, and Liquid, you can modify your theme by editing the code directly.
### **Types of Theme Files:**
Themes are organized into different file categories, each serving a specific purpose:
* **Layout:** These files control the overall layout of your theme, defining the structure and placement of elements.
* **Templates:** These files govern the layouts for specific sections of your theme, such as product pages or blog pages.
* **Snippets:** Snippets are reusable chunks of code that can be included in various parts of your theme to maintain consistency.
* **Assets:** These files encompass various media resources, including images, fonts, scripts, and stylesheets, which are used to enhance your theme's appearance and functionality.
* **Config:** Configuration files store settings and data specific to your theme's behavior and appearance.
* **Locales:** Locale files contain language-specific text pieces used throughout your theme, allowing for localization and translation.
* **Sections:** Section files govern the layouts of individual sections within your theme, offering granular control over content placement.
### **Accessing the Edit HTML/CSS Page**
The "Edit HTML/CSS" page provides you with the capability to edit the code files that constitute your theme. Here's how to access it:
1. **Access Your Shopify Admin:** Log in to your Shopify admin panel.
2. **Navigate to Themes:** From the Shopify admin, go to "Online Store," and then click on "Themes."
3. **Open the Edit Code Section:** In the left sidebar, click the dropdown menu, and select "Edit code."
4. **Exploring the Edit Code Page:** The "Edit code" page offers a directory of theme files and an online code editor.
When you click on a file in the list, it opens in the code editor. You have the ability to open and edit multiple files simultaneously.
By accessing the "Edit code" page and exploring these various file categories, you can tailor your Shopify theme to meet your unique requirements and design preferences.
Remember that while editing your theme code offers extensive customization possibilities, it's crucial to exercise caution and back up your theme before making significant changes to avoid unintended issues.
---
## Basics
import DocCardList from '@theme/DocCardList';
# Basics
Get started with installing, configuring, and customizing the Wonder Theme.
---
## Installing the Wonder Theme & Choosing a Preset
## Installing the Wonder Theme & Choosing a Preset
The Wonder Theme comes with **5 preconfigured presets** — each offering a unique look and layout tailored to different store types. All presets share the same features and functionality — the only difference is the visual configuration, section arrangement, and default styling.
Choose the preset that best matches your brand, and customize it from there.
## Available Presets
### Wonder
Best for beauty, cosmetics, and skincare stores.
[View demo](https://wonder-theme-beauty.myshopify.com/) | [Install preset](https://themes.shopify.com/themes/wonder/presets/wonder)
---
### Root
Best for wellness, health, and organic product stores.
[View demo](https://wonder-theme-wellness.myshopify.com/) | [Install preset](https://themes.shopify.com/themes/wonder/presets/root)
---
### Velour
Best for fashion, apparel, and lifestyle stores.
[View demo](https://wonder-theme-fashion.myshopify.com/) | [Install preset](https://themes.shopify.com/themes/wonder/presets/velour)
---
### Nook
Best for interior, furniture, and home decor stores.
[View demo](https://wonder-theme-interior.myshopify.com/) | [Install preset](https://themes.shopify.com/themes/wonder/presets/nook)
---
### Petit
Best for product-focused and CRO-optimized stores.
[View demo](https://wonder-theme-petit-demo.myshopify.com/) | [Install preset](https://themes.shopify.com/themes/wonder/presets/petit)
---
## How to Install a Preset
1. Click the **Install preset** link for the preset you want (listed above), or visit the [Wonder Theme page](https://themes.shopify.com/themes/wonder) on the Shopify Theme Store.
2. If you have already purchased the theme, click **Add latest version** or **Add new copy**.
3. If you haven't purchased yet, click **Try theme** to add it as a trial.
4. The theme will be installed in your Shopify admin with all the preset's sections, layout, and styling pre-applied.
Each preset installs a fully configured version of the Wonder Theme — you can start customizing right away.
## Need a Full Demo Setup?
If you want your store to look exactly like one of our demo presets — including all images, videos, and section configuration — reach out to our support team. We will upload the assets and configure the theme for you.
[Contact Support](/contact)
---
## Navigating the Theme Editor
## Navigating the Theme Editor
The Theme Editor is where you customize the look and feel of your store — adding sections, adjusting settings, and previewing changes in real time.
## Opening the Theme Editor
1. In your Shopify admin, go to **Online Store** → **Themes**.
2. Find the theme you want to edit and click **Customize**.
For a detailed walkthrough, see Shopify's official guide: [Shopify Theme Editor](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-editor).
## Editor Layout
The Theme Editor is divided into three main areas:
- **Left panel** — Lists all sections on the current page. Click a section to expand its settings and blocks.
- **Preview area** — Shows a live preview of your store. Changes appear here as you make them.
- **Top bar** — Use the page selector dropdown to switch between different page templates (Homepage, Product page, Collection page, etc.).
## Working with Sections and Blocks
**Sections** are the building blocks of each page — for example, a slideshow, a featured collection, or an image banner.
**Blocks** are smaller elements inside a section — for example, a heading, a button, or a text field within an image banner.
- **Add a section** — Click **Add section** at the bottom of the left panel and choose from the available options.
- **Reorder sections** — Drag and drop sections in the left panel to change their order on the page.
- **Remove a section** — Click the section, scroll to the bottom of its settings, and click **Remove section**.
- **Add a block** — Click a section to expand it, then click **Add block**.
For a full reference of all available sections, see our [Sections documentation](/sections/header-navigation).
## Switching Between Pages
Use the dropdown at the top center of the editor to switch between page templates:
- Homepage
- Product pages
- Collection pages
- Blog / Article pages
- Cart, Checkout, and more
Each page template has its own set of sections that you can customize independently.
## Mobile and Desktop Preview
Use the device icons in the top bar to toggle between desktop and mobile preview. This helps you verify that your layout looks correct on all screen sizes.
## Saving Changes
Click **Save** in the top-right corner to save your changes. Changes are saved to the theme but are not visible to customers until the theme is published.
For more details on the Theme Editor, see Shopify's help center:
- [Theme Editor overview](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-editor)
- [Sections and blocks](https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks)
---
## Setting Up Your Navigation
## Setting Up Your Navigation
Navigation menus control how customers browse your store. Menus are created in the Shopify admin and then connected to the Wonder Theme's header and footer sections.
## Creating and Editing Menus
1. In your Shopify admin, go to **Online Store** → **Navigation**.
2. Click **Main menu** to edit your primary navigation, or **Footer menu** for footer links.
3. Click **Add menu item** to add links to collections, products, pages, or custom URLs.
4. Drag and drop items to reorder them.
5. Nest items under a parent to create dropdown menus — drag an item slightly to the right to make it a child of the item above.
6. Click **Save** when you're done.
For a detailed guide, see: [Shopify — Setting up your navigation](https://help.shopify.com/en/manual/online-store/menus-and-links).
## Main Menu vs. Footer Menu
- **Main menu** — Displayed in the header. This is your primary navigation and typically includes links to collections, featured pages, and key categories.
- **Footer menu** — Displayed in the footer. Usually contains secondary links like policies, contact info, FAQ, and about pages.
You can create additional menus in the Shopify admin and assign them to different areas of your theme.
## Mega Menu / Promotion Menu
The Wonder Theme supports a mega menu for richer navigation with images and promotional content. To set it up:
1. Create a multi-level menu structure in your Shopify admin (parent items with nested children).
2. In the Theme Editor, go to the **Header** section settings to enable and configure the mega menu.
For a step-by-step walkthrough, see our detailed guide: [How to Set Up a Promotion Menu](/sections/header-navigation/header/block-promotion-mega-menu).
## Menu Highlight
You can visually highlight specific menu items (like "Sale" or "New Arrivals") with a custom color and icon using the **Menu Highlight** block in the header. See: [Menu Highlight](/sections/header-navigation/header/block-menu-highlight).
## Transparent Header
If your homepage uses a full-width hero image or video, you may want to enable the transparent header so the navigation overlays the hero content. See: [Transparent Header](/sections/header-navigation/header#transparent-header).
## Learn More
- [Shopify — Menus and links](https://help.shopify.com/en/manual/online-store/menus-and-links)
- [Shopify — Drop-down menus](https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus)
- [Header section reference](/sections/header-navigation/header)
---
## Setting Up Your Homepage
## Setting Up Your Homepage
Your homepage is the first thing customers see. The Wonder Theme presets come with a fully configured homepage layout — the easiest way to get started is to keep the preset structure and swap in your own content.
## Typical Homepage Structure
Most Wonder Theme presets follow a structure similar to this:
1. **Header** — Logo, navigation menu, search, and cart
2. **Hero section** — Slideshow, image banner, or video banner
3. **Featured collections** — Highlight your best-selling or seasonal products
4. **Storytelling sections** — Image with text, lookbook, parallax, or collage
5. **Social proof** — Testimonials, reviews, or brand logos
6. **Newsletter** — Email signup form
7. **Footer** — Links, contact info, and social media
You can rearrange, add, or remove any of these sections to match your brand.
## Customizing the Homepage
1. Open the Theme Editor (**Online Store** → **Themes** → **Customize**).
2. Make sure **Home page** is selected in the page dropdown at the top.
3. Click any section in the left panel to edit its content and settings.
4. To add a new section, click **Add section** and choose from the available options.
5. Drag and drop sections to reorder them.
6. Click **Save** when you're done.
## Tips for First-Time Setup
- **Start with the preset layout** — Don't remove sections before seeing how they look with your content. Swap images and text first.
- **Use high-quality images** — The hero section and product images have the biggest visual impact.
- **Keep it focused** — A homepage with 5–8 well-configured sections performs better than one overloaded with content.
- **Preview on mobile** — Use the mobile preview toggle in the editor to check your layout on smaller screens.
## Section Reference
For detailed settings and configuration options for each section type, browse the full documentation:
- [Banners](/sections/banners) — Slideshow, Image Banner, Scrolling Text, and more
- [Collections](/sections/collections) — Featured Collection, Collection List, Collection Navigator
- [Storytelling](/sections/storytelling) — Image with Text, Parallax, Collage, Lookbook
- [Testimonials](/sections/testimonials) — Testimonial images, Video Reels, Marquee
- [Text & Forms](/sections/text-forms) — Newsletter, AI Section, Features Banner
For more about managing your homepage in Shopify, see: [Shopify — Customize your homepage](https://help.shopify.com/en/manual/online-store/themes/theme-structure/pages#home-page).
---
## Sharing a Preview of Your Shopify Theme
## Sharing a Preview of Your Shopify Theme
Before making your theme live, you can generate a preview link to share with others for feedback or assistance.
### How to Share a Theme Preview
1. In your Shopify admin, go to **Online Store** → **Themes**.
2. Find the theme you want to share under **Theme library**.
3. Click the **...** (ellipsis) button next to the theme to open the options menu.
4. Select **Preview**.
5. At the bottom of the preview page, click **Share preview**.
6. Click **Copy link** and share the link with anyone you want.
The preview link allows anyone to view your unpublished theme without needing access to your Shopify admin.
For more details, see: [Shopify — Share a theme preview](https://help.shopify.com/en/manual/online-store/themes/managing-themes#share-a-theme-preview).
---
============================================================
# Theme Settings
============================================================
---
## Cart add-ons
import DocVideo from '@site/src/components/DocVideo';
The Cart - Addons settings let you enhance the cart experience with a range of optional features, including:
- [**Additional features**](#additional-features) — order notes, shipping estimates, discount codes, and cart icons
- [**Additional service**](#additional-service) — a custom checkbox that automatically adds a product to the cart
- [**Cross-sells**](#cross-sells) — product recommendations displayed directly in the cart
- [**Free shipping bar**](#free-shipping-bar) — a dynamic progress bar motivating customers to reach the free shipping threshold
- [**Discount progress bar**](#discount-progress-bar) — a visual indicator showing customers how close they are to unlocking a discount
### Additional features
Three optional panels at the bottom of the cart: **Order Note**, **Discount Code**, and **Estimate Shipping**. On mobile and in the drawer, tapping a feature slides up a panel from the bottom. On the cart page on desktop, tapping a feature expands it as an inline accordion.
- **Enable icons** — Show a small icon next to each feature label. Turn off for a text-only look.
- **Enable order note** — Let shoppers add a note to their order (e.g. gift wrap requests, delivery instructions). The note is saved with the order in your Shopify admin.
- **Enable estimate shipping** — Let shoppers enter a country and postal code to preview shipping rates before checkout.
- **Enable discount code** — Let shoppers apply discount codes directly in the cart. The cart total updates immediately.
#### Desktop view example
#### Mobile view example
### Additional service
An optional checkbox that adds a single configured product to the cart with one click — typically used for gift wrapping, donation matching, or warranty add-ons.
- **Show additional service checkbox** — Turn the checkbox on or off.
- **Name of additional service** — The label shown next to the checkbox.
- **Product** — The product added to the cart when the checkbox is ticked.
- **Show quantity and remove button for checkbox product** — When on, the service product appears in the cart items list with a quantity selector and remove button. When off, it is hidden from the items list but still added to the cart at checkout.
Important: Keep "Show quantity and remove button for checkbox product" turned off unless you have a specific reason to allow it. When enabled, shoppers can increase the quantity of the service product, which may lead to unintended multiple charges (e.g. paying for gift wrapping twice). Disabling this option ensures the service is added exactly once and cannot be manually adjusted in the cart.
### Example: Gift wrapping
### Cross-sells
Product recommendations shown inside the cart drawer to encourage shoppers to add one more item before checkout. Cross-sells only appear in the drawer (not the cart page) and only when the cart is not empty.
- **Enable cross sells** — Turn the cross-sell row on or off.
- **Cross sells collapsed by default** — Start the cross-sell row collapsed so shoppers can expand it manually.
- **Show vendor** — Show the product vendor name on each cross-sell card.
- **Heading** — The heading above the cross-sell products (e.g. `You might also like`).
- **Maximum number of products to show** — How many products appear in the row (1–9).
- **Product source** — Choose **From collection** (auto-pulls from a collection) or **From product list** (up to 9 hand-picked products).
- **Collection** — The collection to pull cross-sell products from. Only applies when **Product source** is From collection.
- **Product list** — Up to 9 hand-picked products. Only applies when **Product source** is From product list.
### Example: Cross-sells
### Free shipping bar
Not compatible with dynamic exchange rates — If your store uses Shopify Markets with automatic currency conversion, the bar may not work correctly. For multi-currency stores with fixed rates, use the threshold format `USD:120|PLN:400|EUR:90` to define separate values per currency.
A progress bar showing shoppers how close they are to qualifying for free shipping.
- **Enable free shipping bar** — Turn the bar on or off.
- **Free shipping minimum amount** — The cart total required to unlock free shipping. Enter a plain number (e.g. `100`) for single-currency stores. For multi-currency stores use the format `100|USD:120|PLN:400|EUR:90` — the first value is the default for any unlisted currency, followed by `CODE:value` pairs per currency.
- **Free shipping message** — Text shown before the threshold is reached. Use `||amount||` as a placeholder for the remaining amount (e.g. `Spend ||amount|| more for FREE shipping!`).
- **Message when free shipping is achieved** — Text shown once the threshold is met.
### Example: Free shipping bar
### Discount progress bar
Not compatible with dynamic exchange rates — If your store uses Shopify Markets with automatic currency conversion, the progress bar may not work correctly. For multi-currency stores with fixed rates, use the threshold format `USD:120|PLN:400|EUR:90` to define separate milestone values per currency.
This feature works exclusively with discounts created in your Shopify admin panel. Make sure your discount codes or automatic discounts are set up in Shopify Admin before configuring the milestones here.
A progress bar with up to three milestones, each unlocking a discount tier. Available since **v2.4.0**.
#### Discount progress bar example
- **Enable discount progress bar** — Turn the bar on or off.
Once enabled, configure **Colors** and up to three **Milestones**.
#### Colors
- **Text color** — Colour of the progress message text.
- **Background color** — Background of the message area.
- **Success text color** — Text colour when all milestones are reached.
- **Success background color** — Background colour when all milestones are reached.
- **Progress bar color** — The unfilled part of the progress bar.
- **Active progress bar color** — The filled part of the progress bar.
- **Milestone label color** — Colour of the label under each milestone icon.
- **Milestone icon color** — Colour of an unachieved milestone icon.
- **Active milestone icon color** — Colour of an achieved milestone icon.
#### Milestone 1, 2, 3
Each milestone shares the same five settings. Set milestones in ascending order — Milestone 1 must be lower than Milestone 2, which must be lower than Milestone 3.
- **Enable Milestone N** — Turn this milestone on or off. Use 1, 2, or all 3.
- **Threshold** — The cart total needed to unlock this milestone. Supports the same multicurrency format as the free shipping bar.
- **Label** — Short label shown under the milestone icon (e.g. `-10%`, `Free gift`).
- **Message** — Progress message while the milestone hasn't been reached. Use `||amount||` for the remaining amount and `||label||` for this milestone's label.
- **Icon type** — Icon inside the milestone circle: **None**, **Box**, **Price tag**, or **Truck**.
- **Image** — Upload a custom icon image. Overrides **Icon type** when set.
- **All-achieved label** — Message shown when every milestone has been reached (e.g. `All discounts unlocked!`). Shown after the last milestone's settings.
### How to set up the Discount progress bar
### Example: How to set up the Discounts
---
## Cart
import DocVideo from '@site/src/components/DocVideo';
Wonder Theme supports two cart display modes — a slide-out **Drawer** or a dedicated **Page** — configured once in Theme Settings and applied across the entire store. Cart settings are split across two groups: **Cart** (core options) and **Cart - Addons** (optional features). You can find them under **Customize → Theme Settings**.
The Cart settings allow you to control how the shopping cart is displayed and behaves across your store, customize the subtotal area with savings information, and configure the cart footer with payment badges.
## Cart Page
A full `/cart` route that replaces the current page when a shopper views their cart. On screens 900 px and wider the layout switches to two columns automatically — items on the left, order summary on the right. On narrower screens everything stacks in a single column.
### Desktop layout
On screens 900 px and wider, the cart page switches to a two-column layout automatically — no configuration needed.
- **Header** — The cart title moves to the left; the free shipping bar and discount progress bar sit on the right, capped at 452 px.
- **Additional features** — Each feature expands inline as an accordion instead of a slide-up panel. Only one feature can be open at a time.
- **Action buttons** — Continue shopping (secondary) and Check out (primary) appear side-by-side at equal width.
On screens below 900 px, the layout falls back to a single vertical column.
## Cart Drawer
A slide-out panel that overlays the current page without navigating away. The drawer opens from the side and lets shoppers review and edit their cart without losing their place on the site.
## Main settings
### General
- **Cart type** — Choose how the cart opens: **Drawer** (slides out from the side without leaving the current page) or **Page** (a full `/cart` route).
- **Show View cart button** — Add a "View cart" button next to the Checkout button in the drawer. Only applies when **Cart type** is Drawer.
- **Hide Checkout button** — Hide the primary Checkout button in the drawer. Only applies when **Show View cart button** is on and **Cart type** is Drawer.
### Subtotal
- **Enable savings information** — Show a "You've saved $X" line below the subtotal when a discount is applied (sale prices, automatic discounts, or discount codes).
- **Savings label** — The text shown in the savings line. Use `||savings||` as a placeholder for the saved amount.
### Cart footer
- **Show payment badge** — Show payment methods or a custom badge image below the checkout button.
- **Badge type** — Choose **Payment icons** (auto-generated from your store's enabled payment methods) or **Image** (custom badge artwork).
- **Mobile image** — Upload a small image for narrow viewports. Only applies when **Badge type** is Image.
- **Desktop image** — Upload a wider image for larger screens. Only applies when **Badge type** is Image.
## How to set up the Cart
---
## Color swatches
### What is the Color Swatches?
Swatches serve as compact yet impactful visual cues that reveal the array of colors, textures, and materials a product offers.
Moving beyond mere textual descriptions, swatches offer a tactile and visual representation that brings customer interaction with product variants to life. Opt for vivid hex codes, utilize variant-specific imagery, or introduce bespoke swatch designs for a tailored display. Available in circular or square formats, swatches infuse a touch of elegance and practicality into the shopping experience. Here's how they enhance the Wonder theme:
### Two ways to set up swatches
There are two ways to show swatches in the Wonder theme. Pick the one that matches how your products are built:
| Method | Use it when | Where to configure |
| --- | --- | --- |
| [**1. Variant option swatches**](#method-1-variant-option-swatches) | Your colors are **variant options on a single product** (the standard Shopify setup) | **Theme Settings > Color swatch** — described in the rest of this article |
| [**2. Product siblings as swatches**](#method-2-product-siblings-as-swatches) | Your colors are **separate products** linked together (Combined listings) | **Theme Settings > Product siblings / variations** |
### Method 1: Variant option swatches
This is the method covered by this article. Your product has an option such as `Color`, and each option value renders as a swatch — from a Shopify color metafield, a **Custom colors** rule, or the variant's own image.
Continue with [Where each setting applies](#where-each-setting-applies) below.
### Where each setting applies
Swatches appear in two different places, and they are controlled separately:
| Location | Controlled by |
| --- | --- |
| **Product cards** (collection pages, featured collections, search results) | **Enable color swatch** checkbox, plus the option-name fields below |
| **Product page** (variant picker) | The option-name fields below only — the **Enable color swatch** checkbox has no effect here |
| **Filters** (collection sidebar / drawer) | **Enable color swatch in filters** checkbox |
:::caution
**Enable color swatch** turns swatches on and off for **product cards only**. Product-page swatches are driven entirely by **Options listed as Color Swatches** — an option name listed there renders as swatches whether this checkbox is on or off.
:::
### How to Configure Color Swatches in Your Theme Editor
1. **Access Theme Customization:** Navigate to your Theme Editor by clicking on 'Theme Settings', then look for the 'Color Swatch' section.
2. **Enable Swatches on Cards:** Check the 'Enable color swatch' option to show swatches on product cards in collections and grids.
3. **Filter Integration:** If you want the swatches to appear in filter options as well, ensure 'Enable color swatch in filters' is checked.
4. **Choose Swatch Shape:** Opt for 'Enable round color swatches' if you prefer circular swatches over the default square shape.
5. **Input Color Values:**
- **IMPORTANT:** Shopify now provides own color swatches via metafields. If color metafields are defined, the swatches take values from there. Learn more in the [Shopify Category Metafields guide](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields). If not set, the Theme settings>Color swatch>Custom colors setting will be used.
- In the 'Custom colors' field, input each color option as a color name followed by its hex code, or a color name followed by an image filename for patterned swatches. Place each entry on a separate line to define the swatches for your product variants.
6. **Choose one display style per option — colors *or* images:**
- To show an option as **color/image swatches**, enter its name (usually `Color`) in **Options listed as Color Swatches**.
- To show an option as **variant photos** instead, enter its name in **Options listed as Variant Images** and leave it out of the field above.
Remember to keep each color rule on its own line to ensure proper display and functionality.
### Color swatch settings
**Enable color swatch:** Show or hide color swatches on product cards. Off by default. This setting does not affect the product page.
**Enable color swatch in filters:** Enable or disable color swatch in filters.
**Enable round color swatches:** Enable or disable rounded shape of color swatches.
**Custom colors:** Define color swatches not only with hex color codes but also with image files.
**IMPORTANT:** Shopify now provides own color swatches via metafields. If color metafields are defined, the swatches take values from there. Learn more in the [Shopify Category Metafields guide](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields). If not set, the **Theme settings>Color swatch>Custom colors** setting will be used.
How to do it:
1. **Single Color Assignment:** For a single color, input the color name followed by a colon and its corresponding hex code. For example: **White:#ffffff** defines a swatch as white.
2. **Combination Colors:** To represent a combination of colors, list the color names separated by slashes and their respective hex codes consecutively, each prefixed with **#** . For example: **Red/Green/Blue:#ff0000#00ff00#0000ff** creates a swatch showing red, green, and blue.
- Two colors render as a diagonal split, three colors as three diagonal bands.
- **A maximum of three colors is supported.** An entry with four or more hex codes is ignored, and the swatch falls back to the option value's own color name.
- Use full six-digit hex codes (`#ff0000`, not `#f00`).
3. **Image File for Color:** If you have a specific pattern or material that can't be represented by a hex code, use an image file. Enter the color name followed by a colon and the image file name. For instance: **Gray melange:gray-melange.jpg** would use the "gray-melange.jpg" image to represent the "Gray melange" swatch.
- The image must be uploaded to **Content > Files** in your Shopify admin, and the filename in the rule must match exactly, including its extension.
Remember to place each rule on its own line to ensure the system interprets each color or image swatch correctly.
:::tip
Standard CSS color names work with no configuration at all. If an option value has no metafield swatch and no **Custom colors** rule, the theme uses the value itself as a color — so a variant named "Red" or "Olive" already renders correctly. You only need a rule for custom shades, multi-color swatches, and image swatches.
:::
**Options listed as Color Swatches:** specify which product option names should be displayed using color swatches.
How to do it?
1. **Identify the Option Name:** Determine the name of the product option that corresponds to color variations. Typically, this is simply "Color".
2. **Input the Option Name:** Enter the option name — not an option value — into the field. If your option is called "Color", write "Color". Capitalization does not matter, but spelling must match the option name in your product setup.
3. **One Option Per Line:** If you have multiple options that require swatches, such as "Material" or "Finish", list each one on a separate line within the field.
**Options listed as Variant Images:** define which variant option names should display their choices as images taken from the variant photos assigned in **Admin > Products**.
How to do it?
1. **Specify Variant Names:** List the variant option names that have corresponding images. Common examples include "Color", "Front Color", or "Cover Color".
2. **Input Each Variant Name Separately:** Write each variant option name that you want to associate with an image on a new line within this field.
3. **Ensure Correct Mapping:** Each name entered must exactly match the option names set up in your product details to ensure the correct images are displayed when a customer selects a variant.
:::caution
**Do not list the same option in both fields.** Variant Images takes priority, so an option that appears in both will render as variant photos and its color swatches will never show. On product cards the rule is stricter still: as soon as **Options listed as Variant Images** contains anything, it replaces **Options listed as Color Swatches** for every option on the card. Pick one style per option.
:::
### Overriding these settings on a single product page
The settings above apply store-wide. The **Variant picker** block on the product page has its own **Options listed as Color Swatches** and **Options listed as Variant Images** fields, which override the theme settings for that section when filled in, plus a third option-name field for rendering an option as a dropdown. See [Variant picker block](/product-page/blocks/variant-picker-block) for details.
### Method 2: Product siblings as swatches
Use this method when your colors are **separate products** rather than variant options on one product — also known as **Combined listings** or **Product variations**. Each linked product renders as a swatch on the product card, and clicking a swatch takes the customer to that product.
The settings live in their own section of the theme settings panel: **Theme Settings > Product siblings / variations**. They replace the option-name fields from Method 1 — sibling swatches ignore **Options listed as Color Swatches** and **Options listed as Variant Images** entirely.
#### Before you start: two metafields
Both settings below point at product metafields, so create these first in **Settings > Metafields and metaobjects > Products**:
1. **A products metafield** of type **Product**, configured as a **List of products** — for example `custom.product_variations`. On each product, select every sibling in the group, **including the product itself**. This lets one product page template serve the whole group.
2. **An option value metafield** that supplies each sibling's swatch.
:::tip
**You usually don't need to create the option value metafield.** If your products already use Shopify's category (taxonomy) color metafield — `shopify.color-pattern`, the same one that powers Shopify's native variant swatches — point the setting at that and you are done. It is a multi-select field, and the theme uses the **first selected entry**, so pick the sibling's main color first.
:::
If you would rather define your own, create a metafield such as `custom.color`. These types are supported:
- **Metaobject reference** (recommended) — a single metaobject containing a **Label** plus an **Image** or a **Color (HEX)**.
- **Category (taxonomy)** and **list** metafields — the first selected entry is used.
- **Single-line text** — shown as the swatch tooltip.
You can find more details on how to set up these metafields and metaobjects in [Product Siblings (Product Variations)](/product-page/blocks/product-siblings-block).
#### Settings
**Enable product siblings / variations as swatches:** turn sibling swatches on or off for product cards. Off by default.
**Input type:** how each sibling is drawn.
- **Swatch / Image** (default) — uses the color or image from the option value metafield.
- **Product image** — uses the sibling product's featured image as the swatch. The tooltip falls back to the product title when the option value metafield is empty.
**Option value metafield:** the namespace and key of the metafield holding the option value, for example `shopify.color-pattern` or `custom.color`. It should be a single metaobject containing Label and Image or Color (HEX). List and category (taxonomy) metafields are also supported — the first selected entry is used. A single-line text metafield is also supported and is shown as the swatch tooltip. If this is empty and the input type is **Product image**, the product title is used as the tooltip.
**Products metafield:** the namespace and key of the metafield holding the linked products, for example `custom.product_variations`.
Once enabled, each linked sibling appears as a swatch on the product card:
---
## Colors
## Colors
Customize the color scheme of your entire store. These settings are found under **Theme Settings** → **Colors** in the Theme Editor.
All color settings accept any valid color value. Changes apply globally across your theme.
## General
- **Background** — Main background color of the store.
- **Headings text** — Color used for all heading elements.
- **Body text** — Color used for body text and paragraphs.
- **Body text light** — Color used for secondary or lighter body text.
- **Links** — Default color for text links.
- **Links active** — Color for links on hover or active state.
- **Border** — Color used for borders and dividers throughout the theme.
- **Action text** — Text color for action elements like badges and labels.
- **Action background** — Background color for action elements.
## Header & Menu
- **Header text** — Text color in the site header.
- **Header background** — Background color of the site header.
- **Menu text** — Text color in the navigation menu and mobile drawer.
- **Menu background** — Background color of the navigation menu and mobile drawer.
## Buttons
### Primary Button
- **Background** — Background color of the primary button.
- **Text** — Text color of the primary button.
- **Text hover** — Text color on hover.
- **Background hover** — Background color on hover.
### Secondary Button
- **Background** — Background color of the secondary button.
- **Border** — Border color of the secondary button.
- **Text** — Text color of the secondary button.
- **Text hover** — Text color on hover.
- **Background hover** — Background color on hover.
## Product Card
- **Price** — Color of the product price.
- **Sale price** — Color of the discounted sale price.
- **Brand** — Color of the product brand/vendor name.
- **Star rating** — Color of the star rating icons.
- **Sale badge text** — Text color of the sale badge.
- **Sale badge background** — Background color of the sale badge.
- **Sold out text** — Text color of the sold out badge.
- **Sold out background** — Background color of the sold out badge.
## Inputs & Feedback
- **Input text** — Text color inside form fields.
- **Input background** — Background color of form fields.
- **Input border** — Border color of form fields.
- **Input placeholder** — Color of placeholder text in form fields.
- **Success text** — Text color for success messages.
- **Success background** — Background color for success messages.
- **Success border** — Border color for success messages.
- **Error text** — Text color for error messages.
- **Error background** — Background color for error messages.
- **Error border** — Border color for error messages.
## Footer
- **Footer background** — Background color of the site footer.
- **Footer text** — Text color in the site footer.
---
## Cross sell
### What is the Cross sell?
The **Cross-Selling** feature is designed to enhance the shopping experience while increasing average order value. This feature displays in the cart drawer, showcasing additional products that customers might be interested in, based on the selected collection or items handpicked by the merchant. Customers can seamlessly browse through these recommendations and add them to their cart without leaving the cart drawer.
### Key Features
* **Customizable Recommendations** : Display products from a specific collection or select popular items manually.
* **Quick Buy Option** : Customers can add recommended products directly to their cart with a single click.
* **Elegant Slider Design** : Products are presented in a sleek, responsive slider for a visually appealing and user-friendly experience.
* **Optimized for Conversion** : Smartly placed suggestions increase the likelihood of customers adding more to their orders.
### How It Works
When a customer adds items to their cart and opens the cart drawer, the Cross-Selling feature dynamically displays a curated selection of products. These recommendations are tailored to highlight complementary or popular items, encouraging customers to explore and add more to their purchase.
### Settings
**Theme Editor** > **Theme Settings** > **Cart** > **Cross sells** .
* **Enable cross-sells** : Activate this feature to display product recommendations in the cart drawer.
* **Heading** : Customize the title for the cross-sells section (e.g., "You might also like").
* **Maximum number of products to show** : Adjust the slider to set the maximum number of recommended products displayed.
* **Product source** : Choose whether recommendations are sourced from a **collection** or a **specific product list** .
* **Collection** : Select the collection to pull recommended products from.
* **Product list** : Manually select products to display as recommendations.
---
## Custom Fonts: How to Set Them Up
## Custom Fonts: How to Set Them Up
Want your store to stand out and feel truly unique? Adding custom fonts is the way to go. Showcase your brand's personality, make your text pop, and create a more memorable shopping experience for your customers — without being limited to default fonts.
All custom font settings are found in **Theme Settings** → **Typography** → **Custom fonts** in the Theme Editor.
## Step 1: Prepare your @font-face declaration
First, you need to register your font using a `@font-face` CSS declaration. There are two ways to do this:
### Option A: Upload font files to Shopify
1. Go to **Content** → **Files** in your Shopify admin.
2. Upload your font files (recommended formats: `.woff2`, `.woff`, or `.ttf`).
3. Copy the file URL after uploading.
4. Write a `@font-face` declaration using that URL:
```css
@font-face {
font-family: 'MyFont';
src: url('https://cdn.shopify.com/s/files/.../MyFont-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
```
If your font has multiple weights (e.g. Regular and Bold), add a separate `@font-face` block for each:
```css
@font-face {
font-family: 'MyFont';
src: url('https://cdn.shopify.com/s/files/.../MyFont-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'MyFont';
src: url('https://cdn.shopify.com/s/files/.../MyFont-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
```
### Option B: Use Google Fonts (or other external fonts)
The recommended approach for Google Fonts is to **download the font files** and upload them to Shopify, then use `@font-face` exactly as shown in Option A. This is the most reliable method and works correctly in the Theme Editor preview.
To download Google Fonts, visit [fonts.google.com](https://fonts.google.com/), select a font, and click the download button to get the font files (`.ttf` or `.woff2`).
:::caution
**Do not use `@import` or `` inside the @font-face declarations field.** The declarations field renders inside a `
[View demo](https://wonder-theme-wellness.myshopify.com/) | [Install preset](https://themes.shopify.com/themes/wonder/presets/root)
---
### Velour
Best for fashion, apparel, and lifestyle stores.
[View demo](https://wonder-theme-fashion.myshopify.com/) | [Install preset](https://themes.shopify.com/themes/wonder/presets/velour)
---
### Nook
Best for interior, furniture, and home decor stores.
[View demo](https://wonder-theme-interior.myshopify.com/) | [Install preset](https://themes.shopify.com/themes/wonder/presets/nook)
---
### Petit
Best for product-focused and CRO-optimized stores.
[View demo](https://wonder-theme-petit-demo.myshopify.com/) | [Install preset](https://themes.shopify.com/themes/wonder/presets/petit)
---
## How to Install a Preset
1. Click the **Install preset** link for the preset you want (listed above), or visit the [Wonder Theme page](https://themes.shopify.com/themes/wonder) on the Shopify Theme Store.
2. If you have already purchased the theme, click **Add latest version** or **Add new copy**.
3. If you haven't purchased yet, click **Try theme** to add it as a trial.
4. The theme will be installed in your Shopify admin with all the preset's sections, layout, and styling pre-applied.
Each preset installs a fully configured version of the Wonder Theme — you can start customizing right away.
## Need a Full Demo Setup?
If you want your store to look exactly like one of our demo presets — including all images, videos, and section configuration — reach out to our support team. We will upload the assets and configure the theme for you.
[Contact Support](/contact)
---
## Navigating the Theme Editor
## Navigating the Theme Editor
The Theme Editor is where you customize the look and feel of your store — adding sections, adjusting settings, and previewing changes in real time.
## Opening the Theme Editor
1. In your Shopify admin, go to **Online Store** → **Themes**.
2. Find the theme you want to edit and click **Customize**.
For a detailed walkthrough, see Shopify's official guide: [Shopify Theme Editor](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-editor).
## Editor Layout
The Theme Editor is divided into three main areas:
- **Left panel** — Lists all sections on the current page. Click a section to expand its settings and blocks.
- **Preview area** — Shows a live preview of your store. Changes appear here as you make them.
- **Top bar** — Use the page selector dropdown to switch between different page templates (Homepage, Product page, Collection page, etc.).
## Working with Sections and Blocks
**Sections** are the building blocks of each page — for example, a slideshow, a featured collection, or an image banner.
**Blocks** are smaller elements inside a section — for example, a heading, a button, or a text field within an image banner.
- **Add a section** — Click **Add section** at the bottom of the left panel and choose from the available options.
- **Reorder sections** — Drag and drop sections in the left panel to change their order on the page.
- **Remove a section** — Click the section, scroll to the bottom of its settings, and click **Remove section**.
- **Add a block** — Click a section to expand it, then click **Add block**.
For a full reference of all available sections, see our [Sections documentation](/sections/header-navigation).
## Switching Between Pages
Use the dropdown at the top center of the editor to switch between page templates:
- Homepage
- Product pages
- Collection pages
- Blog / Article pages
- Cart, Checkout, and more
Each page template has its own set of sections that you can customize independently.
## Mobile and Desktop Preview
Use the device icons in the top bar to toggle between desktop and mobile preview. This helps you verify that your layout looks correct on all screen sizes.
## Saving Changes
Click **Save** in the top-right corner to save your changes. Changes are saved to the theme but are not visible to customers until the theme is published.
For more details on the Theme Editor, see Shopify's help center:
- [Theme Editor overview](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-editor)
- [Sections and blocks](https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks)
---
## Setting Up Your Navigation
## Setting Up Your Navigation
Navigation menus control how customers browse your store. Menus are created in the Shopify admin and then connected to the Wonder Theme's header and footer sections.
## Creating and Editing Menus
1. In your Shopify admin, go to **Online Store** → **Navigation**.
2. Click **Main menu** to edit your primary navigation, or **Footer menu** for footer links.
3. Click **Add menu item** to add links to collections, products, pages, or custom URLs.
4. Drag and drop items to reorder them.
5. Nest items under a parent to create dropdown menus — drag an item slightly to the right to make it a child of the item above.
6. Click **Save** when you're done.
For a detailed guide, see: [Shopify — Setting up your navigation](https://help.shopify.com/en/manual/online-store/menus-and-links).
## Main Menu vs. Footer Menu
- **Main menu** — Displayed in the header. This is your primary navigation and typically includes links to collections, featured pages, and key categories.
- **Footer menu** — Displayed in the footer. Usually contains secondary links like policies, contact info, FAQ, and about pages.
You can create additional menus in the Shopify admin and assign them to different areas of your theme.
## Mega Menu / Promotion Menu
The Wonder Theme supports a mega menu for richer navigation with images and promotional content. To set it up:
1. Create a multi-level menu structure in your Shopify admin (parent items with nested children).
2. In the Theme Editor, go to the **Header** section settings to enable and configure the mega menu.
For a step-by-step walkthrough, see our detailed guide: [How to Set Up a Promotion Menu](/sections/header-navigation/header/block-promotion-mega-menu).
## Menu Highlight
You can visually highlight specific menu items (like "Sale" or "New Arrivals") with a custom color and icon using the **Menu Highlight** block in the header. See: [Menu Highlight](/sections/header-navigation/header/block-menu-highlight).
## Transparent Header
If your homepage uses a full-width hero image or video, you may want to enable the transparent header so the navigation overlays the hero content. See: [Transparent Header](/sections/header-navigation/header#transparent-header).
## Learn More
- [Shopify — Menus and links](https://help.shopify.com/en/manual/online-store/menus-and-links)
- [Shopify — Drop-down menus](https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus)
- [Header section reference](/sections/header-navigation/header)
---
## Setting Up Your Homepage
## Setting Up Your Homepage
Your homepage is the first thing customers see. The Wonder Theme presets come with a fully configured homepage layout — the easiest way to get started is to keep the preset structure and swap in your own content.
## Typical Homepage Structure
Most Wonder Theme presets follow a structure similar to this:
1. **Header** — Logo, navigation menu, search, and cart
2. **Hero section** — Slideshow, image banner, or video banner
3. **Featured collections** — Highlight your best-selling or seasonal products
4. **Storytelling sections** — Image with text, lookbook, parallax, or collage
5. **Social proof** — Testimonials, reviews, or brand logos
6. **Newsletter** — Email signup form
7. **Footer** — Links, contact info, and social media
You can rearrange, add, or remove any of these sections to match your brand.
## Customizing the Homepage
1. Open the Theme Editor (**Online Store** → **Themes** → **Customize**).
2. Make sure **Home page** is selected in the page dropdown at the top.
3. Click any section in the left panel to edit its content and settings.
4. To add a new section, click **Add section** and choose from the available options.
5. Drag and drop sections to reorder them.
6. Click **Save** when you're done.
## Tips for First-Time Setup
- **Start with the preset layout** — Don't remove sections before seeing how they look with your content. Swap images and text first.
- **Use high-quality images** — The hero section and product images have the biggest visual impact.
- **Keep it focused** — A homepage with 5–8 well-configured sections performs better than one overloaded with content.
- **Preview on mobile** — Use the mobile preview toggle in the editor to check your layout on smaller screens.
## Section Reference
For detailed settings and configuration options for each section type, browse the full documentation:
- [Banners](/sections/banners) — Slideshow, Image Banner, Scrolling Text, and more
- [Collections](/sections/collections) — Featured Collection, Collection List, Collection Navigator
- [Storytelling](/sections/storytelling) — Image with Text, Parallax, Collage, Lookbook
- [Testimonials](/sections/testimonials) — Testimonial images, Video Reels, Marquee
- [Text & Forms](/sections/text-forms) — Newsletter, AI Section, Features Banner
For more about managing your homepage in Shopify, see: [Shopify — Customize your homepage](https://help.shopify.com/en/manual/online-store/themes/theme-structure/pages#home-page).
---
## Sharing a Preview of Your Shopify Theme
## Sharing a Preview of Your Shopify Theme
Before making your theme live, you can generate a preview link to share with others for feedback or assistance.
### How to Share a Theme Preview
1. In your Shopify admin, go to **Online Store** → **Themes**.
2. Find the theme you want to share under **Theme library**.
3. Click the **...** (ellipsis) button next to the theme to open the options menu.
4. Select **Preview**.
5. At the bottom of the preview page, click **Share preview**.
6. Click **Copy link** and share the link with anyone you want.
The preview link allows anyone to view your unpublished theme without needing access to your Shopify admin.
For more details, see: [Shopify — Share a theme preview](https://help.shopify.com/en/manual/online-store/themes/managing-themes#share-a-theme-preview).
---
============================================================
# Theme Settings
============================================================
---
## Cart add-ons
import DocVideo from '@site/src/components/DocVideo';
The Cart - Addons settings let you enhance the cart experience with a range of optional features, including:
- [**Additional features**](#additional-features) — order notes, shipping estimates, discount codes, and cart icons
- [**Additional service**](#additional-service) — a custom checkbox that automatically adds a product to the cart
- [**Cross-sells**](#cross-sells) — product recommendations displayed directly in the cart
- [**Free shipping bar**](#free-shipping-bar) — a dynamic progress bar motivating customers to reach the free shipping threshold
- [**Discount progress bar**](#discount-progress-bar) — a visual indicator showing customers how close they are to unlocking a discount
### Additional features
Three optional panels at the bottom of the cart: **Order Note**, **Discount Code**, and **Estimate Shipping**. On mobile and in the drawer, tapping a feature slides up a panel from the bottom. On the cart page on desktop, tapping a feature expands it as an inline accordion.
- **Enable icons** — Show a small icon next to each feature label. Turn off for a text-only look.
- **Enable order note** — Let shoppers add a note to their order (e.g. gift wrap requests, delivery instructions). The note is saved with the order in your Shopify admin.
- **Enable estimate shipping** — Let shoppers enter a country and postal code to preview shipping rates before checkout.
- **Enable discount code** — Let shoppers apply discount codes directly in the cart. The cart total updates immediately.
#### Desktop view example
#### Mobile view example
### Additional service
An optional checkbox that adds a single configured product to the cart with one click — typically used for gift wrapping, donation matching, or warranty add-ons.
- **Show additional service checkbox** — Turn the checkbox on or off.
- **Name of additional service** — The label shown next to the checkbox.
- **Product** — The product added to the cart when the checkbox is ticked.
- **Show quantity and remove button for checkbox product** — When on, the service product appears in the cart items list with a quantity selector and remove button. When off, it is hidden from the items list but still added to the cart at checkout.