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

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

  • Go to Settings
  • Edit your Settings:

Here are examples of how big the different size swatches are.

Custom Size of Image and Color Swatches

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>
To customize the swatch size and style even read this article
Was this article helpful?
Dislike 0

Pin It on Pinterest