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.
-
This configuration section offers a range of customization options, conveniently organized into three separate blocks for easy navigation: Description, Collapsible row, and Specification blocks.
B. Setting up the Product details
1. The section settings
Section settings | Description | |
---|---|---|
Product details | ||
Open first collapsible row |
Enable to open the first collapsible row. |
|
Specification heading |
Enters the text |
|
Heading | ||
Heading |
The section title. |
|
Heading size | The heading size can be set to one of the following option: Small, Medium, Large, or Extra large. | |
Heading alignment | The Heading can be aligned to the Left, Center, or Right. | |
Heading tag | Selects the heading tag to structure and organize your content for SEO. | |
Subheading | The subheading for the heading is placed above the heading. | |
Description | The description text for the heading is placed below the heading. | |
Highlighted text
|
||
Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
Color
|
You can optionally customize the colors of the section, including the following:
|
|
Section | ||
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
2.1. Description
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.
Description block | 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.
For example:
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: tech_specs.battery
.
2.3. Specification
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
Tech spec
-
Fields - Chooses File and Single line text
-
File - Enters
Icon
in Name, and chooses One file. -
Single line text - Enters
Label
in 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
Tech specs
Namespace and key - enters
custom.tech_specs
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.