Hey there 
I’m finishing a small e-commerce site for a client who sells ponchos in Normandie, lesponchosfrancais.webflow.io
I’m happy with the combo Webflow - Shopify embed button except the fact that the embed button takes so much time to load…
Please let me know what you think of this site !
Thank you by advance for your help,
Best,
Blaise
Hi @Blaise_Posmyouck - Nice looking site! The only issue I see is that the Shopify Cart only appears on pages that have Buy Buttons - If I add something to the cart and go back to the home page, there is no Cart. I resolved this a few days ago with a work around. I will find the post and add here… Regards Kai
Hi @Blaise_Posmyouck - here is my work around (at the bottom of the post!) -
Thank you very much @Keejo, I’ll check this asap !
@Blaise_Posmyouck My pleasure! Just copy a buy button embed widget, give it a new class name, set it as hidden and add it to all the pages without Buy Buttons… Prehaps this is not the best solution but it worked for me! If you discover a better way, to add the cart to every page, please let me know
As I used the CMS for this site, I had to put all my shopify products into the same collection (in shopify admin) and then generate the embed code of that collection , create a new embed widget inside webflow with the new generated code and display it : none.
Seems to work fine !
Thank you so much, @Keejo
Best
Hi @Blaise_Posmyouck - Its a pleasure - Sorry that I created more work for you! …but I’m very pleased you’ve been able to fix it. I guess anyone wanting to use Shopify Buy Buttons in Webflow will have this same issue if they want the cart on every page. CMS or non CMS… I hope the client sells lots of ponchos! Regards - Kai
The website looks great - the colours, layout and images combine really nicely.
On the loading time for the buy buttons - you could put them in a div with a specified height and you could potentially put a loading animation positioned absolutely with a high z-index to indicate that the buy button is loading - and set the animation to display:none after maybe 1 or 2 seconds. That might look and function better than the current situation where the buy button loads after a couple of seconds and pops in and moves all the content downwards.
A questions for you - were you able to style the Shopify buy button? If so, how did you do it? I have built a shopify website with buy button embeds and I wasn’t able to - nor was I able to find anyone with any information on how to do this!
Hey @Diarmuid_Sexton
Thanks for the review !
I will try your workaround for the loading buy buttons, thank you very much for this tip !
You can style the different buttons (buy button, add to cart, checkout…) in Shopify admin, but also in the embed code. I’m not on my computer atm so I can’t really show you with screenshots, but you will have to change the css for the “button” elements in the embed code.
Please feel free to contact me if you need help on this.
Thank you again for your help, I appreciate !
Take care
Hi @Blaise_Posmyouck - Is this the bit of code you are referring to?
"button": { "background-color": "#30ab3a", "font-family": "Roboto, sans-serif", "font-size": "14px", "padding-top": "7px", "padding-bottom": "5px", "padding-left": "10px", "padding-right": "10px", ":hover": { "background-color": "#3b3b3b"
As you say, you can change the button style a bit in Shopify and also edit it some more with this code. You can also give the embed widget a class and edit the padding, etc of the widget itself, of course!
I’d be very intersted in seeing the loading animation in action - please show the results if you do this! It is annoying that the buttons take a while to load - Regards Kai
K, I’ll try it next time i need it. I remember last time I tried - I couldn’t override the Shopify styles. I could change some styles but not everything.
Thanks
Well I’m trying a kind of loader for the buttons. It doesn’t work as fine as I expected but it will do for now.
What do you think ? @Diarmuid_Sexton ? @Keejo ?
Take care guys, and thanks again !
Nice. It’s definitely an improvement - the fact that the content no longer jumps down is much better.
You could make a nicer animation maybe.
You could also set it to disappear by ticking the “wait for assets to load” checkbox (maybe this works for the loading time for the shopify button, but maybe not also!) and then setting the animation to fade out / display none.
Hi Blasie! That was quick! I see something appearing before the buttons but it’s so fast, it only flashes up for a milli-second. It is better that the content no longer jumps down though! Regards - Kai
Nice idea @Diarmuid_Sexton !
Yes I used wait for assets to load here but it is too fast that we cant even see the loading animation.
I’ll try something else and see how it goes
Hi Blasie - Good luck! Please report back! Can I ask, what is the search box for - top left? If I type something into the box and hit Enter on my keyboard, it says ‘Your information has been submitted’… Regards - Kai
Yes @Keejo Im still working on the search box. I will use Search IQ so I will set it up when the site will be live (in order to index .com pages, not .webflow.io).
Thank you !
Best
Ah I see! Sorry @Blaise_Posmyouck - That’s interesting - I’d like to see that in action too when it’s done - I have used Swiftype on a couple of sites but I don’t really like it - Do you recommend Search IQ? Is it easy to setup with Webflow? THANKS! Kai
@Blaise_Posmyouck - one small observation - Sorry! I feel like I’m picking on you!! When I translate the site to English - ‘Motif’ translates as ‘Reason’ - Should this be ‘Pattern’…?
Regards Kai