If you want to customize the appearance of Customily options, you can do so by adding your own custom CSS styles.
CSS allows for a wide range of customization depending on your level of expertise. Below are some basic visual changes you can make to how Customily options are displayed:
Changing text size and colors
Adjusting spacing between options
Styling buttons, inputs, and dropdowns
Showing or hiding certain elements
Important
The Custom CSS tool is only available for users with stores on Shopify, Etsy, Amazon, WooCommerce, and Custom Integrations.
In this article:
Styling Customily Options with CSS
- Open Start/Store
- On the top menu, go to Settings
- Open the Developer settings tab
- Type in any custom CSS you would like to add.
- Save
Important
If you are not familiar with CSS, we recommend you find someone to help you adjust the styles of your options. Changing styles without knowing how can result in breaking the layout of your product page.
Using Custom CSS Classes for Individual Customily Options
To apply custom styles to individual Customily options, you can generate custom CSS classes directly from the Option Set.
- Open Customily
- Go to the Store section.
- Open the Option Sets tab.
- Select the option set.
- Expand the option you want to style.
- Add a name for the special class in the Custom CSS classes field. Use lowercase characters and the hyphen"-" symbol to separate the words. No dot is required.
-
Save the option set.Follow the steps above to open the Developer Settings tab and use the Custom CSS class you created to style the option. Depending on the changes you want to make, you might need to combine this CSS class with the others listed below.
- Save
CSS Classes of Customily Options
Use these class selectors to identify the different types of options and their elements.
Element |
Class selectors |
|---|---|
Text Input |
#cl_optionsapp .customily_option input |
Drodpown |
#cl_optionsapp .customily_option select |
Swatch |
#cl_optionsapp .swatch-container .swatch
#cl_optionsapp .swatch-container label
#cl_optionsapp .swatch-container label img
|
Image upload button |
#cl_optionsapp .customily-download-button |
Remove uploaded photo button |
.cl_remove-image |
Option Labels |
#cl_optionsapp .customily_option label |
Help Text |
#cl_optionsapp .help-text |
Photo size limit text |
.cl_image-invalid-size |
Required message |
#customily-required-after-label |
Share
Was this article helpful?
Have more questions? Submit a request