Add a size chart to the homepage (featured products)

2.0 Themes

To top

For 2.0 Themes that allow app blocks on the featured product of the homepage, you can follow the directions below.

  • Go to Sales Channels
  • Online Store
  • Click the Customize button for the Theme you want to edit

This should load the Home Page template.

Search for your Featured Product in the Home Page template.

In the Featured Product click “+ Add block“.

If you don’t have an add block section for your featured product you will need to add code to your theme manually. Scroll down to the bottom of this article for more information. 

Add our BF Size Chart App Block.

Once you’ve added our App Block to the Featured Product, click on the Bf Size Chart App Block.

Click “Select product,” and select the same product as the featured product.

How to reorder the app block

Hover over the app block. Click and hold the icon to move the size chart in the template.

Make sure to click Save in the upper right to save the location.

Non 2.0 Themes

To top

For non 2.0 themes or any theme that doesn’t have app blocks for the featured product on the homepage, you will have to manually add code.

Add this code to your featured-product.liquid template after product is defined.

After this code

{% assign product = ... %}

Add this code

{% if product != empty %}
<script>

sizeChartsRelentless.product = {{product | json}};

{% if product.collections %}
sizeChartsRelentless.productCollections = {{product.collections | json}};
{% endif %}

{% if all_products[product.handle].metafields.sizechartsrelentless.size_charts %}
sizeChartsRelentless.metafield = {{all_products[product.handle].metafields.sizechartsrelentless.size_charts}};
{% endif %}

</script>
{% endif %}
Was this article helpful?
Dislike