In most cases, our app automatically adapts to the style of your theme. If you want to change the style of your options, contact us. We're happy to make any styling changes for you free of charge.

Alternatively, you can customize the options with custom CSS in the "Customization & settings" page.

We made it easy to target parts of the EasyFlow app block with pre-defined CSS classes:

ef__product-option-root
ef__option-title
ef__option-title-[option type]
ef__option-total-price
ef__option-description
ef__option-description-[option type]
ef__option-values
ef__option-value
ef__option-value-[option type]
ef__option-value-description
ef__option-value-description-[option type]
Where [option type] is one of the following: checkbox, dropdown, image-swatch, radio-button, button, text-box, multi-line-text-box, number-field, date-picker, color-swatch

Common customizations

CSS code snippets for the most common style changes. To apply the changes just paste the code in the "CSS code" section on the "Customization & settings" page.

Make option title bold

.ef__option-title {
 font-weight: bold !important;
}

Make option title bigger

.ef__option-title {
 font-size: 18px !important; /* Adjust size as needed */
}

Make image/color swatches bigger

/* For image swatches */

.ef__option-value-image-swatch > label {
 width: 68px !important; /* Adjust size as needed */
 height: 68px !important; /* Adjust size as needed */
}

 /* For color swatches */

.ef__option-value-color-swatch > label {
 width: 68px !important; /* Adjust size as needed */
 height: 68px !important; /* Adjust size as needed */
}

Round the corners of image/color swatches

/* For image swatches */

.ef__option-value-image-swatch > label {
 border-radius: 10px !important; /* Adjust radius as needed */
}

 /* For color swatches */

.ef__option-value-color-swatch > label {
 border-radius: 10px !important; /* Adjust radius as needed */
}

Round the corners of image/color swatches

/* For image swatches */

.ef__option-value-image-swatch > label {
 border-radius: 10px !important; /* Adjust radius as needed */
}

 /* For color swatches */

.ef__option-value-color-swatch > label {
 border-radius: 10px !important; /* Adjust radius as needed */
}

Make the border of image/color swatches thicker and/or change border color when selected

/* For image swatches */

.ef__option-value-image-swatch > input:checked + label {
 border: 2px solid black; /* Adjust border width and color as needed */
}

 /* For color swatches */

.ef__option-value-color-swatch > input:checked + label {
 border: 2px solid black; /* Adjust border width and color as needed */
}

Increase space between the options

.ef__product-option {
 margin-bottom: 12px !important; /* Adjust space as needed */
}

Updated on: 30/04/2024