Product - Size Chart Image

The Size Chart Image snippet allows you to display a detailed size chart in a collapsible format on your product page. This helps customers make informed sizing decisions while keeping the layout clean and interactive. It includes image settings, layout spacing, and full styling control over the collapsible tab.

---

❗Custom Placement Instructions❗

To use this snippet on a product page:

1. Navigate to your product information section.

2. Add a Custom Liquid block.

3. Paste this code inside:

htmlCopyEdit<div id='collaps-ecomz-collapsible-tab'></div>

1. Save your changes. You can reposition the block by dragging it up or down within the editor to control where the size chart appears.

---

Accessibility

• Accessibility Label: Example: Promotional Collapsible Tab This label helps screen readers identify the section correctly.

---

Section Settings

Layout & Dimensions

• Background Color: Transparent

• Max Section Width: 120rem (Desktop), 110rem (Mobile)

• Padding (Top/Bottom): 0rem

• Padding Left/Right: 0px / 40px

• Margins (Top/Bottom): 0rem / 2rem

• Mobile Padding (Left/Right): 0px

---

Collapsible Tab Content

• Tab Title: Example: Size Chart This title is clickable and expands/collapses the tab.

• Collapsible Image: Upload the image used for the size chart.

• Image Alt Text: Describe the image for accessibility (e.g., Size chart for T-shirt fits).

• Image Dimensions:

  • Width (Desktop): 1000px

  • Height (Desktop): 760px

  • Width (Mobile): 680px

  • Height (Mobile): 470px

• Image Border Radius: 9px

---

Tab Styling

Visual Appearance

• Tab Background Color: Transparent

• Tab Border Color: #D57474

• Tab Border Width: 0px

• Hover Background Color: #FAFAFA

• Alternate Hover Color: #F4F4F4

Text & Icon Styling

• Tab Title Color: #0E0E0E

• Tab Title Font Size: 18px (Desktop), 16px (Mobile)

---

SVG Icon Options

• Icon Color: #EC1313

• Icon Size: 22px

• Icon Gap (Spacing): 12px

• Custom SVG: You can replace the default arrow with your own SVG code. Paste the full SVG snippet under the Custom SVG Code field.

---

Use Case

This section is perfect for stores selling apparel, shoes, or any products with specific sizing. It creates a professional, collapsible layout that’s easy to use, mobile-friendly, and enhances buyer confidence.