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 logo width: 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: a plain color change or Throttle sweep, where the hover color opens across the button behind a brass 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 carousel, 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, a short description, option values (such as sizes), product rating and stock status.
Swatches: color swatches on the card. Swatch action > Change the image switches the photo, price and link to that color.
Quick add: an Add button (opens quick shop for products with options), all options on the card, or sizes on hover.
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.
Custom label (up to three): a text shown on products with a tag you choose.
Labels from product tags: any tag that starts with label: becomes a label. Tag a product label:Track day and it shows Track day.
Layout: position on the photo, style (stamp, hang tag or pill) and the most labels 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.
Use a dropdown after: 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: a drawer that slides in, or the cart page.
Show payment icons and Enable order notes. Quick notes adds one-tap notes, one per line (for example Gift wrap or Deliver to the workshop).
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.
Show only items in stock when a size or color is picked: shoppers who filter by size see only products they can buy in that size.

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.
Follow 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.