If you want to add advanced styles to change the way options are displayed, you can do that by adding custom CSS.
To change Customily Options styles through CSS
- Open store
- On the top menu go to Settings
- Open the Developer settings tab
- Type in any custom CSS you would like to add.
Be careful
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.
To change specific Customily Options styles through CSS
To change the style of specific Customily options, you can generate a Custom CSS class in the Option Set for them.
1. Open Customily
2. Go to the Store section.
3. Open the Option Sets tab.
4. Select the option set.
5. Expand the option you want to style.
6. 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.
7. Save the option set.
8. 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.
9. Save
Note:
This option isn't available for all platforms.
CSS Classes of Customily Options
Use these class selectors to identify the different type 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