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

In this article
Our app only supports one featured product

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 Product Options App Block.

Once you’ve added our App Block to the Featured Product, click on our Product Options 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 product options 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.

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”.

If you have the theme called Fastlane, then open your product.liquid file in the Sections area instead.

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 %}

 

Was this article helpful?
Dislike