Master the Shopify theme editor to customize every aspect of Scale Theme.
The Theme Editor
The Shopify theme editor is your main tool for customizing Scale Theme. Here is how to use it effectively.
Accessing the editor
- Shopify Admin > Online Store > Themes
- Click Customize on your active theme
Interface layout
The editor is divided into 3 areas:
| Area | Role |
|---|---|
| Left panel | List of page sections, order management |
| Preview | Real-time preview of your page |
| Right panel | Settings for the selected section/block |
Managing sections
Adding a section
- Click Add section in the left panel
- Browse available sections by category
- Click on the desired section to add it
Scale Theme offers more than 50 sections organized into categories:
- Image: Banner, Slideshow, Gallery, Image with Text, Hotspot, Before/After...
- Text: Rich Text, Statement, Steps, Timeline, FAQ...
- Product: Featured Product, Featured Collection, Best Sellers, Reviews...
- Commerce: Countdown, Newsletter, Popup, Calculator...
Reordering sections
Drag and drop sections in the left panel to change their order on the page.
Duplicate / Delete
Click the 3 dots (...) to the right of a section to:
- Duplicate the section with its settings
- Delete the section
Blocks
Each section can contain blocks. These are individual elements within a section.
For example, the Banner section can contain:
- A Heading block (title)
- A Text block (paragraph)
- A Button block (CTA button)
- A Timer block (countdown)
Global section settings
Every section in Scale Theme shares common settings:
Color palette
Each section can use a different palette. Alternate between light and dark palettes to create visual contrast.
Container
- Narrow: Narrow content, ideal for text
- Normal: Standard width
- Full padded: Full width with padding
- Full: Full width without padding
Spacing
- Padding top / bottom: Separately for mobile and desktop
- Values from 0 to 100px
SVG separators
Decorative shapes at the top and/or bottom of each section. More than 14 shapes available (wave, curve, zigzag, etc.).
Visibility
Hide a section on mobile or desktop independently.
Background
- Solid color
- Gradient
- Background image
- Background video
Navigating between pages
At the top of the editor, a selector allows you to navigate between templates:
- Home page (index)
- Product (product page)
- Collection (collection page)
- Blog / Article
- Cart (cart page)
- Pages (static pages)
Each template has its own sections and settings.
Theme settings
At the bottom left, the gear icon opens the global theme settings. These settings apply to the entire store: