Home Theme Settings

Theme Settings

• 9 articles

Buttons

Buttons A Button is a block you add inside a section to send shoppers somewhere: a collection, a product, or any page. Each button you place has its own settings. The five button styles on a light color scheme and a dark color scheme The primary styles are built to read on light backgrounds. The secondary styles are tuned for dark or over-image backgrounds: a secondary outline can be nearly invisible on a light section and only reads well on a dark one. Match the style to the section's color scheme. Add a button 1. In the theme editor, select the section you want the button in. 2. Click Add block and open the Basic group. 3. Choose Button. Settings - Label: the button text. The default is "Shop now". - Link: where the button goes. With no link it renders as a plain button with no action. - Style: the look of the button. - Primary: the solid, high-emphasis button. - Secondary: a lower-emphasis solid button. - Primary outline and Secondary outline: outlined versions of each. - Link: text with no button shape, for an inline call to action. - Size: Small, Medium, or Large. Hidden when Style is Link. - Show arrow: adds an arrow after the label that nudges forward on hover. Desktop size and Mobile size - Width: how the button is sized. Fit hugs the label, Percent sets a share of the space, and Pixels sets a fixed width. Percent and Pixels add a Custom width control. The button also has Margin controls (top and bottom) to space it from the blocks around it. Button label casing The casing of every button label is set once for the whole store, under Theme settings > Buttons. - Text transform: None shows labels as typed, Uppercase renders them in all capitals (the default), Lowercase in all lowercase, and Capitalize with the first letter of each word in capitals. It changes the display only, so you can switch casing at any time without retyping. Tips - Use one Primary button per section as the main action. Extra primary buttons compete and dilute the call to action. Reach for Secondary, an outline, or Link style for the rest. - For two buttons side by side, put them in a Group set to a horizontal direction. See Sections, blocks, and groups.

Last updated on Jun 20, 2026

Colors and color schemes

Colors and color schemes The Colors panel sets the color palette for your whole store. It lives under Theme settings in the theme editor. Here you build color schemes (named sets of colors) and set one store-wide Surface color. Each section then picks one of your schemes, so you control the look in one place and reuse it everywhere. How color schemes work A color scheme is a saved group of colors with a name. You can keep several schemes (for example a light one and a dark one) and switch a section from one to another without re-picking individual colors. Change a color inside a scheme once, and every section using that scheme updates together. Open the Colors panel 1. In the theme editor, click Theme settings (the gear icon in the left sidebar). 2. Click Colors. Edit a color scheme Each scheme holds the colors below. Click a swatch to set a value. - Background: the fill color behind a section's content. Supports transparency. - Text: the color for headings and body copy on that background. Supports transparency. - Accent: the link and highlight color within the scheme. - Overlay accent: the accent color used over images and dark overlays, where the standard Accent would not read well. - Separator: the color of dividers, borders, and hairlines. - Overlay text: the text color shown over images and dark overlay panels. - Overlay background: the dark panel color placed behind text that sits over an image, so the text stays legible. - Primary button background: the fill color of primary buttons. - Primary button text: the label color on primary buttons. - Secondary button background: the fill color of secondary (outline style) buttons. - Secondary button text: the label color and border color on secondary buttons. Set these once per scheme. Reign maps them to the right roles across the store, so text, background, links, icons, and both button styles all follow the values above. Assign a scheme to a section The Colors panel defines the schemes. You choose which scheme a given section or block uses with its Color scheme setting, inside that section. For where that picker sits and how it behaves on blocks, see Common section settings. Because the assignment lives on the section, two sections on the same page can use different schemes (for example a light scheme for one band and a dark scheme for the next). Surface Below the schemes is one global color. - Surface: the dark glass behind the header and product overlays. This is a single store-wide value, not part of a scheme. It tints the header bar, dropdown menus, and the overlay chips on product cards. Tips - Keep at least one light scheme and one dark scheme. Sections that place text over an image rely on a scheme with a light Overlay text so the text stays readable on the photo. - Background and Text accept transparency. Use it only when a section is meant to show what is behind it. For a normal solid band, keep them opaque. - Surface is separate from your schemes. Editing a scheme will not change the header glass. Adjust Surface to retint the header and product overlays.

Last updated on Jun 24, 2026

Cart settings

