Shopify-button not receiving style

We’ve inherited/rebuilt a site;

Everything was working fine until the Shopify buy-it now-buttons have lost their outline styling (but they still function).

We’ve duplicated the site from a backup that was working 2 weeks ago, and the current site is attached (below)

The code blocks are identical on both sites. So we must have done something in Webflow, but after hours and hours of looking there doesn’t seem to be any reason to why the CSS wouldn’t style the button, we’re just not sure, it seems identical.

Has anyone run into this conundrum before? If anyone could anyone have a look or at least point us in the right direction, that would be super helpful! Hoping it’s simple or just a lack of knowledge.

Thanks for your help

G

Main site -
https://ajoto-2019-test.webflow.io/
https://preview.webflow.com/preview/ajoto-2019-test?utm_source=ajoto-2019-test&preview=e32502f56fcf8e99d37c370f2fbe4424

https://ajoto-2019.webflow.io/shop

Backup that works -
https://ajoto-2019-19daysago.webflow.io/
https://preview.webflow.com/preview/ajoto-2019-19daysago?utm_source=ajoto-2019-19daysago&preview=c23b4a046142e9512ef33aa3f3942492

https://ajoto-2019-19daysago.webflow.io/shop

Live site is [ajoto.com]

by%20default%201 by%20default%204

Can you tell where to find this button? on witch page?

Hi @shokoaviv, thanks a lot for taking a look.

I’ve updated the main post to include -

https://ajoto-2019.webflow.io/shop
and
https://ajoto-2019-19daysago.webflow.io/shop

Cheers.

G

The class is missing / not defined in CSS.

shopify-buy__btn {
    padding: 9px 15px;
    border-radius: 3px;
    background-color: #cb9f4f;
    color: #fff;
    font-size: 13px;
    text-align: center;
    letter-spacing: 1px
}
1 Like

Hi @webdev Thanks a lot for taking a look too.

Yes, this is what’s confusing me so much; the code is identical.

On the live version: https://ajoto-2019.webflow.io/shop there is no gold box on Chrome and on safari its a grey unstyled box (ive attached what we can see after a full cache flush. also on multiple machines.

Can you see it too or are you seeing a gold box? (https://ajoto-2019.webflow.io/shop)

Thankyou

G

by%20default%206 by%20default%207

@AGH - What am saying is that you don’t have the class defined in webflow on this newer site and it is not bound to the embedded button.

Go to your any page, drag a button on the page, add that class to the button. Style it. Then delete the button or better yet, store it on a page somewhere. If you clean up classes… it would get deleted. If it is defined somwhere on the other site, just copy and paste.

Then add that class back into the embedded button. You should be good to go then.

1 Like

@webdev May I buy you a beer sir!!!

Your dead on the money, there was a styled elements page that was deleted ages ago, but only recently did we clean up the old classes, which led to the button style being removed.

Thanks a million!!!

G :grin:

Yes, I like IPA’s. See my profile. :slight_smile:

Glad your issue is now resolved.

So a caution to designers. Creating an element to create a class, then deleting that element has potential implications if you use the clean up unused classes feature.

Best to keep all design elements on a page(style guide perhaps) and add a note so you know why you created it. I am so used to writing all that out to SASS files, need to find a better way in wf.

Cheers!

2 Likes

@webdev Ha, I was going to ask for your paypal! Enjoy the ale, and thanks again!

1 Like

Hi! how did you add the classes? i am trying to edit the style on the shopify buy button but i cant.
Can i see your embed code? :confused:
Thanks!

Hey Jeff, seeing as how you were able to help the original poster in this post, I was wondering if you would “lend a digital hand” to me and my project. I have read your answer a few times and I still can’t quite understand it enough to implement it. I’d love to buy you a case of your favorite IPA to provide further insight!

@Arthur_Seabra => Can you share a published link to a page so I can inspect it?

Absolutely, please check your inbox! I just sent you the links. Thanks so much for looking at this for me. I’m sure you’ll be able to find a solution in less time than it took me to write this reply :wink:

I tried the method of making a button with the class shopify-buy__btn but with no luck. So I ended up just editing the css in the Shopify code, see screenshot (highlighted area).