Remember Me
Log in

Three Ways to Optimize Your Product Pages with Custom Options in Magento 2

Magento 2 Extensions
Written by ITORIS Team, 2018-09-07   

How to Optimize Product Pages with Custom Options in Magento 2

Can a better product page design motivate customers to buy the product? You can pay more attention to the checkout or registration pages in your Magento 2 store, but if the product pages are not developed and designed carefully, users will not get that far.

Customers viewing your products are already interested in them. That's why it's important to make users stay and get these items or services. High-quality pictures, well-written content, organized additional information are the main factors for building good product pages. What about customizable products? Let's say you sell magnets of different forms and want the customers to be able to customize them. How will you display the custom options without making the page too complex?

These are three ideas for а quick product page optimization with custom options.

Create dependent custom options to show only necessary fields

One customizable product may require dozens of custom options. How will you limit the number of options and have users be able to find what they are looking for? This Dynamic Product Options extension allows to make options dependent. You can't do that in Magento 2 by default. Using the extension you can display only necessary information to meet the customer's needs.

Dependent custom options allow you to show certain options based on the previous selection. You can add the conditions for each option, field and section. Let's say you need to display different sizes of a certain magnet shape. For example, your oval magnets will show a different set of options compared to the circle ones.

This is how the field with the conditional branching looks in the Backend in Magento 2.

You can read more about how to create dependent custom options in Magento 2 in our blog.
Dependent Custom Options in Backend in Magento 2

Dynamic Product Options: Conditional Branching in Magento 2

Place additional information using tooltips

Tooltips are a great way to place tiny bits of information into modal windows. Such tooltips can contain additional texts, illustrations, tables with sizes, offer special promotions, etc. It's important that customers get all the necessary information during the product customization to avoid difficulties for potential customers.

The extension allows to add tooltips for each option value and for each field with the default WYSIWYG editor. Let's say you sell clothes worldwide and want to add a table with shoe sizes for a particular area. Using the module you can find and create the tooltips for option: PRODUCTS > Catalog > {some product} > Dynamic Product Options > Options Configuration. Click the "edit" icon and find the tooltips. Now you can add the key details without writing a long description for each custom option.

Tooltips in Backend in Magento 2

Dynamic Product Options: Tooltips in Backend

Tooltips on Frontend in Magento 2

Dynamic Product Options: Tooltips on Frontend

Use Images and Swatches

Custom images for options help customers see your products in detail. The extension extends the Magento 2 functionality and allows to add images to radio buttons, checkboxes and dropdowns. Moreover, you can replace these field types of your color or image variants into elegant swatches. Just enable the "Swatch" checkboxes per each option value from Backend. You can also upload custom images or add colors using the built-in color selector.

Images for Options and Color Swatches on Frontend in Magento 2

Dynamic Product Options: Images and Color Swatches on Frontend


Images for Options and Swatches in Backend in Magento 2

Dynamic Product Options: Images and Color Swatches in Backend


There were three main ideas on how to implement advanced custom options into your Magento 2 website. The more effort you put into building your website optimization, the more users will be interested in your services and products.