Last active
August 21, 2023 13:55
-
-
Save martyboggs/1d39b023f236dc97c79f3bc6d80f750f to your computer and use it in GitHub Desktop.
Best Custom Product Options (Shopify App) CSS Customizations https://www.relentlessapps.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
itss dosnt work