How can I apply custom CSS to a PageFly HTML snippet?

Technical Q&A
1

Hi all,

Here’s my problem - we use PageFly and wanted to add +20% VAT on to prices shown. Their customer service said this wasn’t possible, however, I remembered that you can insert a HTML/Liquid snippet, so, I could add the below snippet, which I found in another forum post:

{{ product.price | times:1.2 | money }}

This works, of course. However, I’m now stuck on how I apply CSS to this snippet. Any ideas? I read this article about creating my own CSS file and adding to assets section, which I’ve done, and it looks like this (saved as vat.css):

Am I going down the correct path or am I completely way off? I’m no techie, so now I’m at a loss of how I apply this style to the afformentioned code product.price.

Any help pointing me in the right direction would be really appreciated!

2

Please share the page and the place where you want to apply this there must be a way around!. we can find that.

3

Your CSS is incorrect. You need to add reference to the class or ID of the selector you want to apply the style on.

To do that, you can add a wrapper element to product.price:


{{ product.price | times:1.2 | money }}

Now style it in your CSS file:

.vat-price {
font-size: 24px;
font-family: Roboto;
color: rgb(34, 34, 34);
text-align: center;
}

Have you added the link to your newly created CSS file in theme.liquid file?

1 Like
4

Thanks for the help @g33kgirl , so happy I could cry! Coffee tips sent. :))

1 Like
5

@cotty Thank you.