Product specifications

Section

Present a section featuring one or more tables that detail the product's information and specifications.

Available block

Used to add a table to the section.

🤔 How to add & set up the content for a table of specifications?

Want to add information and adjust the layout of a specification table? Here's how:

STEP 1: Add a Product specifications section:

This section can only be used on the Product page. So, follow the steps in 3. Location & Setup to add this section.

STEP 2: Set up the product metafields:

To add values to the table, you must work on the product metafield first, do these:

• Create your Product metafields by following the steps in How to create Product metafields. Make sure when you Select type, choose one of these types:
  • Option 1: Single line text (one value or list of values)
  • Option 2: Multi-line text.
  • Option 3: Rich text.
• In Shopify admin, click on Products > choose a product > go to Product metafields > enter the value > “Save”. (Repeat this step for other products).

STEP 3: Enter the details for a table in Theme Editor.

Go back to your Theme Editor (Online stores > Themes > Customization)

By default, your Product specifications section includes 2 Specification blocks. You can delete, hide, or add more blocks as needed.

Click on a Specification block to open its settings panel, then:

• Scroll down to the Specification detail group.
• Enter to the List of specifications in this format: 

• Add a new line to add a row to the table.

STEP 4: Enter the heading and description for a table:

After filling in the table’s details, enter other content into these fields:

• Heading: Give your table a title, such as “Ingredients”.
• Text: Add some extra description, leave blank if you don’t need it.

STEP 5: Click “Save” when done.

🤔 How to make the table collapsible?

Want to let customers easily expand or collapse the table in the Product Specifications section? Here's how:

STEP 1: 

Under the Product Specifications section, tap on the Specification block to open its settings panel.

STEP 2: 

Turn on the Show in tab toggle.

STEP 3: (Optional)

If you want to make the tab expand by default, turn on Open this tab by default.

STEP 4: Click “Save” when done.

🤔 How to add an image to the specification table?

Want to make your table of specifications more engaging with an image? Here's how to add & edit the image layout:

STEP 1: Add an image

Under the Product Specifications section, tap on the Specification block to open its settings panel, then find the Image setting, and click “Select” to add an image.

STEP 2: Adjust the image height & position

Click on the Product Specifications section to open its settings panel, then:

• Go to Desktop layout 🖥️: Change the Desktop image height and Desktop image position.
• Go to Mobile layout  📱: Change the Mobile image height and Mobile image position.

STEP 3: Click “Save” when done.

🤔 What customization options can you give your Product specifications?