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

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 how big the different size swatches are.

Custom swatch size with code

To top

Below are some CSS snippets that you can put in your theme.

To add them, navigate to your Shopify admin page.

  • Click Online Store
  • Click the Actions dropdown
  • Choose Edit code. This will take you to a code editor.

We recommend copying the code snippet to your theme.liquid file between the <head> and </head> tags.

<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 size and style even read this article
Was this article helpful?
Dislike

Pin It on Pinterest