Account

Updated 21 days ago

The Account State Selector allows you to customize how the account section appears based on whether a user is logged in or logged out. This helps you create a more personalized and relevant experience for users at different stages.

You can design separate layouts for both states to guide user actions effectively.

Customer State Selection

Choose which state you want to configure:

  • Logged Out – For users who are not signed in

  • Logged In – For users who are already signed in

This lets you tailor the experience based on user status.

Logged Out State

This layout is shown to users who are not logged in.

Account Header

Enable or Disable – Use the eye icon to show or hide the header

Sign Up Button

Enable or Disable – Show or hide the sign-up button

You can customize:

  • Text Style – Font, size/weight, spacing, color, alignment, capitalization

  • Border – Color and width

  • Left Icon / Right Icon – Choose or upload icons and set their color

Sign Up Button

  • Enable or Disable – Show or hide the sign-up button

You can customize:

  • Text Style – Font, size/weight, spacing, color, alignment, capitalization

  • Border – Color and width

  • Left Icon / Right Icon – Choose or upload icons and set their color

Button Settings

Fine-tune the layout of both buttons.

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside the buttons

  • Relation – Define spacing between elements

  • Arrangement – Decide how buttons are positioned

Background and Spacing

This controls the layout of the logged-out section.

Background:

  • Color – Set the section background color

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside the section

  • Margin – Manage spacing outside the section

Border:

  • Color – Choose border color

  • Width – Adjust thickness

  • Sides – Select which sides should display the border

Logged In State

This layout is shown to users who are already logged in.

You can customize this section in a similar way to reflect a personalized experience.

Currency selector

The Currency Selector allows users to view prices in their preferred currency. It helps create a localized shopping experience, making it easier for customers to understand pricing and make purchase decisions.

Visibility

  • Enable or Disable – Use the eye icon to show or hide the selector

  • Delete – Remove the section if it’s no longer needed

Text Content

This section controls how currency information is displayed.

Country Name

This displays the selected country or region.

You can customize:

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Capitalization

Currency Sign

This shows the currency symbol (e.g., $, €, ₹).

You can customize:

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

Right Icon

You can add an icon (such as a dropdown arrow) to indicate interaction.

  • Select or Upload Icon – Choose from the library or upload your own

  • Icon Color – Customize the color to match your design 

Background and Spacing

This controls the layout of the entire currency selector.

Background:

  • Color – Set the section background color

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside the section

  • Margin – Manage spacing outside the section

Border:

  • Color – Choose border color

  • Width – Adjust thickness

  • Sides – Select which sides should display the border

Benefits:

  • Creates a personalized user experience

  • Increases user retention and engagement

  • Improves user onboarding for new visitors

  • Supports a smoother user journey across sessions

  • Gives merchants control over user flow

Related Articles

Announcement bar

1 min read

Button

2 min read

Image Block

1 min read

Image Banner

1 min read