Ecommerce integration example sites?

Hi everyone.

I’m going to make a webshop for a client, I normally use Shopify, but I really like webflow. So I’m thinking about going with that. Could some of you share some websites where you have integrated a webshop to a webflow site?

Here is one I am currently finishing up.

1 Like

I am in the same boat as you. One of my long term clients wants me to design the front end of their entire e commerce site with 50,000 products. The more I dig, and thanks to @AlexN, it seems like it’s not too difficult to design a fully custom site in webflow and transfer the design into a shopify custom template. I started by reading these Learn How to Build Themes for Shopify - Envato Tuts+ Web Design Tutorials and Alex recommended these videos Shopify Design Tutorials - YouTube

3 Likes

Thanks. Very nice. What are you using as a payment gateway?

The client uses authorize.net. Haven’t gotten a sale since launch (but stats have improved across the board, so it’s only a matter of time), but I went through the checkout process in testing mode and it’s head-and-shoulders above what we were using (prestashop).

braintree is far better … :stuck_out_tongue:

1 Like

http://saol.webflow.io/

2 Likes

Hey Spindiv_IO I have been looking on the forums for a while to find an commerce solution. I am in a similar position Nicholas_Loye, can I ask how you integrated shopify in order to customised its look and feel with webflow and will products automatically populate into the webflow site when the client adds a new product through shopify, or how does this work?

Hi @rcapozzi, have you seen this tutorial? Shopify Integration | Webflow University?

Does this help?

Hey cyberdave, yes I have and have also seen the 50 minute live video tutorial that pixelgeek gave.

I think I understand now how to customise the shopify button but my only concern is once I hand this over to the client how do they go about adding extra products via the cms without having to look for codes to embed with every new product added. Is this even possible? Can they even embed the code via cms without going into designer mode?

Hi @rcapozzi, you should be able to setup the products collection and the CMS editor can update the collection directly through the CMS panel.

As the designer, you will setup the same embed code to be used in the dynamic list, so the client will not need to update that if you have already done that for them. It is not possible to embed the code into the dynamic list using the CMS editor, that must be done in the designer only.

As they add new products to the products collection, those will show in the dynamic list and on the product detail page.

I hope this helps!

Hey cyberdave, thanks this sort of helps, just to clarify how does the client add the buy now button To the new product which may have a different price?

Also won’t this product also need to be added into the clients shopify account?

You will still need to add new products to the Shopify account first and then add/modify the product in the cms. The Webflow site just references the products that are already in the Shopify account.

Hi @rcapozzi, please look at this article: Shopify Integration | Webflow University

@DFink is correct, the products first need to be added to Shopify and then those unique fields for each product entered into collections in Webflow (product name, id, price etc).

Start watching at 5:39 in the video, for instructions on adding the buy now button using the dynamic embed.

Let me know if any questions :slight_smile:

Here’s a shop i built using webflow and the shopify buy it now button.
http://www.hailo-shop.ie/

1 Like

Hey guys thanks for all your help that has cleared a lot up the only thing I am struggling with is how does the added dynamic embed in the designer mode automatically duplicate when the client adds a new product though the cms collections section? Is this because the dynamic embed becomes part of the collections template?

I guess once I start building the site it may become clearer, just wanted to make sure it was all possible to achieve in webflow before I went ahead and quoted the job.

Diarmuid, thanks for the example it has given me confidence in what I can achieve. How does your client find the process of having to look for all the required fields in the shopify supplied code and copy/paste each of them back into webflow?

I have never used a Wordpress them or other website builder so I am trying to work out if this is a typical scenario for a client to do or if it is just limited to webflow until future updates are released.

@Diarmuid_Sexton

Would you be willing to share the read only link so I can take a look?

When you click on a product is that all through shopify as well?

Cheers

The dynamic embed in webflow will not automatically duplicate when they create a new product in shopify. You must create the new product in shopify, copy the product information and create a new item in the collection using the relative fields. Then it will create the new product page dynamically from that information. You can add helpful hints to dynamic fields to tell your clients where to look for the information or make a simple screencast video for all your clients to follow step by step.

www.loblolly.com was built in Webflow using Shopify “Buy It Now” buttons

4 Likes

This is the read only link - https://preview.webflow.com/preview/hailo-shop?preview=388054d362eceaedf0cc21408bf0f442

I’ve created all the products using the Webflow CMS - just the buy it now button is through shopify - so in essence, if i’ve to create a new product, I’ve to create it in Webflow and Shopify. But you can do bulk uploads in Shopify which makes it quick on that end. The gallery takes the longest as I’d to upload each image individually. Hopefully Webflow launches a CMS gallery feature soon. And a table element in the rich text editor!

If you’ve any more questions, just ask.

1 Like