Cart settings The Cart panel controls how shoppers review their cart and move to checkout across your whole store: whether the cart opens as a drawer or a full page, plus the extras shown inside it. It lives under Theme settings in the theme editor, so the choices here apply everywhere the cart appears. Open the panel 1. In the theme editor, click Theme settings in the left sidebar. 2. Click Cart. 3. Change the settings below. Your changes preview on the right. 4. Click Save. Cart type Cart type sets how the cart opens when a shopper adds a product. Drawer slides the cart in over the current page so shoppers stay where they are. Page sends them to the full cart page instead. The Drawer behavior settings further down only take effect when this is set to Drawer. Free shipping bar Show free shipping bar turns on a progress bar that tells shoppers how much more they need to spend to qualify for free shipping. Free shipping threshold sets the order amount that unlocks free shipping. Enter the number in your store's main currency, without a currency code. To set different amounts per market, use the Translate & Adapt app. This field appears only when Show free shipping bar is on. The bar reflects the threshold you type here. It does not create the shipping rate itself. Set up the matching free shipping rate in your Shopify shipping settings so the offer is real at checkout. Note and discount Show order note lets shoppers add a note to their order from the cart, for delivery instructions or gift messages. Expand order note by default opens the note field automatically instead of keeping it behind a link. This appears only when Show order note is on. Show discount code field lets shoppers enter a discount code in the cart instead of waiting until checkout. Applied codes show as removable pills and the cart total updates in place. Shoppers can apply more than one code, and an invalid code shows an error without changing the total. The same field works whether your store uses the drawer or the cart page. Checkout Show accelerated checkout buttons displays fast checkout buttons (such as Shop Pay, PayPal, and Google Pay) in the cart. The buttons that appear depend on the payment methods you have enabled in Shopify. Show installment payment options displays Shop Pay Installments, Affirm, or Klarna messaging in the cart based on your store's eligibility. Drawer behavior These settings apply when Cart type is set to Drawer. Open drawer after adding to cart slides the drawer open as soon as a shopper adds a product. Turn it off to add products without interrupting browsing. Show vendor displays each product's vendor name on its line in the cart. Empty cart button link sets where the button on an empty cart sends shoppers. It defaults to your catalog if you leave it blank. Empty cart button label sets the text on that button. Leave it blank to use the translated default. Recommended products A short list of products shown in the cart drawer to prompt add-on purchases. Products already in the cart are hidden automatically. Heading sets the title above the recommended products. The default is You may also like. Products is the list of products to recommend. You can add up to 10. Tips - If you choose Page as the Cart type, the Drawer behavior and Recommended products settings have no effect, since both only appear in the drawer. - The Free shipping threshold field is for the bar's messaging only. Confirm a matching free shipping rate exists in your Shopify shipping settings so shoppers actually get free shipping at checkout. - Recommended products only fill the slot when the picked products are not already in the cart, so the list can look shorter than what you selected.

Last updated on Jun 24, 2026

Product badges

Product badges Reign handles badges in two places. The Product badges panel in Theme settings sets how badges look across the store and where custom badge text comes from. The Status badges block places automatic flags (Sale, Sold out) on a product page. The panel is store-wide styling. The block is per-template content. Product badges panel This panel lives under Theme settings > Product badges. It controls badge styling for the whole store and points to the metafield that holds custom badge text. - Style: the look of every badge. - Glowing: a badge with a soft glow. This is the default. - Solid: a flat, filled badge. - Badges metafield: the product metafield that holds your custom badge text. It reads a list metafield (single-line text), for example custom.badges. Each value in the list becomes a badge. Restrict the metafield to preset choices in its definition so staff pick from a fixed list instead of typing free text. The Badges metafield setting points Reign at the metafield, but it does not create the badge text. You add the words (for example "Limited" or "Bestseller") per product in the Shopify admin, on each product's metafield. Status badges block Status badges is a block that shows badges derived from a product's state. It renders nothing when no badge applies, so a product with full stock and no sale shows none. You add it on a product template. Add the Status badges block 1. In the theme editor, open a product template. 2. Select the section where you want the badges. 3. Click Add block and open the Products group. 4. Choose Status badges. Settings - Show "Sale" badge: shows a sale badge when the variant's compare-at price is higher than its price. The badge includes the discount percentage. On by default. - Show "Sold out" badge: shows a sold-out badge when the product is unavailable. On by default. The block also has Margin controls (top and bottom) to space it from the blocks around it. See Common section settings. Tips - The panel and the block work together. The panel sets the Style that applies to every badge the Status badges block renders, so you do not restyle per product. - Automatic badges (Sale, Sold out) come from the Status badges block and product state. Custom badges (your own labels) come from the Badges metafield you set in the panel. Use the metafield for wording the theme cannot infer, like "New", "Limited", or "Bestseller". - A product with no sale and full stock shows no badge from this block. That is expected, not a setup error.

Last updated on Jun 24, 2026

Product cards

