Introduction

Cosmero is a Shopify theme for beauty and self-care brands with a small catalog: hair, skin, body and fragrance. It’s made for stores that sell routines and sets, with strong product photos.

Its idea is the store as a routine. Customers buy beauty in steps, such as cleanse, treat and protect, so Cosmero builds those steps into the structure of the store, not only into its look. Its sections sit in rounded panels inside a white frame.

These docs are for merchants and for the people who set up stores for them. This page covers the ideas the rest of the docs build on.

The theme editor

You set up Cosmero in Shopify’s theme editor. In your Shopify admin, go to Online Store → Themes and select Customize on Cosmero.

Online Store → Themes → Customize

The editor lists the sections of the page you’re editing next to a preview of your store. To edit another kind of page, such as a product or collection page, choose it from the menu at the top of the editor. Each kind of page has its own template, so a change to the product template shows on every product that uses it.

Sections

A section is a full-width part of a page, such as the Slideshow, the Featured collection or the Ritual. In Cosmero, each section is its own panel, except the Announcement bar and the Header at the top, which are bars. To add a section, select Add section and choose it from the list. Drag sections to change their order.

Most sections end with the same settings, under Panel:

• Color scheme: the section’s colors. See Colors.
• Panel style: Panel keeps the section in a rounded panel inside the page frame. Flush spans the full page width with square corners.
• Enable full width on mobile: on phones, the panel fills the width of the screen, with square corners. Shown when Panel style is Panel.
• Top padding and Bottom padding: the space above and below the section’s content, from 0 to 120 px. Phones get less padding than larger screens.

The header and the footer appear on every page, so what you change there shows everywhere.

Blocks

Blocks are the pieces inside a section: the slides of a Slideshow, the steps of a Ritual, the questions of an FAQ. Select Add block inside a section to add one, and drag blocks to reorder them.

On product pages, every element is its own block, from Title and Price to Buy buttons and Ritual, so you can reorder, hide or remove each one. The Product information and Featured product sections also take app blocks and the theme’s general blocks: Text, Divider, Collapsible tab, Group and Custom Liquid. The Custom section takes the general blocks too.

Theme settings

Theme settings apply to the whole store: colors, fonts, the page frame, the shape of panels and buttons, search, social media links, product cards, ratings and the cart. In the theme editor, open Theme settings to change them. See Theme settings.

Colors come from color schemes: sets of colors that each section picks with its Color scheme setting. When you change a scheme, every section that uses it changes too.

Signature systems

Five systems give Cosmero its structure. Each one can show up in more than one place in your store.

Panel frame

Every section sits in a rounded panel, with space around and between the panels. Page margin, Panel spacing and Panel corner radius set the frame for the whole store, in Theme settings. Sections with an image, such as Image with text and Ritual, show the image and the text as two panels side by side on larger screens. Join panels turns them into one.

Ritual

The Ritual sells a routine as numbered steps, with one button that adds them to the cart. It shows up in three places:

• The Ritual section: up to five steps, each a product you choose. “Add the ritual” adds every step’s chosen variant to the cart, and the total adds up their prices. See Ritual.
• The Ritual block on product pages: the product itself as step 1, then its complementary products, with one button that adds those. See Product page.
• “Complete your ritual” in the cart: complementary products for the newest item in the cart, leaving out what’s already there. See Cart.

Shoppable reels

The Shoppable reels section is a row of vertical videos that you upload, each with a product. Only the centered video plays, muted, and only while the section is on screen. Every reel has play, pause and sound controls, and a quick add button for its product. It’s not a social media feed: Shopify hosts the videos. See Shoppable reels.

Formula card

Cosmero has one product card, used in collections, search results, the cart, and sections such as Featured collection and Related products. It shows the product type as a lowercase label at the top, the title and price on one line, a one-line benefit under them, the rating from your reviews app, and a quick add button. Choose what it shows under Product cards in Theme settings.

Text-label header

On larger screens, the Header uses uppercase text labels, such as Search, Account and Cart, instead of icons. When a page starts with a Slideshow or an Image banner, the header can sit over it (Enable header overlay). Unless Sticky header is set to Off, it turns into a floating bar as the page scrolls. On phones, the menu unfolds from under the bar and can start with a row of products from a collection you choose. See Header.

Product data

Some parts of Cosmero show information stored with each product, in Shopify’s standard fields:

• The Product subtitle metafield: the one-line benefit on product cards and the Subtitle block.
• The Product rating and Product rating count metafields, which reviews apps fill in: the stars on product cards and in the Rating block.
• Complementary products, set in the Search & Discovery app or in the product’s Complementary products metafield: the Ritual block and “Complete your ritual”.

For anything else, such as ingredients or directions, connect a block setting to one of your own product metafields, for example the Content of a Collapsible tab. Each product then shows its own text.

Where to start

• Install Cosmero: try it on your store, then publish it.
• Theme settings: colors, fonts, the page frame, product cards and the cart.
• The section pages, starting with Slideshow, Ritual and Shoppable reels.
• Product page: the product blocks, from the title to the Ritual.
• Collection and search: product grids, filters and search.
• Cart: the cart drawer, the cart page and “Complete your ritual”.
• FAQ: answers to common questions.