Help Moving To Right Side Compare At Price

Highlighted
New Member
1 0 0

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! 

0 Likes
Highlighted
Shopify Partner
1197 98 147

Please Share a Store url to better assist.

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
29 6 12

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 }}&nbsp;</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

 

 

1 Like
Highlighted

Hi there

 

You can follow these below steps to change your Product Compare Price position:

 

  1. - Open your theme by go to Online Store -> Themes -> Edit Code
  2. - Search product-template.liquid file
  3. - Search the price and compare-price liquid code
  4. - Change the position of those HTML tags

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

 

 

 

Richard | Front-end Dev @ PageFly
- Click 'Like' to let me know you like my answer!
- Are you having problems building Shopify stores? Check out PageFly - An Advanced Page Builder whose goal is to empower anyone to build a perfect store.
0 Likes