Theme settings
Sur cette page
Theme settings apply to the whole store: colors, fonts, shapes, product cards, the cart and more. This page explains what each group changes and how to use it, in the order the editor shows them. For every setting with its choices and default, see the theme settings reference.
To open them, go to Online Store > Themes > Customize and choose Theme settings.
Logo and favicon
Logo replaces the store name in the header, on the password page and on the gift card page. Logo width sets its width on desktop and Logo width on mobile on screens under 990 px. The header never shows it taller than 48 px, so a square or tall logo comes out narrower. Use an SVG or a transparent PNG about three times as wide as the width you set, so it stays sharp.
Logo for transparent header is used only when the Header section's Enable transparency over the first section is on. Over a slideshow, banner or video the header's text turns white, so add a white or light version of your logo here. Without it, the regular logo shows over the photo.
Favicon image is the small icon in the browser tab. Use a square image.
Colors
What a color scheme is
A color scheme is a set of twelve colors that work together: a background, the text on it, buttons, borders and an accent. You don't color sections one element at a time. You give a section a scheme, and everything inside it takes that scheme's colors.
Each preset has six schemes, and each number plays the same part in every preset:
| Scheme | Part | Used by default for |
|---|---|---|
| Scheme 1 | The page: a soft, light background | The page and most sections |
| Scheme 2 | White | The header, menus, drawers, dialogs and badges |
| Scheme 3 | Dark | The footer |
| Scheme 4 | Your brand color as a background | The announcement bar and the countdown card |
| Scheme 5 | A tint, or a second brand color | The newsletter card |
| Scheme 6 | A light tint | The Columns section |
Click a scheme to edit its colors. You can also add a scheme of your own.
The colors in a scheme
| Color | Where it shows |
|---|---|
| Background | The background of the section. |
| Background gradient | Replaces the background color when set. |
| Card surface | Cards that sit on the background, such as the product details, collapsible rows, forms and the filter panel. Also the fill of text fields. |
| Soft fill | Chips, the frame behind a photo, the hover state of icon buttons. |
| Text | Headings, text and icons. Also the fill of a selected option or filter. |
| Muted text | Secondary text: the text under a heading, the line above a product title, the crossed-out price, field labels. |
| Accent | The sale price, the sale badge, discounts in the cart, the free shipping bar, star ratings, the low stock message and the cart count. |
| Control border | The outline of text fields, dropdowns, checkboxes, option pills and the quantity selector. |
| Hairline | Thin lines between rows in cards and tables, and around outlined chips. |
| Button | The fill of solid buttons. |
| Button label | The text on solid buttons. |
| Outline button | The text and border of outline buttons. |
Two things are not colored by a scheme. Text on photos (slideshow, banners, promotion tiles) is always white over a dark overlay, and the quick add button on product photos is always white.
When you set a Background gradient, keep Background close to the gradient's main color. The theme still uses Background for small details, such as the text of a selected option.
Which scheme is used where
Under Theme defaults, four settings choose the scheme for things that are not sections:
- Page color scheme: the page background, and any content that is not inside a section with its own scheme. The password page and the gift card page use it too.
- Drawer and dialog color scheme: the cart drawer and the cart notification, the filter drawer, the quick add options, the size chart and the pickup dialog.
- Sale badge color scheme: the sale badge and the new badge.
- Sold out badge color scheme: the sold out badge.
The header has its own two settings, in the Header section under Colors: Color scheme for the bar and Menu color scheme for the menu panels, the menu on phones, the search panel and the country and language dialog.
How a section picks its scheme
Most sections have a Color scheme setting. Choose a scheme there and the section becomes a band in those colors. Countdown and Newsletter also have a Card color scheme for their card.
When two sections in a row use the same scheme, the theme removes the space at the top of the second one, so they read as one area with a single gap between them. Give a section a different scheme when you want it to stand apart.
The color palette
The Color palette is a list of your named brand colors. It colors nothing by itself: it is the set of swatches the editor offers whenever you edit a color, so you can pick a brand color instead of typing its code. Put your brand colors there first, then build your schemes from them.
Keep text readable
Text must stand out from what is behind it. As a rule, text needs a contrast ratio of at least 4.5 to 1 with its background, and borders of fields need 3 to 1. The schemes of every preset meet both. When you change a scheme, check these pairs with a contrast checker:
- Text, Muted text and Accent against Background, Card surface and Soft fill. All three sit on all three.
- Button label against Button.
- Outline button against Background.
- Control border against Background and Card surface.
Muted text and Accent fail first, because they are closer to the background than Text. If you change Background, change Card surface, Soft fill and Hairline with it: they are tones of the same color.
Typography
Heading font is used for headings and titles, in the weight you pick. Body font is used for everything else: text, menus, buttons, prices. Its bold and italic styles load automatically. One family for both keeps pages light.
Font size scale makes all text larger or smaller together: headings and body text, and also buttons, chips, menu links, product card titles and prices. Heading letter spacing set to Tight pulls the letters of headings closer, which suits a sans serif at large sizes. Choose Normal for a serif or a wide font.
Under Fonts for other scripts, Arabic font, Hebrew font and Japanese font replace your heading, body and accent fonts for customers who browse in those languages. They load only for those customers. See Languages and markets.
The heading accent
Every heading field with the note "Italic text uses the accent style" can mark one word or phrase as its accent. It is the theme's signature: a heading in your heading font with one word in a contrasting italic.
- In the heading field, select the words.
- Click the italic button.
On the storefront those words show in the Accent font, in the exact style you chose in the font picker. Choose an italic style there, or the accent will not be italic. Block quotes in pages and blog posts use the accent font too.
Keep it to one or two words per heading. In Arabic, Hebrew, Japanese and Chinese, which have no italics, the accent words keep the heading's font and take the scheme's Accent color instead. On photos they stay white.
Layout
Page width sets how wide content can grow on large screens: 1280, 1480 or 1680 px. Wide suits large catalogs with five products in a row. Narrow suits small catalogs and long text.
Page margin on desktop is the space at each side of the page, Space between sections on desktop the space above and below each section, and Grid gap the space between cards in grids and carousels. All three shrink by themselves on smaller screens, so you set the desktop value only. Each section's Section spacing setting then chooses the full space, half of it or none.
Shape and surfaces
Corner radius rounds photos, cards, banners and drawers. Small is the crispest and Large the softest. No choice makes corners square: rounded frames are part of the theme's design.
Image overlay strength darkens photos behind text in the slideshow, banners, the video hero and promotion tiles. That text is always white, so lower the overlay only if your photos are dark where the text sits.
Header inset is the gap between the floating header and the top of the screen.
All Shape and surfaces settings
Buttons
Shape is Pill or Rounded. Rounded buttons take the smallest radius of your Corner radius choice in Shape and surfaces. Chips and the quick add button stay pills. Border thickness shows most on outline buttons.
Inputs
Corner radius and Border thickness in this group style text fields and dropdowns, such as the contact form, the comment form on blog posts and the dropdowns for sorting and for variants. The email signup field and the quantity selector stay pill-shaped.
Product cards
These settings shape every product card in the store: collection pages, search, carousels and recommendations.
- Image ratio gives all product photos one shape, so rows line up: Portrait is 4:5, Square 1:1 and Landscape 4:3. Natural keeps each photo's own shape, which suits a catalog whose photos already match. Image fit set to Fill crops the photo to the shape; Fit shows the whole photo with the scheme's soft fill around it.
- Show second image on hover swaps to the product's second photo under the pointer.
- Text above the title shows the product type, the vendor or nothing. Choose Vendor when you sell several brands.
- Show color dots shows up to four color swatches on the photo, and a count of the rest. Dots need swatch colors or images on the values of the product's color option, which you add on the product in your Shopify admin; without them the card shows the number of colors.
- Show quick add puts a plus button on every photo. A product with one variant goes straight into the cart; one with options opens them inside the card or, for long lists and for products sold only by subscription, in a window. A sold-out product shows "Sold out" in its place.
See Product page for how cards and quick add behave, and all Product cards settings.
Badges
A product shows one badge at a time: sold out first, then sale, then new.
- Show sale badge applies when a product's compare-at price is higher than its price. Sale badge text chooses between the word "Sale", the percentage saved and the amount saved.
- Show sold out badge applies on the product page, and on product cards when quick add is off. With quick add on, a card says "Sold out" in place of the quick add button instead.
- Show new badge applies for the number of days in Days a product counts as new, counted from the day the product was published.
Badge colors come from the two badge color schemes in Colors.
Animations
Motion in the theme is small and quick: drawers slide in, product photos swap and grow slightly under the pointer, slideshows and the announcement bar change by themselves with a pause button. This group has one setting, Reveal sections on scroll, on by default: each section glides up into place as it enters the screen, in browsers that support scroll-driven animations.
Customers whose device is set to reduce motion get a still page whatever you choose here: no reveal, instant transitions, and slideshows and background video that don't start by themselves.
Product
Show low inventory message shows "Only 3 left" on the product page when the selected variant's stock is at or below the Low inventory threshold. The number is your real inventory, so the product must have its inventory tracked by Shopify, and the product page needs the Inventory status block. Set the threshold to the stock level at which a customer should hurry, not higher.
Enable sticky add to cart bar shows a compact bar with the product's photo, price and an add to cart button once the buy buttons scroll out of view.
See Product page and all Product settings.
Cart
Cart type decides what happens after a product is added:
- Drawer opens the cart at the side of the screen.
- Popup notification shows a small panel that names the product, with links to the cart and to checkout.
- Page takes the customer to the cart page.
The other settings add to the cart drawer and the cart page: Show order note, Show free shipping goal with its Free shipping threshold, Show product suggestions, a Gift wrap product that customers add with a checkbox, and Ask customers to agree to terms with its Terms page. The goal is off until you turn it on. Enter the threshold as a plain number in your store's currency. The goal is a message only: create the matching rate in your shipping settings.
See Cart and all Cart settings.
Social media
Paste the full address of each account, starting with https://. The footer shows an icon for
every account you fill in, when its Show social media icons setting is on. The theme also gives
these addresses to search engines as your store's profiles. Leave a field empty to hide its icon.
Search behavior
Enable search suggestions shows results in the search panel while the customer types: suggested searches, products, collections, pages and blog posts. With it off, the panel still opens and pressing Enter leads to the search results page. Show vendor and Show price add those lines to the suggested products.
Popular searches menu takes a menu from Content > Menus. Its links show as chips in the search panel before the customer types, on a search with no results and on the page for links that are not found. Use four to six short links to your main collections.
See Collection pages and search and all Search behavior settings.
Currency format
Show currency codes adds the currency code to product prices across the store, for example "$40.00 USD" instead of "$40.00". Turn it on when you sell in currencies that share a symbol, such as US, Canadian and Australian dollars. Leave it off for a shorter price when you sell in one currency. The cart's total always shows the code, whatever you choose here, because it is the amount the customer is about to pay. See Languages and markets.