Adding Custom CSS to PageFly

Solved
cotty
Tourist
6 0 2

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):

<style>
font-size: 24px;
font-family: Roboto;
color: rgb(34, 34, 34);
text-align: center;
</style>

 

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!

0 Likes
satsinghrana
Shopify Partner
144 12 21

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

 

If helpful then please Like and Accept Solution
Hire for Custom Shopify Solutions, Apps development or Any kind of Web development work.
Contact : satsinghrana1@gmail.com
See our Shopify Apps: HERE
0 Likes
g33kgirl
Shopify Partner
223 59 71

This is an accepted solution.

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:

 

<div class="vat-price">
{{ product.price | times:1.2 | money }}
</div>

 

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?

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
cotty
Tourist
6 0 2

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

g33kgirl
Shopify Partner
223 59 71

@cotty Thank you.

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes