EasyFlow lets you easily change the style of your options that will be shown on the storefront. So you can display your options to your customers according to your styling preferences.

In this documentation, we will show you all the steps for changing the styles of your product options.

How to Change the Style of Your Options? #

With EasyFlow, you can customize the styling of the available option types. So, you can change how your Button, Image Swatch, Dropdown and others look on the storefront. Follow these steps to find out how it works:

Step 1: Navigate to the Customization Tab #

First, open the EasyFlow app and navigate to the ‘Customization’ tab in the left side panel. Here, you will find all the styling options for different option types in one place.

Step 2: Configure Style Settings for Various Option Types #

Now, you can configure the style settings of different option types. Let us take a look at each one by one:

Font Styles #

In this section, you can customize the style of fonts on the storefront. You can modify the Option title, Option description, Values and Text input. For each of these, you can customize the Font color, Font size, Font weight and Font style.

Button Styles #

Here, you get to customize the style of buttons on the storefront. So, you can change the Default Border width, Border radius, Background color, Border color and Text color of the button. Furthermore, you can modify the Background color, Border color and Text color for On hover or Selected.

Swatch Styles #

Under this section, you can customize the style of the image and color swatches on the storefront. You get to change the Default Width, Height and Border radius. Also, you can modify the Border color and Border width for Selected.

Input Styles #

Next, you have the Input styles. From this section, you can customize the style of the text box, multi-line text box, number field and date picker on the storefront. You have the option to adjust the Width, Background color, Border color and Border width here.

Dropdown #

In the ‘Dropdown’ section, you get to customize the style of dropdowns on the storefront. So, you can modify the Width, Background color, Border color and Border width of the dropdown option type here.

If you want to revert back to the default settings after making any changes in any section, hit the ‘Reset to default’ button. This will restore the original default values.

Customize Option Styles with CSS #

You can also write your own CSS code using CSS classes (listed in the CSS code section). So, you can use your own CSS codes to customize the style of the options. For more information, read this documentation.

To get help with styling your options on your storefront, you can also get in touch with our team. Click on the ‘Styling help’ button for assistance.

This is how easily you can change the style of your options in EasyFlow. 

For further assistance, do not hesitate to reach out to our support team.