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

Kjb92 · ‎09-26-2024

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

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

Thanks in advance

BSSCommerce-HDL · ‎09-26-2024

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:

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

BSSCommerce-HDL · ‎09-26-2024

Hi @Kjb92, Can 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 · ‎09-26-2024

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:

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 · ‎09-26-2024

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

BSSCommerce-HDL · ‎09-26-2024

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:

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 · ‎09-26-2024

Thank you so much again 🙂

BSSCommerce-HDL · ‎09-26-2024

@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 · ‎09-26-2024

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 · ‎09-26-2024

Of course,

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

has no password on

Tech_Coding · ‎09-26-2024

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 · ‎09-26-2024

You are a hero!

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

Tech_Coding · ‎09-26-2024

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 · ‎09-26-2024

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

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

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

Community Blog Articles