The Product Details section helps you display product information in a structured layout on product pages. It can show the product description, collapsible information rows, product metafield values, and a visual specification area with icons.
This section is useful when you want to organize longer product information without making the product page too crowded.
How to Set Up the Product Details Section in Concept
Steps:
Add the Product Details section
-
From your Shopify admin, open Online Store > Themes.
-
Click Customize on your Concept theme.
-
Open a product template, such as Default product.
-
Click Add section.
-
Select Product Details.
-
Click Save.
After adding the section, you can configure the section heading, layout style, description block, collapsible rows, and specification blocks.
Configure the section layout
-
Open the Product Details section in the theme editor.
-
Use Style to choose how the information area is displayed.
-
Enable Open first row if you want the first accordion row to be expanded by default.
-
Use Specifications heading to control the heading above the specification icon area.
-
Use the heading settings to add a section heading, subheading, description, and optional button.
-
Adjust the heading size, heading alignment, and heading tag as needed.
-
Use the color settings to customize text, background, highlighted text, and button colors.
-
Use the section settings to adjust top padding, bottom padding, divider, full width, and rounded corners.
Add the product description
-
Add or open the Description block.
-
The block automatically displays the current product description from Shopify admin.
-
Add a Heading if you want the description to appear as a collapsible row.
-
Leave the heading empty if you want the description to display directly without an accordion heading.
-
Choose an icon or upload a custom icon image if you want an icon beside the heading.
-
Adjust the icon width if needed.
-
Use Text size to control the description text size.
-
Enable Split mode if you want the product description to appear as a separate sticky column beside the other product details.
When Split mode is enabled, the product description is shown in a split layout instead of inside a normal accordion row.
Add collapsible rows
-
Add a Collapsible row block.
-
Add the row title in the Heading field.
-
Add the row content in the Content field.
-
Choose an icon or upload a custom icon image if you want to show an icon beside the heading.
-
Adjust the icon width and text size if needed.
-
Add more Collapsible row blocks if you need to display more product information.
Collapsible rows are useful for shipping information, returns, care instructions, size details, warranty information, or other product details.
If a collapsible row has no content and no connected metafield value, it will not display on the storefront.
Display product metafields in collapsible rows
-
Open a Collapsible row block.
-
Find the Metafields field.
-
Enter one product metafield namespace and key per line.
-
Use this format when you want to display the default metafield name:
custom.material
custom.care_instructions
- Use this format when you want to customize the displayed label:
Material:custom.material
Care instructions:custom.care_instructions
- Click Save.
The section will only display metafield rows that have values on the current product.
If a metafield supports multiple values, each value can be shown on a separate line inside the row.
Add specification blocks
-
Add a Specification block.
-
Upload an icon image in the Icon setting.
-
Add the specification label in the Heading field.
-
Adjust Text size if needed.
-
Repeat the same process for each specification item you want to show.
Specification blocks appear in the visual specification area of the Product Details section.
The text above this area is controlled by the Specifications heading setting in the main section settings.
If no Specification blocks are added, the specification area will not appear.
Use highlighted text in the section heading
-
Open the Product Details section settings.
-
Add text to the Heading field.
-
Use the highlighted text settings to style part of the heading.
-
Choose a highlight style, such as text, underline, marker, stencil, or scribble.
-
Adjust the highlight color or gradient if needed.
-
Click Save.
Highlighted text only affects the section heading area. It does not change the content inside the product description or collapsible rows.
Product Details behavior
- The section displays information for the current product.
- The Description block uses the product description from Shopify admin.
- The Collapsible row block can display static rich text content, product metafields, or both.
- The Metafields field accepts one product metafield namespace and key per line.
- Blank metafield values are skipped automatically.
- The Open first row setting only affects accordion rows.
- The specification area appears only when Specification blocks are added.
- The Split mode option moves the product description into a separate split column.
Troubleshooting
If the Product Details section does not show on the product page, make sure it has been added to the correct product template.
If the product description does not appear, make sure the product has a description in Shopify admin and that the Description block exists in the section.
If a collapsible row does not appear, make sure the row has a heading and content, or that the connected metafield has a value.
If metafield values do not appear, make sure the namespace and key are entered correctly.
If a custom metafield label does not appear correctly, use the format Label:namespace.key.
If the first row does not open by default, enable Open first row in the section settings.
If the specification icon area is missing, make sure at least one Specification block has an icon or heading.
If the layout does not look as expected, check the Style, Full width, Rounded, and spacing settings.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
शेयर करना:
How to Set Up the Lookbook Section in Concept
How to Add App Blocks in Concept