Hey guys,
Currently running a store that’s using google shopping and need my compare at price (aka my sale price) to show on the right side, as opposed to the left. I’m using Debut theme and could use some help with the coding for it.
Any help would be greatly appreciated!
Please Share a Store url to better assist.
Hi,
you need to follow my simple instructions:
step 1. go to edit code .
step 2. open product-price.liquid file.
step 3. copy below code and replace with product-price.liquid file.
{% comment %}
Renders a list of product's price (regular, sale, unit)
Accepts:
- variant: {Object} Variant Liquid object (optional)
- product: {Object} Product Liquid object (optional)
- show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)
Usage:
{% include 'product-price', variant: current_variant, product: product %}
{% endcomment %}
{% if variant.title %}
{%- assign compare_at_price = variant.compare_at_price -%}
{%- assign price = variant.price -%}
{%- assign available = variant.available -%}
{% else %}
{%- assign compare_at_price = 1999 -%}
{%- assign price = 1999 -%}
{%- assign available = true -%}
{% endif %}
{%- assign money_price = price | money -%}
<dl class="price
{% if available == false %} price--sold-out {% endif %}
{% if available and compare_at_price > price %} price--on-sale {% endif %}
{% if available and variant.unit_price_measurement %} price--unit-available {% endif %}"
data-price
>
{% if show_vendor and product %}
<div class="price__vendor">
<dt>
<span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
</dt>
<dd>
{{ product.vendor }}
</dd>
</div>
{% endif %}
<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>
{{ money_price }}
</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 }}
</span>
<span class="price-item__label price-item__label--sale" aria-hidden="true">{{ 'products.product.on_sale' | t }}</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 }}
</s>
</dd>
</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 available and 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>
<div class="price__availability">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.availability' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--regular">
{{ 'products.product.sold_out' | t }}
</span>
</dd>
</div>
</dl>
step 4. save
Thanks & Regards
rbdtechworld
Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept Solution .
Email: developer9it@gmail.com
Hi there
You can follow these below steps to change your Product Compare Price position:
Or you can add custom css to change it’s position if you have background knowledge about coding
You can take a look a this ref from Shopify Community (Using a different theme!)
If you can’t do it yourself, I would highly recommend you to install PageFly app (Free plan available). You can easily use the app to set up your page’s layout without any problem
