How to Modify Electro Product Detailed Specifications Settings
About Detailed Specifications Section
The Electro Shopify theme allows you to add detailed product specifications to your products. This feature helps provide customers with more information about your products, such as dimensions, weight, materials, and other specifications.
To learn more about Metafields and how to use them in the Electro Theme, check this article.
For a visual guide, watch this video tutorial on using Product Metafields to show additional information in the Detailed Specifications section:
How To Access Details Specifications Section
To access Product Detailed Specifications, go to Top Bar > Products > Default Products > Detailed Specification (Appears Under Product Sticky Bar).
Please note that you cannot edit this section, only hide or unhide it.
How To Configure Detailed Specifications Section
Click on the section to access its settings.
The Detailed Specifications section settings include 3 main configurations: General, Layout, and Theme settings.
General
In the General tab, you can choose the Color Scheme for the section text and background color. These schemes can be edited in Theme settings > Colors.
You can fill the Section Heading and Section Description manually or insert a dynamic source. If you don’t want to show one of these contents, just leave the placeholder blank.
For the Heading text, you can choose from sizes H2, H3, H4, and H5. These heading sizes are based on the Base text size set in Theme settings > Typography.
Layout
The Content alignment allows you to select the position of the Section Heading: Left or Center.
Theme Settings
In Theme settings, you’ll see the Metafield namespace. Enter the Metafield namespace in the box provided to set up the specifications.
How To Configure Detailed Specification Blocks
The Detailed Specification section supports two types of blocks: Specifications and File Download. You can add each block type only once to this section.
Click on a specification to access its settings.
Specifications
To access the Specifications settings, click on the Specification block. You’ll see the Metafield Keys and Collapse Specifications option.
Metafield Keys are required for the section to show the full content. Enter the Metafield keys in the box, separating multiple keys with commas.
The Collapse Specifications option determines how the Specifications will be displayed. When turned off, the content will be displayed without the accordion function.
File download
Similar to the Specification block, the File Download block allows you to add a metafield key to show dynamic content for each product page. However, this block only supports the File metafield type.
After filling in the metafield key, the download content will be displayed as a button.
Render rule
All the Keys you’ve set up in Metafield will display here following our Render rule:
Key | Rendered label |
product_type | PRODUCT TYPE |
built_in_microphone | BUILD IN MICROPHONE |
Other content format:
- Electro supports displaying product specifications, but you need to supply the product metafield namespace.
- Electro only supports the “One value” metafield type. For more details, check this article about creating custom metafield definitions.
Frequently Asked Questions
1. How can I show the specifications on the section?
To show the metafield content in the Detailed Specifications, fill in the Metafield Namespace in Theme settings > Product information and the Metafield keys in the Specifications block.
2. Can I show multiple metafields in the section?
Yes, you can add multiple metafields to the section by adding their metafield keys to the Specification block, separating them with commas.