Theme settings

8 min read

Theme settings apply to your whole store. In the theme editor, open Theme settings and choose a group. The groups below follow the order in the editor.

Online Store → Themes → Customize → Theme settings

Colors

Cosmero’s colors come from color schemes. A scheme is a set of eight colors, and every section, drawer and card surface uses one. When you edit a scheme, everything that uses it changes with it.

Cosmero comes with five schemes. The editor shows them as Scheme 1 to Scheme 5, and these docs also call them by their color:

Scheme	Color	Where Cosmero uses it by default
Scheme 1	White	The page background around the panels, the Featured collection, and the product grids on collection and search pages
Scheme 2	Soft gray	Most section panels, the header and the drawers
Scheme 3	Gray	Behind product images on cards, and behind section images while they load
Scheme 4	Blush	The New badge on product cards. The preset also uses it for the Announcement bar and the Ritual
Scheme 5	Midnight, a dark blue	The Slideshow, as a dark base under its images. The preset also uses it for the Newsletter

Each scheme has these colors:

Background
Text: body text and headings.
Muted text: secondary text. Keep a 4.5:1 contrast ratio with the background.
Dividers: decorative lines only.
Form field borders: the outlines of form fields, checkboxes and radio buttons. Keep a 3:1 contrast ratio with the background.
Under Buttons:
- Primary button: the fill of primary buttons. It also colors the quick add button on product cards, selected options, the Sale badge and the free shipping progress bar.
- Primary button label: the text on primary buttons.
- Secondary button: the label and outline of secondary buttons.

Most sections pick their scheme with a Color scheme setting, under Panel. Sections with an image also have a Media color scheme, which shows behind the image while it loads and when there’s no image. The product sections use Media color scheme and Product information color scheme, one for each panel. To give a single section its own colors, add a scheme and choose it in that section.

Two more settings choose a scheme for the whole store:

Page background: the scheme of the frame around and between the panels. It’s also the background of the full-screen zoom on product images.
Drawer color scheme: the scheme of the search, filter, quick add, pickup and cart drawers. The mobile menu uses the header’s color scheme instead.

Typography

Fonts come from Shopify’s font library. Both default to Instrument Sans.

Heading font: page titles, product titles and most section headings, the top-level links of the mobile menu, the product type on product cards, and your store name in the header when there’s no logo. A few sections, such as the Slideshow, Image banner, Image with text and Ritual, set their headings in the body font.
Heading case: As typed (default) or Lowercase. Applies to page titles, product titles and the section headings in the heading font. The product type on product cards is always lowercase.
Body font: everything else, including body text, buttons and smaller headings.

The fonts that Shopify hosts cover Latin characters. Text in other scripts, such as Greek or Cyrillic, shows in the device’s system font.

Layout

Page width: Standard (default) or Wide. Limits the width of content inside panels: up to 1440 px with Standard and 1760 px with Wide. Panels always fill the page.
Page margin: the space around panels on large screens, from 8 to 48 px (default 36 px). It scales down on small screens.
Panel spacing: the space between panels and between items in product grids, from 4 to 32 px (default 16 px).

Page margin and Panel spacing can’t go down to 0, so the frame around the panels always shows. To run a single section edge to edge, set its Panel style to Flush.

Shape

Panel corner radius: how round the corners of panels are, from 0 to 24 px (default 14 px). Also applies to cards, images and the header bar.
Button shape: Pill (default), Soft or Square. Also applies to pills, chips and form fields.

Favicon

Favicon image: the icon in the browser tab. 32 x 32px .png recommended.

Search

These settings control the search panel that opens from the header.

Enable search suggestions: as customers type, shows matching products, collections, pages, articles and search terms, starting from the second character. When it’s off, the panel is a plain search form. On by default.
Show product prices: shows prices next to products in the search panel. On by default.

Before customers type

These show in the search panel while the field is empty, and after a search with no results. With all three empty, the panel shows only the field.

Suggested search terms: separate terms with commas. Shows up to 8; selecting one searches for it.
Suggested links: a menu whose top-level links show under the suggested terms.
Featured collection: shows up to 6 products from the collection.

Add the full link to each profile: Instagram, TikTok, Facebook, Pinterest, YouTube, X, Threads and Snapchat. Icons show only for profiles with a link.

The icons appear in the footer’s Social media block. The Image gallery section’s button also links to your Instagram profile when the section has a Button label and its Button link is empty.

Product cards

These settings apply to the product card everywhere it appears: collection pages, search results, the cart, and sections such as Featured collection and Related products. In tight spaces the card shows less. On reels and in the “Complete your ritual” row of the cart drawer, it shows only the image, title, price and quick add button. In the mobile menu and the Before and after section, it leaves out the subtitle, rating and size.

Image ratio: Adapt to media, Square or Portrait (default). Adapt to media follows the shape of each product’s first image. Portrait is 4:5.
Image background: the scheme behind product images (default Scheme 3). Choose a scheme that sets images apart from the section. The Collection list, Ingredient spotlight and Shoppable reels sections use it behind their images too.
New badge color scheme: the scheme of the New badge, which shows on products tagged “new” (default Scheme 4).
Show product type: shows the product type at the top of the card, in the heading font. Hidden when a product has no type.
Show second image on hover: shows the product’s second image when the pointer is over the card.
Show product subtitle: shows a one-line benefit under the title, from the Product subtitle metafield.
Show product rating: shows the stars, rating and review count that a reviews app saves to the product’s standard Product rating metafield. Hidden on products without a rating.
Show size: shows the selected value of an option named “Size”.
Show quick add button: adds products with one variant to the cart. For other products, and for products with purchase options such as subscriptions, it opens a panel to choose. Sold-out products have no quick add button.

The checkboxes are all on by default. Cards also show a Sale badge when a product’s compare-at price is higher than its price, and a Sold out badge when it’s unavailable.

Product ratings

Add product ratings to structured data: adds each product’s rating to the structured data of its product page, which search engines read. It uses the same Product rating and Product rating count metafields as the cards. Turn it off if your reviews app adds its own rating markup, so the rating isn’t listed twice. On by default.

Cart

These settings apply to both the cart drawer and the cart page.

Cart type: Drawer (default) or Page. With Drawer, the cart opens from the side of the screen, also after each add to cart. With Page, the cart link goes to the cart page, and adding a product shows a confirmation with a link to the cart.
Show order note: lets customers add a note to their order. In the drawer, the field opens from “Add a note”.
Show discount code field: lets customers apply discount codes. Applied codes show as pills they can remove. In the drawer, the field opens from “Add a discount code”.
Show accelerated checkout buttons: shows the express payment methods you have set up, such as Shop Pay, in the cart drawer and on the cart page.
Free shipping threshold: an amount in your store currency, such as 50. Shows a progress bar toward free shipping in the cart, based on the cart total after discounts. Create a matching free shipping rate in your shipping settings. The bar is hidden while the cart is empty and when customers shop in another currency. Leave the field empty to hide it.
Show “Complete your ritual”: shows complementary products for the newest item in the cart, leaving out products already in it: up to 3 in the drawer and 4 on the cart page. Add them in the Search & Discovery app or in the product’s Complementary products metafield. Hidden when there are none to show.
Collection for empty cart: shows up to 4 products from the collection when the cart is empty.