Add A Solid Color Behind customised pricing and sales text Sense theme

[Printatme]

Hi,

I am using the Sense theme.

I am trying to add a block colour over the pricing amount and percentage saving text on my products page.

I was hoping someone would help me find a solution.

The pricing syncs with a third party app. Below is a link of where I am trying to achieve this.

https://vimeo.com/879818260/3921971b4a?share=copy

Thank you

[Made4uo-Ribe]

Hi @Printatme

Can you explain what you mean by block color? You mean add a background color? That can be done, but can you also provide your website so we can provide the code appropriate for you

[Printatme]

Hi @Made4uo-Ribe

thank you for your reply and yes by block colour I mean a background colour just for the pricing and savings text, without it effecting anything else.

Yes below is my website;

https://printreality.co.uk/

Please private message me for the password

Thank you.

[Made4uo-Ribe]

Do you mean like this?

I cant see the percentage saving text.

If it is, try this one.

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.price.price--large.price--show-badge {
    background: chocolate;
    padding-left: 10px;
}
.product .price__container {
    margin-top: 0.5rem;
}

And Save.

Note: You can change the color that you like. The padding and margin I added for the alignment of the color.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[Printatme]

@Made4uo-Ribe thank you, yes that is what I mean.

1 question before I try this. Where do I add the code ? and can I apply it for other text sections such as the delivery note and price below that?

Thank You.

[Made4uo-Ribe]

Oh, Sorry I forgot to put it.

This design cannot be added to other text. It calls only the specific text.

[Printatme]

@Made4uo-Ribe Thank you for your answer. I have sent a picture below if you could help me with a code for delivery/taxes note and % as well that would really help please.

Thank you

[Printatme]

@Made4uo-Ribe Basically I would like there to be a background colour for each product page for the pricing and taxes/delivery note and savings % for when it’s available. Hopefully this is possible. Thank you.

[Made4uo-Ribe]

Hi @Printatme

Thank you for providing the product link. You can add the code instead. Code updated to add the tax text

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

NOTE: Change color chocolate to the color you want

product-info .price.price--large {
    background: chocolate;
    padding: 0 1rem;
    width: max-content;
}

product-info > p.product__text.inline-richtext {
    background: chocolate;
    padding: 0 1rem;
    width: max-content;
}

product-info > p.product__text.inline-richtext ~ p.product__text.inline-richtext {
    width: unset;
}

Result:

[Printatme]

Hi @Made4uo-Ribe

Thank you for providing the coding solutions so far.

Unfortunately I tried the code but it’s only highlighting the price still.

If you could get back to me on whether something is missing please that would help. Also I am trying to make the size of the text slightly bigger and bolder.

Thank you.

I have attached a screenshot of how it is currently showing at the moment.

[Printatme]

Hi @Made4uo-Ribe

thank you I have managed to resolve it, the code works. Instead of the code in base.css, I applied it to the Custom CSS within the section itself in the Shopify editor.

Screenshot below for anyone that needs reference for the ‘Sense theme’

[Made4uo-Ribe]

Thats is good to hear, Sorry for late reply.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!