How To Utilize Visual Editor For Shopify Filters With Boost

Visual Editor in Boost is a helpful feature that empowers you to effortlessly design captivating Shopify filter tree layouts perfectly aligned with your store's branding and appearance.

However, we've noticed that many Boost app users are not fully leveraging this feature's potential. That's why we've created this quick guide to showcase the highlight setups in Visual Editor, including the latest updates from Boost team.

Excited yet? Get ready to unlock the full potential of Visual Editor and take your online store to new heights of filter functionality and shopping experience.

What is Boost’s Visual Editor?

The Visual Editor in Boost AI Search & Discovery is a tool to help you with the front-end customization of your filter trees. In simple terms, the Visual Editor allows you to select your desired filter tree layout and preview how it will look on your chosen theme.

No more complicated customization processes - this tool can give you a visually appealing filter implementation experience with easier click or drag-and-drop action.

Is Boost’s Visual Editor the same as Shopify Theme Editor?

Although having the same name, “Theme,” in our app settings, Boost’s Visual Editor feature is different from Shopify Theme Editor. In fact, these two are two separate tools with different functions.

Shopify’s Theme Editor is a tool that allows you to customize and modify the appearance and layout of your whole Shopify store. With Shopify’s Theme Editor, you can easily make changes to your theme's colors, fonts, images, and more without the need for coding knowledge.

Boost's Visual Editor, on the other hand, empowers you to customize the appearance of your filter trees on your collection or search result page. While this tool helps you achieve the ideal filter tree layouts that align with your Shopify theme's look and feel, it does not provide the broader functionality of completely changing your theme as Shopify's Theme Editor does.

How to utilize Boost’s Visual Editor feature for your Shopify filter trees?

1. Check if your Shopify theme is supported

After installing Boost AI Search & Discovery, it’s recommended to check if your filters are displayed correctly on your store.

You can run a quick theme setup to install filter trees on your supported theme (check out the Supported themes here).

It is strongly encouraged to carry out an Auto Theme setup for your store. Here's how you can do it:

Click on Set up new theme, then from the dropdown list, choose a theme you want to set up filter trees:

Make sure you keep all the boxes checked for full installation:

Note: if you wish to install filter and search widgets only, you can uncheck the Recommendation widget for a quicker setup process.

If you choose to install the Recommendation widget, in the next step, choose the widgets you’d like to run setup with:

Click Run setup to start the auto setup process.

🔥 Please wait until the process is complete. We recommend visiting the theme editor of your chosen theme to review the layout once again.

2. Product items: customization best practices

The first aspect you want to ensure is functioning properly and aligning with your store's overall look and feel is the presentation of your Product items in the filter tree.

First, click Edit Visual Design to start using Visual Editor. It will show you the currently supported templates with a live Preview on the next screen, but you can skip this.

Next, you’ll see Product items section right on the left column.

👉 What Product items should you pay attention to?

It depends on your product display strategy; however, we suggest checking out and adding the essential elements such as:

• Product labels (i.e., Sale off, Out of Stock, etc.)
• Buttons (i.e., Add to Cart, Quick View, Buy Now)
• Product swatches
• Pagination

Product Labels

By default, the Boost app displays two labels on your product items: Sale and Sold Out labels.

To change these labels, simply click on each label. You can freely change any label style, including its alignment, shape (rectangle, rounded rectangle, circle), label display (by text or image), label text (with number, percentage, etc.), and color.

Also, you can choose to display these labels on the top, middle, or bottom of your product item. You can add any labels defined in your custom tag labels.

Please note that the Custom by tag label is defined in your product details. Check out this guide to set up your product tags and make them display on your product items.

Buttons on Product items

Usually, when hovering over a product item, you’ll see the eye icon for the Quick View option or an Add to Cart (Buy now) option.

These buttons are the desired actions you want to encourage your shoppers to do right after showing your products on their screens.

Here, Boost app grants you the option to add 2 buttons to your product items. You also have a wide range of layout options to style and customize your buttons the way you like.

Product Swatches

The next product item element you should configure in this section is the Product Swatches.

Swatches help provide your shoppers with the convenience of selecting various product options, such as color or size, directly on the search results page.

You can either display your product swatches by Shopify default values or upload your own images for swatch types. Check out this guide on how to display swatch settings on your Shopify store.

Here, in Visual Editor, you just need to add your available Swatch options and customize the way it looks:

Pro tip: You can easily rearrange Swatch options by dragging and dropping any Swatch to your desired position.

Ajax Cart

Ajax cart is a convenient feature that enables your shoppers to add products to their cart seamlessly without requiring any page reloads.

Toggle the button of this feature to enable it on your store. 

Note that when you change any attribute on the right sidebar, the preview pop-up will display the corresponding changes.

Check out our easy How to customize Ajax cart guide to make use of this feature.

That’s all!

The above has just introduced and wrapped up the best practices for using the latest version of Visual Editor in Boost.