The ability to present product information effectively is the lifeblood of e-commerce. Yet, all too often, merchants face a frustrating paradox: abundance turns into overload. Rigid layouts, dry presentations, and information avalanches drown out your product's voice, leaving customers bewildered and disengaged.
To address these roadblocks, Concept theme provides the Product details section, a powerful tool designed to streamline and optimize product communication. This section empowers merchants to curate a clear and concise product narrative, focusing on their specifications.
This tutorial shows you how to configure the Product details section step-by-step:
A. Where is this feature
On your Product page via the Theme editor, create the Product details section under the Template section group.
B. Setting up the Product details
1. The section settings
|Open first collapsible row
Enable to open the first collapsible row.
Enters the text
The section title.
|The heading size can be set to one of the following option: Small, Medium, Large, or Extra large.
|The Heading can be aligned to the Left, Center, or Right.
|Selects the heading tag to structure and organize your content for SEO.
|The subheading for the heading is placed above the heading.
|The description text for the heading is placed below the heading.
|Chooses from one of the following 6 options to format your text:
Require highlighted text style to be set to Hand-drawn scribble.
|This setting offers 5 ways to highlight text:
|You can optionally customize the colors of the section, including the following:
|You can adjust the Top padding and Bottom padding from 0px to 120px in increments of 4px.
|Show section divider
|Shows a line divider above this section..
|Make section full width
|Makes the container full width.
|Make section rounded
|Applies a rounded edge to the top two corners.
2. The block settings
This block is supposed to leverage informative and engaging descriptions to optimally showcase product details and enhance the customer experience.
Heading - The block title. (E.g. Description.)
The Description block populates with the content of the Product Description field, as found in the admin dashboard > Products > Flow Harmony (Flow Harmony is the sample product in this article). For reference, please see the two images below.
|The Flow Harmony product
2.2. Collapsible row
Employ collapsible tabs to conveniently present supplemental information that empowers customers to make informed purchasing decisions.
- Heading - The block title
Row contents - Enters or Chooses a metafield (metafiel icon) that provides details enhancing customers' understanding and facilitating confident purchase decisions.
The metafiel icon:
- Metafields - Enters namespace and key of the metafield holding the value. Each metafield must be in its own line.
In this Flow Harmony product example, the row content value is determined by programmatically retrieving the Sound metafield, ensuring data consistency and accurate display.
|The row content
|The Flow Harmony product
To further enhance product information, a battery information has been added by enters exactly the Battery metafield's Namespace and key in the Metafields:
The Specifications block configuration process offers two approaches:
2.3.1. Manual specification addition
Let's visualize the first method in action. To display 5 specifications for the Flow Harmony product, we'll follow these steps:
- Add 5 specification blocks
- Customize each block with a relevant icon and text
To offer visual support, the two images below provide additional context.
2.3.2. Metaobject and Metafield integration
The second method leverages the combined power of Metaobject and Metafield. Here, Metaobject serves as centralized repository for all product specifications, while individual Metafields dynamically display those specifications for each specific product.
The process comprises three primary steps:
- Metaobject creation
- Metafield creation
- Specification block configuration
1. Metaobject creation
Go to the Setting via Admin Dashboard.
In Settings, click on Custom data tab > Add definition.
After clicking on the Add definition, this window will appear:
For reference, please ensure your data arrangement matches the example shown in the images below:
Name - enters
Fields - Chooses File and Single line text
File - Enters
Iconin Name, and chooses One file.
Single line text - Enters
Labelin Name, and chooses One file.
Upon completion of this step, the metaobject's configuration will mirror the visual representation in the image below:
Subsequent to metaobject creation, proceed to populate it with comprehensive product specifications (e.g., Headphone, USB-C cable, 1.25 m, Speakers, etc.). Accomplish this by:
Clicking Add entry
Selecting a representative Icon and entering the text in Label.
For exmample, here we add an entry 'USB-C cable, 1.25 m':
Repeat the process for the remaining 'Entry' values.
Upon completing this step, your Metaobject Tech spec will comprehensively house all product entries (in this example, we have 8 entries), acting as a central repository for specification information.
2. Metafield creation
This step involves establishing a new metafield named "Tech specs" designed to hold unique values specific to each product.
To create a new metafield, go to Setting via Admin Dashboard > Custom data > Products > Add definition.
Name - enters
Namespace and key - enters
In Select type - selects Metaobject
In reference - chooses Tech spec, then selects List of entries type.
Click Save to finish this step.
Upon finalizing this step, the newly created metafield will automatically populate across all your products. Now, you can proceed to assign specific values to individual products as desired.
For example, in the Flow Harmony product > Tech specs > Select entries > chooses the entries for this product in the list.
3. Specification block configuration
Go back to the Specification block under Product details section.
This step requires simply selecting the Tech specs metafield by clicking the metafield icon located to the top-right.
The designated product specifications will automatically populate.
We hope this article has been helpful. If you have any questions or concerns about this feature, please do not hesitate to contact our team for support.