Theme settings
Chapter 2 of the Clasp user guide.
Open the theme editor and click the gear icon (Theme settings). The groups below appear in this order.
Colors
Color palette sets the storefront's thirteen colors at once:
| Palette | Page | Keys (buttons, headings) | Accent | Lining band | Gilt | Feels like |
|---|---|---|---|---|---|---|
| Champagne (default) | Ivory #f7f2e9 | Deep brown #241a12 | Antique gold #8a6a30 | Bottle-green velvet #1f2d28 | Gold #d2b46e | Everyday gold and demi-fine (the Clasp preset) |
| Pearl | Pearly lilac-grey #f2eef1 | Aubergine #221827 | Plum #7b3f70 | Deep plum #2b1a2c | Rose gold #e0b3a4 | Charm bars, beaded and playful pieces (the Charm preset) |
| Velvet | Oxblood velvet #2a1418 | Ivory #fbf3e8 | Brass #c9a45c | Garnet black #1a0b0e | Bright brass #dcc085 | Antique, estate and bridal (the Heirloom preset). The one dark palette. |
| Sterling | Cool grey #eceef0 | Ink navy #131b28 | Ink navy #24427a | Midnight #172238 | Silver #c4ccd6 | Silver-only, men's and minimal jewelry |
All four meet WCAG AA contrast for text (4.5:1) and controls (3:1) on every background the theme uses, including the lining band. The gilt is decoration on light backgrounds (keylines and the facet), so it never has to carry meaning there; on the lining band it colors kickers and focus rings, where it is measured.
Below the palette, each color can be set on its own. A color you set overrides the palette until you clear it (the field then reads "From palette"). The groups and what each color paints in Clasp:
| Group | Color | What it paints |
|---|---|---|
| Page | Page background | The page, the header, and the thin gap inside every bezel and around the primary button |
| Page | Body text | Body copy, option values and prices on cards |
| Panels, bands and buttons | Panel background | Drawers, quick view, the ring size guide, the mega menu, fields, size tiles, badges on photos, the stack tray card, the engraving block and the current birthstone card |
| Panels, bands and buttons | Band background | Champagne bands such as the newsletter and birthstones (any section set to Champagne band), the free-shipping track and disabled buttons |
| Panels, bands and buttons | Headings and primary buttons | Headings, product names, the wordmark and navigation, and the fill of primary buttons, selected size tiles, checked boxes, the selected metal chip's ring, the Pre-order badge and the bag count. Text on these fills uses the panel background. |
| Supporting text | Subtitles and helper text | Subtitles and introductions, kickers on light backgrounds, helper text, the chosen value in "Metal: Rose gold" and the Sold out badge |
| Supporting text | Secondary text | Compare-at prices, placeholders, struck-through sold-out sizes and the engraving counter |
| Structure | Lines and borders | The borders of fields, selects, size tiles, metal chips, checkboxes, steppers, stack tiles and engraving style tiles. Keep it at 3:1 or more against the page, panels and the champagne band. |
| Structure | Accent | The antique gold: focus rings, rating stars, the free-shipping bar, link underlines, the your-size bar in the ring size chart and the icons in trust lines and the Materials row. Never used for text. |
| Structure | Alerts | Sale prices and the Sale badge, the low-stock dot, and errors (engraving, the stack builder and forms) |
| Lining band | Lining | The deep band behind the announcement bar, the footer and any section set to Lining band |
| Lining band | Text on lining | Text and button fills on the lining band (its secondary text and borders are mixed from it) |
| Lining band | Gilt | The bright metal: the keylines around arched and oval images and the facet ornament; on the lining band, kickers and focus rings |
Overriding a color can lower contrast. Check text on your new color with a contrast checker before you publish.
Most sections also have a Colour scheme setting: Page (the page color), Champagne band (the Band background color, behind Birthstones and the newsletter in the presets) or Lining band (the deep band, with light text, ivory buttons and gilt kickers). Everything inside a band, including buttons, fields and focus rings, switches with it.
Typography
| Setting | Default | Notes |
|---|---|---|
| Heading font | Trirong (300) | Headings, product names, captions and the text logo. The theme loads the weight you pick, its 400 (for product names and the wordmark) and its italic (for captions, quotes and italic words). A light, fine serif suits Clasp best. |
| Body font | Lato | Body copy, navigation, buttons, prices and labels. The theme loads regular, bold and italic. |
| Base text size | 15px (14 to 18) | Scales all text |
The presets use Trirong at 300 (Clasp), Fahkwang (Charm) and Old Standard TT (Heirloom) for headings, all with Lato. Any font in Shopify's font library works. Clasp never fakes a bold or italic the font doesn't have, and all text is in sentence case: the theme never turns text into capitals. Italicize a word in a heading and it shows in the heading italic, in the same color.
Layout
| Setting | Default | What it does |
|---|---|---|
| Page width | Medium | Narrow, Medium or Wide |
| Page margin | 60px (20 to 80) | Space at the left and right of the page on tablets and desktops. Phones always use 16px. |
Navigation, Brand and Motion
- Show back-to-top button (on): a button that appears after shoppers scroll down one screen. Position: Left (default) or Right; the presets use Right. Pick the side opposite your chat button. It is mirrored for right-to-left languages.
- Brand: Use a custom logo (off: the shop name shows as a text wordmark in the heading font), Logo, Logo width (150px, 80 to 320, with a custom logo) and Favicon (32 x 32px recommended). On phones a long shop name steps down in size and wraps onto two lines, so it never runs under the icons.
- Motion: Reveal sections as they scroll into view (on: headings, cards and arched or oval images fade in once as they first come into view; the bezel draws in just after its photo). Cards cross-fade to their second image and drawers glide whatever this says. Every effect is off for visitors who ask their device for reduced motion.
Commerce
| Setting | Default | What it does |
|---|---|---|
| Free dispatch over | 0 | Your real free-shipping threshold, in your store's currency. Above 0, the product page's price adds "Free shipping over $80." after the tax note, and the cart drawer and cart page show "$12.00 away from free shipping" over a progress bar, then "Free shipping unlocked" (an empty bag shows "Free shipping on orders over $80."). They only show to customers shopping in your store's currency. The presets set a demo value (80, 60 or 0): change it. Announcements, trust lines and the hero's short facts are text you write, so change the amount in them too. |
| Show currency code | Off | Prints the currency code beside every price |
Product cards
Every product card is a square photo (or portrait 4:5) on a soft ground, up to two small rectangular badges at the top left, then, centred under the photo, the metal dots, the product name in the heading font and the price. On devices with a mouse, hovering (or tabbing into) the card shows the second image and raises a small quick add tab from the foot of the photo. On phones and touch screens the tab gives way to a round + on the photo, which opens quick view.
| Setting | Default | What it does |
|---|---|---|
| Image shape | Square | Square or Portrait (4:5) |
| Show second image on hover | On | On devices with a mouse, shows the product's second image while the card is hovered or focused. Products with one image don't change. |
| Show quick add button | On | Products that can be bought as they are (one variant, no required subscription plan, not a gift card) get Quick add, which adds them to the bag. Products with options, a required subscription plan or a gift card recipient get Choose options, which opens quick view (with its metal chips, size tiles and, on engravable pieces, engraving). Sold-out products get Notify me, which opens quick view on its back-in-stock form. |
| Show quick view button | Off | With Show quick add button off, the tab reads Quick view instead. Quick view opens the product's photos, options and buy buttons in a panel without leaving the page. |
| Show swatches | On | The metal dots under the photo (chapter 8): the values of the first option named in Metal option names that has colors, else the first option with Shopify swatches. Choosing a dot switches the card's photo, link and price to that metal. Swatches before "+" count: 4 (2 to 8). |
| New badge for products published within | 21d (0 to 90) | 0 turns the age-based New badge off. Products tagged new always show it. |
| Low stock threshold | 3 (0 to 10) | Single-variant products with tracked inventory at or under this number show "Only 2 left". 0 turns it off. Heirloom uses 0. |
| Sale badge | Percentage (Save 20%) | Or Amount (Save $10) |
| Engravable badge tag | engravable | Products with this tag show an Engravable badge. Leave blank to hide the badge. Capitals don't matter. The same tag decides which products offer engraving (chapter 10). |
| Show compare checkbox | Off | Shoppers tick up to 3 products and see them side by side on the comparison page. Stays hidden until a page using the page.compare template is chosen as the Comparison page (chapter 4). |
A card or product photo shows at most two badges, in this order: Sold out, Pre-order (products tagged pre-order or preorder), Sale, Only 2 left, New (with a small facet) and Engravable.
Jewelry
The settings behind Clasp's signature features, each explained in its chapter. Option names are matched without regard to capitals and are separated by commas.
| Setting | Default | Chapter |
|---|---|---|
| Metal option names | Metal, Finish, Stone, Colour, Color | 8 |
| Chip colours | Thirteen metals and stones, one per line | 8 |
| Ring size option names | Ring size | 9 |
| Your ring sizes are in | US | 9 |
| Sizes you make | 4-10 | 9 |
| Ranges include half sizes | On | 9 |
| Ring size help text | "Our rings are made in US sizes 4 to 10, in half sizes. Between two sizes? Choose the larger." | 9 |
| Printable ring sizer page | Empty | 9 |
| Size option names | Size, Length | 6 and 9 |
| Engraving fee product | Empty | 10 |
| Show engraving only on products tagged engravable | On | 10 |
| Gold keyline around arched and oval images | On | A thin gilt line set 8px outside every arched and oval image (the bezel). Off removes every bezel. |
| Facet ornament | On | The small cut-stone mark before kickers, between announcements and before footer headings. Off removes every facet; kickers keep their text. |
Customer accounts and Social media
- Customer account menu: links in the header's account panel. Leave it empty to use the menu Shopify creates for customer accounts.
- Social media: Instagram, YouTube, Facebook, X, TikTok, LinkedIn, Pinterest and Threads. Each link you add shows as an icon in the footer.