Sell on Webflow using Selz

If you’re using Webflow to build a website but want the simplicity of Selz for selling and managing your products – no problem. Here’s how to do it.

Adding Products to Webflow with standard styling

To add a product from your Selz inventory to your Webflow site you need the Embed feature enabled on your Webflow site:-

1. In Webflow, select Add Element

Using Webflow with Selz

2. Then select Embed

webflow-2

3. Now you just paste the embed code from Selz for that item into the embed window in Webflow:-

Using Webflow with Selz

This will give you a Buy Button or Item Widget as you’ve styled it in the Selz editor e.g. something like this:-

webflow-and-selz-embed

Using your own Styling

If you want to use your local styling for embedded products you need to add some custom code to your site or page. Here’s the Webflow support article containing more information on custom code.

1. In Webflow, select Site settings and Custom Code

screen-shot-2016-10-24-at-4-20-12-pm

Or within the Webflow site editor select Page settings

screen-shot-2016-10-24-at-4-24-59-pm

2. Within the body code section you need to paste in some custom code. It sounds techie but it’s not (if you want the full jQuery details you find them here). But to do it the simple way just copy and paste the code below into the body code box, we’ve included two options:-

Display the item detail page first:

<link href="https://cdn.selz.com/jquery/1.0.13/jquery.selz.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdn.selz.com/jquery/1.0.13/jquery.selz.min.js"></script>
<script>$(function() { $.selz(); });</script>

Fast checkout option:

<link href="https://cdn.selz.com/jquery/1.0.13/jquery.selz.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdn.selz.com/jquery/1.0.13/jquery.selz.min.js"></script>
<script>$(function() { $.selz({checkout:true}); });</script>

Click Save and close

3. Next you need copy the URL for your Selz item.

Go to your Selz dashboard select Items and Options for the item you want to sell. Copy the code from the right hand panel

4. Go back to WebFlow and add a Button to your page. Once the button is added select to add a link and paste in your Selz item URL.

screen-shot-2016-10-24-at-4-31-57-pm

5. Publish your site and this will display the Selz item checkout modal when your button is selected.

Was this helpful?

2 0