> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/reference/theme-settings.md). # Theme settings Every setting under Theme settings, with its options and defaults. Open **Online Store › Themes › Customize**, then the **gear icon (Theme settings)** at the bottom of the left sidebar. Theme settings apply to the whole store. ## Logo and favicon | Setting | Type | Options | Default | Notes | | ------------------------------- | ------ | -------------------- | ------- | -------------------------- | | **Logo** | Image | | | | | **Logo width on large screens** | Slider | 60–300px, steps of 4 | 120px | | | **Logo width on small screens** | Slider | 48–200px, steps of 4 | 96px | | | **Favicon** | Image | | | 32 x 32px .png recommended | ## Colors | Setting | Type | Options | Default | Notes | | -------- | ------------- | ------- | ------- | ----- | | \*\*\*\* | Color schemes | | | | ### Status colors | Setting | Type | Options | Default | Notes | | --------------------------------- | ----- | ------- | ------- | ----- | | **In stock and success messages** | Color | | #1a7f37 | | | **Low stock messages** | Color | | #a05400 | | | **Sold out and error messages** | Color | | #c4320a | | ## Typography | Setting | Type | Options | Default | Notes | | -------------------------- | ------ | ------------------------------------------ | -------------- | ---------------------------------------------------------------------------------------------------------- | | **Heading font** | Font | | system\_ui\_n7 | | | **Heading weight** | Choice | Match heading font, Medium, Semibold, Bold | Semibold | Medium and semibold need a font that includes those weights. Other fonts use the closest available weight. | | **Heading size** | Slider | 80–130%, steps of 5 | 100% | | | **Heading case** | Choice | As typed, Uppercase | As typed | Applies to every heading, including product titles on cards. | | **Heading letter spacing** | Choice | Tight, Normal, Wide | Tight | Tight suits sans-serif fonts. Use Normal or Wide for serif, display or uppercase headings. | | **Body font** | Font | | system\_ui\_n4 | | | **Body text size** | Slider | 90–120%, steps of 5 | 100% | | ## Layout | Setting | Type | Options | Default | Notes | | -------------------------- | ------ | ------------------------ | ------- | ----- | | **Page width** | Slider | 1000–1600px, steps of 20 | 1280px | | | **Space between sections** | Slider | 50–150%, steps of 10 | 100% | | | **Corner roundness** | Slider | 0–150%, steps of 10 | 100% | | ## Buttons | Setting | Type | Options | Default | Notes | | ---------------- | ------ | -------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------- | | **Button shape** | Choice | Pill, Rounded, Square | Pill | | | **Hover effect** | Choice | Arrow reveal, Simple shade | Arrow reveal | Arrow reveal narrows the button and slides in a round arrow. It is skipped for visitors who reduce motion. | | **Text case** | Choice | As typed, Uppercase | As typed | | ## Animations | Setting | Type | Options | Default | Notes | | ----------------------------- | -------- | ------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Reveal sections on scroll** | On / off | | On | | | **Zoom media on hover** | On / off | | On | | | **Fade between pages** | On / off | | On | Uses the browser's View Transitions where supported. The header stays in place. | | **Show a page loader** | On / off | | Off | Covers the page with your logo and a small loading bar, then fades away once the page is ready. Following a link fades it back in. Content appears a moment later, which can lower page speed scores. | > Animations are always turned off for visitors who ask their device to reduce motion, and while you edit in the theme editor. ## Product cards | Setting | Type | Options | Default | Notes | | -------------------------------------- | -------- | ------------------------------------------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------ | | **Image shape** | Choice | Square, Portrait, Landscape, Match first product image | Square | | | **Image fit** | Choice | Fill frame, Show whole image | Fill frame | | | **Show second image on hover** | On / off | | On | | | **Product tag for New badge** | Text | | new | Products with this tag show a New badge. | | **Add to bag / Choose options button** | Choice | Show on hover (large screens), Always show | Show on hover (large screens) | Touch screens and small screens always show it. Turn it off per card in the Product media block. | | **Sale badge** | Choice | Sale, Percentage off, Amount saved | Sale | Percentage and amount fall back to "Sale" when variants have different prices. | ## Filters > Filters come from the Search and Discovery app. These settings control how variant filters look on collection and search pages. | Setting | Type | Options | Default | Notes | | ------------------------- | ------ | ------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | **Color filter names** | Text | | Color, Colour | Comma-separated filter names shown as color swatches, for example Color, Colour. Filters set to Swatch in Search and Discovery always show swatches. | | **Other variant filters** | Choice | Buttons, Checkboxes | Buttons | For options such as Size or Material. | ## Swatches > Swatches show on product pages, product cards and color filters. Options with Shopify color or image swatches always show them. | Setting | Type | Options | Default | Notes | | ------------------------------------------------ | -------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Show swatches for options named** | Text | | Color, Colour | Comma-separated, for example Color, Colour. These options show swatches even without Shopify swatches. | | **Shape** | Choice | Circle, Rounded square | Circle | | | **Swatch colors** | Text (several lines) | |

