3 min read
Build your own section
Ready-made sections cover most pages. When you want something they don’t offer, such as three product cards next to a short story, or a “Why shop with us” strip with icons, you can build it yourself from small pieces, then save it to use again.
The pieces
Layout blocks hold other blocks. You can put a layout block inside another one.
| Block | What it does |
|---|---|
| Group | A box. Blocks inside sit stacked or side by side, with space between them. |
| Columns | Two to four columns side by side. On phones they stack. |
| Grid | Blocks in rows and columns, as many across as you choose for each screen size. |
| Tabs | Tabs along the top; each tab holds its own blocks. |
| Accordion | Titles that open and close; each one holds its own blocks. |
| Carousel | Slides shoppers swipe sideways; each slide holds its own blocks. |
Elements are the things you see: Heading, Text, Image, Button, Icon, Video, Spacer, Divider, Badge, Product card and Custom HTML.
Build a section, step by step
- Open Online store → Themes → Customize and pick the page.
- In the left panel, press + Add section and open Layout. Choose Group (or Columns). It appears on the page with an empty space inside.
- In the Sections list, under your Group, press Add block. Choose an element, for example Heading. Add a Text and a Button the same way.
- Click a block to change it on the right: its words, picture or link at the top, and its Style underneath.
- To change the order, drag a block by its handle in the Sections list, or select it and press Alt + Up or Alt + Down. You can also drag blocks on the page itself, into or out of a Group.
- Press Save at the top when you are happy.
Style a block
Every block has a Style panel under its settings:
- Spacing: space above and below, and space inside.
- Size: automatic, full width or just as wide as its content; a largest width; a smallest height.
- Text: size, weight and alignment.
- Colour: text and background. Pick one of your theme’s colours so it follows your colour
scheme and dark mode, or choose Custom colour and type one, such as
#1f1f21. - Corners and shadow.
- Visibility: show or hide the block on phones, tablets and computers. Hidden blocks take no space on that screen size.
Show store data in a block
Headings, text, images, buttons and links inside your section can show store data, just like other sections: press the database button beside the setting and pick a source, such as the product’s title on a product page. What you typed before stays as the fallback. See Online store for how dynamic sources work.
Save it as your own section
- In the Sections list, open the ⋯ menu on your Group (or any section).
- Choose Save as my section, give it a name and press Save section.
- To use it again, press + Add section on any page and open the My sections tab. Click it to add a copy.
Each copy is separate: changing it on one page does not change the others, or the saved one. You can keep up to 40 saved sections. To delete one, point at it in My sections and press the bin.
Copy and paste
Select a block and press Ctrl + C (Cmd + C on a Mac), then select where it should go and press Ctrl + V. It is pasted just after the selected block. Ctrl + D duplicates the selected block. Ctrl + Z undoes.
Custom HTML and embeds
The Custom HTML element takes your own HTML, or an embed code from YouTube, Vimeo or Instagram. For your shoppers’ safety it is checked when you save and again when the page is shown: scripts, forms, styles, class names and anything from other websites are removed, and videos play in a safe box. If something you pasted does not show, it was removed by this check.
Good to know
- The page’s main content (for example the product details on a product page), the header and the footer cannot go inside a layout block.
- A block you hide with the eye stays in the list but is not shown to shoppers.
- Very large saved sections (hundreds of blocks) cannot be saved. Split them into two.