Showing Discounted Prices on Online Store 1.0 (Vintage) Themes

Online Store 1.0 themes (often called "vintage" themes) can't use app blocks, so our Collection Page Discount, Search Page Discount and Featured Product Discount blocks aren't available. You can still show discounted prices on those pages, either automatically with our AI coding assistant or by adding two small snippets to your theme yourself. Product pages work with just the Discounts Embed and need no code.

Automatic setup with the AI coding assistant

In the app, go to Add to theme, pick your theme and choose Automatic. Our AI coding assistant edits a copy of your theme and gives you a ZIP file to import. Nothing changes on your live theme until you publish the copy.

Click Generate theme ZIP. It usually takes a few minutes (up to 15 on large themes), and you can leave the page while it runs.

The copy includes the two snippets from Step 1 below, already rendered in your collection, search and featured collection sections, plus the price markup our app needs.

What the automatic setup covers

It works with product lists that your theme's Liquid code renders when the page loads:

• Collection pages (including every page of a paginated collection)
• Search results
• Featured collection sections, for example on the home page
• Product pages (these only need the Discounts Embed)

What may still need custom code

Some sections load their products with JavaScript after the page has loaded, so the AI coding assistant can't add the code for them. Common examples:

• Product recommendations ("You may also like")
• Quick view or quick add pop-ups
• Infinite scroll and "Load more" buttons

Single featured product sections aren't set up automatically either.

To show discounted prices in these sections, your theme's code needs to call our app with the products it shows (for JavaScript-loaded sections, after it adds them to the page). See the DOPP API Reference and DOPP API: Examples for the calls to make, or contact us and we'll point you in the right direction.

Always preview the new theme before publishing it, and check a product with a discount and one without.

Before you start

1. Turn on the Discounts Embed in your theme: Online Store > Themes > Customize > App embeds.
2. Work on a copy of your theme, and preview it before publishing.

Step 1: Add the two snippets

In Online Store > Themes > ... > Edit code, under Snippets, add a snippet named regios-dopp-product and paste:

{%- assign regios_variant = product.selected_or_first_available_variant -%}
{
  "productId": {{ product.id | json }},
  "variantId": {{ regios_variant.id | json }},
  "regularPriceInCents": {{ regios_variant.price | json }},
  "compareAtPriceInCents": {{ regios_variant.compare_at_price | json }},
  "handle": {{ product.handle | json }},
  "url": {{ product.url | json }},
  "vendor": {{ product.vendor | json }},
  "productType": {{ product.type | json }},
  "tags": {{ product.tags | json }},
  "collectionIds": {{ product.collections | map: "id" | json }},
  "variants": [
    {%- for variant in product.variants -%}
      {
        "id": {{ variant.id | json }},
        "title": {{ variant.title | json }},
        "priceInCents": {{ variant.price | json }},
        "compareAtPriceInCents": {{ variant.compare_at_price | json }},
        "isOutOfStock": {% if variant.available %}false{% else %}true{% endif %}
      }{% unless forloop.last %},{% endunless %}
    {%- endfor -%}
  ]
}

Add a second snippet named regios-dopp-grid and paste:

{%- assign regios_limit = limit | default: 50 -%}
<script>
  (function () {
    var products = [
      {%- assign regios_first = true -%}
      {%- for item in products limit: regios_limit -%}
        {%- if item.object_type == nil or item.object_type == 'product' -%}
          {%- unless regios_first -%},{%- endunless -%}
          {%- render 'regios-dopp-product', product: item -%}
          {%- assign regios_first = false -%}
        {%- endif -%}
      {%- endfor -%}
    ];

    function run(entrypoints) {
      var root = document.querySelector({{ root_selector | json }});
      if (!root) {
        console.warn("[Regios Discounts] Grid not found: " + {{ root_selector | json }});
        return;
      }
      entrypoints[{{ entrypoint | json }}]({
        key: {{ key | json }},
        root: root,
        products: products
      });
    }

    var api = window.RegiosDOPP && window.RegiosDOPP.api && window.RegiosDOPP.api.v0;
    if (api && api.entrypoints) {
      run(api.entrypoints);
    } else {
      window.addEventListener("regios-dopp:entrypoints-ready", function (event) {
        run(event.detail.entrypoints);
      }, { once: true });
    }
  })();
</script>

Step 2: Render the grid snippet where your products are listed

Collection pages. In the section or template that contains {% paginate collection.products by ... %}, paste just before {% endpaginate %}:

{% render 'regios-dopp-grid', entrypoint: 'collectionPage', key: 'collection', root_selector: '#product-grid', products: collection.products %}

Search page. Just before {% endpaginate %} in the search section or template:

{% render 'regios-dopp-grid', entrypoint: 'search', key: 'search', root_selector: '#product-grid', products: search.results %}

Featured collection sections (for example on the home page), at the end of the section:

{% assign regios_root = '#shopify-section-' | append: section.id %}
{% render 'regios-dopp-grid', entrypoint: 'featuredProducts', key: 'featured', root_selector: regios_root, products: section.settings.collection.products, limit: section.settings.products_to_show %}

Replace #product-grid with your theme's grid element if it's different. Give each grid on a page its own key.

Notes

• Discounts that check product or variant metafields need those metafields added to regios-dopp-product.
• If prices still don't update, the theme's price markup may need our Custom Theme Setup.
• Products loaded without a page reload (infinite scroll, "Load more") need the regios-dopp:collection-page:new-items event.

Related

• Supported Themes
• DOPP API Reference
• DOPP API: Examples

Have any feedback for us?

We want to hear about your experience with our app! Leave a review on the Shopify App Store.

Updated on: 29/10/2026