> ## 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.

# Product information and tab blocks

> Title, price, description, gallery, product tabs, FAQ, size chart, and specification blocks

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.

### Title

Block ID `pdp-title`.

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `title_source` | select | `product`, `custom`, `variant` / default `product` | Title source *(Title Source)*. |
| `custom_title` | inline\_richtext | default `Custom Product Title` | Custom title text *(Title Source)*. Override the product title with custom text. Wrap words in bold to apply accent styling. |
| `accent_text_target` | checkbox | default `False` | Accent text target *(Title Source)*. Apply accent color to bold text in the custom title |
| `accent_text_use_accent_font` | checkbox | default `True` | Use accent font *(Title Source)*. Apply the global accent font to bold text |
| `dynamic_variant_title_option` | select | `1`, `2`, `3` / default `1` | Variant option *(Color)*. Which variant option value to display as the title (e.g., 'Toning Kit' from Option 1) |
| `text_balance` | checkbox | default `False` | Text balance *(Typography)*. Balances line lengths for a more visually even title |
| `typography_sizing_mode` | select | `preset`, `custom` / default `preset` | Typography sizing *(Typography)*. |
| `line_height` | range | default `1.2` | Line height *(Desktop Typography)*. |
| `line_height_mobile` | range | default `1.2` | Line height *(Mobile Typography)*. |
| `underline_style` | select | `none`, `solid`, `swipe`, `wave`, `scribble`, `circle`, `hook`, `highlight` / default `none` | Underline Style *(Underline)*. |
| `underline_target` | select | `full`, `bold` / default `full` | Apply To *(Underline)*. |
| `margin_top` | range | default `0` | Top margin (px) *(Spacing)*. |
| `margin_bottom` | range | default `0` | Bottom margin (px) *(Spacing)*. |

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

### Price

Block ID `pdp-price-block`.

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `multiply_price_by_quantity` | checkbox | default `True` | Multiply price by quantity *(Dynamic)*. On by default so the price matches the add to cart button, which multiplies by quantity. |
| `apply_selected_subscription_discount` | checkbox | default `False` | Apply selected subscription discount *(Dynamic)*. When on, price reflects the selected subscription/selling plan discount when applicable. |
| `price_font_size` | range | default `22` | Price font size (px) *(Size Settings)*. |
| `compare_price_font_size` | range | default `20` | Compare price font size (px) *(Size Settings)*. |
| `price_font_weight` | select | `400`, `500`, `600`, `700` / default `600` | Price font weight *(Size Settings)*. |
| `show_save_badge` | checkbox | default `True` | Show save badge *(Save Badge)*. |
| `save_text` | text | | Save badge text *(Save Badge)*. Leave empty to use the store-wide format from Theme settings → Cart. Use \{savings\_percent} for percentage (e.g. '20%') and \{savings\_amount} for dollar savings (e.g. '$10'). Static text like '$5 OFF' also works. |
| `save_badge_font_size` | range | default `12` | Font size (px) *(Save Badge Style)*. |
| `save_badge_padding_v` | range | default `3` | Vertical padding (px) *(Save Badge Style)*. |
| `save_badge_padding_h` | range | default `6` | Horizontal padding (px) *(Save Badge Style)*. |
| `save_badge_border_radius` | range | default `50` | Border radius (px) *(Save Badge Style)*. |
| `enable_save_badge_shine` | checkbox | default `False` | Enable shine effect *(Save Badge Style)*. |
| `save_badge_enable_border` | checkbox | default `False` | Enable border *(Save Badge Border)*. |
| `save_badge_border_width` | range | default `1` | Border width (px) *(Save Badge Border)*. |
| `save_badge_border_style` | select | `solid`, `dashed`, `dotted` / default `solid` | Border style *(Save Badge Border)*. |
| `show_save_icon` | checkbox | default `True` | Show tag icon *(Save Badge Icon)*. |
| `save_icon_size` | range | default `11` | Icon size (px) *(Save Badge Icon)*. |
| `price_margin_top` | range | default `5` | Top margin (px) *(Spacing)*. |
| `price_margin_bottom` | range | default `0` | Bottom margin (px) *(Spacing)*. |

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

### Product Description