Product cards Product cards are the tiles that show a product wherever Reign lists products: collection grids, search results, featured collections, and related products. The Product cards panel in Theme settings sets how every card looks across the store, so you set it once instead of per section. Product cards shown in a section Where to find it 1. In the theme editor, open Theme settings. 2. Select Product cards. 3. Change any setting, then Save. The change applies to every product card on the storefront. Settings These controls sit at the top of the panel, above the first heading. - Image ratio: the shape of the product photo on the card. Adapt to image keeps each photo's own proportions. The rest crop every photo to a fixed shape: Portrait (4:5), Tall (2:3), Square (1:1), or Landscape (3:2). A fixed ratio keeps every card the same height in a row, which lines the grid up. - Card style: how the card frames the product details. Overlay places the title, price, and details in a panel over the photo, which Reign tints to match the image. Plain puts the photo on top and the details in a block below it. - Corner radius: how round the card corners are, in pixels. - Content padding: the space between the card edge and its content, in pixels. Hover overlays - Show image indicators: shows a thin bar at the bottom of the image. A shopper hovers the bar to scrub through the product's other photos without opening the product. - Show size pills: shows the product's available sizes as small pills on the card. - Size option name: tells the card which Shopify variant option holds sizes. It matches a variant option by name, for example Size. Set it to the exact option name your products use. This appears only when Show size pills is on. Quick add - Show quick add button: adds a button on the card that lets shoppers add the product without opening its page. - Show quick add on mobile: also shows that button on phones. It is off by default, since the button relies on hover on desktop. This appears only when Show quick add button is on. Card content - Label source: the small eyebrow label above the product title. Choose Vendor, Product type, Category, or None to hide it. The text comes from that field on each product. - Label size: the label's text size, Extra small or Small. - Uppercase label: shows the label in capital letters. - Rating text: the value shown next to the review stars. Average shows the average score, Count shows how many reviews there are, or None shows stars only. Ratings come from a review app or a metafield on the product. - When no reviews: what a card shows when a product has no reviews yet. Hide removes the stars, Dimmed stars shows them greyed out. Tips - Label source and the rating read product data, not card text. The label pulls from each product's vendor, type, or category, so fill that field for the label to show. If a product has no review data, the stars stay empty (or follow When no reviews) no matter what you pick. - A single product card can override Card style for one placement. In a card's own block settings, leave its Card style on Inherit to follow this panel, or set Overlay or Plain to differ. - Show size pills only works when Size option name matches one of the product's variant option names exactly. If pills never appear, check that the name here is spelled the same way as in your products.

Last updated on Jun 20, 2026

Animations and parallax

Animations and parallax The Animations panel controls motion across your whole store: content that fades and slides into view as a visitor scrolls, and background depth effects (parallax). You set these once and they apply to every section. The panel lives in Theme settings. Where to find it 1. In the theme editor, open Theme settings in the left sidebar. 2. Click Animations. Settings The Animations panel has three checkboxes. - Enable reveal animations: content fades and slides into view as the visitor scrolls down the page. Turn it off for a layout where everything is visible right away. On by default. - Enable scroll effects: background images and some elements move at a different speed than the page as the visitor scrolls, which creates a sense of depth (parallax). Turn it off to hold backgrounds still. On by default. - Pause animations in theme editor: stops reveal and scroll effects from running while you edit. Content stays steady so you can position and adjust sections without motion in the way. It does not change what visitors see on the live store. Off by default. Tips - Pause animations in theme editor affects only the editor preview. Your live store still shows the motion you enabled. Turn it on when animations make a section hard to line up while you work. - If a section looks empty in the editor, content may be mid reveal. Turn on Pause animations in theme editor to show everything at once.

Last updated on Jun 20, 2026

Typography

Typography The Typography panel controls the fonts and text sizing for your entire store. It lives under Theme settings in the theme editor. Pick your two fonts here, set the base text size, then fine-tune each text preset (headings, body, captions) so every section inherits the same type rules. Open the panel 1. In the theme editor, click Theme settings (the gear icon in the left sidebar). 2. Click Typography. Fonts and base size These three settings sit at the top of the panel. - Heading font: the font used for headings across the store. Click it to open Shopify's font picker, where you can choose a font and a weight. - Body font: the font used for paragraphs, labels, and other running text. - Base font size: the reference size that all text scales from. Changing it adjusts every text size in the store proportionally, so headings and body text grow or shrink together. Text presets Below the fonts is a Text presets header. Text presets apply consistent typography across the theme: a heading or text block points at one of these named presets, so editing a preset here updates every place it appears. You do not set the size on each text block one at a time; you point the block at a preset. Each preset below has its own group of controls. The presets are, in order: - Display - Display small - Heading 1 - Heading 2 - Heading 3 - Large - Medium - Small Controls shared by every preset Every preset has these controls. - Size: the size of this preset as a percentage, relative to its built-in size. 100% is the default. Lower it to make the preset smaller, raise it to make it larger. - Use different size on mobile: turn this on to set a separate size for phones. When off, mobile uses the same Size value. - Mobile size: the percentage size used on phones. This appears only when Use different size on mobile is on. - Line height: the vertical spacing between lines. Lower values pack lines tighter, higher values open them up. - Thickness: the font weight for this preset. Choose Normal, Medium, or Bold. Extra controls on heading and text presets Heading 1, Heading 2, Heading 3, Large, Medium, and Small add three more controls. The Display and Display small presets do not have these. - Letter spacing: the gap between characters, in pixels. Negative values tighten the letters, positive values spread them out. - Text transform: how the letter casing renders. Choose None (as typed), Uppercase, Lowercase, or Capitalize (first letter of each word). - Line wrap: how the browser breaks lines. Balance evens out line lengths so no single line is much shorter than the rest, which suits short headings. Pretty avoids leaving a single word alone on the last line, which suits longer text. Tips - The Size and Mobile size values are percentages of each preset's own built-in size, not pixel sizes. To scale the whole store at once, change Base font size instead of editing every preset. - If headings look too tall or too loose after a font change, the new font may carry its own spacing. Adjust Line height and Letter spacing on the affected preset rather than changing the font back. - Display and Display small are the largest presets, used for oversized hero text. If you do not see Letter spacing, Text transform, or Line wrap on a preset, you are on one of these two: those controls live only on the heading and text presets.

