How can I align non-sale prices to the left with consistent spacing?

[Danielpochapski]

Hey guys,

I have a script for pricing. I'm having trouble aligning. Basically, the format aligns perfectly with the prices that are on sale (that is, they are aligned to the left and with small line spacing). I would like to align the values that are not on sale to the left, and have the same spacing between the value and the installment values; How can I do this?

Script here

Click to expand...

{% comment %}

Renders a list of product's price (regular, sale)

Accepts:

- product: {Object} Product Liquid object (optional)

- use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)

- show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)

- price_class: {String} Adds a price class to the price element (optional)

Usage:

{% render 'price', product: product %}

{% endcomment %}

{%- liquid

if use_variant

assign target = product.selected_or_first_available_variant

else

assign target = product

endif

assign compare_at_price = target.compare_at_price

assign price = target.price | default: 1999

assign available = target.available | default: false

assign money_price = price | money

if settings.currency_code_enabled

assign money_price = price | money_with_currency

endif

if target == product and product.price_varies

assign money_price = 'products.product.price.from_price_html' | t: price: money_price

endif

-%}

<div class="price

  {%- if price_class %} {{ price_class }}{% endif -%}

  {%- if available == false %} price--sold-out {% endif -%}

  {%- if compare_at_price > price %} price--on-sale {% endif -%}

  {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}

  {%- if show_badges %} price--show-badge{% endif -%}">

  <div class="price__container" style="text-align: left !important;">

    {%- comment -%}

    Explanation of description list:

    - div.price__regular: Displayed when there are no variants on sale

    - div.price__sale: Displayed when a variant is on sale

    {%- endcomment -%}

    <div class="price__regular"

      style="font-size: 16px; text-align: left !important; color: black; margin-bottom: 2px !important;">

      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>

      <p class="price-item price-item--sale price-item--last" style="font-weight: bold;">

        {{ money_price }}&nbsp;

      </p>

      <p style="margin-bottom: 0px;">

        <span style="font-size: 12px !important; text-align: left !important; margin-top: 0px; margin-right: 0px;">ou 12x <span style="color: black;" id="parcelamento">{{ price | divided_by: 12 | times: 1.2166 | round:2 | money }}</span></span>

      </p>

    </div>

    <div class="price__sale" style="font-size: 19px; color: black; margin-bottom: 0px !important;">

      {%- unless product.price_varies == false and product.compare_at_price_varies %}

      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>

      <span>

        <s class="price-item price-item--regular" style="font-size: 12px !important; color: red;">

          {% if settings.currency_code_enabled %}

            {{ compare_at_price | money_with_currency }}

          {% else %}

            {{ compare_at_price | money }}

          {% endif %}

        </s>

      </span>

      {%- endunless -%}

      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>

      <p class="price-item price-item--sale price-item--last" style="font-weight: bold;">

        {{ money_price }}&nbsp;

        <span style="font-size: 10px; padding: 0px 3px 0 15px; color: #fff; font-weight: 600; background: #28B04C; border-radius: 8px; display: inline-block; position: relative; clip-path: polygon(20% 0%,100% 0%,100% 100%,20% 100%,0% 50%); top: -3px;" id="parcelamento">-{{ compare_at_price | minus: price | money_without_trailing_zeros }}</span>

      </p>

      <span style="font-size: 12px; margin-bottom: 0px;">ou 12x <span id="parcelamento">{{ price | divided_by: 12 | times: 1.2166 | round:2 | money }}</span></span>

    </div>

    <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">

      <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>

      <span class="price-item price-item--last">

        <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>

        <span aria-hidden="true">/</span>

        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>

        <span>

          {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}

            {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}

          {%- endif -%}

          {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}

        </span>

      </span>

    </small>

  </div>

  {%- if show_badges -%}

  <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">

    -{{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}% OFF

  </span>

  <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">

    {{ 'products.product.sold_out' | t }}

  </span>

  {%- endif -%}

</div>

<style>

  .price--on-sale .price__sale {

    display: grid;

  }

  .price--sold-out .price__availability,

  .price__regular {

    display: grid;

  }

  .price--on-sale .price__sale {

    display: grid;

  }

  .price--large {

    font-size: 2.1rem;

  }

  .price {

    font-size: 1.8rem;

  }

  .price--on-sale .price-item--regular {

    font-size: 1.6rem;

  }

</style>

[Asad24]

What's your store url ?

[Danielpochapski]

Here: smartcasashop.com.br

[Danielpochapski]

www.smartcasashop.com.br

[BSS-Commerce]

Hi @Danielpochapski ,

You can follow this way:

Step 1: Go to Edit code 

Step 2: Go to .css file, global.css or theme.css 

Step 3: Add code:

.price__regular p {
  margin-top: 0;
}

 Hope it helps @Danielpochapski !