Introduction
Advanced Custom Options help the admin create a more flexible and user-friendly product configuration experience on the Product Detail Page. With options like Quantity, Sides, Option Images, and Dependencies, the admin can control how customers select, view, and customize product options. These features simplify bulk ordering, side-based designing, and visual option selection. They also help display only relevant options based on customer selections, keeping the PDP clean and easy to use. Overall, Advanced Custom Options improve product personalization and enhance the customer buying experience.
Quantity Option
The Quantity option allows the admin to configure predefined quantity choices that customers can select directly from the Product Detail Page (PDP). This feature simplifies bulk purchasing by enabling customers to choose from fixed quantity options instead of manually entering the desired quantity.
Product Level Configuration
Navigate to the Customizable Options section and add a custom option. Then configure the following fields:[1]
– Option Title: Enter the option title. This title will be visible on the storefront.
– Option Type: Select Radio Buttons as the option type. The Advanced Custom Option (ACO) works only with radio buttons.
– Customizable Options: Select Quantity to enable the advanced quantity option.
Next, configure the option-level settings. Add a row and configure the following options:
– Title: Enter the option title. This field accepts only integer values and is considered the quantity value. For example: 50, 100.
– Price: Enter the price for each option value. The price can be fixed or percentage-based, depending on the selected price type. This price is considered the per-item price, not the total quantity price. This price will be added when the user selects this value.
– Price Type: Select the pricing type for the option: Fixed or Percentage.
Note:
Product price should be 0 and Custom option level tier and special will not support.
If both CQD & ACO(qty) are available then 1st priority will be CQD.
Sides
The admin can configure Side custom options for canvas products. This allows users to customize the product based on the selected sides on the Product Detail Page (PDP). The admin can allow users to design either one side or all sides of the product.
Product Configurations
Navigate to the Customizable Options section and add a custom option. Then configure the following fields:[1]
– Option Title: Enter the option title. This title will be visible on the storefront.
– Option Type: Select Radio Buttons as the option type. The Advanced Custom Option (ACO) works only with radio buttons.
– Customizable Options: Select Side to enable the advanced side option.
Next, configure the option-level settings. Add a row and configure the following options:
– Title: Enter the title for the respective option value.
– One Side: Enable this option to mark the value as a one-side option. When the user selects this value, the one-side design feature will be enabled.
– Price: Configure the price based on the selected price type. This price will be added when the user selects this value.
– Price Type: Select the price type for the option: Percentage or Fixed.
– Quantity: Configure the quantity for the option value.
Note:
To use the Sides custom option, templates must be preloaded for the product. This option is applicable only when the product has 2 or more sides. It is not compatible with printing methods.
Store View
On the PDP, the end user can view the Side custom option. If the user selects All Sides and navigates to the designer tool, all sides will be available for design.[1]
If the end user selects the One Side option and clicks the Design It button, a pop-up will appear when the user lands on the designer tool.
In this pop-up, all configured product sides will be displayed with their template images. The user can select the preferred side and click the Apply button to load it.[2]
Once the selected side is loaded, only that side will be available for design with the configured template.[3]
Option Image
The admin can assign images to option values to help users clearly identify the actual appearance of each value. These images provide a visual reference, making it easier for users to understand how the selected option will look before making a purchase.
Product Level Configurations
To add an option image, navigate to the Custom Option section and add the option first.
Next, configure the option fields, then click the Option Setting icon.[1]
This will open a slider where you can configure the following settings:
– Option Gallery Display Mode: Select the option type as Once Selected or Beside Option. If Once Selected is configured, the value image will be visible only when the option is selected. If Beside Option is selected, all value images will be visible beside the option on the PDP.
– Image Mode: Select the image mode as Overlay.[2]
Save and close the configuration, then move to the value configuration.[3]
Click the image option to open the image slider. In the slider, click Browse to find or drag the image here to upload the image.[4]
Once the image is uploaded, select Base as the image role, then save and close the slider.[5]
Store View
On the PDP, once the option images are configured, the end user can view them either after selecting an option or beside the option.
If the images are configured with the Once Selected option, the image will appear only after the value is selected.[1]
If the images are configured with the Beside Option setting, the images will be displayed directly beside the option.[2]
Dependency option
The admin can set up dependencies to control the visibility of custom options on the Product Detail Page (PDP). With this feature, an option will be displayed only when its dependent option is selected, based on the configured AND or OR condition.
This helps the admin manage custom options more effectively by showing only the relevant options to customers. It keeps the PDP clean, reduces confusion, and improves the overall product selection experience.
Product Level Configuration
Once the custom options and their values are added, click the Dependency button for the respective value. This action will open the Manage Dependencies slider.[1]
Here, the admin can configure dependencies based on the AND or OR condition.
The Dependency Type setting defines the condition for displaying the current option value on the front end.
With AND, all selected parent option values must be selected to display the current option value.[2]
With OR, any one of the selected parent option values can be selected to display the current option value.[3]
The Parent Options field allows the admin to choose the option values that must be selected to display the current option value on the front end.