Site Members: Adding and Customizing Your Login Bar

Customize the login bar that members use to sign in to your members area, along with the menu it displays. You can decide which tabs and links appear on the menu, adjust the layout, and design the element to ensure it matches the overall style of your site.

Adding the login bar

When you add a members area to your site, a login bar is automatically included in the header section. This ensures it appears on all pages, giving members quick and convenient access to their account. If you need to re-add the login bar or want to add additional login bars, you can do so effortlessly.

Wix Editor

1. Go to your editor.

2. Click Add Elements

   

   on the left side of the editor.

3. Click Community.

4. Click Login Bar.

5. Click or drag and drop the login bar to add it to your page.

Studio Editor

1. Go to your editor.

2. Click Add Elements

   

   on the left side of the editor.

3. Click Community.

4. Click Login Bar.

5. Click or drag and drop the login bar to add it to your page.

Wix Harmony Editor

1. Go to your editor.

2. Click + Add at the top left of the editor.

3. Select the Members Area category.

4. Drag a design you like onto your page.

Setting up the login bar

Select the information you want the login bar to display, customize the text, and add a friendly greeting, such as "Hey there, Lisa!" This personal touch can help create a welcoming experience for your members.

Wix Editor

1. Go to your editor.

2. Click the login bar element on your page.

3. Click Set Up Login Bar.

1. Select the relevant login bar state: Logged-in or Logged-out:

   • Customize the Logged-in version of your login bar:

     • Appearance: Choose an avatar, full, or text style. If using an avatar, select an image, initials, or custom style and adjust its size. For text and full styles, add custom button text. Choose an arrow style and size. Optionally show a greeting before the member's name and display a notification bell icon.

     • Layout: Select the login bar alignment and element direction.

     • Dropdown menu: Select the items' alignment, change the logout button text and enable the Buy Again section.

       • Buy Again: When enabled, you can select the number of items displayed, what happens when the button is clicked, and customize the Add to cart and Buy again button text.

   • Customize the Logged-out version of your login bar:

     • Choose an avatar, full, or text style. If using an avatar, select an image, initials, or custom style and adjust its size. For text and full styles, add custom button text.

Studio Editor

1. Go to your editor.

2. Click the login bar element on your page.

3. Click Set Up Login Bar.

1. Select the relevant login bar state: Logged-in or Logged-out:

   • Customize the Logged-in version of your login bar:

     • Appearance: Choose an avatar, full, or text style. If using an avatar, select an image, initials, or custom style and adjust its size. For text and full styles, add custom button text. Choose an arrow style and size. Optionally show a greeting before the member's name and display a notification bell icon.

     • Layout: Select the login bar alignment and element direction.

     • Dropdown menu: Select the items' alignment, change the logout button text and enable the Buy Again section.

       • Buy Again: When enabled, you can select the number of items displayed, what happens when the button is clicked, and customize the Add to cart and Buy again button text.

   • Customize the Logged-out version of your login bar:

     • Choose an avatar, full, or text style. If using an avatar, select an image, initials, or custom style and adjust its size. For text and full styles, add custom button text.

Wix Harmony Editor

1. Go to your editor.

2. Click the login bar element on your page.

3. Click the Display elements icon

   

   on the action bar and choose what to show:

   • Avatar: Show or hide the member's profile picture, initials, or custom image.

   • Display text: Show or hide extra text next to the avatar. Select Custom text, Member's name, or both:

     • Custom text only: shows your own text instead of the member's name.

     • Member's name only: shows the member's name.

     • Both: shows your custom text as a greeting before the member's name (e.g. "Hello" + name).

   • Arrow icon: Show or hide the dropdown arrow next to the login bar.

4. Click Edit Text to customize your custom text and the text members click to log out (e.g. "Sign out").

5. To customize what visitors who aren't logged in see:

   1. Click the state drop-down above the login bar (showing Regular Mode) and select Logged Out View.

   2. Click the Display elements icon and choose to show or hide the Avatar and Log in text.

Managing the login bar menu

When logged-in members click the login bar, a drop-down menu opens. You can choose which member tabs and pages you want to display in this menu.

Wix Editor

1. Go to your editor.

2. Click the login bar element on your page.

3. Click Manage Menu.

