Shared blocks (heading, text, button…)
Heading, text, button, button group, badge group and divider are blocks that appear inside many sections, including the slideshow, media banner, media with text, rich text and multi-column. They work the same everywhere, so they're documented once here. When a section's page lists one of these blocks, its settings are explained below.
Good for
- Adding a second button to a slide or banner with a Button group
- Short labels like New or Vegan above a heading with a Badge group
- Separating content inside a section with a Divider
Heading
| Heading | The main body copy for this block.
Wrap text in { } for highlight color. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
Appearance
| Highlight text color | Color used to emphasise part of the text.
Default: #e8fd43. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Text
| Content | The main body copy for this block. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Button group
Button 1–2
Each of the 2 buttons has the same settings, set separately for each one.
| Button label | The button's text. Leave it empty to hide this button; the group shows up to two. |
| Button link | Where the button goes. A button without a link still shows, but faded and not clickable, so add a link or clear the label. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store.
Off by default. |
| Button style | Which of the button styles from Theme settings → Buttons this button uses. A primary and a secondary button side by side makes the main action clear.
Choose Primary (default), Secondary or Tertiary. |
| Button icon | An optional icon after the button text, such as an arrow.
Choose None (default), Arrow left, Arrow right, Arrow up, Arrow down, Chevron left, Chevron right, Chevron up, Chevron down, Arrow up right, Plus, Minus, Cross, Check, Play, Cart, Shopping cart, Search, Link, Download, Envelope, Home, Edit, User, Login, Heart, Chat, Filter, Trash, Share, Phone, Map pin or Eye. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Badge group
| Badge style | Filled badges have a solid background in the color scheme's accent color; Outline badges are transparent with an accent-colored border.
Choose Filled (default) or Outline. |
Badge 1–3
Each of the 3 badges has the same settings, set separately for each one.
| Text | The badge's text. One to three words, such as New or Free shipping. Leave it empty to hide this badge; the group shows up to three. |
| Icon | An optional icon before the badge text. Uploading a Custom icon replaces it.
Choose None, Discount, Tag, Coupon, Gift, Sparkle, Star (default), Diamond, Flame, Award, Error, Cross, Clock, Check circle, Truck, Leaf, Bolt, Lock, Check or Arrow right. |
| Custom icon | Overrides the icon above. Use a transparent .svg or .png. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Button
| Button label | Text on the button. Leave it empty to hide the button. Two or three words reads best. |
| Button link | Where the button goes. A button with no link is not shown. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
| Button style | Picks one of the button styles defined in Theme settings → Buttons: primary, secondary or tertiary.
Choose Primary (default), Secondary or Tertiary. |
| Button icon | Optional icon shown after the button label.
Choose None (default), Arrow left, Arrow right, Arrow up, Arrow down, Chevron left, Chevron right, Chevron up, Chevron down, Arrow up right, Plus, Minus, Cross, Check, Play, Cart, Shopping cart, Search, Link, Download, Envelope, Home, Edit, User, Login, Heart, Chat, Filter, Trash, Share, Phone, Map pin or Eye. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Divider
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Tips
- Reorder blocks by dragging them in the sidebar. The order in the sidebar is the order on the page.
- Pair a primary with a secondary button in a Button group so the main action is clear.
- Keep badges to one to three words. They're labels, not sentences.
- Adjust spacing on the block, not the section. Each block has its own top and bottom spacing for fine-tuning the gaps between blocks.
Troubleshooting
A button shows faded and can't be clicked
It has a label but no link. Add a Button link, or clear the label to hide the button.
A section doesn't offer the block I want
Each section accepts its own set of blocks. The Custom section accepts all of the theme's shared blocks.