Showing promo price in Shopify Debut theme

Recently I was trying to figure out solution to a question asked on Shopify forums: How to change product price layout in Brooklyn theme? https://community.shopify.com/c/Shopify-Design/Change-product-price-layout-in-the-grid/m-p/593045#M149136


Let's begin

While it seems easy at first, we need to consider several things. First of all, many themes have different layouts to display products. Starting from standard product.grid file, through all variants of collection templates. What we are lookin for in this example is product-grid-item.liquid file that's supposed to display products from certain collection in grid format. After we located our file, let's analyze how Shopify handle single products. Each product can have many versions available, like size or color. Each version is called variant. We need to make sure each variant (if there's more than one available) has the same price. If there is any difference in price between variants, we need to stop here and let theme handle price in collection display (we are unable to determine which variant is on sale, so we have to show the lowest price available from all prices).


Time for some changes

{% assign has_flat_price = true %}

{% for variant in product.variants %}
    {% if product.price_min != variant.price %}
        {% assign has_flat_price = false %}
    {% endif %}
{% endfor %}

In the code above we start by assuming that product has flat price. For that purpose let's assign has_flat_price variable. Then we browse through all available variants of chosen product to see if in any case variant price is different from minimal product price. If all variants have the same price, minimal product price will always be the same as well.

{% assign compare_at_price = '' %}
{% for variant in product.variants %}
    {% if variant.compare_at_price %}
        {% assign compare_at_price = variant.compare_at_price %}
    {% endif %}
{% endfor %}

In the code above we start with empty "Compare at" price (on Shopify that's item original price, when you set up discount). Then we browse throug all available variants to see if we have "Compare at" price set anywhere. If that's true, we must be running a sale on that item.

{% if has_flat_price == true and compare_at_price != empty and product.price_min != compare_at_price %}
    <span style="text-decoration: line-through; padding-right: 5px;">{{ compare_at_price | money_without_trailing_zeros }}</span>
    <span style="color: red">{{ product.price | money_without_trailing_zeros }}</span>
{% else %}
    {{ product.price | money_without_trailing_zeros }}
{% endif %}

Last bit checks if we meet all conditions to show both orignal and discount price under single product:

  • has_flat_price == true - makes sure that all variants have the same price,
  • compare_at_price != empty - checks if we have set up original price on an item (when we are running a sale),
  • product.price_min != compare_at_price - checks that product price is not equal to "Compare at" price - that will prevent displaying both prices when they are the same).


To the point

Let's sum up all the code. After we find this bit of code in the theme:

{% else %}
    {{ product.price | money_without_trailing_zeros }}
{% endif %}

simply replace it with:

{% else %}
    {% assign has_flat_price = true %}
    {% assign compare_at_price = '' %}

    {% for variant in product.variants %}
        {% if product.price_min != variant.price %}
            {% assign has_flat_price = false %}
        {% endif %}
        {% if variant.compare_at_price %}
            {% assign compare_at_price = variant.compare_at_price %}
        {% endif %}
    {% endfor %}

    {% if has_flat_price == true and compare_at_price != empty and product.price_min != compare_at_price %}
        <span style="text-decoration: line-through; padding-right: 5px;">{{ compare_at_price | money_without_trailing_zeros }}</span>
        <span style="color: red">{{ product.price | money_without_trailing_zeros }}</span>
    {% else %}
        {{ product.price | money_without_trailing_zeros }}
    {% endif %}
{% endif %}

Now you should know what all these changes do and hopefully see new functionality in your theme. Any questions? Let me know. Enjoy!