Theme settings#

Theme settings apply to the whole store. Open them in the theme editor with the gear icon (Theme settings) at the bottom of the left sidebar.

Logo and favicon#

Logo: a PNG or SVG with a transparent background, about 600 x 200px.
Logo on dark backgrounds: a light version, used on dark color schemes and over a transparent header.
Logo width, and Mobile layout > Logo width for phones: the widest the logo can be.
Favicon: the small icon in the browser tab, 32 x 32px.

Colors#

Color schemes set the background, text, buttons and borders of each section. Click a scheme to edit it, or Add scheme for a new one. Every section has a Color scheme setting to pick which one it uses.

Status colors are shared by all schemes: the sale price, in stock, low stock and warnings, errors and review stars. A status color that would be too close to a scheme's background is adjusted automatically so it stays readable.

Typography#

Fonts: one for Headings, one for Body text, and one for Data and labels (SKUs, specifications, small labels). A monospaced font keeps numbers lined up.
Headings: size, weight, letter spacing, line height and text case.
Product titles, Prices, Buttons and Labels: choose which of the three fonts each uses, and its case.
Mobile layout: separate heading, body and product title sizes for phones.

Buttons#

Shape (pill, rounded or square), Border thickness, Size, and the Hover effect: Color change or Sweep, where the hover color fills the button behind a thin needle.

Layout#

Page width, Page margin, and the Corner radius of cards, panels and pictures.

Product cards#

How products look in collections, search and product lists.

Style: Panel (on its own background with a border) or Open (the picture and text sit on the section).
Image behavior: show the second photo on hover, an image slider (arrows on a computer, swipe on phones), zoom on hover, or none.
Image background: From the photos gives each card the color of its photo's plain background, so studio photos fill the card edge to edge.
Product information: vendor, SKU, Title lines (All by default, so titles show in full; or one or two lines), a short description, option values (such as sizes), product rating and stock status.
Swatches: color swatches on the card. Pointing at a swatch shows that color's first picture. Swatch action > Change the image switches the photo, price and link to that color; Open the product goes to the product page.
Quick add: Off, Add button (opens quick shop for products with options), Choose options on the card, or Sizes on hover. With Choose options on the card, color swatches always choose the color on the card, so Swatch action is hidden. Choosing a color updates the price, compare-at price, unit price, stock line and quick shop.
Hover picture: with Image behavior > Show second image on hover, the hover picture is the chosen color's second picture. For a color photographed once, it is the next picture in the gallery that isn't another color's own. See FAQ.
Mobile layout: quick add, swatches and short description on phones, and Use compact cards.

Product labels#

Small labels on product cards and the product page:

Sale (as Sale, amount saved or percent saved), Sold out, Pre-order and Low stock.
New: shows for the number of days you choose after a product is published.
Primary, Secondary and Accent tag label: a text shown on products with a tag you choose, each with its own color.
Labels from product tags: any tag that starts with label: becomes a label. Tag a product label:Track day and it shows Track day.
Label text: the text color on labels with a colored background. Leave it empty to use dark or white text, whichever reads better.
Layout: Position on the photo, Style (Stamp, Hang tag, Pill, Race plate, Checker, Timing or Tape) and Maximum per product.

Variant picker#

One rule for the whole store: the product page, quick shop, product cards and cart all show each option the same way.

Type option names, separated by commas, into Swatch options (for example Color), Button options (for example Size) or Dropdown options. Other options sets the rest.
Values before a dropdown: button options with more values than this become a dropdown.
Swatches: shape, size, and whether a swatch shows the color or the product's own variant image.
Custom colors: for color names without a Shopify swatch, one per line, for example Race red: #C8102E.
Buttons > Shape: pill, or Size tag, which looks like the label sewn into gear.
Availability: how sold-out and unavailable combinations are marked, and whether picking one switches the other options to an available variant.

How do I set color swatches?#

The best way is Shopify's own: open the product, edit the Color option, and pick a swatch color or image for each value (this uses the Color category metafield). Values without a Shopify swatch use Custom colors.

Currency format#

Show currency codes writes prices as $549.00 USD, useful when you sell in several currencies.

Cart#

Cart type: Drawer (slides in) or Page.
Cart count: how the number of items shows, in the header, the cart drawer and the cart page together: Counter, Badge, Pit board, Number plate, Dot, Number or None. The header's Cart block can set another style for phones.

The settings below are for the cart drawer. The cart page is built from blocks in its own section (see Sections). Quick notes and Free shipping threshold are shared by both.

Show payment icons and Show order notes. Quick notes adds one-tap notes, one per line (for example Gift wrap or Deliver to the workshop).
Show discount code field: shoppers add and remove discount codes in the drawer. A code that doesn't apply says so.
Show terms checkbox and Terms checkbox text: shoppers tick it before they can check out. While it is on, accelerated checkout buttons (Shop Pay, Apple Pay) hide, because they skip the checkbox.
Free shipping threshold: the amount for free shipping, for example 400. A bar in the cart shows how far the shopper is from it.

How do I set the free shipping amount for other currencies?#

Add each currency's code and amount, separated by commas: 400, EUR:380, GBP:340. The first amount is your store currency. Currencies without an amount don't show the bar.

Search behavior#

Enable search suggestions shows products, collections and pages while the shopper types. Products can be found by name, vendor, SKU or barcode. Choose whether suggestions show the vendor and price.

Filters#

Filters are created in the Search & Discovery app from Shopify. These settings control how they look:

Layout: a side rail or a drawer, at the start or end.
Color filters as swatches, Size filters as size tags.
Availability filter: the usual In stock / Out of stock, or a single In stock only switch.
Filter sizes and colors by stock: picking a size or color in the filters also turns on In stock, so shoppers see only products they can buy in that size or color.

Animations#

Enable animations: the theme's motion on or off for every shopper.
Drawer animation: how the menu, cart, search and other drawers open: Door swing, Glide and settle or Roller door.
Show light effects: the zip and scan lines in the product slideshow.
Use the device's reduced motion setting: when on, shoppers who ask their device for less motion see none.

Share image is used when a page without its own image is shared (1200 x 628px). Add your account links under Accounts; the header and footer show them as icons.