Re: How do I change the colour of the price text only without altering other colours in my store?

Solved

How do I change the colour of the price text only without altering other colours in my store?

Kjb92
Tourist
8 0 4

Hi, 

 

I'm trying to change the colour of my price text only, I have had a look into the coding side but It seems multiple points in the website feed off the same text section. so as soon as I alter the code it alters some other text else where. 

 

Is it possible to only change the colour of the price text, on collection pages, product pages?

 

As you can see its just plain black but wanting it to be #004aad

Screenshot 2024-09-27 at 01.23.36.png

 

Just so you know, I'm running the IMPACT theme

 

Thanks in advance

Accepted Solution (1)
BSSCommerce-HDL
Shopify Partner
2305 833 906

This is an accepted solution.

Hi @Kjb92,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Add this code before <head> tag:

 

<style>
.collection-banner sale-price {
    color: #ffff !important;
}
</style>

 

Here is result: 

BSSCommerceHDL_0-1727404568904.png

Hope this can help you,

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

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 12 (12)

BSSCommerce-HDL
Shopify Partner
2305 833 906

Hi @Kjb92Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

BSSCommerce-HDL
Shopify Partner
2305 833 906

Hi @Kjb92

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Add this code before <head> tag:

<style>
sale-price {
    color: #004aad !important;
}
</style>

 Here is result: 

BSSCommerceHDL_0-1727402357047.png

Hope this can help you,

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

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Kjb92
Tourist
8 0 4

Sorry to bug you again, but since changing this the price text, here the price text is now the same colour as the background 🤦🏻‍ This is the issues I have been having haha

IMG_1562.jpg

BSSCommerce-HDL
Shopify Partner
2305 833 906

This is an accepted solution.

Hi @Kjb92,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Add this code before <head> tag:

 

<style>
.collection-banner sale-price {
    color: #ffff !important;
}
</style>

 

Here is result: 

BSSCommerceHDL_0-1727404568904.png

Hope this can help you,

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

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Kjb92
Tourist
8 0 4

Thank you so much again 🙂

BSSCommerce-HDL
Shopify Partner
2305 833 906

@Kjb92, No problem. Have a good day 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Tech_Coding
Shopify Partner
384 106 90

Hello @Kjb92 
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
Kjb92
Tourist
8 0 4

Of course,

 

my URL is: https://hicapahub.co.uk

 

has no password on 

Tech_Coding
Shopify Partner
384 106 90

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
   sale-price.text-subdued, sale-price {
      color: #004aad !important;
   }
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
Kjb92
Tourist
8 0 4

You are a hero! 

Thank you ever so much for your help, it’s very much appreciated 🙂

Tech_Coding
Shopify Partner
384 106 90

You're very welcome! I'm delighted that the solution was helpful. Feel free to reach out if you need any further assistance in the future.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
Kjb92
Tourist
8 0 4

Sorry to bug you again, but since changing this the price text, here the price text is now the same colour as the background 🤦🏻‍ This is the issues I have been having haha

IMG_1562.jpg