Frontend Layout

Admin Dashboard > Configuration > Design & Layout > Frontend Layout

The Frontend Layout section in the Admin Dashboard allows administrators to customize the structure and layout of the storefront. This feature ensures flexibility in organizing content and visual elements to align with the business’s branding and operational goals.

Purpose and Usage

The Frontend Layout settings enable administrators to:

• Configure the layout and display of key sections such as the header, footer, product pages, and category pages.
• Optimize the storefront for usability and aesthetic appeal.
• Control how information and products are presented to customers.

By customizing the layout, businesses can create a user-friendly and engaging online store.

Sub-Sections and Features

1. Home Slider

Overview

The Home Slider section controls the display and text overlay for the home page banner slider.

Options:

• Home Page Banner Slider Text:
  • Description: Configures the text displayed on the banner slider.
  • Use Case: Use promotional or branding messages to engage customers.
  • Effect: Highlights key offers or brand messages on the homepage.

2. General

Overview

The General section manages overarching layout settings for the storefront.

Options:

• Header:

  • Redirect Store Link to Custom Domain: Redirects the store’s primary URL to a specified custom domain.
  • Boxed / Wide: Sets the overall layout style to boxed or full-width.

• Product:

  • Products Buttons Style: Configures the design of buttons displayed on product listings.
  • Tabs Hover and Active Colors: Defines background and text colors for hover and active states on product tabs.

3. Header

Overview

The Header section customizes the top part of the storefront, including the logo, contact information, and sticky menu options.

Options:

• Store Logo: Upload the logo displayed in the header.
• Logo Alt: Define alternative text for the logo for accessibility and SEO.
• Contact No and Email: Display contact details prominently in the header.
• Store Hours of Operation: Add business hours for easy customer reference.
• Show Compare Dropdown: Enable or disable the compare products dropdown.
• Show Sticky Menu: Activate a sticky menu for persistent navigation.

4. Footer

Overview

The Footer section controls the layout and content of the site’s footer.

Options:

• Show Footer: Toggle the visibility of the footer.

• Footer Sections:

  • Section 2: Configure visibility for "About Us," "FAQ," and "Locations".
  • Section 3: Manage "My Account," "My Orders," and "Wishlist" visibility.
  • Section 4: Enable "Contact Us," "Terms," and "Policy" links.

• Social Media Links:

  • Enabled: Activate social media links.
  • Configure Links: Specify social media platforms and their URLs.

5. Category

Overview

The Category section defines the layout for category pages.

Options:

• Category Layout: Choose the layout structure for category pages.

6. Category Products

Overview

This section manages the grid layout and display settings for products within categories.

Options:

• Columns of Products Grid Layout:
  • Configure the number of columns for various screen sizes (e.g., above 1200px, 768px - 991px).
• Product Image:
  • Adjust image aspect ratio, width, height, and enable alternative images.
• Product Elements:
  • Enable or disable SKU, price, rating, wishlist, compare, add-to-cart, and quick view.

7. Media Text

Overview

The Media Text section enables administrators to add descriptive text to product pages.

Options:

• Enable Product Page Media Text: Toggle the visibility of media text.
• Media Text: Add custom text content for product pages.

8. Product Info

Overview

The Product Info section defines the layout and display of product details on product pages.

Options:

• Columns of Products Grid Layout:
  • Configure the number of columns for product grids.
• Elevate Zoom:
  • Enable advanced zoom functionality with customizable zoom settings (e.g., zoom type, lens size, border color).
• Product Elements:
  • Enable or disable elements such as SKU, rating, wishlist, compare, and review tab.

9. Home Page Sections

Overview

This section customizes the display of product images and elements on the home page.

Options:

• Product Image:
  • Configure aspect ratio, width, height, and enable micro images.
• Product Elements:
  • Toggle visibility for SKU, price, rating, wishlist, compare, add-to-cart, and quick view.

10. Product Related

Overview

The Product Related section manages the display of related products on product pages.

Options:

• Enable: Activate related products.
• Max Products: Set the maximum number of related products displayed.
• Product Elements:
  • Enable or disable SKU, price, rating, wishlist, and quick view.

11. Product Upsell

Overview

The Product Upsell section controls the display of upsell products on product pages.

Options:

• Enable: Activate upsell products.
• Max Products: Define the maximum number of upsell products.
• Product Elements:
  • Enable or disable SKU, price, rating, wishlist, and quick view.

12. Product Labels

Overview

The Product Labels section configures the visibility of labels for new and sale products.

Options:

• Display New Label: Show or hide the "New" label.
• Display Sale Label: Show or hide the "Sale" label.

13. Mega Menu Before Links and After Links

Overview

These sections configure additional links displayed in the mega menu before and after the main links.

Options:

• Enable About Us Link: Show the "About Us" link.
• Enable Contact Us Link: Show the "Contact Us" link.
• Enable Location Link: Show the "Location" link.