How to add Variant Option Product Options to your homepage (featured-product.liquid)

Click the article below for instructions on how to edit your theme files.

How to edit code in your theme.liquid file

Go to your theme and open your featured-product.liquid or home-product.liquid file in the Sections folder. You can use Shopify’s search to find this more easily by searching “featured” or “home”.

Search for the code below.

assign product

Add the code below on the next line after the ” assign product” code. See attached screenshot for the correct placement.

{% if product != empty %}
<script>
var bcpo_product = {{product | json}};
{% if all_products[product.handle].metafields.bcpo.bcpo_data %}
var bcpo_data = {{all_products[product.handle].metafields.bcpo.bcpo_data}};
var inventory_quantity = [];{% for v in product.variants %}inventory_quantity.push({{v.inventory_quantity}});{% endfor %}
if(bcpo_product) { for (var i = 0; i < bcpo_product.variants.length; i += 1) { bcpo_product.variants[i].inventory_quantity = inventory_quantity[i]; }}
{% endif %}
</script>
{% endif %}

For the Dawn theme, the code needs to be a little different. Here’s what the code snippet should like for Dawn.

{% if product != empty %}
<script>
var bcpo_product = {{all_products[product] | json}};
{% if all_products[product.handle].metafields.bcpo.bcpo_data %}
var bcpo_data = {{all_products[product.handle].metafields.bcpo.bcpo_data}};
var inventory_quantity = [];{% for v in product.variants %}inventory_quantity.push({{v.inventory_quantity}});{% endfor %}
if(bcpo_product) { for (var i = 0; i < bcpo_product.variants.length; i += 1) { bcpo_product.variants[i].inventory_quantity = inventory_quantity[i]; }}
{% endif %}
</script>
{% endif %}