Custom Theme Setup: Collection Page

Click the thumbnail above to watch a demonstration of Collection Page Template setup.

Collection pages typically have "product grids," where each product in a collection has its product title and main image shown, that customers can click on to visit the associated product page.

You must make these edits to your collection page template(s):

• Every item in your product grid must have EITHER 1.) a data-regios-dopp-generic-product-id attribute, where the value is the numerical ID of the corresponding product, or 2.) an href attribute, where the value is the URL of the corresponding product.

The structure we expect is something like this (you can ignore the tag names, only the CSS classes) matter:

<div class="probably-some-product-grid-class-name-is-defined-in-your-theme">
  {% for product in collection.products %}
    <div data-regios-dopp-generic-product-id="{{ product.id }}">
      Product grid item. For example, Dawn has a {% render "card-product" %} tag here.

     <div class="regios-dopp-generic-price-container">
       <!-- Product price and strikethrough go here. Read the "Custom Theme Setup: Pricing elements" guide for information on the structure. -->
     </div>
    </div>
  {% endfor %}
</div>

In order for our app to update the on-page prices of products in the grid, make sure that you apply the edits listed in the "Pricing elements" guide below to whichever template is used for product grid prices in your theme:
Custom Theme Setup: Pricing Elements

Updated on: 03/07/2025