How to add a table of information?

This block allows you to add a 2-column table that can be utilized across various industries (e.g., Nutritional Facts for Food & Drink, Usage for Plants and Herbs, Product Specs for Jewelry, Fashion, Technology).

✍️ How to add content to the table of information?

1. Add a new block titled "Table of information”.
2. From here, you can click on the block add start to customize it:

• Show in tab: Tick to enable the whole table content to be collapsed or expanded with one click.
• Open this tab by default: Make the content under the tab always expanded when the page is loaded.
• Icon: 4 options:
• Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icons.
• Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.)
• Upload a Custom icon image.
• Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.)
  
• Use secondary background: Tick to add a background to the whole table of information.
• Heading: By default, it will be shown as “Additional details”, change it as you need.
• Left column label: The content of the first row on the left column side.
• Right column label: The content of the first row on the right column side.
• Extra details: Enter other information to put it outside and underneath the table.
• Details: Follow these rules to add content to your table:

• Separate the left and right column content with a colon :
• Shift + Enter to break to a new line for adding a new row.
• Use a dash - to indent the rows.
• Enter to add a new line and separate different tables.

For example:

• Extra details: Enter other information to put it outside and underneath the table.

✍️ How to add dynamic content to the table of information using metafields?

The instructions above give you a basic understanding of adding the table information to the product page. If you want to make it more advanced by changing the table’s content dynamically based on the product. 2 ways to do it:

1. Using the “Connect dynamic sources” button:

💡 With this method, you can enter the entire table of information into a rich text metafield. Once connected, the whole table will update dynamically based on the product.

Steps to Set Up:

Step 1: Create a Product metafield with the Rich Text type.

Step 2: In Shopify admin, go to Products tab > click on a product > find and enter values into the metafield created using the format outlined earlier.

Step 3: In Theme Editor > go to the product page > add the Table of Information block to the Product Information section.

Step 4: In the Table of information block setting panel, find the Details field, and click connect the metafield using the Connect dynamic source

  icon.

Step 5: Save the changes.

2. Using Namespace and key of the metafield:

💡 This method lets you show dynamic content for specific parts of the table by linking each element to a separate metafield.

Steps to Set Up:

Step 1: Create Product or Variant metafields with the Single Line Text - One Value type.

Note: The metafield names for the product and its variants must be the same.

Step 2: In Shopify admin, go to Products tab > click on a product

• If you created a Product metafield: Scroll down to Metafields setting group > Enter a value.
• If you created a Variant metafield: Scroll down Variants setting group > Click on a variant > scroll to Metafields setting group > Enter a value.

Step 3: In Theme Editor > go to the product page > add the Table of Information block to the Product Information section.

Step 4: In the Table of information setting panel, find the Details field:

• Enter the content following the content formatting rules 
• For dynamic content, enter the metafield keys (find the key in Setting > Custom data > click on your metafield > Namespace and key).
• Example: Weight: custom.weight → This will display as Weight: 100g.

Step 5: (Optional) Change the text that shown when the metafield has no value in Text to use for empty fields setting.

Step 6: Save the changes.