Home News Botiga & Botiga Pro Updates: New Product Swatches, Styling Choices, Autocomplete Checkout...

Botiga & Botiga Pro Updates: New Product Swatches, Styling Choices, Autocomplete Checkout Fields, and many others.


Are you a person of Botiga or Botiga Pro? Now we have some excellent news for you! 

The most recent releases embrace many new options that can show you how to additional enhance the design and performance of your Botiga retailer.

Botiga 2.0.0+ comes with a brand new Efficiency panel, additional styling choices, and an improved Product Search web page, whereas Botiga Pro 1.1.5+ introduces customized amount step controls, Google Autocomplete integration for the checkout web page, new product swatch sorts, and extra.

Overview: Botiga 2.0.0+ and Botiga Pro 1.1.5+

To get began, right here’s a abstract of a very powerful new options:

New Options Botiga 2.0.0+ Botiga Pro 1.1.5+
Widespread Merchandise part on the Product Search web page
Gradient and multi-color product swatch sorts
New styling choices for product swatches
Styling choices for the product catalog header
Further styling choices for the header and footer builders
Footer dropdown menu
Google Autocomplete integration
WooCommerce amount step management
Adjustments within the Theme Settings web page
Skill so as to add new product fields utilizing the ACF plugin
Skill so as to add movies to product variations
Styling choices for the store filter sidebar and dimension charts
Styling choices for the shop discover
Skill to point out the variation identify beneath the product title
Thrilling new starter websites
“Free transport” progress bar
Add to cart notifications

Now, let’s see the options one after the other!

When your web site guests seek for a product and may’t discover what they’re searching for, they’re more likely to go away your retailer and possibly by no means return. 

To stop them from abandoning your website, now you may present common merchandise out of your retailer if no merchandise have been discovered.

Popular products section in Botiga and Botiga Pro

This function is disabled by default. You possibly can allow it from the Look > Customise > Search > Allow Widespread Merchandise menu.

Enable Popular Products section from the WordPress Customizer

Gradient and Multi-Coloration Product Swatch Sorts (Pro) 

Now we have added two new swatch sorts to Botiga Pro:

  • Gradient – permits you to mix two or extra colours in such a means that one coloration fades into the following. 
  • Multi-color – permits you to present a number of colours subsequent to one another.
Gradient and multi-color product swatches

So as to add your new coloration swatches to any product web page, you’ll want to: 

  1. Create the brand new swatches from the Merchandise > Attributes > Configure phrases admin web page (now you may select from a single coloration, gradient, and a number of colours).
  2. Go to the product web page the place you need to add the brand new swatch and click on Edit product.
  3. Scroll all the way down to Product Knowledge > Attributes > Coloration menu on the product admin web page.
  4. Choose and allow the brand new swatch from the dropdown below the Worth(s) possibility.
  5. Add the brand new coloration choice to the entrance finish from the Product Knowledge > Variations menu.
Botiga Pro's new product swatches on a WooCommerce product page

New Product Swatch Styling Choices (Pro)

Botiga Pro 1.1.5+ permits you to model your product swatches — for instance, you may change their colours, dimensions, borders, spacing, and extra. 

To entry the brand new product swatch styling choices, go to Look > Customise > WooCommerce > Product Swatches > Fashion panel, and configure your settings.

Product swatch styling options in the WordPress Customizer

With Botiga Pro 1.1.5+, you may add a background picture to the header of your Product Catalog web page and magnificence it in any means you need. You may have the choice to alter the colour, border dimension, spacing, and extra. 

You possibly can model your product catalog header from Look > Customise > WooCommerce > Product Catalog > Fashion > Structure panel.

Procuct catalog header styling options

Botiga’s header and footer builders have already offered you with many styling choices — however now, you may add customized background photos and alter the paddings, too.

Botiga's header and footer builders, new styling options in the Customizer

As you may see beneath, now each element within the header and footer builders has its personal padding, margin, and visibility choices.

Padding and margin options in the header and footer builders

The footer menu now has a dropdown design, which implies you may add a number of pages to the footer with out crowding it. 

To allow the function, first, you’ll want to create the menu from the Look > Menus admin web page. Then, you may add it to the footer from the Look > Customise > Footer > Footer Builder panel.

It’s price noting that the footer menu has a dynamic design which implies that: 

  • If there’s area beneath the menu, the submenu will drop down.
  • If there isn’t sufficient area for the dropdown, the submenu will broaden upwards. 
