Bagisto Visual Editor- Modern Storefront Building & Customization

Note: Make sure your composer.json includes:

Publish the visual editor assets:

Step 2: Install the Starter Theme

Install the default Visual theme:

Publish the theme assets:

The theme will now be visible under the Bagisto Visual → Themes menu in your admin panel.

Click “Customize” to launch the editor.

Step 3: Launch the Visual Editor

Once inside the visual editor, you can:

1) View your store in real time

2) Switch between devices and languages

3) Add, rearrange, and edit page sections

Step 4: Add & Edit Sections

To add a section:

1) Click “Add Section” in the sidebar

2) Choose a block (e.g., Hero, Featured Products, Newsletter)

3) Click the section to modify text, links, or images

4) Preview changes live

Step 5: Create a Custom Section

Use Artisan to generate a new section:

This will create:

• A PHP class: app/Visual/Sections/MyBanner.php

• A Blade file: resources/views/sections/my-banner.blade.php

Edit the files to define your own layout and settings.

After following these steps, the Bagisto Visual extension should be successfully installed and ready for use in your Bagisto v2.2.2 project.

You will also see the Bagisto Visual menu item in the admin sidebar, where you can access the Themes and launch the Visual Editor.

Features

1) Drag and Drop Editor: You can design pages visually and see a live preview without needing to code.

2) Standard Theme Framework: It has parts and templates that you can use again and again.

3) JSON Based Layouts: It’s simple to organize and handle different sections of a page.

4) Prebuilt & Custom Sections: You can use blocks that are already made or make your own using Artisan.

5) Merchant Friendly: You can change banners, layouts, and content without needing help from developers.

6) Developer Ready: You can build things faster with Blade/Livewire and keep the theme structure neat.

7) Multilingual Support: It works with all languages and layouts perfectly.

8) Admin Tools: You can easily manage themes, roles, and who can design.

9) Responsive Preview: You can check how it looks on desktop, tablet, and mobile devices.

Bagisto Visual Customization

When you get to the Admin Dashboard, go to Bagisto Visual →Themes→Custoimize from the menu on the left.

Let’s move on with each functionality.

Layout Header Sections

In Bagisto Theme Customizer, the Layout Header Sections are parts that you can change and design easily.

These header sections give you complete control over how your storefront looks and works at the top, all from the visual interface.

1) Announcement Bar

A section at the top that shows promotional messages, updates, or alerts for the store. You can easily change its text, style, and visibility with the visual editor.

Announcement Bar Settings

Select Announcement Bar under the Layout Header Section.

1. Announcement Text: This is the message that appears in the announcement bar.
2. Link: This is the URL that users go to when they click on the announcement.
3. Background Variant: This is the style setting for the background of the announcement bar.
4. Color Scheme: This sets the combination of text and background colors to make them stand out visually.

At last, publish the changes.

Front End

The announcement message appears clearly at the top of the store page, as shown in the image below.

2) Header

This is the main upper part of your store, usually featuring the logo, navigation menu, search bar, cart icon, and links for user accounts.

It allows you to easily drag, drop, and customize these elements without needing to write any code.

Header Blocks Settings

Select Header under the Layout Header Section.

Name/Logo

Shows your store’s name or logo that links back to the homepage.

1. Upload Logo: Choose the main logo image for your store.
2. Mobile Logo: Upload a logo that is meant for mobile viewing.
3. Logo Text: This is the text that appears if you haven’t uploaded a logo image.
4. Push to Start: This option moves the logo to the start of the header.
5. Push to End: This option moves the logo to the end of the header.
6. Alignment (Left/Center/Right): This setting lets you control where the logo is placed horizontally.

Navigation

Displays the main menu links to help users navigate your site.

1. Push to Start: Aligns the navigation menu to the left.
2. Push to End: Aligns the navigation menu to the right.

Language Icon

Allows users to switch the language icon for better understanding.

Search form

Allows users to change the Search icon and Image search icon for better understanding.

Compare

Enables users to look at several products next to each other and change the icon as well.

User menu – Welcome Guest

Shows options to log in or register, or greets users who are already logged in.

