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

# Custom Theme Setup: Pricing Elements

[![](https://storage.crisp.chat/users/helpdesk/website/d13e90de659a8800/image_gg01uj.png)](https://www.loom.com/share/9698add0e771430183f0c0d35b0e9e09?sid=b90802e8-a29b-428a-a8ce-81b8eddc943d)

Click the thumbnail above to watch a demonstration of price template setup.

## Checklist
* If your theme is based on Dawn, make sure to read the "Price container setup for Dawn-based themes" before adding any code.
* Add `regios-dopp-generic-price-container` CSS class
* Add `regios-dopp-generic-price-item--sale` CSS class to the element that displays the price after discounts (without a strikethrough)
* Add `regios-dopp-generic-price-item--regular` CSS class to the element where you want the strikethrough price to appear
* Ensure that an element with the `regios-dopp-generic-price-item--regular` CSS class is present in the page HTML, even if the item doesn't have a compare at price.

## Expected Structure

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

```html
<div class="regios-dopp-generic-price-container">
  {% if compare_at_price > price %}
    <div class="regios-dopp-generic-price-item--regular">{{ compare_at_price }}</div>
    <div class="regios-dopp-generic-price-item--sale">{{ price }}</div>
  {% else %}
    <!-- `regios-dopp-generic-price-item--regular` must be present, even if the item isn't already on sale -->
    <div class="regios-dopp-generic-price-item--regular" style="display: none"></div>
    <div class="regios-dopp-generic-price-item--sale">{{ price }}</div>
  { % endif %}
</div>
```

![Screenshot of the "regular price" item in Dawn](https://storage.crisp.chat/users/helpdesk/website/d13e90de659a8800/image_13rl287.png)

Depending on your theme, you might only have 1 template responsible for displaying product prices, or multiple.

For example, some themes display product prices differently in the collection page.

There is typically a "container" element that wraps both the sale price, and the compare at price, if there is one.

The "sale price" element typically is always shown and shows the final price for the product.

The "regular price" element is typically not shown unless the product also has a compare at price. For example, in Dawn, this is a product price with a strikethrough line.

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

* The container element must have the `regios-dopp-generic-price-container` CSS class.
* The sale price element must have the `regios-dopp-generic-price-item--sale` CSS class.
* The regular price element must have the `regios-dopp-generic-price-item--regular` CSS class.
* The regular price element must be present in the page HTML, even if it is visually hidden. If it is not present, then our app cannot display a strikethrough price. Our app will automatically remove the `hide`, `hidden`, and `visually-hidden` CSS classes from this element (and some of its parents), if present, when a discount has been applied to the product price.
* If you want to display a badge when a discount is applied,  it needs the CSS class `regios-dopp-generic-badge`. You are responsible for styling the badge, and making sure it is present in the page HTML.
* If you want to control where the discount description appears, add your own element with the class `regios-dopp-description` within the price container.
* **For themes based on Dawn:** the regular price element should be visually hidden by default, but made visible when the container element has the `regios-dopp-generic-price--on-sale` class. You can also change the `Price on Sale CSS class` setting of the "Discounts Embed" to "price--on-sale" to skip this step.

**Keep reading to see a practical example below.**

Most themes already have a structure similar to this, and just need the CSS classes added. For example, if your price template already shows strikethrough lines when a compare at price is present, then we recommend simply adding the `regios-dopp-generic-price-item--regular` class to the compare at price item.

# Example HTML
To make this easier to understand, here is an example based on how most themes structure price display. **If your theme is based on Dawn, make sure you also read the Dawn-specific example.**

Most themes display prices differently when there is a compare at price, vs. when there is not.

**You must update your template for both cases.**

### Case 1: Without compare at price
Your price template probably looks like this when there **is no** compare at price:

```html
<!-- BEFORE SETUP -->
<div class="price-list">
  <div class="price">
    <span class="visually-hidden">500</span>
    <span>$5.00</span>
  </div>
</div>
```

Change it so that it looks like this when there is no compare at price:

```html
<!-- AFTER CORRECT SETUP -->
<div class="price-list regios-dopp-generic-price-container">
  <div class="price">
    <span class="visually-hidden">500</span>
    <span class="regios-dopp-generic-price-item--sale">$5.00</span>
    <span class="regios-dopp-generic-price-item--regular" style="display: none"></span>
  </div>
</div>
```

As you can see, the "sale price" is always visible. You need to always have a "regular price" element present as well; otherwise, our app doesn't know where to put strikethrough prices.

### Case 2: With compare at price
And your existing price template probably looks something like this when there **is a** compare at price:

```html
<!-- BEFORE SETUP -->
<div class="price-list">
  <div class="price">
    <span class="visually-hidden">500</span>
    <span>$5.00</span>
  </div>
  <div class="price compare-at-price" style="text-decoration: line-through;">
    <span class="visually-hidden">1000</span>
    <span>$10.00</span>
  </div>
</div>
```

Change it so that it looks like this when there is a compare at price:

```html
<!-- AFTER CORRECT SETUP -->
<div class="price-list regios-dopp-generic-price-container">
  <div class="price">
     <span class="visually-hidden">500</span>
     <span class="regios-dopp-generic-price-item--sale">$5.00</span>
  </div>
  <div class="price compare-at-price" style="text-decoration: line-through;">
     <span class="visually-hidden">1000</span>
     <span class="regios-dopp-generic-price-item--regular">$10.00</span>
  </div>
</div>
```

Remember: the "sale price" is the final price the user pays. The "regular price" is the price before discounting, which shows a strikethrough.

# Price container setup for Dawn-based themes
If your theme is based on Dawn, ensure the following:
* You have only added `regios-dopp-generic-price-item--*` CSS classes to price items within the `price__sale`, NOT the `price__regular`.
* You have set the "Price on sale class" setting of the "Discounts Embed" app embed to `price--on-sale`.

Your `price.liquid` will look something like this (we've removed irrelevant elements so that you could understand this example at a glance):

```html
<div class="price regios-dopp-generic-price-container">
  <div class="price__container">
    <!-- Make sure to add `regios-dopp-generic-price-container` to the `.price` element, NOT the `.price__container`. -->
    <div class="price__regular">
      <span class="price-item price-item--regular">
       <!-- DO NOT add regios-dopp-price-item-* classes within .price__regular element -->
        {{ money_price }}
      </span>
    </div>
    <div class="price__sale">
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span>
          <s class="price-item price-item--regular regios-dopp-generic-price-item--regular">
            <!-- Make sure this element is in the page HTML even if the item does not actually have a compare-at price sale. -->
          </s>
        </span>
      {%- endunless -%}
      <span class="price-item price-item--sale price-item--last regios-dopp-generic-price-item--sale">
        {{ money_price }}
      </span>
    </div>
  <!-- Unit pricing and other code is probably here... -->
  </div>
  {%- if show_badges -%}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }} regios-dopp-generic-badge">
      {{ 'products.product.on_sale' | t }}
    </span>
  {%- endif -%}
</div>
```

Summary of the HTML above:
* Added `regios-dopp-generic-price-container` CSS class to the `price` element.
* DID NOT modify the `price__regular` at all.
* Added `regios-dopp-generic-price-item--regular` and `regios-dopp-generic-price-item--sale` classes to `price-item` elements within the `price__sale`.
* Note that we also included `regios-dopp-generic-badge`.

### Example CSS
And your CSS could include these styles as a baseline:

```css
/*
 * Hides the regular price item unless the DOPP feature is displaying a discount.
 * 
 * If you do not want to hide compare at prices by default, you can safely comment out or delete this code.
 *
 * This code was copied from this Regios Discounts tutorial:
 * https://regiostech.com/support/article/custom-theme-setup-pricing-elements-10d3c01/#1-price-container-setup-for-dawn-based-themes
 */
.regios-dopp-generic-price-container:not(.regios-dopp-generic-price--on-sale) .regios-dopp-generic-price-item--regular {
  display: none;
}
```

Your price template may have multiple container elements, for example, if it displays prices differently when a product has a compare at price. Make sure to add the required CSS classes to all of them.