Zopy Theme settings
Settings that apply across the whole store. In the theme editor, open Theme settings (the gear icon in the sidebar). This page lists every group and every setting in the order the editor shows them.
Section and block settings are listed with each section and block in Sections and blocks. Product data, such as Supplement Facts and lab batches, is set on each product; see Product data setup.
Logo and favicon
The logo in the header and the icon in browser tabs.
| Setting | Type and default | What it does |
|---|---|---|
| Logo | Image | Without a logo, the store name is set in the display font. |
| Inverse logo | Image | Used when the header is transparent over the first section. A light version works best over dark images. |
| Logo width on desktop | 40 to 320 px, default 132 px | How wide the logo is on desktop. |
| Logo width on mobile | 40 to 200 px, default 104 px | How wide the logo is on phones. |
| Favicon | Image | 32 x 32px .png recommended |
Colors
Color schemes are reusable sets of colors. Every section, and some blocks, has a Color scheme setting that picks one. Edit a scheme once and every section that uses it changes.
| Color | Where it is used |
|---|---|
| Background | |
| Background | |
| Background gradient | Shows instead of the background color when set. |
| Surface | Raised sheets such as selected options, tables, drawers and popovers. |
| Text | |
| Text | Body text, headings, icons, focus rings and structural lines. |
| Secondary text | Captions, labels and supporting text. Keep a contrast ratio of at least 4.5:1 with the background and surface colors. |
| Dividers | Thin decorative lines between rows and items. |
| Input borders | Borders of fields, checkboxes, swatches and option cards. Keep a contrast ratio of at least 3.5:1 with the background color, so borders stay visible on shaded panels. |
| Buttons | |
| Button background | |
| Button label | |
| Highlights | |
| Accent | Marks warnings, footnote markers and one highlighted value per chart. |
| Positive | Savings, subscription prices, passed lab results and stock status. |
The theme ships with six schemes. Scheme 1 is the page background; Scheme 4 is the dark one. Every shipped scheme meets WCAG AA contrast for text. If you change one, keep the contrast ratios the editor notes ask for.
| Scheme | Background | Surface | Text | Secondary text | Button background | Accent | Positive |
|---|---|---|---|---|---|---|---|
| Scheme 1 | #F4F0E7 | #FBF9F4 | #17160F | #57534A | #17160F | #B83A14 | #2F5D3A |
| Scheme 2 | #FBF9F4 | #FFFFFF | #17160F | #57534A | #17160F | #B83A14 | #2F5D3A |
| Scheme 3 | #EAE4D6 | #F4F0E7 | #17160F | #524E45 | #17160F | #A8340F | #2A5634 |
| Scheme 4 | #17160F | #22211A | #F4F0E7 | #A8A294 | #F4F0E7 | #FF7A4D | #8FC79A |
| Scheme 5 | #E1E5D8 | #F2F4EC | #17160F | #4E5347 | #17160F | #A8340F | #2A5634 |
| Scheme 6 | #FFFFFF | #F5F7F9 | #0E1A2B | #4A5565 | #0E1A2B | #0B6E99 | #1F6B45 |
In a scheme, Accent colors the few things that need a second look: warnings such as the over-limit flag on a Supplement Facts row, footnote markers and one highlighted value per chart. Daily Value bars and chart series use the text color. Positive marks savings, subscription prices, passed lab results and stock. Links, buttons and errors never use them.
Typography
Three fonts from Shopify's font library and the size of text.
| Setting | Type and default | What it does |
|---|---|---|
| Fonts | ||
| Display font | Font, default Newsreader | Headings, product titles, quotes and large numbers. |
| Body font | Font, default Geist | Body text, buttons, navigation, prices and form fields. |
| Font for numbers and labels | Font, default Geist Mono | Doses, batch codes, labels and figure captions. A monospaced font works best. |
| Size | ||
| Body text size | 15 to 18 px, default 16 px | The size of body text. Other text sizes follow it. |
| Heading scale | 90 to 120 %, default 100 % | Scales display text and headings from the largest size down to small headings. |
| Set emphasized words in italic | Checkbox, on by default | Applies to words you mark as italic in headings. |
Layout
Page width, section numbers, image captions, lines and corners across the store.
| Setting | Type and default | What it does |
|---|---|---|
| Page width | Options: 1280px, 1440px, 1600px, Full width. Default: 1440px | The widest the page content gets on large screens. |
| Section numbering | Options: Off, 01 /, No. 01, § 1. Default: 01 / | Numbers section headings that have a label, in page order: 01, 02, 03. Headings with the Centered or Hidden layout are not numbered. |
| Image caption label | Options: Fig. 1, Figure 1, Hidden. Default: Fig. 1 | Labels image captions with their number, in page order. With Hidden, captions show only their text. |
| Line weight | Options: 1px, 2px. Default: 1px | Applies to structural lines such as heading rules, table headers and section dividers. |
| Corner radius | Options: 0px, 2px, 6px, 12px. Default: 2px | Applies to buttons, fields, cards and badges. |
Animations
Motion across the store.
| Setting | Type and default | What it does |
|---|---|---|
| Animations are always off for visitors who turn on reduced motion in their device settings. | ||
| Reveal sections on scroll | Checkbox, on by default | Content fades in as it enters the screen, and data bars grow once. |
| Fade between pages | Checkbox, off by default | Works in browsers that support view transitions. |
| Zoom images on hover | Checkbox, on by default | Images zoom in slightly when the pointer is over them. |
Images
How photos look across the store.
| Setting | Type and default | What it does |
|---|---|---|
| Photo treatment | Options: Natural, Harmonized. Default: Natural | Harmonized adds slight warmth and softer color so photos from different shoots look consistent. |
Goals
The collections that act as goals, such as Sleep or Energy. The goal list uses them in this order.
| Setting | Type and default | What it does |
|---|---|---|
| The goal list shows these collections in this order on the home page goal index, in search, on the 404 page and on empty cart, collection and search results pages. | ||
| Goal collections | Collections | A collection's marker uses its Accent color metafield, or the text color without one. Leave empty to list the store's collections that have products, up to 8. |
Product cards
Product cards in collections, search results, featured collections and recommendations.
| Setting | Type and default | What it does |
|---|---|---|
| Image ratio | Options: Natural; Square, 1:1; Portrait, 4:5; Tall, 3:4. Default: Square, 1:1 | The shape of product card images. |
| Show second image on hover | Checkbox, on by default | Shows the product's second image when the pointer is over a card. |
| Show formula number and goal | Checkbox, on by default | Read from the product's formula number and goal metafields. |
| Key ingredient rows | 0 to 3, default 1 | Key ingredients with dose and % Daily Value, from each product's supplement facts. Set to 0 to hide them. |
| Show rating | Checkbox, on by default | Uses the product rating metafield that most review apps fill in. |
| Show quick add | Checkbox, on by default | Adds a quick add button to product cards. Products with one variant go straight to the cart; others open a compact product form. |
| Image fit | Options: Fill, Fit. Default: Fill | Fit: show the whole product without cropping, on the image background. Fill: crop the image to the frame. |
| Show subscription price | Checkbox, on by default | Adds a line with the lowest subscription price under the one-time price for products that have selling plans. When off, those cards show a Subscribe and save badge. |
| Layout on mobile | Options: Automatic, Rows, Two columns. Default: Automatic | Automatic shows rows, the image beside the name and price, when any product in the grid has key ingredient rows, and two columns otherwise. |
| Quick add color scheme | Color scheme, default Scheme 2 | The color scheme of the quick add dialog. |
Cart
The cart drawer and the cart page.
| Setting | Type and default | What it does |
|---|---|---|
| Cart type | Options: Drawer, Page. Default: Drawer | Drawer opens the cart over the page after an add. Page goes to the cart page. |
| Show order note | Checkbox, on by default | Lets customers add a note to the order in the cart. |
| Show recommendations | Checkbox, on by default | Suggests products that pair with the first item in the cart. |
| Offer a subscription on one-time lines | Checkbox, on by default | Adds a button to lines bought one-time whose product has a selling plan. It names the saving and the price, and moves the line to the plan that fits how long the quantity lasts, else the first plan. |
| Free shipping progress | ||
| Show free shipping progress | Checkbox, off by default | Shows how much more a shopper needs to spend for free shipping. Turn it on only when your shipping rates include free shipping above the minimum below. |
| Free shipping minimum | Number | Order amount in your default currency, numbers only. Match the free shipping rate in your shipping settings; other currencies convert automatically. Leave empty to hide the bar. Shows when Theme settings > Cart > Show free shipping progress is on. |
| Subscriptions ship free | Checkbox, off by default | Turn on if your subscription app gives subscriptions free shipping. Shows when Theme settings > Cart > Show free shipping progress is on. |
Subscriptions
Text around subscription plans. The plans themselves come from your subscription app. When a variant or product has a Servings metafield, product pages and quick add say how long a delivery lasts, with the serving size from Supplement Facts, and say when a delivery runs out early or lasts longer than the time between deliveries.
| Setting | Type and default | What it does |
|---|---|---|
| Product pages and quick add show one-time purchase and your subscription app's plans, and how long a delivery lasts. Learn more | ||
| Subscription badge | Text | Shows on the first subscription option when customers choose between one-time and subscription. |
| Perks | Text, several lines | One per line. List only what your subscription app and shipping rates provide. |
| Subscription management link | Link | Where customers skip, change or cancel deliveries, usually your subscription app's customer portal. Leave blank if customers manage subscriptions from links in their emails. |
Search
The search dialog in the header, and the popular searches that the dialog and the search page show before shoppers type and when a search finds nothing.
| Setting | Type and default | What it does |
|---|---|---|
| Enable search suggestions | Checkbox, on by default | Shows matching products, collections, pages and articles as visitors type. |
| Show product prices | Checkbox, on by default | Shows prices in search suggestions. Shows when Theme settings > Search > Enable search suggestions is on. |
| Show product vendor | Checkbox, off by default | Shows the vendor in search suggestions. Shows when Theme settings > Search > Enable search suggestions is on. |
| Open search with the / key | Checkbox, off by default | Some browsers and speech tools use this key. |
| Popular links | Menu | Shown as chips before customers type and when a search finds nothing. Use a search URL such as /search?q=magnesium or any page. |
| Popular searches | Text | Shown before customers type and when a search finds nothing. Separate searches with commas. Shows when Theme settings > Search > Popular links is empty. |
Social media
Links to your profiles, shown as icons in the footer Brand block and, if turned on, the mobile menu.
| Setting | Type and default | What it does |
|---|---|---|
| Social media accounts | ||
| Add the full address of each profile. Fields left empty don't show an icon. | ||
| Text | The full address of your profile. When it is empty, the theme uses the matching link from your store's brand settings, if there is one. | |
| Text | The full address of your profile. When it is empty, the theme uses the matching link from your store's brand settings, if there is one. | |
| TikTok | Text | The full address of your profile. When it is empty, the theme uses the matching link from your store's brand settings, if there is one. |
| YouTube | Text | The full address of your profile. When it is empty, the theme uses the matching link from your store's brand settings, if there is one. |
| X | Text | The full address of your profile. When it is empty, the theme uses the matching link from your store's brand settings, if there is one. |
| Text | The full address of your profile. When it is empty, the theme uses the matching link from your store's brand settings, if there is one. | |
| Text | The full address of your profile. When it is empty, the theme uses the matching link from your store's brand settings, if there is one. | |
| Threads | Text | The full address of your profile. When it is empty, the theme uses the matching link from your store's brand settings, if there is one. |
| Snapchat | Text | The full address of your profile. When it is empty, the theme uses the matching link from your store's brand settings, if there is one. |
| Vimeo | Text | The full address of your profile. When it is empty, the theme uses the matching link from your store's brand settings, if there is one. |
| Tumblr | Text | The full address of your profile. When it is empty, the theme uses the matching link from your store's brand settings, if there is one. |
| Spotify | Text | The full address of your profile. When it is empty, the theme uses the matching link from your store's brand settings, if there is one. |
Compliance
A pointer to the product data setup, and the statement that claims marked with an asterisk point to.
| Setting | Type and default | What it does |
|---|---|---|
| Set each product's category to Vitamins & Supplements and fill its attributes, add disclosures, then create the theme's data definitions. Setup guide | ||
| Disclaimer | Formatted text | Shows on products with Supplement Facts data that have no Shopify disclosure of their own, where claims marked with an asterisk link to it. In the footer it shows only when the switch below is on. |
| Show in the footer | Checkbox, off by default | Shows the statement in small print in the footer on every page. Off on a new store, so the theme makes no regulatory statement for you. |
Currency
How prices show currencies.
| Setting | Type and default | What it does |
|---|---|---|
| Show currency codes | Checkbox, off by default | Adds codes such as USD to prices. Useful when you sell in several currencies that share a symbol. Cart and checkout prices always show currency codes. |
Theme editor
Notices that only you see, in the theme editor.
| Setting | Type and default | What it does |
|---|---|---|
| Show setup notices in the theme editor | Checkbox, on by default | Notices say what a section needs, such as product data or a collection. Customers never see them. |
Changes in Theme settings preview live in the editor. They reach shoppers when you click Save, and publish the theme if you are editing a copy.