Shopify themes, liquid, logos, and UX
Hello there,
I've managed somehow to edit Debut theme code so I can show two different prices for single product (to show prices including finnish 24% VAT and without, because most of the customers would be companies). This has been done with following steps:
Product page (default variant selected)
------------------------------------------------------------------------------------
Product page, any of the variants selected
- Settings from Shopify > TAX > Untick "show all prices with tax"
- product.price.liquid, add some texts >
{{ product.price | times:1.24 | money }}
{{ money_price }}
- product.price-listing.liquid, add some texts >
{{ product.price | times:1.24 | money }}
{{ money_price }}
This works really well, but it doesn't seem to apply for products with variants. I've tried several hours to edit this point "div.price__unit: Displayed when the first variant has a unit price" but with no success. Any ideas what I should change, to get this double price options working for variants as well?
{%- comment -%}
Explanation of description list:
- div.price__regular: Displayed when there are no variants on sale
- div.price__sale: Displayed when a variant is a sale
- div.price__unit: Displayed when the first variant has a unit price
- div.price__availability: Displayed when the product is sold out
{%- endcomment -%}
<div class="price__pricing-group">
<div class="price__regular">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--regular" data-regular-price>
{{ product.price | times:1.24 | money }}</span>
<span class="alv-included"> sis. alv 24%</span>
</dd>
<dd>
<span class="price-item price-item--regular alv-excluded" data-regular-price>
{{ product.price | times:1.24 | money }}
{{ money_price }} alv 0%</span>
</dd>
</div>
<div class="price__sale">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--sale" data-sale-price>
{{ money_price }}
{{ product.price | times:1.24 | money }}
</span>
</dd>
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s class="price-item price-item--regular" data-regular-price>
{{ compare_at_price | money }}
{{ product.price | times:1.24 | money }}
</s>
</dd>
</div>
<div class="price__badges">
<span class="price__badge price__badge--sale" aria-hidden="true">
<span>{{ 'products.product.on_sale' | t }}</span>
</span>
<span class="price__badge price__badge--sold-out">
<span>{{ 'products.product.sold_out' | t }}</span>
</span>
</div>
</div>
<div class="price__unit">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span data-unit-price>
{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</dd>
</div>
</dl>
HY
I’ve partially modified my Shopify Debut theme to show two prices for products (with/without 24% Finnish VAT) for B2B customers. However, it’s only halfway working. Here’s what I did: [Briefly summarize steps].
If you’ve solved this for Yacine TV or similar setups, I’d love your advice! Struggling with theme code adjustments—any tips to fully implement this Website?
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025