Webflow to Shopify Overview

You are here:

Step 1

CREATE A SHOPIFY ACCOUNT

Create a Shopify account form here

Step 2

DOWNLOAD THE APP

Download the Udesly App from this page.

Step 3

GENERATE THE LICENSE CODE

Go to your account page to generate the license code you need to activate the application.

Step 4

INSTALL ON MAC OS

After you double click on the .dmg file you need to drag&drop the Udesly App in your Application folder

INSTALL ON WINDOWS

Double click on the .exe file to launch the App.

Step 5

CLONE THE STARTER THEME IN WEBFLOW

Clone the Shopify Starter Theme in your Webflow account from this page.

Step 6

CUSTOMIZE THE THEME

The Shopify Starter theme is the correct way to start your project. You can customize each single part of your theme add your own content, but you can’t delete the pre-styled content of the theme.

Step 7

EXPORT THE TEMPLATE

Once your design is finished, you can export your template.

Step 8

ACTIVATE THE APP

Insert your email and the license code you’ve generated from your account page.

Step 9

CHOOSE SHOPIFY

Choose the Shopify section to upload your template.

Step 10

UPLOAD THE TEMPLATE

Upload the exported Webflow template.

Step 11

INSERT YOUR TEMPLATE DATA

Insert your template name, the author name and a template description.

Step 12

SET THE PAGE OF YOUR TEMPLATE

This is the most important step. Here you need to set up all the pages of your Webflow template to make them ready to use in Shopify.

Here is the list of the page types you can assign to each page of your Webflow project:

You will find a default page setting. If you don’t need to add other pages from the Webflow project, everything is already configured and ready to work with Shopify. Please note that the following pages are mandatory pages to create a complete and well working Shopify Theme.

Product page:

It’s page for an individual product. It includes content that visitors use to select a variant and add it to the cart.

Search Results:
The search results page is used to display the search results of a store.

Collections list:
The collections list page is used to render a page where all of the collections in the shop are listed. This page can be accessed by going to /collections of the shop.

Blog:
The blog page is used to render the blog page. The primary purpose of this page is to list the articles within a blog.

Login:
The login page is used by visitors to log in to their customer account page.

Cart:
The cart page provides an overview of the items in the visitor’s cart. The overview is typically shown in an HTML table, with each line item displayed in a row.

Article:
Is a page for an individual blog article. It contains the full contents of an article as well an optional comments section for visitors.

Account:
The account page is used to display a summary of the visitor’s customer account.

Index:
The index page is the home page of the store. The template is loaded when you go to the root (“/”) of the store.

Customer activate account:
The customers/activate account page is used to display the form for activating a customer account.

Order:
The order page displays the details of a visitor’s past order.

Default Page:
The default page template is used to render your shop’s pages.

Register:
The customers/register page includes a form for visitors to make a Customer account.

Addresses:
The addresses page is used by visitors to manage their addresses used in the checkout.

Collection:
The collection page is used to render the collection page. The primary purpose of this page is to list the products within a collection, often presented as a grid of images with product titles and prices.

404:
The 404 template renders a page where visitors are taken to if they enter an invalid URL for the shop.

Reset Password:
The reset password page includes a form for visitors to enter a new password for their customer account.

Password Page: 
The password page is used to render your online store’s password page. This page appears only when you add password protection to your online store. To see what this looks like, you can visit our password-protected demo store.

Gift Card:
This page renders the gift card issued to a customer upon purchase. The URL to the gift card page is found in email notifications sent to the customer when a gift card is purchased. Within the gift card page, you can use the gift card object’s attributes to display a gift card’s details. A default gift card page is created automatically when the Gift Card feature is activated in a store.

Step 13

OPTIONAL SETTINGS

In this step you can choose if you want to manage your website SEO from Webflow or from the Shopify admin panel directly. We suggest not to check the “Remove Webflow jQuery” to make it work correctly.

Step 14

STRART THE CONVERSION

You’re finally ready to convert your template. Just click on the “convert” button and the conversion will start.

Step 15

DOWNLOAD THE THEME

Once the conversion is ended you can download the converted template (zip file) on your pc.

Step 16

UPLOAD THE THEME IN SHOPIFY

Now you can upload the converted theme (.zip file) from your Shopify admin panel. Go to Online store -> Themes and then click on the “Upload Theme” button.

Step 17

SETTING THE STORE

Follow this full doc to learn everything about a Shopify store (products, collection, payments, shipping and other settings).

Related documentation: