Product - Vertical Benefits

The Vertical Benefits block allows you to showcase key product selling points in a clean, vertically stacked format. This is ideal for emphasizing unique features, guarantees, or USPs (unique selling propositions) that build customer trust and increase conversions.

---

❗❗Custom Placement Required❗❗

To insert the Vertical Benefits on your product page:

1. In the Shopify theme editor, navigate to the Product Information section.

2. Click “Add block” and select Custom Liquid.

3. Paste the following code snippet inside the block:

liquidCopyEdit<div id='ecomz-benefits'></div>

1. Save and drag the block to reposition it wherever you want the benefits to show.

---

General Settings

• Accessibility Label Provides a semantic description for screen readers. Example: Key Product Benefits

---

Color Settings

• Background Color (Section) Sets the background color of the entire vertical benefits container. Default: Transparent

• Icon Background Color Defines the background behind each icon. Default: Transparent

• Icon Color (SVG) Sets the fill color of the benefit icons. Example: #2A2A2A

• Text Color Determines the color of the benefit description text. Example: #242424

---

Icon Settings

• Icon Size (px) Sets the icon size for desktop devices. Default: 43

• Icon Size on Mobile (px) Scales down the icon for mobile views. Default: 37

• Space Between Icon and Text (px) Controls the gap between each icon and its corresponding text. Desktop: 6, Mobile: 12

---

Text Settings

• Benefit Text Font Size (Desktop) Set the font size for the benefit text on desktop screens. Default: 16px

• Benefit Text Font Size (Mobile) Font size of the benefit text on mobile devices. Default: 14px

---

Spacing Settings

• Padding Top / Bottom (Section) Controls the vertical padding within the section container. Top: 2rem, Bottom: 1rem

• Margin Top / Bottom (Section) Adjusts vertical spacing outside the section. Top: 0rem, Bottom: 2rem

• Space Between Benefit Blocks (px) Defines the vertical gap between each benefit item. Default: 4px

---

Width and Padding Settings

• Max Section Width (rem) Restrict the maximum width of the benefits container. Example: 105

• Left Padding (px) Adjusts the internal horizontal padding on the left side. Default: 0px

• Right Padding (px) Adjusts internal horizontal padding on the right side. Default: 0px

---

The Vertical Benefits snippet is perfect for brands that want to communicate clarity and professionalism with feature highlights. It supports responsive scaling and can be positioned freely using Shopify’s drag-and-drop Custom Liquid blocks.