Clay: #c27b56
Sage: #9caf88
Cream: #efe6d2
Navy: #1f2a44
Graphite: #4a4b4f
St…

| For colors without a Shopify swatch, one per line as Name: color, for example Clay: #c27b56. Common color words such as navy or sage are recognized automatically. Also used by color filters. | | **Use the variant image when no color is found** | On / off | | On | | ## Cart | Setting | Type | Options | Default | Notes | | ---------------------------------------- | -------- | -------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Cart type** | Choice | Drawer, Popup notification, Page | Drawer | Drawer opens the bag beside the page. Popup notification confirms the item and stays on the page. Page goes to the cart. | | **Show cart note** | On / off | | On | | | **Free delivery progress bar threshold** | Number | | | In your store currency. Leave empty to hide the bar. Shown only when shoppers check out in your store currency. The bar is informational; set up the actual free shipping rate in Settings > Shipping and delivery. | ### Terms before checkout | Setting | Type | Options | Default | Notes | | ---------------------------------- | -------------------------- | ------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Ask shoppers to agree to terms** | On / off | | Off | Checkout from the cart waits until the box is ticked. Accelerated checkout buttons can't be gated, so hide them in the cart drawer section if you need this for every order. | | **Agreement text** | Text (bold, italic, links) | | I agree to the terms of service. | | ## Navigation | Setting | Type | Options | Default | Notes | | ---------------------------------------- | -------- | ------- | ------- | ------------------------------------------------------------------------------------------------------- | | **Show back to top button** | On / off | | On | Appears after scrolling down two screens. | | **Show bottom navigation bar on mobile** | On / off | | On | Home, Shop, Account and Bag. Appears when visitors scroll up on phones and hides when they scroll down. | ## Product compare | Setting | Type | Options | Default | Notes | | -------------------------- | -------- | ------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- | | **Enable product compare** | On / off | | On | Shoppers can tick up to four products and compare them side by side. Assign the Compare template to a page to show the comparison. | | **Compare page** | Page | | | | ### Specification rows > Show product metafields as comparison rows. Enter each metafield as namespace.key, for example custom.material. Single-line text, number, boolean and list metafields are supported. | Setting | Type | Options | Default | Notes | | ------------------- | ---- | ------- | --------------- | ----- | | **Row 1 label** | Text | | Material | | | **Row 1 metafield** | Text | | custom.material | | | **Row 2 label** | Text | | | | | **Row 2 metafield** | Text | | | | | **Row 3 label** | Text | | | | | **Row 3 metafield** | Text | | | | | **Row 4 label** | Text | | | | | **Row 4 metafield** | Text | | | | ## Social media | Setting | Type | Options | Default | Notes | | --------------- | ---- | ------- | ------- | ----- | | **Instagram** | Text | | | | | **Facebook** | Text | | | | | **TikTok** | Text | | | | | **YouTube** | Text | | | | | **Pinterest** | Text | | | | | **X (Twitter)** | Text | | | | | **Threads** | Text | | | | | **LinkedIn** | Text | | | | | **Vimeo** | Text | | | | ## Currency format | Setting | Type | Options | Default | Notes | | ----------------------- | -------- | ------- | ------- | ----- | | **Show currency codes** | On / off | | Off | | > Cart and checkout prices always show currency codes.