Skip to main content
CSS Modifications Guide/Template
Shevaughn avatar
Written by Shevaughn
Updated over 2 years ago

To modify/add CSS affecting your customization options, see the CSS template below which you would be inserted into the file snippets/shopstorm-apps.scss.liquid:

/* Single Line Text Options */

.product-customizer-options .product-customizer-option.option-type-text input{}

/* Dropdown Options */

.product-customizer-options .product-customizer-option.option-type-select select{

-moz-appearance: none;

-webkit-appearance: none;

appearance: none;

}

/* Paragraph Text Options */

.product-customizer-options .product-customizer-option.option-type-multiline textarea{}/* File Upload Options */

.product-customizer-options .product-customizer-option.option-type-file input{}/* Single Checkbox Options */

.product-customizer-options .product-customizer-option.option-type-checkbox input{

vertical-align: middle;

height: auto;

}

/* Checkbox Group Options */

.product-customizer-options .product-customizer-option.option-type-checkbox_group input{

vertical-align: middle;

height: auto;

}

/* Radio Options */

.product-customizer-options .product-customizer-option.option-type-radio input{

vertical-align: middle;

height: auto;

}

/* Options main label */

.product-customizer-options .product-customizer-option > label{

display: inline-block;

}

/* Checkbox/Radio buttons individual labels */

.product-customizer-options .product-customizer-option.option-type-radio ul li label,

.product-customizer-options .product-customizer-option.option-type-checkbox_group ul li label{

vertical-align: middle;

position: unset;

top: 0px;

left: 0px;

}

/* Each individual option */

.product-customizer-options .product-customizer-option{

}

Did this answer your question?