Blog Builder
/
Sections and layouts
Sections and layouts
Learn how you can improve Shopify blog layout elements
3 min read
By default, every element in a post sits in one column, one under the other. Sections let you place content side by side, like a magazine page. A section has two sides:
Media side: for an image, a video or a product. It can hold more than one element, stacked.
Text side: for headings, paragraphs, lists and other text elements.
Sections are on the Pro plan.
The 4 layouts for Shopify blogs
Layout | How it looks |
|---|---|
Stacked | The media sits above the text, at full width. This is how posts look on the Free and Starter plans. |
Media left | The media is on the left and the text is on the right. |
Media right | The text is on the left and the media is on the right. |
Alternating | Each new section starts on the opposite side of the one above it: left, right, left. |
How to add a section to a Shopify blog
Open a post in the blog builder.
Click Add section at the bottom of the post.
Drag an image, a video or a product into the media side. The media side is marked with a dashed box.
Write your text, or drag text elements, into the text side.
Add more sections the same way.
How to change a section's layout
Each section has its own settings. Click the section and open the Block tab:
Layout: Stacked, Media left or Media right
Media width: 1/3, 40% or 1/2 of the section
Changing one section doesn't change the others.
How to set the default layout
New sections use the layout from your template settings.
Go to Templates and click Template settings.
Open the Layout tab.
Choose a section layout and a media width.
Click Save Settings.
The default only applies to sections you add after you change it. Sections you already added keep their own layout.
If you choose Alternating, each new section starts on the opposite side of the section above it.
On phones
On small screens, the two sides of a section stack, so the post stays easy to read.
Tips
Use sections for content that belongs together, like a product and the text that describes it.
Alternating works well for long guides and lookbooks, because it keeps the page moving.
Keep the text side short. If the text is much longer than the media, use a full-width element instead.
What about Text & Image and Text & Product?
These elements still work on every plan where they are available. They place one image or one product beside a block of text. Sections give you more control: you can put several elements on each side and choose the layout per section.