Product info (product details block)
Product details section - Product details block
This block is part of the Product details block.
You can add several product info blocks, separated by dividers above and below. Please check the demo example.
| Setting | Description |
|---|---|
| Info label | Add a label for product info. |
| Preset |
In Theme Settings → Typography → Fonts, you can set font settings for Heading, Subheading, Caption, and Paragraph. Choose which style to apply in this block. H5-H6: This style allows you to select a heading level from H5 to H6, and customize it using the options below. Subheading: This style is used for text that appears below a main heading, typically smaller or less prominent than the heading, but still visually distinct from body text. Caption: This style is used for short supporting text, such as labels or annotations. Paragraph: This style is used for standard body text. |
| Color |
Each color scheme includes Heading, Text, and Accent color settings. Use this dropdown to select which color to apply. The available options may vary depending on the selected block color scheme. Heading Text Accent |
| Text style |
Choose text style for preset: Normal: Displays the text exactly as entered in the rich text field in the theme customizer or the rich text field in the admin. Uppercase: ALL LETTERS ARE CAPITALS Lowercase: all letters are small |
| Info content |
To display different content in this block, you can create a metafield and add it here using the "Connect dynamic icon" above the field. For example, in the demo, we have Material, Care, and Size Info, each with a corresponding metafield. Check the screenshots below for reference. |
| Preset | Choose which typography style to apply to the info content text (same options as the label preset above: H5-H6, Subheading, Caption, Paragraph). Default: Paragraph. |
| Color |
Choose the color applied to the info content text: Heading Text (Default) Accent |
| Text style |
Choose the text style for the info content: • Normal (Default) • Uppercase • Lowercase |
Info content metafield
Navigate to Settings → Metafields and Metaobjects → Products → Definitions → Add definition.
After this, navigate to Products → Each product page, scroll to the Product Metafields section, and add content for each product page.
Navigate to the Theme Customizer → Add a Product Info block → Go to the Info Content field and connect the metafield.
