Step 4 - Design

Design Configuration

PC Layout Configuration:

Layout Options:

• Sidebar: A fixed sidebar displayed on the right side of the screen.
• Bottombar: The summary view appears at the bottom of the screen.
• Sticky Sidebar: The sidebar appears fixed on the right side and becomes visible when scrolling.
• Static Sidebar: The sidebar remains visible at all times.

Product List Configuration:

• List Layout: Choose between grid or list view for product display.

• Large Screens: Define the number of columns for large screens.
• Medium Screens: Set the number of columns for medium-sized screens.
• Small Screens: Specify the number of columns for small screens.

Additional Features:

• Search Bar: Enable or disable the search bar.
• Font Size: Adjust the font size for better readability.
• Sort: Enable sorting options for product listings.

Product List Item Customization:

• Equal Height Cards: Ensure uniform card heights for a neater appearance.

• Images: Configure image display options, including carousels and equal height images.

• Product Name: Customize font size and color for product names.

• Price: Define font size, color, and visibility options for product prices.

• Compare at Price: Set display options and design settings for compared prices.

• Buttons: Customize button appearance, including color, size, and background.

Summary Box Master Product:

• Show Master Product: Toggle visibility of the master product section.

• Product Title: Adjust font size and color for the product title.

• Product Price: Customize font size, color, and visibility for product prices.

• Discount: Configure display options and design settings for discounts.

• Message: Set font size and color for messages.

• Progress Bar: Choose whether to display the progress bar and customize its appearance.

• Box Items Header Title/Subtitle: Define font size and color for header titles and subtitles.

• Total: Customize font size, colors, and design settings for the total section.

• Grouped Steps: Control visibility and design settings for grouped steps.

• Action Buttons: Specify the placement and design of action buttons.

Mobile Layout Configuration:

Layout Options:

• Style 1, Style 2, Style 3: Choose from different mobile style options.

• Mobile Product List: Specify the number of columns for product listings on mobile devices.