Botiga Pro's footer dropdown menu

Google Autocomplete Integration for Checkout Handle Fields (Pro)

To fast-track the checkout course of, you may combine your website with Google Autocomplete. 

Now you may allow your prospects to auto-complete the handle discipline on the checkout web page utilizing the performance of the Google Maps Platform. 

To allow Botiga Pro’s new autocomplete function, go to Look > Theme Dashboard > Theme Options and activate the Google Autocomplete module.

Google Autocomplete module in Botiga Pro

Then, create a Google Autocomplete API key from the Google Cloud Console (see how), and go to the Look > Customise > WooCommerce > Checkout panel. 

Right here, allow the Distraction Free Checkout possibility and add the API key by clicking the Google Autocomplete Settings button.

Distraction-free checkout and Google Autocomplete settings in Botiga Pro

WooCommerce Amount Increment Habits (Pro)

WooCommerce doesn’t have any amount increment choices out of the field — so we’ve got added the flexibility to outline min, max, and default values and customized increment steps for any product.

To outline stock values and add superior amount guidelines, go to Themes > Theme Dashboard and activate the Amount Step Management module.

Then, navigate to Merchandise > All Merchandise and open the product web page you need to modify.

Scroll all the way down to the Product Knowledge > Stock panel, and it is best to be capable to see the choices the place you may change the stock values and add superior amount guidelines.

Quantity increment options on a WooCommerce product page

Adjustments within the Theme Settings Web page (Free + Pro)

There are two necessary modifications within the Theme Dashboard.

First, we’ve got moved the theme activation license choice to a brand new location. Now, you may entry it from the Look > Theme Dashboard > Settings > Common admin web page.

Second, you’ll discover a brand new Efficiency part on the Settings web page. It has an possibility referred to as Load Google Fonts

Google Fonts are sometimes flagged for decreasing web page load occasions in the event that they’re downloaded from Google’s CDN (Content material Supply Community).

Nevertheless, Botiga now permits you to go for loading Google Fonts regionally to spice up your website pace.

Performance tab on Botiga's theme dashboard

Skill to Add New Product Fields Utilizing the ACF Plugin (Pro)

Utilizing the Superior Customized Fields (ACF) plugin now you can add customized fields to your product and store catalog pages.

Say you promote T-shirts in your retailer and need to add the product dimensions, weight, and producer’s handle to your product web page.

With Botiga Pro, all you’ll want to do is set up and activate the ACF plugin, after which navigate to the ACF > Subject Teams web page in your WordPress admin space and create a customized discipline for each bit of data.

New Advanced Custom Fields options in Botiga Pro

Subsequent, scroll all the way down to the Settings part and create a ‘Put up Sort is the same as Product’ rule for the sphere group.

Field group rules on the settings page of the Advanced Custom Fields plugin

Now, when you open any of your product pages, the customized fields will seem proper beneath the Product Description.

You merely want so as to add the customized particulars to your product and replace the web page.

Custom product fields on a Botiga product page

Skill to Add Movies to Product Variations (Pro)

Botiga Pro now permits you to add movies to your product variations by importing them to your web site or embedding them from a video internet hosting platform resembling YouTube. 

To take action, open your product admin web page and scroll all the way down to the Product knowledge part. Right here, go to the Variations possibility and click on the Broaden hyperlink.

Select the product variation the place you need to add the video and click on the Add Media button.

If you wish to embed a video from YouTube, click on the Add Video From URL button as a substitute.

Option to add video to product variations on a Botiga product page

Now you can modify the colour and spacing of the store’s sidebar and dimension charts. 

To model your store filter sidebar, open the WooCommerce > Product Catalog menu within the Customizer and navigate to the Common > Structure > Sidebar Structure submenu to test if the sidebar is activated.

Shop sidebar toggle in Botiga Pro in the WordPress Customizer

Subsequent, return to the Product Catalog possibility and open the Fashion tab. 

Within the Sidebar Fashion part, you may change the background, icon, and widget divider colours of your sidebar. You can too improve or lower the sidebar padding and the area between the widgets.

Detailed styling options in Botiga Pro's Customizer UI

Fashion Your Measurement Charts with Botiga Pro

To model your dimension charts, open the Customizer and go to Single Product > Fashion > Measurement Chart. 

From there, you may change the textual content and icon colours, dimension, and different model settings of your dimension charts.

