Account Elements

With Smootify you can use the New Shopify Customers account functionality.

The most significant pain point of developing a headless storefront on Shopify is the inability to keep the customer authenticated as they navigate from a headless storefront to checkout. This creates a disjointed experience for customers and a hurdle for developers aiming to provide a seamless shopping experience.

With this new functionality you can so enable a seamless authentication with single sign-on for headless storefront and checkout

How to integrate it in Webflow

First of all you have to setup the new customer dashboard and generate a client id for your Headless Sale Channel and indicate it inside Smootify JS Options. Then you have just to add the Passwordless login form, explained in the section below.

User Forms

Login Form

Passwordless Login

Copy Webflow element

Subscribe

Subscribe Form

Copy Webflow element

Unsubscribe

Unsubscribe Form

Copy Webflow element

Addresses

This element will be duplicated once for each address of your customer and allows to edit and delete addresses

Addresses

Copy Webflow element

New Address

New Address

Copy Webflow element

Update User

Update User

Copy Webflow element

Conditional Visibility

You can show/hide elements only for logged-in users.

Note

⚠️ Warning: is just a CSS solution, do not use it to “hide” sensitive data.**

User is logged in

To show up an element only to logged in users, you just have to use the following custom attribute:

Name

customer-condition

Value

logged-in

User is not logged in

To show up an element only to logged in users, you just have to use the following custom attribute:

Name

customer-condition

Value

not-logged-in

User is subscribed

To show up an element only to subscribed users, you just have to use the following custom attribute:

Name

customer-condition

Value

email-subscribed

User is not subscribed

To show up an element only to not subscribed users, you just have to use the following custom attribute:

Name

customer-condition

Value

email-not-subscribed

User Elements

In the account page you can use several dynamic elements to fetch user data, it’s adviced to add all elements inside a single User is logged in condition!

Dashboard link

Is greatly adviced instead of creating customer pages, to just link to the Shopify dashboard, you can get the url directly on the Shopify dashboard, under Settings > Customer Accounts

First Name

Logged in customer first name

User First Name

Copy Webflow element

Last Name

Logged in customer last name

User Last Name

Copy Webflow element

Email

Logged in customer email

User Email

Copy Webflow element

Phone

Logged in customer phone

User Phone

Copy Webflow element

Default Address

Logged in customer default address

User Default Address

Copy Webflow element

Orders

orders

Subscriptions

If you use the official Shopify Subscriptions App, you can let your customer manage it’s own subscriptions using the new customer accounts functionality, in Webflow you have just to create a button with a specific url. The specific url can be found directly in your Shopify dashboard, under Subscriptions > Settings.

Redirect User

You can use custom javascript in order to redirect or prevent access to specific pages of your Webflow site. Smootify dispatches several JS events that allows a very cool dev extensibility.

For example, to prevent a page to be accessed from not logged in users you have just to copy and paste this script in the Webflow custom code Head section of that page.

<script>
document.addEventListener('smootify:user_auth_change', e => {
    const user = e.detail;
    if (!user) {
        // Redirect
         window.location = "/"; // Change "/" according to your own needs
    }
});
</script>