Question 1

Change dropdown placeholder text

Accepted Answer

You can access the app-wide settings of the app in the "Customazition & settings" page. In the "Change dropdown placeholder" section you can change the placeholder text that is shown on the dropdown when a value hasn't been selected. By default it is "Choose" followed by the option title.

Question 2

Show options on storefront

Accepted Answer

${youtube}Show options on storefront

There are two ways to show the options on the storefront:

Using the EasyFlow app block - recommended
Using the EasyFlow app embed - if adding app blocks to the product page is not supported (eg.: Shopify 1.0 themes, intagrate with page builders etc.)

Show options with the EasyFlow app block

To show the options on your storefront you need to add the "EasyFlow Product Options" app block to the product page in your theme editor.

Follow these steps to do it:

Open the theme editor
In the top middle navigate to the product page

On the left, click the "Add block" button and select the EasyFlow app block from the list

Move the app block to the place where you want the options to show
Save the changes

Troubleshoot issues when options don't show on the product page: Options do not show on the product page?

Show options with the EasyFlow app embed

This method is recommended if you can't add the EasyFlow app block to the right place on the product page (eg.: Shopify 1.0 themes, you're using page builders etc.)

Follow these steps to show the options with the app embed:

Open the theme editor
On the top left click "App embe

Question 3

How to hide add-on products from the storefront?

Accepted Answer

When you create a price add-on by providing a price in the "Add-on price" field next to the values, we create an add-on product in your shop that will be added to the cart along the base product if the value is selected by the customer.

These add-on products are automatically hidden from storefront search, SEO and existing collections.

However, these products can appear on pages where you show all the products or in collections that were created after the app was installed.

Hide the add-on products from pages showing "All products"

1. Create a new collection that includes all the products except the add-ons

Go to "Collections" under Products and click the "Create collection" button at the top right.

Add a title to the collection (Eg.: Products).

Change the collection type to "Automated" and set the condition to "Product type is not equal to 23ppogenerated". This collection will include all current and future products that are not automatically generated by the app.

2. Change "All products" to the new collection in the theme editor and/or navigation

In the theme editor or navigation where you currently show "All products" change it to show the collection that you created.

Hide the add-on products from new collection

To hide the products from automated collections, do the following:

Open the collection where add-on products appear
Ad

Question 4

Options do not show on the product page?

Accepted Answer

1. Make sure the EasyFlow Product Options app block is added to the product page in the theme editor

|| If you can't add the app block to the product page, show the options using the app embed. Learn more on how to show the options with the app embed here: Show options on storefront

Open the theme editor
In the top middle navigate to the product page

Make sure the EasyFlow app block is added to the product page on the left

If it is not added to the product page, click the "Add block" button and select the EasyFlow app block from the list

Save the changes

2. Make sure the option set is added to products

In EasyFlow open the option set that is not visible
Check if the option set is added to products on the right in the "Add to products" section
If it is not added to products make sure to add it by selecting products manually or adding it automatically

3. Check that the EasyFlow app block is added to the product page of the product where the options don't

Question 5

Change the style of options

Accepted Answer

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

```css

/* For image swatches */

.ef__option-value-im

Question 6

Set up an option set

Accepted Answer

${youtube}Set up an option set

Link: https://youtu.be/MxIAFXqQs4Q

What is an option set and what are options?

An option set is a collection of one or more options that you want to add to products. One option is a specific quality of the product the customer can customize (Eg.: Color) on the product.

Creating an option set

1. Click the "Create option set" button on the main page in the admin

2. Name the option set and add options to it

Add a name to the option set in the "Option set title" field. This name is not visible to customer. It's only for you so you can easily recognize the option set later on.

You can add options to the option set in the "Options" section in two ways:

Creating a new option by clicking the "Create new option" button and choosing an option type
Adding an option that you already created by clicking the "Add existing option" button and selecting the existing options you want to add from the list

You can change the order of the options by clicking the "⋮⋮" icon on the left and draging them to the right place.

Learn more about creating options: [Set up options](/en/article

Featured & Frequently Read Articles

Browse All Categories