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

Show More

{% 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
-%}

{%- 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 -%}

{{ ‘products.product.price.regular_price’ | t }}

{{ money_price }}

ou 12x {{ price | divided_by: 12 | times: 1.2166 | round:2 | money }}

{%- unless product.price_varies == false and product.compare_at_price_varies %}
{{ ‘products.product.price.regular_price’ | t }}

{% if settings.currency_code_enabled %} {{ compare_at_price | money_with_currency }} {% else %} {{ compare_at_price | money }} {% endif %}

{%- endunless -%}
{{ ‘products.product.price.sale_price’ | t }}

{{ money_price }} 
-{{ compare_at_price | minus: price | money_without_trailing_zeros }}

ou 12x {{ price | divided_by: 12 | times: 1.2166 | round:2 | money }}

{{ 'products.product.price.unit_price' | t }}

{{- product.selected_or_first_available_variant.unit_price | money -}}
/
 {{ ‘accessibility.unit_price_separator’ | t }}

{%- 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 }}

{%- if show_badges -%}

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

{{ ‘products.product.sold_out’ | t }}

{%- endif -%}

[Asad24]

What’s your store url ?

[Danielpochapski]

www.smartcasashop.com.br

[Danielpochapski]

Here: 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 !