> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.ordergroove.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.ordergroove.com/_mcp/server.

# 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:

```html
<og-offer
  product="{{ product.selected_or_first_available_variant.id }}"
  data-shopify-product-handle="{{ product.handle }}"
  location="my-location">
</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:

```html
<og-offer
  product="{{ product.selected_or_first_available_variant.id }}"
  data-shopify-product-handle="{{ product.handle }}"
  location="my-location">
</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.