Highlight key products' specifications with Product Details section

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

    1. On your Product page via the Theme editor, create the Product details section under the Template section group.

    2. 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
  2. The blocks settings

1. The section settings

The settings for the Product details section
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:
  • Text color
  • Text background color
  • Fancy underline
  • Regular underline
  • Stencil text
  • Hand-drawn scribble
Highlighted scribble

Require highlighted text style to be set to Hand-drawn scribble.

 This setting offers 5 ways to highlight text:
  • Circle
  • Basic underline
  • Sketch underline
  • Squiggle underline
  • Squiggle underline 2
Color

 

 You can optionally customize the colors of the section, including the following:
  • Text
  • Background
  • Background gradient
  • Highlight
  • Highlight gradient
  • Button text
  • Button background
  • Button background gradient
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:

  1. Add 5 specification blocks
  2. 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:

  1. Metaobject creation
  2. Metafield creation
  3. 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.

Back to Concept Support