Block ID `pdp-product-description`.

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `show_heading` | checkbox | default `False` | Show heading *(Heading)*. |
| `heading` | text | default `Description` | Heading *(Heading)*. |
| `heading_font_size` | range | default `18` | Heading font size (px) *(Heading)*. |
| `heading_spacing` | range | default `12` | Heading bottom spacing (px) *(Heading)*. |
| `text_font_size` | range | default `16` | Font size (px) *(Text Style)*. |
| `line_height` | range | default `1.6` | Line height *(Text Style)*. |
| `text_alignment` | select | `left`, `center`, `right` / default `left` | Text alignment *(Text Style)*. |
| `max_width` | range | default `1200` | Max width (px) *(Text Style)*. |
| `enable_read_more` | checkbox | default `False` | Enable read more truncation *(Read More)*. |
| `max_lines` | range | default `5` | Max lines before truncation *(Read More)*. |
| `read_more_text` | text | default `Read more` | Read more text *(Read More)*. |
| `read_less_text` | text | default `Read less` | Read less text *(Read More)*. |
| `show_fallback` | checkbox | default `False` | Show fallback text when no description *(Fallback)*. |
| `fallback_text` | textarea | default `No description available.` | Fallback text *(Fallback)*. |
| `margin_top` | range | default `0` | Top margin (px) *(Spacing)*. |
| `margin_bottom` | range | default `0` | Bottom margin (px) *(Spacing)*. |

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

### Product Gallery

Block ID `pdp-product-gallery`.

Child blocks: `pdp-gallery-navigation`, `pdp-product-benefits`

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `image_aspect_ratio` | select | `1:1`, `3:4`, `2:3` / default `1:1` | Image shape *(Image gallery)*. Applies to the main image and the thumbnails. |
| `main_image_portrait_adaptation` | checkbox | default `False` | Use natural image height on desktop *(Image gallery)*. Ignores the image shape above on desktop so tall images fill the width with no side whitespace. Mobile keeps the chosen shape. |
| `enable_full_width_image` | checkbox | default `False` | Edge-to-edge image on mobile *(Image gallery)*. Drops the padding around the gallery on mobile and lets the image use its natural height. |
| `enable_image_zoom` | checkbox | default `False` | Zoom on hover *(Image gallery)*. Magnifies the main image under the cursor. Pointer devices only. |
| `show_desktop_arrows` | checkbox | default `False` | Show arrows on desktop *(Gallery arrows)*. |
| `desktop_arrow_placement` | select | `overlaid`, `below` / default `overlaid` | Desktop placement *(Gallery arrows)*. |
| `show_mobile_arrows` | checkbox | default `False` | Show arrows on mobile *(Gallery arrows)*. |

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

### Gallery Navigation

Block ID `pdp-gallery-navigation`.

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `gallery_navigation_style` | select | `thumbnails`, `navigation_dots` / default `thumbnails` | Style. |
| `dot_style` | select | `normal`, `pill` / default `pill` | Dot shape. |
| `show_product_variants` | checkbox | default `True` | Hide variant images. Keeps variant-specific images out of the gallery, showing only the product's own media. |
| `thumbnails_left_column_desktop` | checkbox | default `False` | Thumbnails in a left column on desktop. |
| `thumbnails_fade_to_white_desktop` | checkbox | default `False` | Fade the bottom of the column. Hints that the list scrolls. Left column layout with 7 or more images only. |

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

### Product Labels

Block ID `pdp-product-labels`.

Child blocks: `pdp-product-label-item`

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `container_layout` | select | `flex`, `grid` / default `grid` | Container layout *(Layout)*. Auto width sizes each label to its content. Equal width gives all labels the same width. |
| `labels_justify_content` | select | `flex-start`, `center`, `flex-end`, `space-between`, `space-around` / default `flex-start` | Alignment *(Layout)*. |
| `show_dividers` | checkbox | default `False` | Show divider between labels *(Dividers)*. Adds a line between each label. Best used with the label container turned off. |

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

### Rating

Block ID `pdp-rating-block`.

