Shopify Checkout On Webflow Site

Community resources General
1

Hi

Basically if you can solve this, you deserve everything. No jokes.

So I’ve recently been experimenting with payment gateways and I’ve finally come to the perfect solution for my business - Shopify Buy Buttons. I am able to create a button in Shopify then embed this button into my Webflow site which allows the customer to press a button (the button that has been embedded in my Webflow site. See this link for more context: https://shopify-webflow.webflow.io). Once they press this button, it opens a pre-built Shopify cart where they can go directly to a checkout page that is made by Shopify. (See video: - YouTube) So I like this and all but I came across a company called Alyx (Pronounced: Aleeks) which also uses Shopify checkout but in a different way.

In this video of the Alyx site, (Open YouTube Link: - YouTube) the customer is able to go to a product page that was designed in Webflow then is able to add this product to the cart. Once the customer clicks on the cart, it opens the cart page and the cart page is also custom designed in Webflow and NOT the unattractive pre-built one made by Shopify. Normally with Shopify buy buttons it opens a pre-built cart like in this video (Open YouTube Link: - YouTube) but I don’t want this pre-built Shopify cart but instead I would like it to open a cart that I custom designed in Webflow like on the Alyx site like in the video. After this custom designed cart opens I would like customers to be able to click ‘Checkout’ on this custom cart page which takes them to the Shopify checkout like in the Alyx video. (Open YouTube Link: - YouTube)

I’m so so sorry for how complicated this is but I tried my best to simplify it. I’ve seen multiple sites (like in this video: - YouTube), where everything is custom designed in Webflow but then the checkout page is a Shopify checkout. Please let me know if you need any more info to help you help me.

Link to websites:

I can’t thank you enough. Thank you.

Greg

1 Like
2

Welcome to the forums @Greg_Allen, investigating I can tell that the Alyx site is actually hosted with Shopify and not on Webflow, that is why their integration is seamless. That being said, there are solutions to what you want to do. One involves Shopify and the other involves a much more cost-efficient and allows for seamless integration with Webflow.

Shopify solution
Now you can use Webflow to design your ecommerce website and then use the Udesly Adapter to convert the site you made into a Shopify-ready site. Now, this solution allows you to make a completely custom Shopify site including account pages and your cart page and you can just worry about managing your Shopify store within Shopify rather than creating a ton of buttons to customize and embed. That way you’d get the results that you see in that video.

The non-Shopify solution
You would simply design your site like normal within Webflow and integrate Snipcart. Snipcart is fully customizable and everything can be accomplished on site. Now the best part is that if you do under $500/m in sales then they charge $10 a month but if you do more than $500 then they just take 2% off of each transaction. I’d say this is way more cost-efficient and quite a bit easier to deal with than Shopify.

@PixelGeek has a tutorial on getting started with the integration Integrating Snipcart with Webflow for Ecommerce - Tutorial - YouTube

Please let me know if there is anything else you’d like to know.

1 Like
3

Thank you very very much. Truly. Thank you.

4

No problem @Greg_Allen , let me know if you need further assistance.

5

Hi @chris_loggins !
Can you check out my questions here

I would appreciate any help or advice you can provide!

Here is my public share link: [[LINK]]

6

Hi Greg,

I had a look at your webshop and was fascinated. How did you manage to design the cart button on the right side of your website? I can’t find any help in this area.

All the love,
Vanessa