> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ecomelixir.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout and custom content blocks

> Containers, custom text and images, dividers, notices, steps, and the video carousel

Every setting below is read directly from the theme's block schema, so the names match exactly what you see in the Shopify theme editor. Settings are listed by their internal ID with the editor label beside them.

Add these in the theme editor on your product page, inside the **Product Details** container or directly in the product section.

### Container

Block ID `pdp-container`.

Child blocks: `pdp-container`, `@app`, `pdp-price-block`, `pdp-qty-selector-block`, `pdp-payment-icons`, `pdp-free-gift`, `pdp-add-to-cart-block`, `pdp-title`, `pdp-product-description`, `pdp-product-tabs`, `pdp-size-chart`, `pdp-product-labels`, `pdp-product-faq`, `pdp-rating-block`, `pdp-trust-badge`, `pdp-rating-avatars`, `pdp-rating-stars`, `pdp-rating-tp-stars`, `pdp-rating-text`, `pdp-rating-badge`, `pdp-customer-review`, `pdp-facebook-review`, `pdp-facebook-comment`, `pdp-instagram-comment`, `pdp-tiktok-comment`, `pdp-features-list`, `pdp-authority`, `pdp-award-badge`, `pdp-number-one-award`, `pdp-selling-out-fast`, `pdp-deal-timer`, `pdp-notice-block`, `pdp-money-back-guarantee`, `pdp-custom-money-back`, `pdp-guarantee-badges`, `pdp-replica-warning`, `pdp-video-carousel`, `pdp-custom-image`, `pdp-custom-text`, `pdp-step`, `pdp-custom-content`, `pdp-custom-liquid`, `pdp-divider`

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `layout` | select | `stack`, `grid` / default `stack` | Layout *(Layout)*. |
| `direction` | select | `vertical`, `horizontal` / default `vertical` | Direction *(Layout)*. |
| `direction_mobile` | select | `same`, `vertical`, `horizontal` / default `same` | Direction (mobile) *(Layout)*. |
| `wrap` | checkbox | default `False` | Wrap to next row when full *(Layout)*. |
| `columns` | range | default `2` | Columns *(Layout)*. |
| `columns_mobile` | range | default `1` | Columns (mobile) *(Layout)*. |
| `distribute` | select | `start`, `center`, `end`, `space-between`, `space-around` / default `start` | Justify *(Alignment)*. |
| `align` | select | `stretch`, `start`, `center`, `end` / default `stretch` | Align items *(Alignment)*. |
| `spacing_mode` | select | `simple`, `advanced` / default `simple` | Spacing mode *(Spacing)*. |
| `container_bg_type` | select | `color`, `gradient` / default `color` | Background type *(Style)*. |
| `border_style` | select | `solid`, `dashed`, `dotted` / default `solid` | Border style *(Style)*. |
| `hide_on_desktop` | checkbox | default `False` | Hide on desktop *(Visibility)*. |
| `hide_on_mobile` | checkbox | default `False` | Hide on mobile *(Visibility)*. |
| `enable_targeting` | checkbox | default `False` | Enable visitor targeting *(Visitor targeting)*. |
| `target_countries` | text | default `US` | Show only in these countries *(Visitor targeting)*. Comma-separated country codes (e.g. US, CA, GB). Visitors from other countries will not see this container. |

Plus 14 appearance settings (colors, sizes, spacing).

### Text

