Start by going to your layout on Swipecart.
You’ll find “Side Menu Settings” in the left menu of the “Theme Settings”.
Click on it to take you to the default side menu settings screen.
You have a drop-down box in the top center. The list contains the display style formats for the side menu. You have these options-
Popup menu
Shrink & rotate menu
Shrink & slide menu
Easy side menu
Reside side menu
Hidden side menu (new upload box)
The preview icon is displayed on the side of each option. Select any display style for your side menu. It is instantly updated on the center screen.
How do you do advanced side menu settings on Swipecart?
Now, let’s go to the right section of the Side Menu Settings screen.
Here, at the top corner find a "cog icon" next to Side Menu Setting.
Show Icon toggle switch- If you disable it, the icons in the side menu list get removed.
Login- Click on the edit button. Here, you can change the title and select an icon from the icon library. Enable the “Upload Custom Icons” if you want to upload a customized icon. Click on the upload icon to upload a login icon from your system or server.
Logout- You can edit the logout button the same as the login.
Menu background toggle switch- Enabling this allows you to upload a background image of your choice. Click on the upload icon to upload the image from your file.
💡 Note: Follow the specifications mentioned while uploading image files.
How to add a new menu item to the side menu on Swipecart?
Click on “+ Add A Menu Item”.
In the popup that opens, enter the name of the menu item in the "Page Name" input box. Enter the font weight of the title.
Next, select the icon from the icon library.
Enable the “Upload Custom Icons” toggle switch to upload custom icons from your file. Click on the upload icon to upload an icon (png format).
Next, link the menu item to any page on your app. There are four options.
User-Defined - User-defined pages are additional tabs or pages you have created on the home page. You can link any of these pages to the menu item.
System Defined - System-defined pages are provided by default. These include pages such as Favorites, Collections, My Cart, My Profile, Settings, and so on.
Web URL - This is to link the menu item to any external website link. By default, the web page opens as an app web page. Check the “Open outside the app” option if you want the website to open outside the app on the default browser the user has on their device.
None - This does not redirect the menu item to any link.
Click on “Submit” when you are done adding the new menu item.
How to edit the side menu items on Swipecart?
Below the “+ Add A Menu Item”, you have all the side menu items listed.
Hover over the menu item you want to edit. Click on the three-drop menu icon (Kebab icon). You have three options.
Add Submenu item- Click on it if you want to add a sub-menu. In the popup, enter the new sub-menu item title and link it to a user-defined page, system-defined page, or web URL. Click on “Submit” when you are done.
Edit- This option is to edit the side menu item. In the popup that opens you have options to edit the parameters for the side menu.
Delete- If you do not want any menu item on the side menu, click on the “Delete” option.
How do you change the menu item order on the side menu list?
Below the “+ Add A Menu Item”, you have all the side menu items listed. Hover over the menu item you want to change position.
Spot the six-drop menu icon just before the menu name.
Click on it and keeping the mouse pressed, drag it up or down to the desired position.
Repeat this process to change the listing order of any side menu item.
And click on the "save" button to save the changes made.
💡 Note: Any changes you make will be updated live in the center screen section.
You can "Preview" the side menu using the preview app.
That’s it. Isn’t it simple? Swipecart allows you to edit and customize the side menu settings as per your choice. Create an app for your online store on Swipecart.
Get started right away.
Hurray! 🥳
What's Next? 🤔
Explore the next article on Bottom bar settings