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

  1. Open store
  2. On the top menu go to Settings
  3. Open the Developer settings tab
  4. 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
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
Class selectors
Text Input 
#cl_optionsapp .customily_option input
#cl_optionsapp .customily_option select
#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
Option Labels
#cl_optionsapp .customily_option label
Help Text
#cl_optionsapp .help-text
Photo size limit text
Required message


Was this article helpful?

0 out of 0 found this helpful
Have more questions? Submit a request