Settings
To topWe have some options in the Settings page to change the styling of your product options.
CSS snippets
To topBelow 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>
/* 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>Selected Swatch Border Color
To top
<style>
/* swatch border color */
#bcpo .bcpo-images input:checked + label,
#bcpo .bcpo-colors input:checked + label {
box-shadow: 0 0 0 3px lime !important;
-webkit-box-shadow: 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>Grid Styling
To top
<style>
#bcpo .bcpo-table thead tr:first-child td {
background: white !important;
border: 1px solid gray !important;
color: black !important;
}
</style>This CSS handles the styling at the top. It changes the background color of the first row as well as the border color and text color. The text color is “color” in the css.
Hide Option Value
To top<style>
.bcpo-value {
display: none !important;
}
</style> Product options in two columns
To top<style>
#bcpo {
margin-left: 0%;
display: flex;
flex-wrap: wrap;
}
#bcpo .selector-wrapper > div,
#bcpo .selector-wrapper > select {
margin-right: 7px !important;
}
</style>
Virtual Options above Shopify Options
To top<script>
function bcpoDone() {
$('#bcpo').prepend($('#bcpo .bcpo-simple'));
}
</script>Hide unavailable variants
To top<style></div>
<div dir="ltr" data-identifyelement="396">.bcpo-really-disabled {</div>
<div dir="ltr" data-identifyelement="397"> display: none !important;<br data-identifyelement="398" />}</div>
<div dir="ltr" data-identifyelement="399"></style>