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

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

Danielpochapski
Explorer
62 0 11

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>

 

Opa.jpg

Replies 4 (4)

Asad24
Shopify Partner
180 36 33

What's your store url ?

banned
Danielpochapski
Explorer
62 0 11

Here: smartcasashop.com.br

Danielpochapski
Explorer
62 0 11

BSS-Commerce
Shopify Partner
3477 463 542

Hi @Danielpochapski ,

You can follow this way:

Step 1: Go to Edit code 

 

view - 2023-11-01T104921.290.png

 

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

 

view - 2023-11-01T105011.538.png

 

Step 3: Add code:

 

.price__regular p {
  margin-top: 0;
}

 Hope it helps @Danielpochapski !

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via [email protected]


BSS Commerce - Full-service eCommerce Agency