How To Integrate Webflow With Shopify (2024) Step by Step

I'll integrate Webflow with Shopify step by step

Hello, everyone. Welcome back to another video. I hope you all are doing great and are having an amazing and absolutely incredible day

In this video, we're going to be talking about how you're going to integrate Shopify with Webflow in the easiest way possible

So let's get straight into this. So first of all, you're going to open up your Shopify and log in with everything

And you're also going to want to make sure to go to your Webflow. Now, on your Webflow, basically over here, you're going to go ahead into creating a site

and you're just going to get straight into your account. Okay. And once you get straight into your account, obviously it's going to be really easy to go from there

As you can see, I'm going to head straight into my dashboard. Make sure both these accounts are fully set it up for you

Now, most common people have this misconception that you can't really, you know, integrate Webflow with Shopify

Because if you go to Shopify over here, we're going to go into apps, and I'm going to go in all recommended apps

Normally, you integrate an application with Shopify by, you know, adding some type of provider

through the app. So let's say in the apps, I'm going to go ahead and search up Webflow

And in Webflow, obviously, you're going to try to find an application that is going to

make you connect with that flow. Now, obviously over here, you can't see any application that helps you connect with Webflow

So, you know, what to do? So in this case, what you're going to do is you're going to search a buy-by-bu

button. Okay. Now this won't really make sense right now, but trust me, it will in a second

So you're going to click on buy button channel and we're going to enter that. Once you do that

you're going to click on install. And once you click on install, you're just going to wait for

it to, you know, properly where if I and relocate itself into the Shopify dashboard. I'm

just going to wait for that to load in and here I'm just going to go ahead, click on Ad Sales

channel. Everything should be good to go from there. Now, whilst everything is being added into

the sales channel you can add your buy button over here and there we go so now we going to create a buy button Now the reason you will create a buy button in this case is because a buy button is what we will use as an integratory third provider to connect with our web flow

Okay? So we're going to click on create a buy button. And once you click on create a buy button, it brings you over here

So what type of buy button would you like to create product button? button recommended for showing one product on one block page or collection by button recommended

for showing an entire collection right now we're going to go with product by button but you can create

a collection if you want to i'm going to go with this one over here right i'm going to go with that

and click on select and once you go with this product of yours you're first of all going to choose

the layout style so first of all there's the basic layout style where it's just a button okay then

there's classic with the name and price on top of it then there is the full view okay which gives you

image and all i'm just going to go with the classic because it's more you know popular in that case

then action when people click so that will either add product to card direct to check out or

open product details i'm going to go ahead and click on direct to checkout okay so you can do that

or you can just have it out of the cart or you can go on add it to card then there's button styling

you can obviously mess around with the button styling you go something that matches

your stores theme. Now, obviously, my webflow page, let me show you what it looks like

Obviously, go with the coloring scheme that matches your actual Webflow stores theme

Now, what that will do is it will connect your Shopify and Webflow, and when someone actually

clicks on this button on your Webflow, they will be integrated straight to your Shopify

So as we can see, we're like on a dark blue here. So I'm going to go with this on a little light blue shade

You know, so we're going to go lighter. Yeah let just do that Or you can even make it into a green shade You know that works too And the button text you can change it to black if you want to White would be better in this case

I'm just going to keep it white. And now you're going to go into typography

There's the font and there's the text size that you can increase for yourself as well

But yeah, once you've done that, the button styling is done. Then there's the layout of everything

You can make the button large if you want to. There's alignment of everything

the button text add the cart obviously that stays the same then there's the sizing of all the

other things then there's a shopping cart you know how will the shopping cart which it look like when

someone is actually messing around with this so i'm going to obviously call a cart the subtotal is

going to be this over here show order note field okay if you want special instructions

uh then there's additional info that they can potentially give then the buttons should say check

out and if the card is empty they can say your card is empty everything should be good to go

yeah that looks pretty good so I'm gonna go with that and now yeah this should be good enough

it says open pop-up window or you can redirect in the same tab I'm gonna open pop-up window makes more

sense and once you do this click on next once you click on next it gives you a buy button code

now this is exactly what we've been waiting for so you're gonna click on copy code okay and

you're going to come to your web flow. Now once you're in your web flow, to add your actual Shopify button over here, you're

going to click on Export code. Now this code over here is obviously an HTML code with divs and stuff

So we are going to remove this and once you remove this, basically you need to add a code snippet

in this code generator over here. obviously you are going to want to upgrade your plan because without an upgraded plan it is impossible to add code into your Shopify store so make sure that you have an upgraded plan so once you have an upgraded plan uh things are going to be really easy so basically

let's see how much the upgraded plans are costly for so let's check those things out now these are

the basic upgraded plans you get um you know know $0, $1,000, which is $19 growth, which is $49, and Enterprise, which is, you know

the custom pricing with the enterprise. So pretty basic, pretty incredible stuff

Now, you're going to need to at least go to core to obviously add code snippets

But once you add the code snippet for Shopify, what's going to happen from there is basically

you're going to get redirected from the buy button, then you're going to add through code. Okay

Once you click on that buy button, what's going to happen from there

is you're going to redirect yourself to your Shopify, where it's going to, you know

take the products out of your Shopify store and add it into the cart in your Webflow store

So that's the integration process that goes on between Shopify and WebFlow

So that is basically how you're going to connect Shopify and Webflow with each other and use them in an integrated ring form

So I hope this tutorial was extremely helpful to you. And if you need any more videos like this

please do tell me I am always available and I will give you the easiest step-to-step guides

for any type of videos that you demand and if you have any queries regarding this video

you can let me know down in the comments and yeah I guess I'll see you next time

before signing off please like and subscribe to the channel and leave down a nice comment

if you watch the video and please don't forget to share this video with any of your

need or your family and I hope you all have a great day so until next time I'll see you later

and goodbye