How to Add Swatches to Configurable Product In Bagisto?

Updated 27 September 2022

What are Swatches?

Before Continuing the topic, first we need to understand What are Swatches? Swatches are small icons which are added for providing some extra specifications to the product. Once we click on them they provide the information according to to the icon and its functionality.

For example if a customer is very serious about selecting a product with specific colour and that product too have different colour variants, in that particular scenario, the Swatches help to select as per customer need and for a better experience.

Note:- Swatches will appear only when we choose “Select” Attribute type.

How To Create Swatches In Bagisto?

For Creating Swatches you have to go to Admin panel and click on Catalog>>Attributes>>Attribute Type(Select)>>Swatch Type>>Add Option


In Bagisto we have four types of Swatches

  1. Dropdown Swatch
  2. Colour Swatch
  3. Image Swatch
  4. Text Swatch

Dropdown Swatch

Dropdown Swatches is used to create variation in the form of drop-down on the front end so that customer can select accordingly.

Note- In Bagisto by default Dropdown Swatch is set for swatch

Colour Swatch

Colour Swatch is used to create product variation in the colour form. When a customer click on colour swatch, product will reflect according to the swatch. It Basically gives an idea about the colour Scheme of the product.

Image Swatch

Image Swatch is used for the exact representation of the product. Image Swatch is also beneficial to show the product from a different angle.

Text Swatch

Text Swatches are generally used for representing text type attribute like the size. When we click on text swatch product will be reflected according to the text swatch.

After adding the Swatches, you have to set validation and configuration about the Attribute.

Once the Swatches are created, we can create a new Configurable Product and there we can see that the Attributes which awe have created and added from the

How the Swatches appear at Front End Configurable Product?

Dropdown And Colour Swatch On Front End

Dropdown and Colour Swatches will be visible like below on the front end. Please have a look at the below Image.

Text Swatch And Image Swatch On Front End

Text and Image Swatches will be visible like below on the front end. Please check the Image for the Same.


So, that was much about the article “ How to Add Swatches to Configurable Product In Bagisto?”. Also for any queries or doubts reach out to us at [email protected]. You can also raise a ticket at our HelpDesk System.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home