Child blocks: `pdp-rating-avatars`, `pdp-rating-stars`, `pdp-rating-tp-stars`, `pdp-rating-text`, `pdp-rating-badge`

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `link` | text | default `reviews` | Reviews Anchor. Enter the ID of the reviews section to scroll to when clicked (e.g. "reviews"). |
| `container_style` | select | `none`, `pill` / default `none` | Container Style *(Container)*. |
| `pill_enable_gradient` | checkbox | default `False` | Enable Gradient *(Pill Background)*. |
| `pill_border_style` | select | `solid`, `dashed`, `dotted`, `none` / default `solid` | Border Style *(Pill Border)*. |
| `margin_top` | range | default `0` | Top Margin (px) *(Spacing)*. |
| `margin_bottom` | range | default `0` | Bottom Margin (px) *(Spacing)*. |

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

### Product Tabs

Block ID `pdp-product-tabs`.

Child blocks: `_pdp-tab-content`, `_pdp-tab-review`, `_pdp-tab-comparison`, `_pdp-tab-specs`, `_pdp-tab-benefits`

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `tab_style` | select | `segmented`, `underline`, `pills` / default `segmented` | Tab style *(Color & Style)*. |
| `enable_content_border` | checkbox | default `False` | Show content border *(Color & Style)*. Adds a border and padding around the tab content area. |
| `content_animation` | select | `slide`, `fade`, `none` / default `slide` | Content animation *(Color & Style)*. How tab content animates in when switching tabs. |
| `heading` | richtext | | Heading (optional) *(Heading)*. |
| `typography_sizing_mode` | select | `preset`, `custom` / default `preset` | Typography sizing *(Typography)*. |
| `spacing_mode` | select | `preset`, `custom` / default `preset` | Spacing *(Spacing)*. |

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

### Content tab

Block ID `_pdp-tab-content`.

Child blocks: `pdp-custom-image`, `pdp-custom-text`, `pdp-custom-liquid`, `pdp-custom-content`

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `tab_title` | richtext | default `<p>Description</p>` | Tab title. |
| `source` | select | `manual`, `description`, `metafield` / default `manual` | Content source. |
| `content` | richtext | default `<p>Tell the story behind this product.</p>` | Content. |
| `metafield` | text | default `custom.about` | Metafield (namespace.key). |

### Specs tab

Block ID `_pdp-tab-specs`.

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `tab_title` | richtext | default `<p>Specs</p>` | Tab title. |
| `column1_header` | richtext | default `<p>Spec</p>` | Left column header. |
| `column2_header` | richtext | default `<p>Value</p>` | Right column header. |
| `disclaimer` | richtext | | Disclaimer (optional). |
| `rows_count` | range | default `2` | Number of rows. |
| `row_1_image` | image\_picker | | Image (optional) *(Row 1)*. |
| `row_1_label` | richtext | default `<p>Material</p>` | Label *(Row 1)*. |
| `row_1_value` | richtext | default `<p>Premium aluminum</p>` | Value *(Row 1)*. |
| `row_2_image` | image\_picker | | Image (optional) *(Row 2)*. |
| `row_2_label` | richtext | default `<p>Weight</p>` | Label *(Row 2)*. |
| `row_2_value` | richtext | default `<p>1.2 kg</p>` | Value *(Row 2)*. |
| `row_3_image` | image\_picker | | Image (optional) *(Row 3)*. |
| `row_3_label` | richtext | | Label *(Row 3)*. |
| `row_3_value` | richtext | | Value *(Row 3)*. |
| `row_4_image` | image\_picker | | Image (optional) *(Row 4)*. |
| `row_4_label` | richtext | | Label *(Row 4)*. |
| `row_4_value` | richtext | | Value *(Row 4)*. |
| `row_5_image` | image\_picker | | Image (optional) *(Row 5)*. |
| `row_5_label` | richtext | | Label *(Row 5)*. |
| `row_5_value` | richtext | | Value *(Row 5)*. |

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

### Comparison tab

