How can I add additional text below the price on my website?

Topic summary

Goal: Add the text “zzgl. Versand” next to the tax note “inkl. MwSt.” on product pages, and ensure proper alignment on mobile.

Proposed solution: A CSS rule using a pseudo-element was suggested to append the text:

  • .product__policies.rte.small–text-center:after { content: " zzgl. Versand"; display: inline-block; }
  • Add this to theme.css.

Mobile alignment request: The author wants the price and the appended text aligned left on phones. A media query was provided to left-align elements at max-width 768px:

  • .product-single__meta .rte, .product-block.product-block–price { text-align: left !important; }

Latest status: The price is already left-aligned on mobile, but the text below the price (policy text) is not. It appears the initial CSS may not be applied or the selector doesn’t target the exact element on mobile.

Notes:

  • CSS (Cascading Style Sheets) controls styling; the :after pseudo-element inserts extra content; media queries apply styles at specific screen widths.
  • Screenshots were shared to illustrate alignment.

Outcome: No confirmed fix yet. Discussion remains open; next step likely involves adjusting the selector to target the policy text on mobile.

Summarized with AI on February 7. AI used: gpt-5.

Hey, I need to write next to the inclusive taxes (inkl. MwSt.) zzgl. Versand. The first picture is an old picture and some guy edited my code but now I have a new website and don’t know how to add the “zzgl. Versand”

My website https://timitar-gewurze.myshopify.com/

Password: timitarspices

Hey,

One solution can be to use the below CSS hack:

.product__policies.rte.small--text-center:after {
  content: " zzgl. Versand";
  display: inline-block;
}

Adding the code at the end of your theme.css should do the trick.

Cheers!

1 Like

Hey,

Thanks a lot!!

How can i move them to the left, only on Phone?

Hi,

On my end it looks different, it doesn’t seem that the code I’ve provided was added.

The below code can be used to align the price to the left, only on mobile phones.

@media (max-width:768px) {
.product-single__meta .rte, .product-block.product-block--price {
  text-align: left !important;
}
}

Regards,

Hey,

The price is already on the left, but the text below not.