Changing size of price font on product page

Highlighted
New Member
7 0 0

Hi there.

Just new to the forum.

I'm using the Debut theme and want to increase the size of the font for the price on the product page. I would also like to add some text after the price such as (Excluding VAT), which shoud appear on every product page.

Can anyone help?

Thanks

0 Likes
Highlighted
Excursionist
38 0 9

Hi jimg, you can change the font size in the Theme editor. Find the file 'theme.scss' and change this:

.product-single__price {
    color: #788188;
    font-size: 1.25em;
    font-weight: 600;
    margin-bottom: 30px;
}

Change font-size.

To include some text after price, find 'product-price.liquid' file and find this section below:

{% if compare_at_price > price %}
  {% if price_varies %}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <s class="product-price__price">{{ compare_at_price | money }}</s>
    <span class="product-price__price product-price__sale">
      {{ money_price }}
      <span class="product-price__sale-label">{{ 'products.product.on_sale' | t }}</span>
    </span>
  {% else %}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <s class="product-price__price">{{ compare_at_price | money }}</s>
    <span class="product-price__price product-price__sale">
      {{ money_price }}
      <span class="product-price__sale-label">{{ 'products.product.on_sale' | t }}</span>
    </span>
  {% endif %}
{% else %}

  {% if price_varies %}
    <span class="product-price__price">{{ money_price }}</span>
  {% else %}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <span class="product-price__price">{{ money_price }}</span>
  {% endif %}
{% endif %}

and change it to:

{% if compare_at_price > price %}
  {% if price_varies %}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <s class="product-price__price">{{ compare_at_price | money }}</s>
    <span class="product-price__price product-price__sale">
      {{ money_price }}
      <span class="product-price__sale-label">{{ 'products.product.on_sale' | t }}</span>
    </span>
    <span>(Excluding VAT)</span>
  {% else %}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <s class="product-price__price">{{ compare_at_price | money }}</s>
    <span class="product-price__price product-price__sale">
      {{ money_price }}
      <span class="product-price__sale-label">{{ 'products.product.on_sale' | t }}</span>
    </span>
	<span>(Excluding VAT)</span>
  {% endif %}
{% else %}

  {% if price_varies %}
    <span class="product-price__price">{{ money_price }}</span>
    <span>(Excluding VAT)</span>
  {% else %}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <span class="product-price__price">{{ money_price }}</span>
    <span>(Excluding VAT)</span>
  {% endif %}
{% endif %}

{% unless available %}
  <span class="product-price__sold-out">{{ 'products.product.sold_out' | t }}</span>
{% endunless %}

Hope that helps

1 Like
Highlighted
New Member
1 0 1

Hi, how to to do it on the venture theme?

1 Like
Highlighted
Excursionist
38 0 9

Hi Michael, I'm not familiar with the Venture theme, but if you email/message me the password to view your store, I can help you out.

0 Likes
Highlighted
New Member
7 0 0

Thanks John.

0 Likes
Highlighted
New Member
7 0 0

Hi - how can I change the font colour?

I tried altering the hex reference - but it didn't appear to work.

0 Likes
Highlighted
New Member
2 0 0

Hello John,

My store them is minimal and try to find below in the code to change font size but could not find,

product-single__price

 Kindly help.

0 Likes