Block ID `_pdp-tab-comparison`.

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `tab_title` | richtext | default `<p>Why choose us</p>` | Tab title. |
| `intro` | richtext | | Intro (optional). |
| `brand_logo` | image\_picker | | Your brand logo. |
| `brand_name` | richtext | default `<p>Us</p>` | Your brand name. |
| `others_label` | richtext | default `<p>Others</p>` | Others label. |
| `rows_count` | range | default `3` | Number of rows. |
| `row_1_feature` | richtext | default `<p>Free shipping</p>` | Feature *(Row 1)*. |
| `row_1_brand_has` | select | `yes`, `no` / default `yes` | Brand has *(Row 1)*. |
| `row_1_others_has` | select | `yes`, `no` / default `no` | Others has *(Row 1)*. |
| `row_2_feature` | richtext | default `<p>30-day returns</p>` | Feature *(Row 2)*. |
| `row_2_brand_has` | select | `yes`, `no` / default `yes` | Brand has *(Row 2)*. |
| `row_2_others_has` | select | `yes`, `no` / default `no` | Others has *(Row 2)*. |
| `row_3_feature` | richtext | default `<p>1-year warranty</p>` | Feature *(Row 3)*. |
| `row_3_brand_has` | select | `yes`, `no` / default `yes` | Brand has *(Row 3)*. |
| `row_3_others_has` | select | `yes`, `no` / default `no` | Others has *(Row 3)*. |
| `row_4_feature` | richtext | | Feature *(Row 4)*. |
| `row_4_brand_has` | select | `yes`, `no` / default `yes` | Brand has *(Row 4)*. |
| `row_4_others_has` | select | `yes`, `no` / default `no` | Others has *(Row 4)*. |
| `row_5_feature` | richtext | | Feature *(Row 5)*. |
| `row_5_brand_has` | select | `yes`, `no` / default `yes` | Brand has *(Row 5)*. |
| `row_5_others_has` | select | `yes`, `no` / default `no` | Others has *(Row 5)*. |

### Benefits tab

Block ID `_pdp-tab-benefits`.

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `tab_title` | richtext | default `<p>Benefits</p>` | Tab title. |
| `heading` | richtext | | Section heading (optional). |
| `icon_style` | select | `checkmark`, `custom_svg`, `custom_image` / default `checkmark` | Icon *(Icon)*. |
| `custom_icon_svg` | html | | Custom icon SVG *(Icon)*. Paste your SVG code here. |
| `custom_icon_image` | image\_picker | | Custom icon image *(Icon)*. |
| `show_icon_bg` | checkbox | default `True` | Show icon background circle *(Icon)*. |
| `items_count` | range | default `3` | Number of benefits *(Benefits)*. |
| `item_1_text` | richtext | default `<p>Easy to use</p>` | Text *(Benefit 1)*. |
| `item_2_text` | richtext | default `<p>Built to last</p>` | Text *(Benefit 2)*. |
| `item_3_text` | richtext | default `<p>Customer-loved</p>` | Text *(Benefit 3)*. |
| `item_4_text` | richtext | | Text *(Benefit 4)*. |
| `item_5_text` | richtext | | Text *(Benefit 5)*. |
| `item_6_text` | richtext | | Text *(Benefit 6)*. |

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

### Review tab

Block ID `_pdp-tab-review`.

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `tab_title` | richtext | default `<p>Reviews</p>` | Tab title. |
| `show_stars` | checkbox | default `True` | Show star rating *(Rating)*. |
| `star_rating` | range | default `5` | Stars *(Rating)*. |
| `star_icon_style` | select | `sharp`, `middle`, `soft` / default `soft` | Star Icon Style *(Rating)*. |
| `quote` | richtext | default `<p>Great product. Fast, sturdy, exactly as described.</p>` | Quote *(Quote)*. |
| `author_image` | image\_picker | | Author photo *(Author)*. |
| `author_name` | richtext | default `<p>Verified customer</p>` | Name *(Author)*. |
| `author_date` | richtext | | Date *(Author)*. |
| `author_badge` | richtext | default `<p>Verified buyer</p>` | Badge *(Author)*. |
| `show_badge_icon` | checkbox | default `True` | Show seal checkmark icon *(Author)*. Displays a verified seal icon before the badge text |

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

### Product FAQ

Block ID `pdp-product-faq`.