1. Choose what you want to do next:

   • Add more menu items:

     1. Click + Add Menu Item at the bottom.

     2. Click Link.

     3. Choose where you want to link to (e.g. site page, external web address) and set it up using the available options.

     4. Click Done.

   • Rename a menu item: Double-click the menu item to enter a new name for it.

   • Remove a menu item: Hover over the relevant item, click the More Actions icon

     

     and select Remove / Hide from menu.

   • Reorder the menu: Hover over the relevant item, hold the Reorder icon

     

     next to it and drag it to the relevant position.

Studio Editor

1. Go to your editor.

2. Click the login bar element on your page.

3. Click Manage Menu.

1. Choose what to do next:

   • Add more menu items:

     1. Click + Add Item at the bottom.

     2. Click Link or anchor.

     3. Choose where you want to link to (e.g. site page, external web address) and set it up using the available options.

     4. Click Done.

   • Rename a menu item: Double-click the menu item to enter a new name for it.

   • Remove a menu item: Hover over the relevant item, click the More Actions icon

     

     and select Remove from menu.

   • Reorder the menu: Hover over the relevant item, hold the Reorder icon

     

     next to it and drag it to the relevant position.

Wix Harmony Editor

1. Go to your editor.

2. Click the login bar element on your page.

3. Click Manage Menu.

4. Choose what you want to do next:

   • Add more menu items:

     1. Click + Add Item at the bottom.

     2. Click Link or anchor.

     3. Choose where you want to link to (e.g. site page, external web address) and set it up using the available options.

     4. Click Done.

   • Rename a menu item: Double-click the menu item to enter a new name for it.

   • Remove a menu item: Hover over the relevant item, click the More Actions icon

     

     and select Remove from menu.

   • Reorder the menu: Drag and drop the relevant item to change its position.

Designing the login bar

Customize the design of your login bar to match your site's theme. You can change the colors, fonts, borders, and more to create a cohesive look.

Wix Editor

1. Go to your editor.

2. Click the login bar element on your page.

3. Click the Design icon

   

   .

1. Click the Regular tab and customize the design using the following options:

   • Fill Color & Opacity: Change the colors and opacity of the icons, background and notifications on the login bar.

   • Borders: Change the color, opacity and width of the login bar. and menu borders.

   • Corners: Change the corner radius of the login bar and menu. The bigger the radius, the rounder the corners.

   • Shadow: Add and design a shadow for your login bar and menu.

   • Text: Change the colors and fonts of the text on the login bar and menu.

2. Click the Hover and Selected tabs to update the text color when members hover over or select it.

Studio Editor

1. Go to your editor.

2. Click the login bar element on your page.

3. Click the Design icon

   

   .

1. Click the Regular tab and customize the design using the following options:

   • Fill Color & Opacity: Change the colors and opacity of the icons, background and notifications on the login bar.

   • Borders: Change the color, opacity and width of the login bar. and menu borders.

   • Corners: Change the corner radius of the login bar and menu. The bigger the radius, the rounder the corners.

   • Shadow: Add and design a shadow for your login bar and menu.

   • Text: Change the colors and fonts of the text on the login bar and menu.

2. Click the Hover and Selected tabs to update the text color when members hover over or select it.

Wix Harmony Editor

1. Go to your editor.

2. Click the login bar element on your page.

3. Click the All design options icon

   

   on the action bar.

4. Choose the part you want to design: Login bar, Menu dropdown or Avatar.

5. Design the login bar:

   • Fill colors

     

     : Change the color of your login bar, menu or avatar, choosing one of your brand colors or a custom color.

   • Text

     

     : Change the colors and fonts of the text on the login bar and menu.

   • Borders

     

     : Define the borders of your login bar so it stands out, choosing a color, width and style. Click the Edit individual borders icon

     

     to design each side of the border.

   • Corners

     

     : Make the corners of your login bar more square or round by dragging the slider under Radius. Click the Edit individual corners icon

     

     to design each corner separately.

   • Shadow

     

     : Apply inner and outer shadow to give the login bar an interesting 3D effect, setting the position, blurriness, color and more.

   • Layout

     

     : Set the alignment and direction, as well as the avatar size.

Note:

The available options depend on the part you chose to design in step 4.