Add a subscription offer to quickview, homepage, or other areas of your site

This guide only applies to Direct Offers on Shopify.

We support offers on quickview, homepage, and other areas of your site where the URL does not reflect the product or variant the user has selected. This is done by adding the data-shopify-product-handle attribute to the offer tag with the product handle.

For OS 1.0

Instead of rendering the ordergroove_offer.liquid file, add the following code where you want the offer to appear:

1
<og-offer
2
  product="{{ product.selected_or_first_available_variant.id }}"
3
  data-shopify-product-handle="{{ product.handle }}"
4
  location="my-location">
5
</og-offer>

For OS 2.0

Quickview offers require setting an additional attribute in the og-offer tag that is not present in our Online Store 2.0 Offer block.

As a workaround with an Online Store 2.0 theme, create a Liquid code block in the Shopify Customizer via Add block → Liquid code. In the text box, paste the following:

1
<og-offer
2
  product="{{ product.selected_or_first_available_variant.id }}"
3
  data-shopify-product-handle="{{ product.handle }}"
4
  location="my-location">
5
</og-offer>

This will display the offer on your site just like the standard offer block, and supports quickview. If you change the location value for your offer, update it here as well.