Product details

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

When you add a fresh Product details section to your product page, it comes pre-loaded with 2 Highlight feature blocks and 1 Specifications block - the most common setup for showcasing product highlights and technical details side by side. Here's the fastest way to get it live:

STEP 1: Add the section

Follow the steps in 3. Location & Setup to add the Product details section to your product page.

STEP 2: Fill in the Highlight feature blocks

Click on each Highlight feature block in the left sidebar and fill in:

• Icon - choose from the dropdown, upload a custom image or enter an icon name from this list into the Use another icon field.
• Heading - a short benefit or feature name (e.g., "Flattering fit").
• Text - one or two supporting lines.

STEP 3: Fill in the Specifications block

Click on the Specifications block and add your table content to the Table detail field. Use a colon (:) to separate the label from the value on each line (e.g., Brand: Example Co.). For dynamic values from product metafields, use the [[custom.key]] format - see the use case below for full guidance.

STEP 4: Click "Save" when done.

⚠️ Note: You can add more blocks at any time via "Add block". To remove a block you don't need, click it and select "Remove block".

The Highlight feature block is ideal for calling out key product benefits - such as "Water resistant", "Lifetime warranty", or "Eco-friendly" - using an icon and short text. Blocks always display side by side in a grid of up to 3 per row.

STEP 1: Add a Highlight feature block

Under the Product details section in the left sidebar, click "Add block" and select Highlight feature.

STEP 2: Choose an icon

In the block's settings panel, choose one of the following:

• Select from the Icon dropdown for built-in icons.
• Enter a name in Use another icon for icons from the icon library (e.g., badminton).
• Upload your own image in Custom icon image.

STEP 3: Add the heading and text

• Enter a short benefit name in Heading.
• Enter supporting text in Text.
• To add a highlight effect to part of the heading or text, wrap the word in [] brackets (e.g., [Flattering] fit) and choose the Highlight effect style.

STEP 4: Adjust alignment and appearance

• Set Desktop text alignment and Mobile text alignment to Left, Center, or Right.
• Change Text transform if you want the text in uppercase or another style.

STEP 5: Click "Save" when done.

The Specifications block lets you display a clean two-column table of product details - either with static text or dynamic values pulled automatically from product metafields.

STEP 1: Add a Specifications block

Under the Product details section, click "Add block" and select Specifications.

STEP 2: Add a heading and description (optional)

• Enter a title in Heading (e.g., "Technical details").
• Add a short description in Text if needed.
• Adjust Text alignment and Heading size to your preference.

STEP 3: Add table content

In the Table detail field, enter each row on a new line using the following rules:

• Rule 1: Use a colon (:) to separate the label from the value - e.g., Brand: Example Co.
• Rule 2: Use a hyphen (-) at the start of a line to indent it as a sub-row - e.g., - Length: 30cm
• Rule 3: Press Shift + Enter to add a new row.
• Rule 4: Use [[custom.key]] to dynamically pull a value from a product metafield - e.g., Material: [[custom.material]]. The value will update automatically per product. See more detailed guidance in the metafield use case below.

STEP 4: Configure table display options

• Text to use for empty fields - set what appears when a metafield has no value (default: -).
• Rows shown by default - drag the slider to control how many rows are visible before a "Read more" button appears.
• Customize the "Read more" label and "See less" label as needed.

STEP 5: Click "Save" when done.

Instead of typing static values, you can link each row in the Specifications table to a product metafield so the values update automatically per product.

STEP 1: Create a Product metafield in Shopify admin

• Go to Settings > Metafields and metaobjects  > Products > Add definition.
• Give it a name and set the type to one of: Single line text, Multi-line text, Rich text, Decimal, Dimension, Volume, Weight, or Money.
• Click Save.

STEP 2: Assign a value to each product

• Go to Products, open a product, scroll to Metafields, and enter a value for your new field.
• Click Save. Repeat for each product.

STEP 3: Use the [[custom.key]] format in the Table detail field

• In the Specifications block settings, find the Table detail field.
• For any row you want to pull dynamically, enter: Label: [[custom.metafield_key]]
• Find the key in Settings > Metafields and metaobjects - it's the short text shown under the metafield name, starting with custom.
• Example: Material: [[custom.material]] → displays as Material: Cotton for one product, Material: Polyester for another.

STEP 4: (Optional) Set fallback text for empty fields

In the Text to use for empty fields setting, enter what should appear when a product has no value for that metafield (e.g., - or N/A).

STEP 5: Click "Save" when done.

The Rich text block is the most versatile block in this section - use it to display branded content such as a guarantee badge, shipping information, or feature descriptions, complete with an icon, heading, text, image, and payment method icons.

STEP 1: Add a Rich text block

Under the Product details section, click "Add block" and select Rich text.

STEP 2: Add an icon (optional)

• Select from the Icon dropdown, enter a name in Use another icon, or upload a Custom icon image.

STEP 3: Add heading and text

• Enter a title in Heading and your content in Text.
• Wrap any word in [] brackets to apply a Highlight effect (e.g., [Authenticity] Guaranteed).
• Set Text alignment and Heading size as needed.

STEP 4: Add an image or pull content from a page (optional)

• Upload an Image to show a supporting visual below the text.
• Alternatively, use Content from page to pull content from an existing Shopify page.

STEP 5: Control content height

• Use Default content height to decide how much content shows before a "Read more" button appears. Set it to Show full content to always show everything.
• Customize the "Read more" label and "See less" label if needed.

STEP 6: Configure additional display options

• Show payment icons - toggle on to display accepted payment method icons (e.g., Visa, Mastercard, Apple Pay).
• Custom payment icons - enter payment names separated by commas to show specific icons (e.g., visa, mastercard, klarna).
• Show border - toggle on to add a border around the block.
• Color scheme (light/dark) - choose the color scheme applied to this block in light and dark mode.

STEP 7: Click "Save" when done.

The Description block automatically pulls and displays the product's description from Shopify admin - no manual text entry needed. The content updates per product.

STEP 1: Add a Description block

Under the Product details section, click "Add block" and select Description.

STEP 2: Add an optional heading

• Enter a title in Heading if you want a label above the description (e.g., "About this product").
• Choose the Heading size and Heading alignment.

STEP 3: Control how much content is shown

• In Default content height, choose whether to show the full description or truncate it with a "Read more" button.
• Customize the "Read more" label and "See less" label as needed.

STEP 4: Click "Save" when done.

⚠️ Note: The content of this block comes from the product's description in your Shopify admin (Products > [Product] > Description). If the description is empty, the block will not display any content.