Ritual

4 min read

The Ritual section sells a routine instead of a single product. It shows up to five products as numbered steps, such as cleanse, treat and protect, with the routine’s total price and one “Add the ritual” button. Use it on the home page or any other page.

You choose each step’s product yourself, in the Product setting of its Step block. The total is added up from the products’ prices, so there’s no price to type in.

“Add the ritual” adds one of each step’s product to the cart in one go, in the variant shown or chosen, and leaves out any step that’s sold out. Then the cart drawer opens. If Cart type in Theme settings → Cart is set to Page, “Added to cart.” and a “View cart” link appear under the button instead.

This section doesn’t use complementary products. Those fill Cosmero’s two other routines: the Ritual block on the product page, which shows the product as step 1 and its complementary products as the next steps, and “Complete your ritual” in the cart.

Add the section

Online Store → Themes → Customize

In your Shopify admin, go to Online Store → Themes and select Customize on Cosmero.
At the top of the theme editor, open the template you want to change, such as the home page.
In the sidebar, select Add section.
Choose Ritual. It starts with three steps.
Choose a product in each step, then select Save.

You can add it to any template, but not to the header or the footer.

Settings

Label: a short line above the heading.
Heading: the section’s heading.
Text: a short introduction under the heading.
Show total price: shows the routine’s total above the button. It adds up the steps that can go in the cart, in the variants chosen. When a step is on sale, the regular total shows struck through beside it. The total stays hidden while no step can be added.

Media

Show image panel: splits the section into a text panel and an image panel. A placeholder shows until you choose an image. Without it, the steps sit side by side on desktop; with it, they’re listed beside the image.
Image: the image for the image panel. Shown when Show image panel is on.
Media position on desktop: puts the image on the Left (the default) or the Right. On mobile it sits above the steps. Shown when Show image panel is on.

Panel

Join panels: shows the image and the text as one panel, with no gap between them. It applies when Show image panel is on.
Color scheme: the colors of the panel with the steps. You edit color schemes in Theme settings.
Media color scheme: shows behind the image while it loads and when there is no image. It applies when Show image panel is on.
Panel style: Panel is a rounded panel inside the page margin. Flush spans the full page width with square corners.
Enable full width on mobile: on mobile, the panel runs from edge to edge with square corners. Shown when Panel style is Panel.
Top padding: space above the content, from 0 to 120 px. With the image panel, it’s the space inside the text panel.
Bottom padding: space below the content, from 0 to 120 px. On mobile, both paddings are scaled down: 64 px becomes 40 px.

Blocks

Step

One step of the routine. The section holds up to five.

Step label: the small label above the step, such as Cleanse. Leave it empty to show “Step 1”, “Step 2” and so on.
Product: the step’s product. Until you choose one, the step shows a placeholder that says “Choose a product for this step”, and it isn’t part of the button or the total.
Note: a short line under the product’s title.

On the storefront, each step shows its label, the product’s image, its title (linked to the product page), your note and the price.

A product with more than one variant gets a dropdown, so shoppers can pick, for example, a size. The step’s price and the total follow their choice. Sold-out variants are listed as sold out and can’t be chosen.
A sold-out product is marked “Sold out”, shown faded and left out of the button and the total. A product that can only be bought with a subscription is treated the same way, so choose products that can be bought once.

Tips

Name each step after its job, such as Cleanse, Treat and Protect, so the steps read as a routine.
The button adds one of each product. Shoppers change quantities in the cart.
Set complementary products for the same products, in the Search & Discovery app or in each product’s Complementary products metafield, so the product page and the cart suggest the routine too.
The step images sit on the Image background color from Theme settings → Product cards.