Docs

Installation

Shopyflow installation takes place in 2 simple steps.

  1. Configuring Shopify
  2. Connecting to Webflow

Configure Shopify

Shopyflow requires a Storefront API access token to securely connect your Shopify Store to your Webflow site. To generate your Store API access token;

  1. Head to your Shopify Admin > Settings > Apps and Sales Channels section and click Develop apps link..

What’s a Rich Text element? What’s a Rich Text What’s a Rich Text element? What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

What’s a Rich Text element? What’s a Rich What’s a Rich Text element? What’s a Rich Text ejklkjököbömnlement?What’s a Rich Text element? What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Shopyflow requires a Storefront API access token to securely connect your Shopify Store to your Webflow site. To generate your Store API access token;

1. Head to your Shopify Admin > Settings > Apps and Sales Channels section and click Develop apps link.

What’s a Rich Text element? What’s a Rich What’s a Rich Text element? What’s a  element?What’s a Rich Text element? What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Shopyflow Customer Account Pages Guide

Building customer account pages with Shopyflow is straightforward. You can build all essential customer account pages like login, account, order history, order detail and more.

Setup

NOTE: If you are an early Shopyflow user (pre January 2024), please make sure you complete the following two steps before building your customer account pages. If you have joined us after January 2024, you can skip this setup.
  • Make sure you have enabled all the scopes by following this guide.

  • Upgrade your Shopyflow version following this guide.

Login Page

Go ahead and create a new page in Webflow. Use the login page slug you have picked earlier. Navigate to your newly created login page and add the Login Form to the page. You can get this component from the Shopyflow Webflow App or from Shopyflow Dahboard.

Shopyflow Login Form comes with a Password Reset Form by default. The Password Reset Form will be hidden on the published site on page load and will be displayed when user clicks on the "Forgot your password?" link.

Manage Subscriptions Link

If you are not selling subscription products please remove the Manage Subsctiptions Link from the form and skip this step. If you do, you can update the Manage Subsctiptions Link with the your Shopify subscription app's login link. To get this link follow these steps:

  • Navigate to your Shopify Theme's login page. By default it's located at:

    https://[SHOPIFY STORE DOMAIN]/account/login

  • Right click on the Manage subscriptions link and copy the link address.

  • Add this link to the Manage Subscriptions link in the Shopyflow Login Form in Webflow.

Sign Up Page

Create a new page in Webflow. Navigate to your newly created sign up page and add the pre-built Shopyflow Sign Up Form to the page. You can get this component from the Shopyflow Webflow App or from Shopyflow Dahboard.

After creating the form, go back to your login page and connect the Create Account link to your newly created sign up page.

After creating the sign up form, don't forget to go back to your Login Page and connect the Create Account Link to your Sign Up Page.

Account Activation Page

This page is required to activate user accounts that receive account activation email. Go ahead and create a new page in Webflow. Use the account activation page slug you have picked here. Navigate to your newly created page and add the Account Activation Form to the page. You can get this component from the Shopyflow Webflow App or from Shopyflow Dahboard.

Account Page

Account page lets your users view past orders and manage their addresses.
Go ahead and create a new page in Webflow. Navigate to your newly created account page to add the following sections.

Order History

You can get this component from the Shopyflow Webflow App or from Shopyflow Dahboard.

You also need to create an Order Detail Page to display the order details when user clicks on an order number. It's explained later in the Order Detail Page section.

Address List Module

Address List Module consists of 2 components: Default Address and Address List (My addresses). Default Address shows the default address of your customer. Address List shows all saved addresses of a logged-in customer with a delete button attached to each address. You can use them separately anywhere on the page. You can get this component from the Shopyflow Webflow App or from Shopyflow Dahboard.

IMPORTANT: "You haven't added any addresses yet" text below these elements will be shown or hidden dynamically. Please do not remove it.

New Address Form

With the New Address Form your customers can add a new address to use when completing an order. The new address will be added to the Address List.  You can get this component from the Shopyflow Webflow App or from Shopyflow Dahboard.

TIP: You can create a Webflow interaction to hide & show this form with a button for a better UX.

Update Address Form

With the Update Address Form your users can update their previously added addresses. The address to be update is selected with the selcet box that comes with this form. You can get this component from the Shopyflow Webflow App or from Shopyflow Dahboard.

TIP: You can create a Webflow interaction to hide & show this form with a button for a better UX.

Order Detail Page

Order detail page lets your users view the details of an order after they click on one in the order histoy. Go ahead and create a new page in Webflow. Navigate to your newly created order detail page and add the Order Detail component to the page. You can get this component from the Shopyflow Webflow App or from Shopyflow Dahboard.

After you create the Order Detail Page, head back to the account page and link the order number in the Order History to this page.

Password Change Page

Password change page is the page where Shopify will redirect your users after they request a password reset email. Create a new page in Webflow. Navigate to your newly created password reset page page and add the Password Change Form. You can get this component from the Shopyflow Webflow App or from Shopyflow Dahboard.

Logout Button

You can place this button anywhere on your site (e.g. navbar) to let your users log out from your store. You can get this component from the Shopyflow Webflow App or from Shopyflow Dahboard. Logout button will be visible only after a user logs in to your store.