Custom section

Custom Section allows you to build flexible layouts by combining Row, Column, and Block.
Starting from Vetro v2.2.4, Custom Section also supports Custom Liquid for advanced customization using HTML, CSS, and Liquid.

Section Structure

Custom Section always follows this structure:

Custom section → Row → Column → Block

1. Row

Row is used to divide the section horizontally.

Row with 12 columns

• Divides the layout into 12 columns

• Suitable for grid-based sections such as features, cards, and lists

Examples:

• 4/12 × 3 columns

• 6/12 × 2 columns

Row with 10 columns

• Divides the layout into 10 columns

• Suitable for hero sections and asymmetrical layouts (text + image)

Examples:

• 4/10 + 6/10

• 3/10 + 7/10

2. Column

Column is a child element of Row and is used to contain content.

Column settings

• Width for Desktop / Tablet / Mobile

• Content alignment (Left / Center / Right)

• Padding (Top / Bottom / Left / Right)

• Corner radius ( available from version 3.0.0)

Block link (Vetro 3.0.0)

Paste a URL or search for a page to make the entire column clickable.
This allows users to click and navigate to a specific page (e.g., product, collection, or promotion page).

3. Block

Block is the actual content displayed inside a Column.

Supported blocks

• Heading

• Sub heading

• Text / Caption

• Image

• Icon

• Button group

• Spacer

• Custom Liquid (Available from Vetro v2.2.4)

Custom Liquid allows you to insert HTML, CSS, and Liquid directly into your layout without editing theme files.

Placement

Custom section → Row → Column → Custom liquid

Example: Custom liquid block - CSS Marquee Banner

You can use Custom Liquid to create a scrolling marquee banner using CSS only.

<div class="vetro-marquee">
  <div class="vetro-marquee-track">
    <span>🌿 Botanical extracts</span>
    <span>✨ Dermatologist tested</span>
    <span>🐰 Cruelty free</span>
    <span>💧 Everyday hydration</span>

    <span>🌿 Botanical extracts</span>
    <span>✨ Dermatologist tested</span>
    <span>🐰 Cruelty free</span>
    <span>💧 Everyday hydration</span>
  </div>
</div>

<style>
.vetro-marquee {
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
  background: #f3eee8;
}

.vetro-marquee-track {
  display: flex;
  width: max-content;
  animation: vetroMarquee 20s linear infinite;
}

.vetro-marquee-track span {
  margin-right: 24px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #6e8b6b;
}

@keyframes vetroMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
</style>

4. Spacer

Spacer creates vertical spacing between blocks or rows.