Legacy Account Elements

With Smootify you can use Shopify accounts functionality and let your customer see placed orders directly from your site.

Shopify has also a new customer account functionality, that is a very powerfull passwordless account dashboard hosted directly by Shopify and has built-in every account related feature with even features that cannot be used in Headless store yet. You can use the new customer accounts even in your Webflow site (is just a link that you have to paste wherever you like inside Webflow). More info on this doc

Account pages

If you wish instead to let your customers log in on your site, we suggest you to create a new folder in your project with the following pages:

• My Account
• Login
• Orders
• Order
• Register
• Password Recovery

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 not logged in users, you just have to use the following custom attribute:

Name

customer-condition

Value

not-logged-in

User Elements

In your Webflow project 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!

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

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.

Orders List and Order Page

Orders list and order page are two functionalities that you can add to your project and are explained on the next page

User Forms

Below you can find all the forms related to account functionalities that you can add on your site

Login Form

Login Form

Copy Webflow element

Register Form

Register Form

Copy Webflow element

Logout

Logout Form

Copy Webflow element

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.

Consider that all pages inside the Account folder by default are already accessible only from logged in users.

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