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 right after the first <head> tag at the top of the page.
Color Picker
To topClick here to select a color from our color picker widget
Change font size for text
To top<style>
#bcpo label {
text-transform: none !important;
letter-spacing: 0em !important;
font-size: 13px !important;
}
</style>
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;
}
</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”
Button Colors (unselected)
To top<style>
#bcpo .bcpo-buttons label.bcpo-front-button-label, #bcpo button.bcpo-front-button-label {
background: white !important;
color: black !important;
border: 1px solid #A0A0A0 !important;
}
</style>
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>/* change unselected border color */
#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>
Change the style of the Dropdown
To top<style>
#bcpo .bcpo-default select,
#bcpo .bcpo-select select, #bcpo .bcpo-dropdown select {
color: white !important;
border: 2px solid #e8074d !important;
background: white url('https://cdn.shopify.com/s/files/1/0174/2162/t/6/assets/ico-select.svg?v=6348648732451552209') no-repeat scroll right center !important;
}
</style>
Change the highlight color of the the enhanced dropdown
To top<style>
#bcpo .bcpo-dd .inner label:hover {
background: #557B97 !important;
}
</style>
Reduce width of dropdowns
To top<style>
#bcpo .bcpo-dropdown, #bcpo .bcpo-dropdown select, #bcpo .bcpo-default select, #bcpo .bcpo-select select {
min-width: 193px !important;
}
</style>
Button Arranged in a Single Column
To top<style>
.bcpo-buttons .single-option-selector {
display: flex !important;
flex-direction: column !important;
}
.bcpo-buttons .single-option-selector > div {
width: 100% !important;
max-width: 400px !improtant;
}
#bcpo .bcpo-buttons label.bcpo-front-button-label {
width: 100% !important;
}
</style>
Center All the Options
To top<style>
#bcpo {
text-align: center !important;
}
</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 th,
#bcpo .bcpo-table td {
background: #f2f2f2 !important;
}#bcpo .bcpo-table thead tr:first-child td {
color: #3d4246 !important;
}#bcpo .bcpo-table td {
border: none !important;
}
</style>
Hide Selected Option Value
To top<style>
.bcpo-value {
display: none !important;
}
</style>
Hide Selected Price add-on Value on Product Page
To top<style>
.bcpo-addon {
display: none !important;
}
</style>
Product options in two columns
To top<style>
#bcpo {
margin-left: 0% !important;
display: flex !important;
flex-wrap: wrap !important;
}
#bcpo .selector-wrapper > div,
#bcpo .selector-wrapper > select {
margin-right: 7px !important;
}
</style>

Virtual Options above Shopify Options
To top<script>
function bcpoDone() {
bcpo.$('#bcpo').prepend(bcpo.$('#bcpo .bcpo-simple'));
}
</script>
Hide unavailable variants
To topThis will hide variants that aren’t available in any combinations.
<style>
.bcpo-really-disabled {
display: none !important;
}
</style>
Hide unavailable variants in 2nd product option
To topThis will keep all of the values visible for the first product option and hide all unavailable values for the second product option.
<style>
#bcpo .selector-wrapper:nth-child(3) .bcpo-disabled,
#bcpo .selector-wrapper:nth-child(3) .bcpo-really-disabled {
display: none !important;
}
</style>
Hide unavailable variants in 2nd & 3rd product option
To topThis will keep all of the values visible for the first product option and hide all unavailable values for the second & 3rd product option.
<style>
#bcpo .selector-wrapper:nth-child(3) .bcpo-disabled,
#bcpo .selector-wrapper:nth-child(3) .bcpo-really-disabled {
display: none !important;
}
#bcpo .selector-wrapper:nth-child(4) .bcpo-disabled,
#bcpo .selector-wrapper:nth-child(4) .bcpo-really-disabled {
display: none !important;
}
</style>
Hide unavailable variants in 2nd product option, always show variants in first product option without sold out styling
To topThis will keep all of the values visible for the first product option with no sold out styling, and hide all unavailable values for the second product option.
<style>
#bcpo .selector-wrapper.bcpo-images:nth-child(2) .bcpo-image-parent.bcpo-disabled,
#bcpo .selector-wrapper.bcpo-images:nth-child(2) .bcpo-image-parent.bcpo-really-disabled {
border: 1px solid #a0a0a0 !important;
}
#bcpo .selector-wrapper.bcpo-images:nth-child(2) label.bcpo-front-image-label.bcpo-disabled,
#bcpo .selector-wrapper.bcpo-images:nth-child(2) label.bcpo-front-image-label.bcpo-really-disabled {
opacity: 1 !important;
}
#bcpo .selector-wrapper.bcpo-images:nth-child(2) .bcpo-image-parent.bcpo-disabled:hover,
#bcpo .selector-wrapper.bcpo-images:nth-child(2) .bcpo-image-parent.bcpo-really-disabled:hover {
border: 1px solid black !important;
}
#bcpo .selector-wrapper:nth-child(3) .bcpo-disabled,
#bcpo .selector-wrapper:nth-child(3) .bcpo-really-disabled {
display: none !important;
}
</style>
Change Color of Price-Addon Price
To top<style>
#bcpo .bcpo-addons-price {
color: red !important;
}
</style>
Fix the margin on the left
To top <style>
#bcpo {
margin-left: 15px !important;
}
</style>
Change the product option title/ selected value font size
To top<style>
#bcpo .bcpo-label > label {
font-size: 20px !important;
}
</style>
Change the product option title font weight
To top<style>#bcpo .bcpo-label .bcpo-title {
font-weight: bold !important;
}
</style>
Change the “Selections” text in the checkout for price add-ons
To topReplace “Selections” with the text you want.
<script>
var bcpoSelections = 'Selections';
</script>
Change button color for keep shopping pop-up
To top<style>
.btn {
background-color: #7c9d6d !important;
color: white !important;
}
</style>
Change file upload styling
To top<style>
#bcpo .bcpo-file input {
margin: 0 !important;
max-width: 100% !important;
line-height: 1 !important;
height: auto !important;
cursor: pointer !important;
background: transparent !important;
border: 0 !important;
padding: 4px 0 !important;
}
#bcpo .bcpo-file input::-webkit-file-upload-button {
background: white !important;
color: black !important;
border: 1px solid #A0A0A0 !important;
border-radius: 4px !important;
padding: 5px 20px !important;
cursor: pointer !important;
}
</style>
Change styling for different sized screens
To topAdd this code after the <style> tag and before the rest of the code
@media (max-width: 480px) {
@media (min-width: 749px) and (max-width: 1003px) {
For example
<style>
@media (min-width: 749px) and (max-width: 1003px) {
#bcpo .bcpo-images div.bcpo-image-parent {
width: 72px !important;
}
#bcpo label.bcpo-front-image-label,
#bcpo input.bcpo-front-image-label {
height: 68px !important;
}
}
</stye>