Child blocks: `_pdp-faq-item`

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `faq_style` | select | `boxed`, `separated`, `filled`, `underline`, `plain` / default `boxed` | FAQ style *(Color & Style)*. |
| `accordion_mode` | checkbox | default `False` | Only one open at a time *(Behavior)*. |
| `toggle_icon` | select | `plus`, `chevron`, `arrow`, `caret`, `custom` / default `plus` | Toggle icon *(Toggle Icon)*. |
| `custom_toggle_icon` | html | | Custom SVG *(Toggle Icon)*. Paste SVG code. Use stroke='currentColor' / fill='currentColor' to inherit color. |
| `toggle_animation` | select | `rotate`, `none` / default `rotate` | Open animation *(Toggle Icon)*. |
| `typography_sizing_mode` | select | `preset`, `custom` / default `preset` | Typography sizing *(Typography)*. Preset uses theme defaults. Switch to Custom to fine-tune sizes. |
| `spacing_mode` | select | `preset`, `custom` / default `preset` | Spacing *(Spacing)*. Preset uses theme defaults. Switch to Custom to fine-tune spacing. |

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

### Size Chart

Block ID `pdp-size-chart`.

Child blocks: `pdp-size-table`, `pdp-custom-text`, `pdp-custom-liquid`, `pdp-custom-image`, `pdp-divider`

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `inline_with_variant_picker` | checkbox | default `False` | Show inline with variant picker *(Position)*. Moves the trigger next to the matching option label in the variant picker |
| `inline_option_name` | text | default `Size` | Option name to target *(Position)*. Case-insensitive match against the product option name (e.g. Size) |
| `display_style` | select | `modal`, `drawer` / default `modal` | Display style *(Style)*. |
| `trigger_text` | text | default `Size chart` | Trigger text *(Trigger)*. |
| `underline_text` | checkbox | default `True` | Underline text *(Trigger)*. |
| `show_icon` | checkbox | default `True` | Show icon *(Trigger)*. |
| `use_custom_icon` | checkbox | default `False` | Use custom icon *(Trigger)*. |
| `custom_icon` | html | | Custom icon SVG *(Trigger)*. Paste an inline SVG. It inherits the trigger color. |
| `popup_title` | text | default `Size Chart` | Title *(Panel)*. |
| `keep_open_in_editor` | checkbox | default `False` | Keep panel open in editor *(Editor)*. Opens the panel automatically while editing so child blocks are accessible. Has no effect on the live storefront. |

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

### Features List

Block ID `pdp-features-list`.

Child blocks: `pdp-features-list-item`

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `layout` | select | `grid`, `stacked`, `flowing` / default `grid` | Layout (desktop). Grid: 2 columns. Stacked: single column. Flowing: items wrap left to right. |
| `layout_mobile` | select | `grid`, `stacked`, `flowing` / default `stacked` | Layout (mobile). Overrides the layout on mobile devices. |
| `enable_icon_background` | checkbox | default `True` | Enable icon background *(Background)*. |
| `enable_icon_circle_stroke` | checkbox | default `False` | Enable border stroke *(Background)*. |
| `icon_circle_stroke_style` | select | `solid`, `dashed`, `dotted` / default `solid` | Stroke style *(Background)*. |

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

### Product Benefits Gallery

Block ID `pdp-product-benefits`.

Child blocks: `pdp-product-benefit-item`

| Setting | Type | Options / default | What it controls |
| - | - | - | - |
| `benefits_position` | select | `left`, `right` / default `right` | Benefits Position *(Colors)*. Where the benefits panel sits relative to the product image. |
| `benefits_source` | select | `manual`, `metafield` / default `manual` | Benefits source *(Content Source)*. Manual: add Benefit Item blocks. Metafield: pull benefits from a product metafield (per-product, no block editing). |
| `metafield_namespace` | text | default `custom` | Metafield namespace *(Content Source)*. |
| `text_metafield_key` | text | default `benefits` | Text metafield key *(Content Source)*. Reads product.metafields.\<namespace>.\<key>. Must be a list of single-line text (the benefit labels), e.g. custom.features\_titles. |
| `icon_metafield_key` | text | | Icon metafield key (optional) *(Content Source)*. A same-length list paired with the labels by position. Use a list of files/images (e.g. custom.features\_images) OR a list of text values holding a built-in icon keyword or raw SVG. Keywords: truck, shield, returns, check, award, clock, lock, credit-card, headphones, gift, star, leaf, heart, globe. Leave blank for text-only benefits. |
| `enable_border` | checkbox | default `False` | Enable border *(Borders)*. |
| `border_style` | select | `solid`, `dashed`, `dotted`, `double` / default `solid` | Border style *(Borders)*. |

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


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