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

You are here:
In this article

We have a few options on the Settings page of our app on how to change the style and functionality of our app. These settings include:

  • Border Style
  • Sold out Style
  • Swatch Size
  • Circle/ Square swatches
  • Dark Themes
  • Tooltips
  • + More

How to add 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 right after the first <head>  tag at the top of the page.

Here is more information on how to edit your theme files.

Color Picker

To top

Click here to select a color from our color picker widget

Text Styling

To top

Change font size for text

<style>
/* change font size for text */
#bcpo label {
text-transform: none !important;
letter-spacing: 0em !important;
font-size: 13px !important;
}
</style>

Change font color of text

<style>
/* Change font color of text */
#bcpo .bcpo-buttons label.bcpo-front-button-label {
color: #3F2E65 !important;
}
</style>

Button Styling

To top

Selected Button Border Color

<style>
/* change selected button border color */
#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

<style>
/* change selected button background color */
#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)

<style>
/* change button colors (unselected) */
#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>

Change the minimum width of buttons

<style>
/* change the minimum width of buttons */
#bcpo .bcpo-buttons label.bcpo-front-button-label {
min-width: 300px !important;
}
</style>

Buttons Arranged in a Single Column

<style>
/* buttons arranged in a single column */
.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>

Swatch Styling

To top

Size of Image and Color Swatches

<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

<style>
/* selected 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>

Center horizontally and vertical how the image swatches are cropped

<style>
/* center horizontally and vertical how the image swatches are cropped */
.bcpo-front-image-label{
background-position: center center !important;
}
</style>

Unselected Border Color (swatches and buttons)

<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>

Dropdown Styling

To top

Change the style of the Dropdown

<style>
/* change the style of the dropdown */
#bcpo .bcpo-default select,
#bcpo .bcpo-select select, #bcpo .bcpo-dropdown select {
color: white !important;
border: 1px 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 width of the Dropdown

Below is code to make the dropdowns 100% width, you can also change this to a pixel amount.

<style>
/* change the width of the dropdown */
#bcpo .bcpo-default select {;
width: 100% !important;
}
</style>

Change the highlight color of the the enhanced dropdown

<style>
/* change the highlight color of the the enhanced dropdown */
#bcpo .bcpo-dd .inner label:hover {
background: #557B97 !important;
}
</style>

Reduce width of dropdowns

<style>
/* reduce width of dropdowns */
#bcpo .bcpo-dropdown, #bcpo .bcpo-dropdown select, #bcpo .bcpo-default select, #bcpo .bcpo-select select {
min-width: 193px !important;
}
</style>

General Settings

Center All the Options

<style>
/* center all the options */
#bcpo {
text-align: center !important;
}
</style>

Vertical Checkboxes

<style>
/* vertical checkboxes */
#bcpo .bcpo-checkboxes > label {
width: 100% !important;
}
</style>

Virtual Options above Shopify Options

<script>
/* place virtual options above shopify options */
function bcpoDone() {
bcpo.$('#bcpo').prepend(bcpo.$('#bcpo .bcpo-simple'));
}
</script>

Other Styling

To top
Grid Product Options Styling
<style>
/* grid product option styling */
#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>
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 Options/ Unavailable Options

To top
Hide Selected Product Option Value
<style>
/* hide selected product option value */
.bcpo-value {
display: none !important;
}
</style>

Hide Selected Price add-on Value on Product Page

<style>
/* hide selected price add-on value on product page */
.bcpo-addon {
display: none !important;
}
</style>

Hide unavailable variants

This will hide variants that aren’t available in any combinations.

<style>
/* hide unavailable variants */
.bcpo-really-disabled {
display: none !important;
}
</style>

Hide unavailable variants in 2nd product option

This will keep all of the values visible for the first product option and hide all unavailable values for the second product option.

<style>
/* hide unavailable variants in 2nd product option */
#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

This will keep all of the values visible for the first product option and hide all unavailable values for the second & 3rd product option.

<style>
/* hide unavailable variants in 2nd & 3rd product option */
#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 and 3rd product option, always show variants in first product option without sold out styling

This 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>
/* hide unavailable variants in 2nd and 3rd product option, always show variants in first product option without sold out styling */
#bcpo .selector-wrapper:nth-child(2) label.bcpo-disabled,
#bcpo .selector-wrapper:nth-child(2) label.bcpo-really-disabled {
opacity: 1 !important;
border: 1px solid #a0a0a0 !important;
}
#bcpo .selector-wrapper:nth-child(2) label.bcpo-disabled:hover,
#bcpo .selector-wrapper:nth-child(2) label.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;
}
#bcpo .selector-wrapper:nth-child(4) .bcpo-disabled,
#bcpo .selector-wrapper:nth-child(4) .bcpo-really-disabled {
display: none !important;
}
</style>
It’s best to turn off tooltips in the settings of the app so the “sold out” and “unavailable” tooltips don’t show for the first product option.

This code only works to display the first product options variants as in stock if the product option is buttons or dropdowns. It doesn’t work with swatches or enhanced dropdowns for the first product option. 

Product options in two columns

To top 
<style>
/* product options in two columns */
#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>

Reduce the width of the text boxes and dropdown to fit in two column

To top 
<style>
/* reduce the width of the text boxes and dropdown to fit in two column */
@media (min-width: 767px) {
#bcpo .bcpo-text input,
#bcpo .bcpo-default select {
min-width: 0 !important;
width: 186px !important;
}
}
</style>

 

 

Change Color of Price-Addon Price

<style>
/* change color of price-addon price */
#bcpo .bcpo-addons-price {
color: red !important;
}
</style>

Fix the margin on the left

 <style>
/* fix the margin on the left */
#bcpo {
margin-left: 15px !important;
}
</style>

Change the product option title/ selected value font size

To top 
<style>
/* change the product option title/ selected value font size */
#bcpo .bcpo-label > label {
font-size: 20px !important;
}
</style>

Change the product option title font weight

To top 
<style>
/* change the product option title font weight */
#bcpo .bcpo-label .bcpo-title {
font-weight: bold !important;
}
</style>

Change button bg color and text color for keep shopping pop-up

To top 

<style>
/* Change button bg color and text color for keep shopping pop-up */
.btn {
background-color: #7c9d6d !important;
color: white !important;
​}
</style>

Change file upload button styling

To top 
<style>
/* change file upload button styling */
#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 the Selections text in the Checkout.

To top

Replace the text “Selections” with the text you want to appear in checkout.

<script>
/* replace the text "Selections" with the text you want to appear in checkout */
window.bcpoSelections = 'Selections';
</script>
Make sure to have the ‘ on each side of the text.

Change styling for different sized screens

To top

Add 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>

Add Product Option data to the notes

To top 
<script>
/* add product option data to the notes */
if (window.bcpo_settings) bcpo_settings.options_in_note = 'on';
</script>
The code above must be placed below our apps two lines of code

Remove colon next to product option title

<script>
/* Remove colon next to product option title */
function bcpoDone() {
bcpo.$('.bcpo-title').each(function (i, el) {
var $el = bcpo.$(el);
$el.html($el.html().replace(/:$/, ''));
});
}
</script>
The code above must be placed below our apps two lines of code
Was this article helpful?
Dislike 4

Pin It on Pinterest