Content blocks settings
A flexible section for building custom content. Its content is built from blocks: add them with Add block in the section.
Blocks you can add to the section
Basic blocks
- Button: a call-to-action button.
- Heading and Heading 1: a title. Both are the same kind of block; Heading 1 is a text block with a ready-made title style.
- Subheading and Subheading 1: a short line above a heading.
- Text and Text 1: body text.
- Divider: a thin line between blocks.
- Spacer: an empty gap between blocks.
These blocks work the same way in every section, so their settings are described once in Basic blocks (available in multiple sections).
Blocks specific to this section
- Collapsible content: expandable rows.
- Reading text: a heading with long text in a readable column.
- Scrolling gallery: a gallery of items that scrolls horizontally.
- Stepped list: a list of steps.
- Icon with text: an image or icon with text next to it.
- Showcase slider: a slider of banner-style slides.
- Scrolling marquee: a running line of text and icons.
- Grid and Row: containers that arrange other blocks in columns.
- Timeline group: a timeline made of timeline items.
- Countdown: a countdown timer.
- Progress item: a progress line with a label.
- Team member: a card with a person’s photo and details.
- Product card hotspot: a product card tied to a hotspot.
- Image hotspot: an image with a product hotspot.
- Before / after: a comparison of two images.
- Product card horizontal: a compact horizontal product card.
- Mini product pair: two compact product cards side by side.
Section settings
| Setting | Description |
|---|---|
| Color scheme | Color scheme applied to the section. Schemes are managed in Theme settings → Colors; use Edit scheme to jump there. Default: Scheme 1. |
| Background image | Image shown behind the section content. |
| Background image mobile | Optional image for mobile. |
| Background style | How the background image fills the section on desktop: Cover (fills the whole area, may crop) or Contain (shows the whole image). Available only when a background image is selected. Default: Cover. |
| Background style mobile | The same choice for mobile: Cover or Contain. Available only when a background image is selected. Default: Cover. |
| Section width | Page keeps the content inside the page width; Full stretches it to the full screen width. Default: Page. |
Decor lines
| Setting | Description |
|---|---|
| Show decor | Adds decorative lines, rails and markers around the section content. Default: Off. |
Shape divider
Cuts the section edge. Add padding so the content doesn’t overlap the cut.
| Setting | Description |
|---|---|
| Type | Shape of the cut: None, Triangle corners, Rounded corners, Zigzag, Diagonal (left), Diagonal (right), Chevron notch or Stairs. Default: None. |
| Position | Which edge is cut: Top, Bottom or Both. Available only when a shape is selected. Default: Top. |
| Cut size | How large the cut is on desktop. Higher values cut deeper. Available only when a shape is selected. Range: 50–150 %, step 5. Default: 100 %. |
| Cut size mobile | How large the cut is on mobile. Available only when a shape is selected. Range: 50–150 %, step 5. Default: 100 %. |
| Top: scheme of the section above | Color scheme of the neighbouring section above, so the cut shows its background in light and dark mode. Available when the cut is at the top or on both edges. Default: Scheme 1. |
| Bottom: scheme of the section below | Color scheme of the neighbouring section below, so the cut shows its background in light and dark mode. Available when the cut is at the bottom or on both edges. Default: Scheme 1. |
Padding
| Setting | Description |
|---|---|
| Top | Space above the section content on desktop. Range: 0–200 px, step 2. Default: 60 px. |
| Bottom | Space below the section content on desktop. Range: 0–200 px, step 2. Default: 60 px. |
| Top mobile | Space above the section content on mobile. Range: 0–120 px, step 2. Default: 30 px. |
| Bottom mobile | Space below the section content on mobile. Range: 0–120 px, step 2. Default: 30 px. |
Custom CSS
The Custom CSS field at the bottom of the section panel is a standard Shopify setting. CSS entered there applies to this section only.