How do I change the styling and look of the product options?

You are here:

Settings

To top

We have some options in the Settings page to change the styling of your product options.

CSS snippets

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.

Selected Button Border Color

To top

<style>
#bcpo .bcpo-front-button-option:checked + .bcpo-front-button-label {
border: 3px solid #83cb13 !important;
background: white !important;
color: black !important;
padding: 6px 10px !important;
}
</style>

Selected Button Background Color

To top

<style>
#bcpo .bcpo-front-button-option:checked + .bcpo-front-button-label {
background: gray !important;
color: white !important;
}
</style>

You can replace the color with a hexadecimal.

For example “gray” could be replaced with “#51C146”

Size of Image and Color Swatches

To top

<style>
/* big swatches */
#bcpo .bcpo-colors div.bcpo-color-parent,
#bcpo .bcpo-images div.bcpo-image-parent {
width: 150px !important;
}
#bcpo label.bcpo-front-color-label,
#bcpo input.bcpo-front-color-label,
#bcpo label.bcpo-front-image-label,
#bcpo input.bcpo-front-image-label {
height: 144px !important;
}
</style>

Selected Swatch Border Color

To top

<style>
/* swatch border color */
#bcpo .bcpo-checked {
border: 1px solid lime !important ;
box-shadow: inset 0 0 0 3px lime !important ;
-webkit-box-shadow: inset 0 0 0 3px lime !important ;
}
</style>

Unselected Border Color

To top
<style>
#bcpo .bcpo-buttons label.bcpo-front-button-label,
#bcpo button.bcpo-front-button-label,
#bcpo .bcpo-colors div.bcpo-color-parent,
#bcpo .bcpo-images div.bcpo-image-parent {
border: 1px solid #adff2f !important;
}
#bcpo .bcpo-buttons label.bcpo-front-button-label.bcpo-disabled,
#bcpo .bcpo-colors div.bcpo-color-parent.bcpo-disabled,
#bcpo .bcpo-images div.bcpo-image-parent.bcpo-disabled {
border: 1px dashed #adff2f !important;
}
#bcpo .bcpo-buttons label.bcpo-front-button-label:hover,
#bcpo button.bcpo-front-button-label:hover,
#bcpo .bcpo-colors div.bcpo-color-parent:hover,
#bcpo .bcpo-images div.bcpo-image-parent:hover {
border: 1px dashed #ff00ff !important;
}
</style>

Button Arranged in a Single Column

To top
<style>
.bcpo-buttons .single-option-selector {
display: flex;
flex-direction: column;
}
.bcpo-buttons .single-option-selector > div {
width: 100%;
max-width: 400px
}
#bcpo .bcpo-buttons label.bcpo-front-button-label {
width: 100% !important;
}
</style>

Center All the Options

To top
<style>
#bcpo {
text-align: center;
}
</style>

Center horizontally and vertical how the image swatches are cropped

To top
<style>
.bcpo-front-image-label{
background-position: center center !important;
}
</style>

Vertical Checkboxes

To top
<style>
#bcpo .bcpo-checkboxes > label {
display: block !important;
}
</style>
Was this article helpful?
Dislike 0

Pin It on Pinterest