Block ID `pdp-custom-text`.

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `text` | richtext | default `<p>Add your custom text here</p>` | Text content *(Content)*. |
| `show_divider` | checkbox | default `False` | Show divider line *(Divider Line)*. Adds a line that fills empty space based on text alignment |
| `divider_height` | range | default `1` | Divider thickness (px) *(Divider Line)*. |
| `divider_style` | select | `solid`, `dashed`, `dotted` / default `solid` | Divider style *(Divider Line)*. |
| `divider_spacing` | range | default `12` | Space between text and divider (px) *(Divider Line)*. |
| `show_icon` | checkbox | default `True` | Show icon before text *(Icon (Optional))*. |
| `custom_icon` | html | default `<svg width="24" height="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-stars"><path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/></svg>` | Custom SVG icon *(Icon (Optional))*. Paste SVG code here. Icon will appear before the text. |
| `icon_size` | range | default `20` | Icon size (px) *(Icon (Optional))*. |
| `icon_spacing` | range | default `8` | Gap (px) *(Icon (Optional))*. |
| `use_image_icon` | checkbox | default `False` | Use image instead of SVG *(Icon (Optional))*. |
| `icon_image` | image\_picker | | Icon Image *(Icon (Optional))*. Only used when 'Use image instead of SVG' is enabled. |
| `show_after_icon` | checkbox | default `False` | Show icon after text *(After Icon (Optional))*. |
| `after_custom_icon` | html | default `<svg width="24" height="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/></svg>` | After Icon SVG *(After Icon (Optional))*. Paste SVG code for the icon that will appear after the text. |
| `after_icon_size` | range | default `20` | After icon size (px) *(After Icon (Optional))*. |
| `use_image_after_icon` | checkbox | default `False` | Use image for after icon *(After Icon (Optional))*. |
| `after_icon_image` | image\_picker | | After Icon Image *(After Icon (Optional))*. Only used when 'Use image for after icon' is enabled. |
| `text_align` | select | `left`, `center`, `right` / default `left` | Text alignment *(Appearance)*. |
| `font_size` | range | default `14` | Font size (px) *(Appearance)*. |
| `margin_top` | range | default `4` | Top margin (px) *(Spacing)*. |
| `margin_bottom` | range | default `4` | Bottom margin (px) *(Spacing)*. |
| `padding_top` | range | default `0` | Top padding (px) *(Spacing)*. |
| `padding_bottom` | range | default `0` | Bottom padding (px) *(Spacing)*. |
| `use_container` | checkbox | default `False` | Enable container background *(Container)*. |
| `container_bg_type` | select | `color`, `gradient` / default `color` | Background type *(Container)*. |
| `container_fit_content` | checkbox | default `True` | Fit container to content *(Container)*. |
| `show_border` | checkbox | default `False` | Show border *(Container)*. |

Plus 12 appearance settings (colors, sizes, spacing).

### Image

Block ID `pdp-custom-image`.

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `image` | image\_picker | | Image *(Image Settings)*. |
| `image_sizing` | select | `auto_height`, `fixed_dimensions`, `max_width`, `max_height` / default `auto_height` | Image sizing mode *(Image Settings)*. Choose how the image should be sized |
| `image_height` | range | default `200` | Image height (px) *(Image Settings)*. Used for fixed dimensions and maximum height modes |
| `image_width` | range | default `300` | Image width (px) *(Image Settings)*. Used for fixed dimensions mode only |
| `image_max_width` | range | default `400` | Maximum width (px) *(Image Settings)*. Image will scale down on smaller screens |
| `image_fit` | select | `contain`, `cover` / default `contain` | Image fitting *(Image Settings)*. How the image should fit within the specified dimensions |
| `alignment` | select | `left`, `center`, `right` / default `center` | Image alignment *(Image Settings)*. |
| `link` | url | | Link (Optional) *(Image Settings)*. Make the image clickable with a link |
| `margin_top_mobile` | range | default `8` | Top margin - Mobile (px) *(Spacing - Mobile)*. |
| `margin_bottom_mobile` | range | default `8` | Bottom margin - Mobile (px) *(Spacing - Mobile)*. |
| `margin_top_desktop` | range | default `8` | Top margin - Desktop (px) *(Spacing - Desktop)*. |
| `margin_bottom_desktop` | range | default `8` | Bottom margin - Desktop (px) *(Spacing - Desktop)*. |
| `container_sizing` | select | `full_width`, `custom_width`, `custom_max_width` / default `full_width` | Container sizing *(Container Settings)*. Control the overall size of the image container |
| `container_width` | range | default `400` | Container width (px) *(Container Settings)*. Used for fixed width mode only |
| `container_max_width` | range | default `600` | Container max width (px) *(Container Settings)*. Used for maximum width mode - container will scale down on smaller screens |
| `high_quality_image` | checkbox | default `False` | High Quality Image *(Image Quality)*. Enable for full resolution, high-quality image display. May increase loading time. |

### Content