Size chart sizing options in the WordPress Customizer

Styling Choices for the Retailer Discover (Free & Pro)

With the brand new Botiga launch, you can even customise the discover banner in line with your wants.

You may have the choice to alter the background, textual content, and hyperlink colours, and you can even outline the scale of the banner by growing or reducing the padding.

To model your retailer discover, open the Customizer and go to Retailer Discover.

Guarantee that the Allow retailer discover possibility is chosen, after which go to the Fashion tab and modify the colours and padding of the banner.

Store notice customization options

Skill to Present the Variation Identify Beneath the Product Title (Pro)

Now you can even present the variation identify beneath the product title as soon as somebody selects a variation (e.g. coloration, dimension, and many others.).

Let’s say a buyer needs to purchase a T-shirt out of your retailer and selects the black-colored, medium-sized variation on the product web page.

With the choice enabled, the identify of the chosen variation (‘Black Medium’ right here) will seem beneath the title of the product.

Variation name under product title, frontend view

To allow variation names on product pages, open the Customizer, go to Product Swatches > Common, and toggle the Variation Identify On Product Title possibility.

Variation name toggle in the WordPress Customizer

Thrilling New Starter Websites (Pro)

Two new starter websites, Wine and Crops, have been added to Botiga Pro’s rising assortment of starter websites. 

Each starter websites are environment friendly, professional-looking, and delightful. Additionally they come filled with options targeted on producing leads for your small business.

New starter sites for Wine and Plant stores in Botiga Pro

Each homepage designs comprise a well-designed hero space that catches your customer’s consideration straight away. One of the best-selling store objects are additionally proven upfront, together with shopper testimonials and the main points of the companies provided by your small business.

The demos additionally embrace professionally designed templates for the important thing pages of your website — such because the about web page, store catalog, weblog, and speak to web page — that every one look nice whereas providing invaluable data to your prospects.

“Free Transport” Progress Bar (Pro)

To cut back cart abandonment and encourage guests to finish orders, you may show a progress bar and present how shut the customer is to get free supply.   

You possibly can allow the progress bar by going to Look > Theme Dashboard > Theme Options > Free Transport Progress Bar and hitting the Activate button. 

Activate free shipping progress bar

To make use of the module, you additionally have to configure the progress bar.

To take action, go to WooCommerce > Settings > Transport and hit the Add Transport Zone button.

Then, scroll all the way down to the Transport strategies possibility, and click on Add transport technique.

Add shipping method button

A popup will seem with a dropdown menu.

Choose the Free transport possibility after which hit the Add transport technique button. 

Add shipping methods popout

On the following web page, click on the Edit button beneath Free transport

Edit shipping methods

Within the popup that seems proper after you hit the Edit button, you may set the necessities concerning the free transport progress bar.

For instance, you may outline the minimal order quantity required free of charge transport, amongst different issues. 

Free shipping settings

The progress bar shall be robotically displayed on the cart, mini cart, and checkout pages.

To take away the progress bar from any of these pages, go to Look > Customise > Free Transport Progress Bar > Common and deselect the attention icon belonging to the web page you need to take away the progress bar from. 

Remove free shipping progress bar from the cart or checkout pages

To switch the design of the progress bar, go to Customise > Free Transport Progress Bar > Fashion

You may have the choice to customise the textual content and background colours, together with the flexibility to regulate the peak and border radius of the bar. 

Styling free shipping progress bar

Add To Cart Notification (Pro)

With the brand new Add To Cart Notifications module, you may present a notification confirming {that a} product has been added to the cart.

The notification will seem as a slide-in window and present a View Cart button to permit prospects easy accessibility to the Cart web page. 

You possibly can allow the module by going to Look > Theme Dashboard > Theme Options > Add To Cart Notifications and hitting the Activate button. 

Activate the Add To Cart Notifications module

After activation, a slide-in will robotically seem each time a product is added to the cart. 

Add To Cart slide-in notification

Get the New Botiga Theme Right now!

That wraps up our product replace. 

The brand new variations of the Botiga and Botiga Pro are already out, and it is best to have already acquired a notification concerning the topic.

Replace each, and check out the brand new options and enhancements!

For those who solely use the free Botiga theme, improve to Botiga Pro at the moment — all of your current configurations will keep intact, and you’re going to get entry to all of the options above. 

Tell us within the feedback part when you have any questions or options, too.