Account Pages

This video will guide you through creating account pages and functionality within your Webflow store, seamlessly integrating user data from your Shopify store. This empowers users to log in, view their orders, track order status, update email addresses, and update addresses – all within your Webflow website, eliminating the need to leave.

There are two different approaches to achieve this functionality. We'll explore both methods in detail.

Getting Started

When you head into your account settings, you'll be presented with a decision: utilize Shopify's "Classic Way" of creating user accounts or leverage Shopify's "New Customer Accounts."

New Customer Accounts (Recommended)

This method offers several advantages:

• Passwordless Login: Users receive a PIN via email for login, eliminating password management.
• Enhanced Data Binding: More user data can be integrated and displayed in user dashboards.
• Synchronized User Authentication: Ensures seamless authentication between your Webflow page and Shopify checkout.

While this is the recommended approach, here are some considerations:

• Users may not be comfortable with passwordless logins.
• Shopify may eventually deprecate the classic login structure.

Classic Login Structure (Alternative)

If passwordless logins aren't ideal for your audience, this classic structure might be a better fit. However, you'll need to create separate register and password recovery routes.

Setting Up the New Customer Accounts

1. Navigate to New Customer Accounts within the Smootify documentation.
2. Set Up the New Customer Dashboard: This involves:
   • Setting up the Smootify JavaScript options within your Webflow store's custom code.
   • Copying the Shopify customer dashboard URL and pasting it into the Smootify app.
3. Configure Your Headless Sales Channel:
   • Ensure the "Customer API Account" is set to public.
   • Grab the Client ID from Shopify.
   • Paste the Client ID into your Webflow store's custom code.

Building the Pages

1. Create an "Account" Section in Webflow: This will house your login and account pages.
2. Utilize Smootify App Components: These pre-built components streamline building login and account pages.
3. Customize Redirects: You can customize where users are redirected after logging in (e.g., My Account page).
4. Add Custom Code: Implement additional custom code snippets based on Smootify documentation.

Classic Login Structure (Optional)

If you choose this option, follow these steps:

1. Disable New Customer Accounts in Shopify.
2. Remove Unnecessary Smootify Scripts.
3. Create Separate Register and Password Recovery Pages using Smootify app components.

‍