1. Icon: Shows a user icon for logging into your account.
2. Heading (Welcome Guest): This is what users see when they are not logged in.
3. Description: A short message or prompt for guest users that appears below the heading.

Cart preview – Shopping Cart

Displays a drop down view of the items that have been added to the cart.

 

1. Heading: Displays the cart title.
2. Description: Promotional text shown below the heading.

At last, publish the changes.

Front End

The Header Block will be visible as given below on the front end.

Template Section

Ready made layout blocks that help you design and personalize your store’s look.

1) Hero Banner

It’s a big banner that has words and buttons to show important stuff.

Hero Banner Setting

Select Hero Banner under the Template Section.

1. Heading: This is the main title that you see on the banner.
2. Subtext: This is the extra text that goes below the heading.
3. Button: This is a button you can click to help users (like “View collections”).
4. Add Block: You can add new things like text or buttons to the banner.
5. Color Scheme: You can change the colors of the banner separately from the main colors.
6. Background Image: You can upload or change the picture behind the banner.
7. Overlay Opacity (%): This controls how transparent the overlay on the image appears.
8. Banner Height: This sets how tall the banner looks (like medium).

At last, publish the changes.

Front End

The Hero Banner will be visible on the front end, as given below.

2) Category List

Showcases particular product categories for easy access by users.

Category List Setting

Select Category List under the Template Section.

1. Category – Men / Winter Wear: Separate category sections with pictures and links.
2. Add Block: Include additional category sections to the grid.
3. Heading: Title text for this part (like “Shop by Category”).
4. Heading Size: Changes the size of the heading text.
5. Columns (Desktop): Determines how many category columns appear on desktop.
6. Columns (Mobile): Determines how many category columns appear on mobile.

At last, publish the changes.

Front End

The Category List will be visible on the front end, as given below.

3) Featured Products

Shows the best or selected products to increase visibility and sales.

Featured Products Setting

Select Featured Products under the Template Section.

1. Add Block: Manually include specific product blocks.
2. Heading: This is the title for the section (like “Featured Products”).
3. Subheading: Extra text that goes under the heading (for example, “Check out our latest products”).
4. Number of Products to show: This sets how many products will be displayed if no blocks are added.
5. Product Type: Automatically picks the product category (like Featured) if no manual blocks are included.

At last, publish the changes.

Front End

The Featured Products will be visible as given below on the front end.

4) Newsletter Signup

Let customers join your email list to receive news and special offers.

Newsletter Signup Setting

Select Newsletter Signup under the Template Section.

1. Color Scheme: Changes the usual theme colors for this part.
2. Heading: The main title that appears in the newsletter section.
3. Description: A message that supports or introduces the brand, shown right under the heading.

At last, publish the changes.

Front End

The Newsletter Signup will be visible as given below on the front end.

Remember: You can include several extra sections using the “Add Section” option.

These sections can be Collage, Contact Form, Feature Icons, or Text with Image blocks. Feel free to adjust them to match your store’s design and objectives.

Layout Footer Sections

Ready made footer layout blocks that assist you in personalizing and arranging the bottom part of your store with important links, information, and branding.

1) Footer

The footer is the part at the bottom of your store. It shows important links, contact information, social media icons, and store policies so customers can find them easily.

Footer Setting

Select Footer under the Layout Footer Section.

1. Blocks / Add Block: This feature allows you to add more content blocks, such as text or links, into the footer.
2. Heading: Title text displayed in the footer section.
3. Description: A brief message or store summary is shown below the heading.
4. Show social links: Toggle to display or hide social media icons.

At last, publish the changes.

Front End

The Footer Section will be visible on the front end, as given below.

Available Theme Settings:

1) Colors

Change the color styles throughout your store.

Set Colors in Bagisto Visual.

Here we have explained the steps to set colors in the visual editor.

Step: On the Admin panel of Bagisto, go to Bagisto Visual →Themes→Custoimize→Settings→Colors as shown below.

With this, you can easily change color schemes and style your store to match your brand identity.

At last, publish the changes.

Front End

After changing the color under Theme Settings, your storefronts will appear on the front end, as shown below.

2) Typography

Choose the fonts, sizes, and how the text looks.

