You Are $X Away From Free Shipping Coding increasing text size and bold text

Store Design
, , ,
1

Hey there,

So, I know the code for You Are $X Away From Free Shipping is the following

{% assign shipping_value =x %}
{% assign cart_total = cart.total_price %}
{% assign shipping_value_left = shipping_value | minus: cart_total %}

{% if shipping_value_left > 0 %} You are {{ shipping_value_left | money }} away from FREE shipping! Continue shopping to add more products to your cart and receive FREE shipping for orders over $x. {% else %} You've got FREE shipping! {% endif %}

However, the text is too small and cannot find a way to increase it in size within the code itself. Also, I would want to make the shipping value $ left in BOLD within the same code.

Can you please help?:slight_smile:

2

Hi @Esme89

May I suggest code below:

{% assign shipping_value =x %}
{% assign cart_total = cart.total_price %}
{% assign shipping_value_left = shipping_value | minus: cart_total %}

	{% if shipping_value_left > 0 %}
		You are **{{ shipping_value_left | money }}** away from FREE shipping! Continue shopping to add more products to your cart and receive FREE shipping for orders over **$x**.
	{% else %}
		You've got FREE shipping!
	{% endif %}

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

3

It did! I have a couple of more questions if you don’t mind.

When I click on Continue Shopping it does lead me to the products page but the text is not highlighted in blue as it usually is and so customers would know they can click on it. Do you know what the problem could be and how could to be sorted?

Also, to frame the announcement inside a ‘box’ I used this code

.shipping-savings-message {
background-color: #ffffff;
border: 3px solid green;
padding: 20px;
text-align: center;
margin-bottom: 25px;
}

Though when I try to use the colour code as I need a different shade of green, it does not work. Any suggestions?

Thank you Eboost!

4

Hi @Esme89

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Layout/theme.liquid
  3. Copy code below to before tag

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

5

You are bloody brilliant mate! Thank you!

To change the colour of the box frame to 8DC53E would I just need to use that instead of solid green?

Thank you!

6

Hi @Esme89

Correct. #8DC53E