Customizing Your Options

Our app Best Custom Product Options offers many ways of displaying options to your customers. If you’d like even more ways customize these options, then read on!

Below are some CSS snippets that you can put in your theme. To add them, you can navigate to your Shopify admin page, click “Online Store”, click the “Actions” dropdown and choose “Edit code.” This will take you to a code editor. We recommend copying the code snippet to your theme.liquid file.

If you want to use a different color, you can use this tool to get one:

Selected Button Border Color

<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

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

Any Size Image and Color Swatches

<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

<style>
/* swatch border color */
#bcpo .bcpo-images input:checked + label,
#bcpo .bcpo-colors input:checked + label {
  box-shadow: inset 0 0 0 3px lime !important;
  -webkit-box-shadow: inset 0 0 0 3px lime !important;
}
</style>

Unselected Border Color

<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

<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

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

Vertical Checkboxes

<style>
#bcpo .bcpo-checkboxes > label {
  display: block !important;
}
</style>