How to I change the size of the color swatches or image swatches?

In this article

Change swatch sizes in our apps settings

To top

You can change the sizes of the swatches in the Settings page.

  • Click on  Settings in the navigation of our app
  • Edit the Settings  below

Here are examples of different swatch sizes

Custom swatch size with code

To top

Below are some CSS snippets that you can add to your theme.liquid file. Click the link below for more information.

How to edit code in your theme.liquid file

<style>
/* change image swatch size */
#bcpo .bcpo-images div.bcpo-image-parent {
width: 150px !important;
}
#bcpo label.bcpo-front-image-label,
#bcpo input.bcpo-front-image-label {
height: 144px !important;
}
</style>
<style>
/* change color swatch size */
#bcpo .bcpo-colors div.bcpo-color-parent {
width: 150px !important;
}
#bcpo label.bcpo-front-color-label,
#bcpo input.bcpo-front-color-label {
height: 144px !important;
}
</style>
If you are using circle swatches or want square dimensions make sure the height is 6px less than the width to make the circles perfect.
To customize the swatch style more read this article
Was this article helpful?
Dislike