Dynamic Product att.

At a glance

Attribute list driven by product metafields.

Used in

• Configure where this block is available in the parent section.

Settings

Content settings

How to use this block?

1. Go to Content → Metaobjects.

2. Click "Add Definition".

3. Name it "Product Attributes" and fill in the fields:

4. Fill Field label = Label, Click on * to make it required field, Select field type = Single line text.

5. Click Add field

6. Fill Field label = Icon, Select field type = Image.

7. Click Add field

8. Fill Field label = Tooltip, Select field type = Single line text.

9. Click Add field

10. Fill Field label = order, Select field type = integer.

11. Save Changes

12. Go to [Settings → Metafields and Metaobjects]

13. Click on Products.

14. Click on 'Add Definition'

15. Add name 'Product Attributes'.

16. Click on one and change it List of values then Select type 'Metaobject' and select the 'Product Attributes' metaobject we created in the previous steps. Save changes.

17. Go to a product page of any product you want to add attributes in Shopify admin and scroll to metafields. In Product Attributes Select, Add, Remove the attributes you want to show on the product page.

Setting details

Each control from the tables above, explained simply:

Label and value alignment

Controls “Label and value alignment” on the storefront. Open the theme editor to preview live. Default: column.

Gap between attributes

This setting controls the vertical gap between attributes in column layout and horizontal gap in row layout. Default: 12.

Tips

• Place this block inside a wrapper if it should only show on certain screen sizes.
• Preview in the theme editor on mobile and desktop.

Related