martyboggs/best-custom-product-options-customization.html

## best-custom-product-options-customization.html
<!--
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-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 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>
	<!--
	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-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 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>