Last updated on Jun 24, 2026

Search settings

Search settings The Search panel sets what predictive search shows when a shopper's query returns no matching products. It lives in Theme settings and applies to your whole store. Open the panel 1. In the Shopify admin, go to Online Store, then Themes. 2. On your Reign theme, click Customize. 3. In the editor sidebar, click Theme settings (the gear icon). 4. Click Search. Settings No results fallback collection Pick a collection here. When a shopper types a query and predictive search finds no matching products, the products from this collection appear instead. This keeps the suggestions panel from looking empty and gives the shopper something to browse. Leave it unset for no fallback products. Tips - Choose a collection that works as a catch-all, such as your bestsellers or a broad featured collection. It shows for every unmatched query, so it needs to make sense for any shopper. - This fallback applies to predictive search (the suggestions panel that opens as a shopper types). It does not change the full search results page.

Last updated on Jun 20, 2026

Logo, social, and regional settings

Logo, social, and regional settings These are the small global panels that hold your brand marks, social links, and regional display options. They all live under Theme settings in the theme editor and apply across the whole store. How to find these panels 1. In the Shopify admin, go to Online Store > Themes. 2. On the Reign theme, click Customize. 3. In the left sidebar, click Theme settings (the gear icon). 4. Open the panel you need: Logo, Favicon, Social media, Currency format, RTL support, or Scrollbar. Logo Sets the logo image in your header and how it sizes. - Logo: Upload the logo shown in the header. If you leave this empty, the header falls back to your store name as text. - Inverted logo: Upload an alternate logo for use over dark or image backgrounds, so the mark stays readable when the header sits on a photo. - Logo height: The logo height in pixels at the top of the page (32 to 80, default 40). - Reduced logo height: The smaller logo height in pixels for the compacted header after you scroll down the page (24 to 60, default 24). - Logo pill background: Choose when the logo sits on its own background pill. - Always: The pill shows on every page state. - Only on light header: The pill shows only when the header has a light background (the default). - Never: No pill behind the logo. Favicon - Favicon: Upload the small icon shown in the browser tab and bookmarks. Use a square image. Shopify scales it down, so a clear, simple mark reads best at tab size. Social media Paste the full address of each profile you want linked. Reign shows an icon only for the fields you fill in, so leave the rest blank. These links feed the social icons used elsewhere in the theme, such as the footer. - Instagram URL - Facebook URL - TikTok URL - YouTube URL - Pinterest URL - X (Twitter) URL - LinkedIn URL - Threads URL Currency format - Show currency code: Turn this on to print the currency code next to prices (for example, $10.00 USD instead of $10.00). Off by default. This helps shoppers tell currencies apart when you sell into more than one market. RTL support - Enable RTL (right-to-left) support: Turn on right-to-left layout for languages such as Arabic, Hebrew, and Persian. On by default. When it is enabled, left and right direction settings in the theme editor may appear reversed. Scrollbar - Scrollbar style: Choose how the page scrollbar looks. - Auto: The browser's default scrollbar. - Thin: A slimmer scrollbar (the default). - Hidden: No visible scrollbar. The page still scrolls. Tips - The Inverted logo is used where the header sits over a dark or image background. If your header always uses a light background, you can leave it empty. - Reduced logo height controls the logo only after the header compacts on scroll. If the logo looks fine at the top but cramped once you scroll, adjust this value rather than Logo height. - After turning on Enable RTL (right-to-left) support, check direction-based settings in your sections. Some left and right controls flip, which is expected.

Last updated on Jun 20, 2026