> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://regiostech.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

![Choose Automatic setup for your Online Store 1.0 theme](https://storage.crisp.chat/users/helpdesk/website/-/d/1/3/e/d13e90de659a8800/mcp-claude-in-chrome-blob-1793_143tldm.png)

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.

![Generate a theme ZIP with the AI coding assistant](https://storage.crisp.chat/users/helpdesk/website/-/d/1/3/e/d13e90de659a8800/mcp-claude-in-chrome-blob-1793_cagr6i.jpg)

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)

![Discounted prices on a collection page after the automatic setup](https://storage.crisp.chat/users/helpdesk/website/-/d/1/3/e/d13e90de659a8800/mcp-claude-in-chrome-blob-1793_pwii7t.jpg)

### 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](/en/article/dopp-api-reference-1gvya0h/) and [DOPP API: Examples](/en/article/dopp-api-examples-1p830j3/) 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](/en/article/custom-theme-setup-6mb5st/).
* Products loaded without a page reload (infinite scroll, "Load more") need the `regios-dopp:collection-page:new-items` event.

## Related
* [Supported Themes](/en/article/supported-themes-1tytiaw/)
* [DOPP API Reference](/en/article/dopp-api-reference-1gvya0h/)
* [DOPP API: Examples](/en/article/dopp-api-examples-1p830j3/)

## Have any feedback for us?
We want to hear about your experience with our app! [Leave a review on the Shopify App Store](https://apps.shopify.com/regios-automatic-discounts#modal-show=ReviewListingModal).