Block ID `pdp-custom-content`.

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `custom_content` | richtext | | Custom content. |

### Custom Liquid

Block ID `pdp-custom-liquid`.

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `custom_liquid` | liquid | | t:sections.custom-liquid.settings.custom\_liquid.label. t:sections.custom-liquid.settings.custom\_liquid.info |

### Divider

Block ID `pdp-divider`.

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `style` | select | `solid`, `dashed`, `dotted` / default `solid` | Line style. |
| `thickness` | range | default `1` | Thickness (px). |
| `full_width` | checkbox | default `True` | Full width. |
| `alignment` | select | `left`, `center`, `right` / default `center` | Alignment. |
| `margin_top` | range | default `10` | Top margin (px). |
| `margin_bottom` | range | default `10` | Bottom margin (px). |

Plus 2 appearance settings (colors, sizes, spacing).

### Notice

Block ID `pdp-notice-block`.

Child blocks: `pdp-notice-dot`, `pdp-notice-text`

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `alignment` | select | `left`, `center`, `right` / default `left` | Alignment *(Layout)*. |
| `use_container` | checkbox | default `False` | Enable container background *(Container)*. |
| `container_bg_type` | select | `color`, `gradient` / default `color` | Background type *(Container)*. |
| `container_fit_content` | checkbox | default `True` | Fit container to content *(Container)*. When off, the container stretches to the full block width. |
| `show_border` | checkbox | default `False` | Show border *(Container)*. |
| `enable_targeting` | checkbox | default `False` | Enable visitor targeting *(Geo Targeting)*. |
| `target_countries` | text | default `US` | Show only in these countries *(Geo Targeting)*. Comma-separated country codes (e.g. US, CA, GB). Visitors from other countries will not see this notice. |

Plus 10 appearance settings (colors, sizes, spacing).

### Step

Block ID `pdp-step`.

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `step_number` | select | `1`, `2`, `3`, `4`, `5` / default `1` | Step *(Content)*. Updates the badge text and the number icon together. |
| `text` | inline\_richtext | default `Describe this step` | Text *(Content)*. |
| `badge_style` | select | `pill`, `square`, `circle`, `none` / default `pill` | Badge style *(Badge)*. |
| `badge_label` | text | default `Step` | Badge label *(Badge)*. Word shown before the step number, e.g. "Step" 1. |
| `align` | select | `left`, `center`, `right` / default `left` | Alignment *(Layout)*. |

Plus 15 appearance settings (colors, sizes, spacing).

### Video Carousel

Block ID `pdp-video-carousel`.

Child blocks: `pdp-carousel-video`

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `heading` | text | default `See it in action` | Heading text *(Heading)*. |
| `heading_letter_spacing` | select | `var(--letter-spacing-heading)`, `var(--letter-spacing-body)` / default `var(--letter-spacing-heading)` | Letter spacing *(Heading)*. |
| `video_aspect_ratio` | select | `9 / 16`, `3 / 4`, `4 / 5`, `1 / 1`, `4 / 3`, `16 / 9` / default `9 / 16` | Aspect ratio *(Videos)*. |
| `enable_autoplay` | checkbox | default `False` | Autoplay *(Videos)*. Videos autoplay when they scroll into view (muted) |
| `show_sound_controls_autoplay` | checkbox | default `False` | Show sound toggle during autoplay *(Videos)*. |
| `disable_sound_controls` | checkbox | default `False` | Permanently mute (no sound toggle) *(Videos)*. |
| `show_social_badge` | checkbox | default `False` | Show badge *(Social Media Badge)*. |
| `social_platform` | select | `tiktok`, `instagram`, `facebook` / default `tiktok` | Platform *(Social Media Badge)*. |
| `badge_text` | richtext | default `<p>Over 56M Views On TikTok</p>` | Badge text *(Social Media Badge)*. |
| `use_gradient_text` | checkbox | default `False` | Use platform gradient text color *(Social Media Badge)*. |
| `remove_badge_background` | checkbox | default `False` | Remove background *(Social Media Badge)*. |
| `hide_scrollbar` | checkbox | default `False` | Hide scrollbar *(Appearance)*. |

Plus 14 appearance settings (colors, sizes, spacing).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.