Section Cloud: Theme Sections Tutorial

Before you start

Install Section Cloud from the Shopify App Store.
Use an Online Store 2.0 theme (one where you can add sections to any page in the theme editor).
Optional but recommended: duplicate your live theme (Online Store → Themes → … → Duplicate) and try sections on the copy first. See Duplicating themes.

Step 1: Turn on the app embed

Open Home
Open the app. On Home, find Activate app embed.
Pick your theme
Click Enable on theme and choose the theme you will install sections on.
Switch it on
The theme editor opens on App embeds. Make sure Sections Cloud is switched on, then click Save.

You can come back to this embed anytime to change fonts, text size, page width or spacing for Section Cloud sections.

Step 2: Install your first section

Browse
Open Sections. Click the Free chip to see sections you can install right away, or pick a category in the sidebar.
Preview
Click a card's preview image to open its demo and see how it looks and behaves.
Install
Click Install, choose your theme in Choose theme, and click Install again.
Go to the theme editor
Click Customize in the success message.

Step 3: Add it to a page and customize it

Choose the page
In the theme editor, use the page selector at the top to open the page you want (for example Home page or a product page).
Add the section
Click Add section and find your new section by name — most Section Cloud names start with ✨.
Edit its content
Click the section to open its settings. Replace the sample text and images with your own, and adjust colors and layout.
Position it
Drag the section up or down in the left sidebar to place it where you want.
Save
Click Save.

Step 4: Check it on your storefront

If you installed on your live theme, open your store and visit the page.
If you installed on an unpublished theme, use Preview on that theme in Online Store → Themes.
Check the page on a phone as well as a desktop.

If the fonts or width look different from what you expect, check the Sections Cloud app embed settings for that theme.

Recipe: Create a new page from a template

Find a template
Open Templates, pick your industry in the sidebar, and click Free to see templates available on any plan.
Install it
Click Install, choose a theme and click Install. The app creates a new page at /pages/sco-<template-name>.
Make it yours
Go to My library → Templates and click Customize. Replace the sample text, images and products with your own, then click Save.
Link to it
Add the new page to your navigation in Online Store → Navigation, or link to it from another page. See Adding menus.

Templates add a new page; they do not replace your homepage. If you like a homepage-style template, you can also add its sections to your real homepage one by one in the theme editor, since they are now installed in your theme.

Recipe: Buy a single paid section

Find it
In Sections, click Paid and open the demo of the section you want.
Buy it
Click Purchase, then Buy for $…, and approve the one-time charge on Shopify's page.
Install it
You land on My library → Purchased. Click Install, choose a theme, then add the section in the theme editor.

Recipe: Match sections to your brand fonts

Open the app embed
In the theme editor, open App embeds and expand Sections Cloud.
Set fonts
Turn on Use custom font and choose the same Heading font and Body font your theme uses.
Fine-tune size and width
Adjust Heading scale and Body scale if the text looks too large or small next to your theme's sections, and set Page width to match your theme's content width.
Add breathing room
If several Section Cloud sections sit next to each other, increase Space between sections. Then click Save.

Getting started tutorial