How the theme editor is organised
The theme editor shows a live preview of your store with a sidebar next to it. The sidebar lists the sections on the page you're viewing, grouped into the header, the page template and the footer. Click any section to open its settings; click the arrow next to it to see its blocks, the repeatable items inside it such as slides, questions or testimonials.
- Page selector (top of the editor) — switch between Home page, product, collection and other templates.
- Add section — add a new section to the current template.
- Drag handles — reorder sections and blocks.
- Eye icon — hide a section without deleting it.
- App embeds — turn app-wide features on or off and edit their settings.
- Save — nothing goes live until you save.
Shopify's overview: Theme editor.
Editing a section's own settings
Every section has its own settings panel. Section Cloud sections are installed as native theme sections, so you edit them exactly the same way as your theme's sections. The exact settings depend on the section, but most panels follow the same pattern:
| Group | Typical settings |
|---|---|
| Content | Badge, Heading, Description, button labels and links. Leaving a button label blank usually hides the button. |
| Media | Image (desktop), an optional Image (mobile), image focal point, background video |
| Layout | Content position, text alignment, minimum height, column widths |
| Sizes | Heading and text sizes, often with separate desktop and mobile values |
| Colors | Background, gradient, heading, text and button colors |
| Blocks | Repeatable items, such as each question in an FAQ or each product in a shop-the-look section |
Look for the small help text under a setting in the panel. Settings such as Image (mobile) often say what happens when you leave them blank, for example using the desktop image instead.
Shared styling with the Sections Cloud app embed
Section settings change one section at a time. To make all Section Cloud sections in a theme match your brand at once, use the app embed. Open it from the app's Home → Enable on theme, or in the theme editor under App embeds → Sections Cloud. Settings are saved per theme.
| Setting | Range / default | What it does |
|---|---|---|
| Use custom font | Off by default | When on, Section Cloud sections use the fonts below instead of their own defaults. |
| Heading font | Shopify font library | Font for headings in Section Cloud sections. |
| Heading scale | 50%–150%, default 100% | Makes all Section Cloud headings larger or smaller. Works even when custom font is off. |
| Body font | Shopify font library | Font for body text in Section Cloud sections. |
| Body scale | 50%–150%, default 100% | Makes body text larger or smaller. Works even when custom font is off. |
| Page width | 1000px–1600px, default 1200px | Maximum content width of Section Cloud sections. |
| Space between sections | 0px–100px, default 0px | Vertical gap between Section Cloud sections. |
These settings only affect Section Cloud sections. Your theme's own sections keep the fonts and spacing from Theme settings.
Step by step: make new sections match your theme
- Check your theme's fonts
In the theme editor, open Theme settings (usually under a typography group) and note the heading and body fonts.
- Open the app embed
Click App embeds, make sure Sections Cloud is switched on, and expand it.
- Match the fonts
Turn on Use custom font, then choose the same Heading font and Body font.
- Balance the sizes
If Section Cloud headings look bigger or smaller than your theme's, adjust Heading scale and Body scale in small steps (for example 90% or 110%).
- Align the width
Set Page width close to your theme's content width so text lines up as you scroll.
- Add breathing room
If several Section Cloud sections are stacked together, raise Space between sections. Then click Save.
Example: a consistent homepage
Say your theme uses Assistant for body text and a serif for headings, with a 1200px content area. You add a ✨ hero, a testimonial section and an FAQ from Section Cloud. A tidy setup could be:
- Use custom font: on, with the same heading and body fonts as your theme.
- Heading scale: 95%, so section headings sit just below your theme's large hero text.
- Page width: 1200px, matching the theme.
- Space between sections: 40px between the testimonial and FAQ sections.
- In each section: brand colors in the color settings, your own photos, and a mobile image on the hero.
Tips and common mistakes
- Preview on mobile using the device toggle at the top of the editor; many sections have separate mobile sizes and images.
- Edit on a duplicate theme if you're making big changes, then publish it.
- Turn the embed on in every theme you install sections on, since its settings are per theme.
- Hiding vs deleting: the eye icon hides a section but keeps its content, which is handy for seasonal sections.
- Reuse a section with different content on other pages; each copy has its own settings.
Frequently asked questions
Can I edit Section Cloud sections in the normal theme editor?
Yes. They are installed as native theme sections, so you edit, reorder, hide and remove them in the Shopify theme editor.
Why do Section Cloud sections use a different font from my theme?
Each section has default fonts. Turn on Use custom font in the Sections Cloud app embed and pick your theme's heading and body fonts.
Does the app embed change my theme's own sections?
No. Fonts, scale, page width and spacing in the embed apply only to Section Cloud sections.
Can I make Section Cloud sections wider?
Yes. Set Page width in the app embed anywhere from 1000px to 1600px.
What happens to my styling if I uninstall the app?
Section files stay in your theme, but the app embed's styling is removed, so sections may look slightly different.