Set Typography in Bagisto Visual.

Here we have explained the steps to set typography for your store.

Step: On the Admin panel of Bagisto, go to Bagisto Visual →Themes→Custoimize→Settings→Typography as shown below.

With this, you can easily choose your preferred fonts and adjust the typography to match your store’s style and improve readability.

At last, publish the changes.

Front End

After changing the typography under Theme Settings, your storefronts will appear on the front end, as shown below.

3) Buttons

Design the shapes, borders, and effects when you hover over buttons.

Set Buttons in Bagisto Visual.

Here we have outlined the steps to customize buttons using the visual editor.

Step: On the Admin panel of Bagisto, go to Bagisto Visual →Themes→Custoimize→Settings→Buttons as shown below.

With this, you can easily adjust button width and border radius to match your store’s style and improve the user experience.

At last, publish the changes.

Front End

After adjusting the button radius and border under Theme Settings, your storefront’s buttons will appear on the front end as shown below.

4) Inputs

You can change how input fields look by adjusting things like their height, border thickness, and how rounded their corners are.

Set the Input fields in Bagisto Visual.

Here we have explained the steps to customize input fields, such as their style and spacing, using the visual editor.

Step: On the Admin panel of Bagisto, go to Bagisto Visual →Themes→Custoimize→Settings→Inputs as shown below.

With this, you can easily customize the height, border width, and border radius of input fields to align with your store’s design and enhance form usability.

At last, publish the changes.

Front End

After updating the input field height, border, and radius in Theme Settings, fields will appear like this on the storefront.

5) Boxes

In the Boxes tab, you can change the border width and radius to personalize the card designs and spacing.

Set the Boxes in Bagisto Visual.

Here we have explained steps to set up Boxes in Visual.

Step: On the Admin panel of Bagisto, go to Bagisto Visual →Themes→Custoimize→Settings→Boxes as shown below.

With this, you can easily adjust the box border width and radius to align with your store’s overall design and layout.

At last, publish the changes.

Front End

After updating box border width and radius in Theme Settings, box elements will appear like this on the storefront.

6) Social Media Links

Add or update links for platforms like Facebook, Instagram, YouTube, TikTok, X (Twitter), and Snapchat under the Social Media Links tab.

Set the Social Media Links in Bagisto Visual.

Here we have explained steps to set up social media links in Visual.

Step: On the Admin panel of Bagisto, go to Bagisto Visual →Themes→Custoimize→Settings→Social Media Links as shown below.

Using this, you can quickly add or update social media links to connect your store with popular platforms and enhance your brand’s presence.

At last, publish the changes.

Front End

After adding your social media URLs under Theme Settings, the social icons will appear on the storefront as shown below.

7) General

Enable or disable the admin bar across your site using the General tab under Theme Settings.

Enable Admin Bar in Bagisto Visual.

Here we have explained steps to enable the admin bar in Visual.

Step: On the Admin panel of Bagisto, go to Bagisto Visual →Themes→Custoimize→Settings→General as shown below.

With this, you can quickly toggle the admin bar to customize the backend view and simplify store management.

At last, publish the changes.

Front End

Once you turn on the Admin Bar in the Theme Settings, it will show up on the storefront so you can easily access the backend, as seen below.

Language Selector

It allows you to include a language switcher, making your store easier to use for people from different countries who speak various languages.

Set the Language Selector in Bagisto Visual

Here we have explained the steps to configure the Language Selector.

Step: On the Admin panel of Bagisto, go to Bagisto Visual →Themes→Custoimize→Header.

Scroll to the Language Selector option.

With this feature, users can switch between multiple languages, making it easy to browse your store in their preferred language.

At last, publish the changes.

Front End

When you choose a different language in the Theme Settings, your store will change to match.

Support

So, that was everything you needed to get started with the Bagisto Visual Theme Editor.

If you have any queries or need further assistance, feel free to reach out to us at [email protected].

You can also raise a ticket through our HelpDesk System for any support related to Bagisto Visual.

Looking to enhance or customize your Bagisto storefront even further?

Explore our Laravel Development Services and wide range of Bagisto Extensions built to elevate your eCommerce experience.