Theme settings
Theme settings apply to your whole store. To find them, open the theme editor and select Theme settings. Each heading below matches one group in the editor, and the settings appear in the same order.
Some settings offer a list of choices. The Type column lists the choices, and the Default column shows the one used first.
Logo and favicon
| Setting | Type | Default | What it does |
|---|---|---|---|
| Logo | Image | None | The logo image that shows in the header. |
| Logo width | Slider, 40 to 300 px | 120 px | The width of the logo in the header. |
| Favicon | Image | None | Displayed at 32 x 32px. |
Colors
| Setting | Type | Default | What it does |
|---|---|---|---|
| Color schemes | Color schemes (group of color roles) | Set per color role | The colors for each color scheme: background, text, surface, surface text, accent, border, button and button text. A section uses one scheme. |
| Highlighter | |||
| Highlighter color | Color | #D8F23C | The background color of highlighted text. |
| Highlighted text | Color | #14171A | The text color of highlighted text. |
| Badges | |||
| Sale badge background | Color | #14171A | The background color of the sale badge on products. |
| Sale badge text | Color | #FFFFFF | The text color of the sale badge on products. |
| Sold out badge background | Color | #5B5D5E | The background color of the sold out badge on products. |
| Sold out badge text | Color | #FFFFFF | The text color of the sold out badge on products. |
| Status messages | |||
| Success message text | Color | #1B7A3E | The text color of success messages. |
| Error message text | Color | #C2281C | The text color of error messages. |
| Low stock text | Color | #8A5A00 | The text color of low stock messages. |
Typography
| Setting | Type | Default | What it does |
|---|---|---|---|
| Headings | |||
| Font | Font | IBM Plex Sans Condensed, weight 600 | The font used for headings. |
| Size scale | Slider, 80 to 140% | 100% | The size of headings, as a share of the default size. |
| Letter case | List: Default, Uppercase | Default | Whether headings show in normal case or in all capitals. |
| Body | |||
| Font | Font | IBM Plex Sans, weight 400 | The font used for body text. |
| Size scale | Slider, 85 to 125% | 100% | The size of body text, as a share of the default size. |
| Codes and figures | |||
| Font | Font | IBM Plex Mono, weight 400 | Used for product codes, specifications, prices in tables and counts. |
Layout
| Setting | Type | Default | What it does |
|---|---|---|---|
| Page width | List: Narrow, Medium, Wide | Medium | The widest the page content can grow on large screens. |
| Page margin | Slider, 12 to 64 px | 24 px | The smallest space on each side of the page content. |
| Grid spacing | Slider, 0 to 40 px | 24 px | The space between items in a grid, such as product cards. |
Corners and borders
| Setting | Type | Default | What it does |
|---|---|---|---|
| Button corner radius | Slider, 0 to 40 px | 2 px | How round the corners of buttons are. 0 gives square corners. |
| Input corner radius | Slider, 0 to 24 px | 2 px | How round the corners of form fields are. |
| Card corner radius | Slider, 0 to 32 px | 0 px | How round the corners of product cards and other cards are. |
| Image corner radius | Slider, 0 to 32 px | 0 px | How round the corners of images and video are. |
| Border thickness | Slider, 1 to 3 px | 1 px | The thickness of lines and borders, in pixels. |
Product cards
| Setting | Type | Default | What it does |
|---|---|---|---|
| Image ratio | List: Adapt to image, Square, Portrait, Landscape | Square | The shape of product card images. Adapt keeps the shape of each image. |
| Image fit | List: Fit, Fill | Fit | Whether a product image fits inside its frame or fills the frame and may crop. |
| Show second image on hover | On or off (checkbox) | Off | Shows a second product image when a shopper points at a product card. |
| Show vendor | On or off (checkbox) | On | Shows the brand or vendor name on product cards. |
| Show code | On or off (checkbox) | On | Shows the SKU on product cards. |
| Show product rating | On or off (checkbox) | Off | To show ratings, add a product review app. |
| Show swatches | On or off (checkbox) | On | Shows color or option swatches on product cards. |
| Show quick add | On or off (checkbox) | On | Shows a quick add button on product cards. |
| Show badges | On or off (checkbox) | On | Shows badges, such as sale or sold out, on product cards. |
| Show key specifications | On or off (checkbox) | On | Up to three values from the key specifications metafield. |
| Show stock | On or off (checkbox) | On | Shows the stock status on product cards. |
| Show quantity selector | On or off (checkbox) | On | Shows a quantity field on product cards. |
| Show compare | On or off (checkbox) | On | Shows a compare option on product cards. |
Prices
| Setting | Type | Default | What it does |
|---|---|---|---|
| Show currency codes | On or off (checkbox) | Off | Shows the currency code, such as USD, next to prices. |
| Show tax and shipping note | On or off (checkbox) | On | Shows a short note about tax next to prices. |
| Tax display | List: One price, Both prices, Customer switch | One price | Show one price, both prices, or let customers switch between prices with and without tax. |
| Tax rate | Slider, 0 to 30% | 20% | Used only to calculate the second price for display. Checkout always uses your tax settings. |
Stock
| Setting | Type | Default | What it does |
|---|---|---|---|
| Low stock threshold | Slider, 1 to 20 | 5 | Stock at or below this number shows as low stock. |
| Show stock count | On or off (checkbox) | On | Shows the exact stock count, not only the stock status. |
| Show branch selector | On or off (checkbox) | On | Lets customers save a preferred pickup location. |
Trade features
| Setting | Type | Default | What it does |
|---|---|---|---|
| Show product compare | On or off (checkbox) | On | Lets shoppers add products to a comparison list. |
| Quick order page | Page | None | Select a page that uses the quick order template. |
| Show purchase order number field | On or off (checkbox) | Off | Shows a field for a purchase order (PO) number for trade customers. |
Product data
Enter each metafield as namespace.key. Leave a field blank to turn the feature off.
| Setting | Type | Default | What it does |
|---|---|---|---|
| Specifications metafield | Short text | custom.specs | The product metafield, as namespace.key, that holds the specification table. |
| Key specifications metafield | Short text | custom.key_specs | The product metafield, as namespace.key, that holds the key specifications. |
| Manufacturer part number metafield | Short text | custom.mpn | The product metafield, as namespace.key, that holds the manufacturer part number (MPN). |
| Downloads metafield | Short text | custom.downloads | The product metafield, as namespace.key, that holds downloadable files. |
| Package contents metafield | Short text | custom.in_the_box | The product metafield, as namespace.key, that lists what is in the box. |
| Accessories metafield | Short text | custom.accessories | The product metafield, as namespace.key, that lists related accessories. |
| Lead time metafield | Short text | custom.lead_time | The product metafield, as namespace.key, that holds the lead time. |
| Product notice metafield | Short text | custom.notice | The product metafield, as namespace.key, that holds a notice for the product page. |
Cart
| Setting | Type | Default | What it does |
|---|---|---|---|
| Cart type | List: Drawer, Page | Drawer | Whether the cart opens as a drawer over the page or as its own page. |
| Show order note | On or off (checkbox) | On | Shows a note field in the cart. |
| Show vendor | On or off (checkbox) | Off | Shows the vendor name for each item in the cart. |
Search
| Setting | Type | Default | What it does |
|---|---|---|---|
| Show search suggestions | On or off (checkbox) | On | Shows suggestions while shoppers type in the search box. |
| Show vendor | On or off (checkbox) | Off | Shows the vendor name in search suggestions. |
| Show price | On or off (checkbox) | On | Shows the price in search suggestions. |
Social media
Add links to your social media accounts to show icons in the footer.
| Setting | Type | Default | What it does |
|---|---|---|---|
| Short text | Empty | The link to your Facebook page. Leave empty to hide the icon. | |
| Short text | Empty | The link to your Instagram profile. Leave empty to hide the icon. | |
| YouTube | Short text | Empty | The link to your YouTube channel. Leave empty to hide the icon. |
| TikTok | Short text | Empty | The link to your TikTok profile. Leave empty to hide the icon. |
| X (Twitter) | Short text | Empty | The link to your X (Twitter) profile. Leave empty to hide the icon. |
| Short text | Empty | The link to your Pinterest profile. Leave empty to hide the icon. | |
| Short text | Empty | The link to your LinkedIn page. Leave empty to hide the icon. | |
| Short text | Empty | The link to your WhatsApp chat. Leave empty to hide the icon. |