Wanted to see if anyone had suggestions on this-- I’m creating a landing page platform in webflow for an e-commerce site that is built on Shopify. We’re using the “Shopify Buy Button” feature in combination with the Webflow CMS to generate dynamic landing pages on the fly.
Shopify seems to severely limit how they allow the buttons to be styled, and after a bunch of time talking to Shopify support about inline styling and linking to external CSS for the buttons, I’m trying to come up with a workaround. Here’s what I want the button to look like:
Has anyone had success with:
1.) Using Webflow classes to style buy buttons? When I try to assign the class to the buy button embed code, this is what I get (this is actually the same as the result I got from inline styling).
2.) The other hack I am trying to figure out is if there is a way (maybe using “Custom Attributes”?) to have a webflow button link to the link generated by the embed button, and then I could just hide the Shopify widget.
I like the shopify back end, so if possible it’s usually my preference.
I’ve encountered the same issue with styling the buttons how I like.
I think you could be right that If the class names matched up you could control the shopify button style within webflow.
One alternative I’m looking into is Foxy.io .
It uses the data from your cms, so you would put the price, discount, all the data in your cms, then foxy would use the cms data to generate functioning buttons and cart.
I believe this would give you more control over your button style.
I think the pricing is slightly better than shopify too.
If you do managed to solve the shopify button problem let us know cause it will be useful.
Assuming you’re only using the button from shopify. Could you have 2 divs set to absolute within another div. one could have a higher z-index than the other. Put the shopify button in the div with the higher z-index and set the div opacity to 0. In the div with the lower z-index you could style a button how you like. I imagine the lower div would have to be the same size as the higher div. Can’t remember if you can change the size of shopify buttons.
@joelrstanton Josh from Foxy.io. Just wanted to check in and see if you figured out a workaround for your Shopify buttons? If not, we’d love the opportunity to help you dynamic purchase options to your Webflow landing pages so you can start selling quicker. Please take a look at this page. Please don’t hesitate to email if you have any questions at all: hello@foxy.io
use Transformations to zoom in the button (scale x & y)
use padding-left inline of the embed code’s div to move the button a bit horizontally
This is what I managed to achieve, works acceptably on all resolutions:
I managed to scale it x1.74
