Custom section

An empty panel that you fill with blocks: lines of text in different styles, dividers and collapsible rows, arranged in columns or rows, on an optional background image. It’s for content that none of the other sections covers, and it needs no code unless you add a Custom Liquid block.

Add the section

Online Store → Themes → Customize

1. In your Shopify admin, go to Online Store → Themes and select Customize on Cosmero.
2. At the top of the theme editor, open the template you want to change, such as the home page.
3. In the sidebar, select Add section.
4. Choose Custom section.
5. Select Add block and choose a block. Repeat for each piece of content, then select Save.

You can add it to any template, and to the header or the footer.

Settings

• Background: an image that fills the panel behind the blocks.

Panel

• Color scheme: the colors of the panel. You edit color schemes in Theme settings.
• Panel style: Panel is a rounded panel inside the page margin. Flush spans the full page width with square corners.
• Enable full width on mobile: on mobile, the panel runs from edge to edge with square corners. Shown when Panel style is Panel.
• Top padding: space above the content, from 0 to 120 px.
• Bottom padding: space below the content, from 0 to 120 px. On mobile, both paddings are scaled down: 64 px becomes 40 px.

Blocks

Select Add block to add any of the blocks below. A Column or a Row can hold blocks of its own, including other columns and rows.

Text

Adds a line of text.

• Text: the line to show.
• Text style: Heading, Subheading, Normal text or Small text.
• Alignment: left, center or right.

Divider

Adds a horizontal line between blocks.

• Style: Subtle or Strong.

Collapsible tab

Adds a row that opens to show its content, like the questions in the FAQ section. It shows once it has a heading and some content.

• Heading: the text on the row.
• Content: the text that shows when the row opens.
• Page content: a page whose content shows below the text.
• Open by default: the row starts open.

Group

Arranges the blocks inside it. In the block list it appears as Column, with its blocks stacked, and Row, with its blocks side by side, both under Layout.

• Layout direction: Vertical stacks the blocks. Horizontal places them side by side, spread across the width.
• Alignment: lines the blocks up on the Left, Center or Right. Shown when Layout direction is Vertical.
• Padding: the space around the blocks, 0 to 200 px: above and below them in a vertical group, left and right in a horizontal one.

Custom Liquid

Adds an app snippet or other Liquid code. See Custom Liquid.

• Liquid code: the code to add.

Tips

• Text over a Background image uses the panel’s Color scheme, with no overlay. Choose a calm image and a color scheme whose text reads well on it.
• A horizontal group keeps its blocks on one line on every screen and cuts off what doesn’t fit, so check your rows on a phone.