Theme settings — Ribbon docs

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 eleven colors at once:

Palette	Page	Accent (the ribbon and buttons)	Headings	Feels like
Blush (default)	Powder pink `#f8e1e3`	Cherry `#9e1430`	Wine black `#2a0f16`	Coquette and feminine boutiques (the Ribbon preset)
Ivory	Warm off-white `#f8f2e8`	Cognac `#85552c`	Espresso `#221812`	Elevated basics and minimal luxe (the Maison preset)
Noir	Warm black `#120e0f`	Rose champagne `#ecbcab`	Pearl `#fbf2ee`	Evening wear, lingerie and after-dark drops
Riviera	Sea-salt white `#f6f2ea`	Mediterranean blue `#16508f`	Navy `#0f1d33`	Swim, resort and summer (the Resort preset)

The accent is the ribbon: it fills the announcement bar, primary buttons and the cart count bubble, and colors kickers, the bow, focus rings, the fit marker, rating stars and the free-shipping bar. Each palette also has a lighter panel (the shop the look band, caption cards, the footer, drawers, fields and size pills) and a deeper band color (the next drop and other bands). Noir is the one dark palette. All four meet WCAG AA contrast for text (4.5:1) and controls (3:1) on the backgrounds the theme uses.

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"):

Group	Colors
Page	Page background; Body text; Headings and strong text (headings, prices, the wordmark, the selected size pill); Secondary text; Faint text (compare-at prices, placeholders, sold-out sizes)
Panels and bands	Panel background; Band background (bands such as the next drop, and disabled buttons)
Controls and accents	Control borders (fields, size pills, checkboxes and steppers: keep it at 3:1 or more against the page, panels and bands); Accent (the ribbon, primary buttons, kickers, the bow and focus rings); Text on accent (keep the accent dark or light enough for it); Sale and alerts (sale prices and badges, low stock, errors)

Note

Overriding a color can lower contrast. Check text on your new color with a contrast checker before you publish.

Typography

Setting	Default	Notes
Heading font	Bodoni Moda (400)	Headings, the text wordmark, captions and big numbers such as the countdown and the size result. The theme loads the weight you pick and its italic, which it uses for captions and for italic words in your text. A high-contrast serif suits Ribbon best.
Body font	Manrope	Body copy, navigation, buttons, labels and prices. The theme loads regular, medium (500) and semibold (600).
Base text size	16px (14 to 18)	Scales all text

The presets use Bodoni Moda (Ribbon), Newsreader at 300 (Maison) and Playfair (Resort) for headings, all with Manrope. Any font in Shopify's font library works. Ribbon 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 (as Resort's "Sun, salt and linen") 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	40px (20 to 64)	The space either side of the page on large screens. Phones always use 16px.
Show the bow	On	The small bow in kickers, the New badge, the small print row, perk bullets and announcement separators. Off turns every decorative bow off; kickers and badges keep their text.

Show back-to-top button (on): a round 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 (160px, 80 to 320, with a custom logo) and Favicon (32 × 32px recommended). On phones a long shop name steps down in size and wraps onto two balanced lines, so it never runs under the icons.
Motion: Reveal sections on scroll (on: section headings and cards fade up as they come into view). The hero's photos settle softly as the page loads, and cards cross-fade to their second image, whatever this says. Every effect is off for visitors who ask their device for reduced motion.

Commerce

Setting	Default	What it does
Free shipping over	0	Your real free-shipping threshold, in your store's currency. Above 0, the product page's price adds "Free shipping over $100." after the tax note, and the cart drawer and cart page show "$18.00 away from free shipping" over a progress bar, then "Free shipping unlocked". They only show to customers shopping in your store's currency. The presets set a demo value (100, 250 or 150): change it. Perk lines, announcements and hero ticks 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 an editorial card: a borderless photo with square corners, up to two badges as small pills at the top left, and under it the title and a row with the price and color dots. On devices with a mouse, hovering (or tabbing into) the card shows the second image and raises a Quick add strip over the foot of the photo: a row of size pills that add that size, or a single button. On phones and touch screens the strip gives way to a round + on the photo, which opens quick view.

Setting	Default	What it does
Image ratio	Portrait 3:4	Portrait 3:4, Tall 2:3 or Square. Maison uses Tall 2:3.
Image fit	Fill the frame	Fill the frame suits fashion photography; Show the whole image suits cut-outs on plain backgrounds
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 whose sizes are in an option named in Size option names (with 8 sizes or fewer) get size pills, each adding that size (with the first available choice of any other option). Sold-out sizes are struck through and can't be pressed, and sizes at or under Low stock at or under carry a small "2 left". Products without options get Add to bag. Products that need another choice (other options, a required subscription plan, a gift card recipient, a B2B minimum) get Choose options, which opens quick view. Sold-out products get "Notify me when it's back", which opens the product page and its back-in-stock form.
Show quick view button	Off	A Quick view link under the card, shown when Show quick add button is off. Quick view opens the product's media, options and buy buttons in a panel without leaving the page.
Show swatches	Off	Shows the values of the first option that has swatches (set them on the product's options in admin), such as Color, as small dots under the price. Choosing one switches the card's image. Swatches before "+" count: 4 (2 to 8). The presets turn swatches on.
New badge for	21d (0 to 90)	Days after a product is published. 0 turns the date rule off; products tagged `new` always get the badge.
Back in stock tag	restocked	Available products with this tag get a Back in stock badge (chapter 11). Capitals don't matter.
Sale badge	Percentage saved	"Save 20%", or Amount saved: "Save $28.00"
Show compare checkbox	Off	Shoppers tick up to 3 products and see them side by side. Stays hidden until you choose a Comparison page: a page using the `page.compare` template (chapter 4).

A card shows at most two badges, in this order: Sold out, Coming soon (a product waiting for its drop, chapter 11), Sale, Back in stock, low stock ("Only 2 left", for a product with a single variant whose stock Shopify tracks and that stops selling at zero; products with sizes show "2 left" on their size pills instead), Pre-order (product page only) and New (with a small bow).

Sizing and fit, and Cart

The settings behind the signature features, each explained in its chapter:

Setting	Default	What it does
Sizing and fit › Size option names	Size	The product option names (comma-separated, capitals don't matter) that hold sizes. They decide which option shows as size pills on the product page, which products get size pills in the card's quick add, in Shop the look and in Wear it with, and which option Find my size chooses (chapter 9). Add your own words: a shop whose option is called "Talla" or "Shoe size" adds it here.
Sizing and fit › Low stock at or under	3 (0 to 10)	Sizes with tracked stock at or under this number show a "2 left" pill, and single-variant products an "Only 2 left" badge. 0 turns them off. Resort uses 2 (chapter 11).
Sizing and fit › Size guide page	Empty	The page linked as Find my size in the phone menu. Leave blank to hide the link (chapter 9).
Cart › Show "Wear it with" in the cart drawer	On	One pairing for the first item in the bag, from its Wear it with metafield or Shopify recommendations (chapter 10)

Customer account menu: the 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.