Style in CSS not working, please help

Solved
VuongTuanAnh
Excursionist
26 0 2

Hi everyone;

I'm using the Debut theme. I want to write a "Free Shipping" text under my product price on the Product Page and want to make it look like the "sale" icon but it didn't make a change when I applied the CSS code :((

I created a <span> tag like this, inserted under Product Price in Product-template.liquid

<span class="freeshipping">free shipping</span>

VuongTuanAnh_0-1625890814946.png

Then I inspected the website, found the exact style of "sale" and applied it to the "free shipping" text, as shown in the image

VuongTuanAnh_1-1625890989863.png

Then I copied the code pasted it at the bottom of theme.css

VuongTuanAnh_2-1625891065194.png

Hitting save and I refreshed my website, nothing changed at all :((

VuongTuanAnh_3-1625891146020.png

Did I miss anything or doing something wrong here? How can I make it happen?

Please help;

Thank you all

 

 

 

 

0 Likes
suyash1
Shopify Partner
3013 329 504

@VuongTuanAnh - can you please share this particular page link?

 

also try by removing that word span in css file, clear cache from browser and check

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
VuongTuanAnh
Excursionist
26 0 2

Thank you @suyash1. I tried to remove the word "span" but it still not working.

Here's my website URL: https://pawcheap.myshopify.com/ (Password: mayflo)

 

0 Likes
suyash1
Shopify Partner
3013 329 504

This is an accepted solution.

@VuongTuanAnh - check your file , in that few lines above you have the text - 

Reduce footer size

you need to remove that text and line or put it in comment like /* reduce footer size */

 

since it is not in comment, it is an error and hence not loading css after that... remove that line and text or put in comment and it will work

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
VuongTuanAnh
Excursionist
26 0 2

You made my day @suyash1. Thank you so much, after I remove the text "reduce footer size". It works perfectly!

VuongTuanAnh
Excursionist
26 0 2

@suyash1 by the way, where can I copy the code to if I want the "free shipping" text on the same line as "sale" text?

0 Likes
suyash1
Shopify Partner
3013 329 504

@VuongTuanAnh - you will need to add it to pricing group to have it in same line... it will not be very easy hence first take backup of the current theme and work on it so live site is not affected, after everything is fine then you can make backup theme live

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly