Buy Button - Product Price Styling

Highlighted
Tourist
16 0 1

Hi all,

 

We've built a pretty Webflow website and want to stick in Shopify buttons but also pull the price (that way we update everything on Shopify and not on our static Webflow pages).

 

I've tweaked the button code to 

 "price": true

To include the price with the button, which works well.

 

My question - How to I go about styling the price?

 

By default it's a standard small font and colour, I want to tweak the colour, size and font to match the rest of the site.

 

I get by with code, but could do with a template and where to paste to get me through.

 

Thanks in advance!

0 Likes
Highlighted

Hello,

For styling you have to put your css in theme.css file

 

1. Go to Online Store->Theme->Edit code

2)Asset->theme.scss

 

Please share your site url so that i will help you

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
16 0 1

Thank you for your reply.

 

Our Shopify site is - https://luxury-train-tickets.myshopify.com

 

I had a look, but I can't see 'theme.scss' only 'theme.js'.

 

Just to confirm, it's this bit we want to style:

 

Screenshot 2019-10-17 at 16.18.40.png

 

Many thanks!

0 Likes
Highlighted

Then please check style.scss

and add below css code

span.money {
    color: #69727b;
    font-weight: 400;
font-size: 16px; }
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
16 0 1

Thank you!

 

I've found 'theme.scss.liquid' - Is that correct?

 

I can't see a simple 'style.css' anywhere!

0 Likes

yes

put css in theme.scss

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
16 0 1

Thank you.

 

I've put in 

 

 

  span.money {
    color: #13308a;
    font-weight: 400;
         font-size: 16px;
    font-family: "Playfair Display";
}

And got this result here on the product listing with the sale price:

 

Screenshot 2019-10-17 at 17.05.45.png

 

 

But not here in the Shopify button template?

 

Screenshot 2019-10-17 at 17.06.07.png

 

 

 

Any ideas?

 

Thanks

 

0 Likes
Highlighted

Hello,

I checked your site.

You put this

.price__sale span.money { 
color: #13308a; font-weight: 400; font-size: 16px; font-family: "Playfair Display"; }

Actually you put .price_sale class...So it is showing on only sale price.

Now add this css also

 

.price span.money {
    color: #3d4246;
    font-weight: 400;
    font-size: 16px;
    font-family: "Playfair Display";
}

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
16 0 1

Thank you so much for your help so far.

 

That's worked on the actual Shopify site, but the styling still hasn't applied to the Classic Button I am trying to copy to put on my Webflow site.

 

Does this need to be applied to another class?

0 Likes
Highlighted

Are tou talking about this

2019-10-18_13-51.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes