How can I add text next to a product's price on my webpage?

Store Design

Topic summary

Add “DONATION” text beside a product price and make the price bold via CSS. The solution uses the CSS ::after pseudo‑element to append text to the price and sets font-weight for both the appended text and the price itself.

Key changes:

  • In base.css, append text to the product price: use .product .price-item–regular::after { content: ‘DONATION’; font-weight: 600; }.
  • Make the price bold: .product .price-item–regular { font-weight: 600; }.

Secondary fix:

  • To remove “Shipping Included” under prices on the collection page, edit component-card.css and delete the rule that adds it via .card-information .price:after { content: ‘SHIPPING INCLUDED’; display: block; font-size: 12px; }.

Additional request (home page featured products):

  • To add text next to prices (e.g., “free delivery” and warranty), insert in product-items.css: .section-featured-collection .price::after { content: ’ free delivery year year + 2 warranty’; right: 10%; position: absolute; }.
  • Follow-up on placement asked; the brief reply was “Yes,” implying it can be added within that file, though exact position was not specified.

Status: Original issue resolved; secondary edits provided; final placement guidance remains minimal.

Summarized with AI on December 17. AI used: gpt-5.
1

Hi all,

How do I add text beside a products price? I want it to say this:

(INSERT PRICE) DONATION

Here is a link to one of my products. This will give you an idea of what I mean.

https://www.pennsylvaniaparks.org/products/ppf-unisex-classic-t-shirt-1

I also would like to make the price and the word donation larger and bold.

I would like to thank everyone in advance for any help your able to provide.

Thanks!

2

@Justin34

Add this css in base.css

.product .price-item--regular::after {
    content: 'DONATION';
    font-weight: 600;
}
1 Like
3

Hi Guleria… Thanks so much! That worked perfectly. Is there anyway to make the price bold too?

4

Add this css

.product .price-item--regular {
    font-weight: 600;
}
1 Like
5

Perfect! Thanks so much!!!

One last question.

If you go to this page:

https://www.pennsylvaniaparks.org/collections/drinkware

You will see under the price it says “Shipping Included” Do you by chance know how do I remove that? I added that long time ago but cant remember how.

Thanks again!

6

Edit component-card.css under Assets and remove this css

.card-information .price:after {
	 content: 'SHIPPING INCLUDED';
	 display: block;
	 font-size: 12px;
}
1 Like
7

You’re a genius!! Thanks so much bud!

8

@Guleria

Could you please assist me too?

https://powerhome.co.za/

I want to add text next to the price on my home page for the featured products.

For example - " free delivery" + " year year warranty"

Thank you

9

@powerH64

Add this css in product-items.css

.section-featured-collection .price::after {
    content: ' free delivery year year + 2 warranty';
    right: 10%;
    position: absolute; 
}

Thanks

10

anywhere in particular should I add it ( top or bottom)?>

11

Yes