Dynamic Product Options App for Shopify User Guide

1. Introduction

The document is a User Guide for app Dynamic Product Options created for Shopify websites. It describes the app functionality and provides some tips for a quick start.

The purpose of the Dynamic Product Options app for Shopify is to allow creating complex option-based products. The app provides a simple and convenient way to configure and design custom options the way you need it.

Product Options Editor

The DPO editor is developed to simplify the process of creating custom options. You are able to add an unlimited number of sections and option. Various field types allow to customize product options appearance in different ways. You can reorder options, manage fields' and sections' visibility, apply a conditional logic.

Product Options per Product Variant

The app helps to create and manage custom options for product variants. You may have different custom options for different product variants.

Field Types

The plugin provides a number of various field types: Input Box, Textarea, File, Dropdown, Radio Buttons, Check Boxes, Multiple Select, Date, Image and DIV/HTML. Each field type has common and unique settings improving the editing process. The app also provides the functionality for text-, color-, image-, and rich-text swatches.

Dependent Custom Options

The enhanced conditional logic builder lets to make options dependent ({Hidden Option 2} depends on {Visible Option 1}) and allows to save space on the product view and show the relevant options only. You can apply an unlimited number of dependent fields as well as manage the visibility of all sections.

Associated Custom Options

The app embeds the associated options functionality allowing to create a bundle offer and associate custom options to existing products in your store with full inventory support.

Product Options Templates and Mass Actions

The product options templates functionality allows to add and manage options templates, update custom options within templates using the mass action tools. It helps to copy custom options and apply them to multiple products in bulk, replace or append options within templates.

Advanced Options Pricing, SKUs, Weight and Setup Fees

All custom options can have their own additional prices. You can set up tier prices to provide product options at lower prices for a bulk purchase. You are able to override, remove or add options prices, SKUs or weight to calculate and display necessary data on product pages, cart and order. You can also enable setup fees based on custom options to add a single charge one time only not depending on the quantity in cart.

Images for Dropdown, Radio Buttons, Check Boxes and Multiple Select. Color Selector

The app allows to upload custom images for options of the Dropdown, Radio Buttons, Check Boxes and Multiple Select types. Just pick a necessary image from your PC and apply it to the option. The app also has an ability to reload the base image with the chosen option. You can also add solid colors per option using the color selector.

Text and Color Swatches, Tooltips

The plugin enables text and color swatches per certain field types. You can create tooltips per each option using the WYSIWYG editor to show some hints or additional information with pictures.

Advanced Design Editors

The built-in CSS and JavaScript editors help to customize options' appearance to match your website's design.

2. How to Use

2.1. Settings

The app's settings can be found following Apps > Dynamic Product Options > Settings.

General Settings

• App Enabled on Storefront - Yes/No. Allows to enable or completely disable the app functionality on the Storefront of the site

Storefront Theme Bindings

The section contans all jQuery selectors used on the Storefront to bind the app functionality into your theme. The default values were created based on a bunch of themes available for Shopify. However, if your theme uses some specific selectors you can modify them here. If you have no experience in jQuery/CSS please contact our support for assistance. We will help you adjust the values for your theme.

Storefront Translations

The section allows to modify texts visible to your customers on the Storefront of your site. If you are running a non-English site you can make all translations here.

2.2. List of Products

The filterable and sortable list of all products is available following Apps > Dynamic Product Options > Product Options.

In column "Has Options" you can see which product already have custom options. Filter the table by column "Has Options" to see only product having custom options. To edit options click button "Edit Options" next to the product.

2.2.1. Mass Actions

The app provides mass actions to apply the same action to multiple products at once. Select products on the grid and pick a necessary action in the "Mass Actions" dropdown.

2.2.1.1. Apply Template 1 to Many

The mass action allows to load custom options from an existing option template into multiple products in bulk.

In the appeared popup:

1. Select a template you want to copy custom options from.
2. Choose one of the following 4 methods:

Replace options and leave them editable. The template replaces custom options in the selected products. The options remain editable in the products.

Append options and leave them editable. Custom options from the template are added at the end of existing options in the products. The options remain editable. Using this method you can apply multiple templates to the same product at the same time.

Replace options and associate to template. Like in the first method the custom options from the template are copied into the selected products. The options are associated to the template and can't be edited. Changes in the template are automatically applied to all associated products. This method is useful when the same template is associated to many products at the same time. You no longer need to update each product individually. Simply make changes in the template.

Append options and associate to template. This method combines the first and the third methods. You can add multiple templates to the same product at the same time. Options are associated to the template and can't be changed within products. All changes are made through templates.

2.2.1.2. Copy Custom Options 1 to Many

The "Copy Custom Options 1 to Many" action allows to copy custom options between products without using templates. Select products you need to apply options to, and choose action "Copy Custom Options 1 to Many".

In the appeared popup click button "Pick a Product" to select a product you want to copy options from. Use the filter to find a necessary product by name or SKU and click button "+ Select".

Keep in mind, the action copies both the custom options and the price formulas.

2.2.1.3. Copy Formulas 1 to Many

The action copies only formulas between products. This action is useful when you need the same formulas with slightly different custom options in products.

In appeared popup click button "Pick a Product" and select a product you want to copy price formulas from.

2.2.1.4. Remove Options in Selected products

This mass action removes custom options and price formulas from selected products.

2.3. Product Options Configuration

You can edit custom options for each product following Apps > Product Options > {Edit Options}

The page is divided into the following blocks:

1. Custom options management
2. CSS and JavaScript editors
3. Price formula management
4. Product information and the variant scope switcher
5. The form Settings
6. Option template management

2.3.1. Product Information and the variant scope switcher

The block displays the image, name and the price of product you currently edit options for. If the product has variants you may select them in the "Variant Scope" dropdown. By default, the "Default Config" value selected, which means the option configuration is applied to all variant of the product. If you want to override options for a specific variant select it in the dropdown. This way, you can configure options for each variant individually.

2.3.2. Form Settings

In this block you can select the form style and appearance, and set the price, SKU, and the shipping weight policies.

2.3.2.1. Form style and the appearance

The following Form Styles are available:

• List DIV-based – simple structure. Options go one per row.
• Table-based – table structure. Options go in a table in several rows and columns.
• Table-based with sections – table structure. Options are divided into sections, each having its own title, visibility conditions, and table with options.

The app provides the following form appearances:

• On Product View – the options are displayed directly on the product view on the Storefront.
• In a Popup after clicking "Add to Cart" – the options are displayed in a popup after clicking button "Add to Cart".
• In a Popup after clicking "Configure" – the options are displayed in a popup after clicking button "Configure" on the product view.

2.3.2.2. Relative Price, Absolute Price, Fixed Price

The following price policies are available:

• Relative Pricing. The final price includes the initial product price and its all paid custom options.
• Absolute Pricing. The initial product price is ignored. The final price will be the sum of all paid custom options.
• Fixed Pricing – vice versa, the options' prices are ignored. The final price will always be the product's initial price.

2.3.2.3. Relative SKU, Absolute SKU, Fixed SKU

The final SKU is displayed in the order and can be generated in the following three ways:

Relative SKU. The product SKU and SKUs of all selected custom options are combined. The final SKU will look like it follows: {baseSku}-{option3Sku}-{option5Sku}-etc.

Absolute SKU. The product's base SKU is ignored. The final SKU will only have SKUs of selected options, i.e.: {option3SKU}-{option5SKU}-etc.

Fixed SKU. The options' SKUs are ignored. The final SKU will always be the product's base SKU.

2.3.2.4. Relative Weight, Absolute Weight, Fixed Weight

A custom options may have its own shipping weight. You can use one of the following weight policies:

Relative Weight. The final weight includes the product's base weight and the weight of all selected custom options.

Absolute Weight. The product's base weight is ignored. The final weight will be the sum of weights of all selected custom options only.

Fixed Weight. The options' weights are ignored. The final weight will always be the product's base weight.

2.3.3. Option Template Management

This area allows to create, edit and load custom option templates into the product.

Load Existing Template – select a template you want to load custom options from.

Method – provides four loading methods:

• Replace and leave options editable – the chosen template replaces all current custom options. The options remain editable.
• Append and leave options editable – the chosen template appends custom options to the product without removing existing ones. The options remain editable.
• Replace and associate to template – the chosen template replaces the current custom options disabling the "Options Configuration" section. The options are inherited from the template and can't be edited within the product. You can make all necessary changes within the options template only and then apply them to associated product(s).
• Append and associate to template – the chosen template appends custom options to the product disabling the "Options Configuration" section. You can make necessary changes within the template only and then apply them to associated product(s).

Button "Load" – click to load the selected template using the selected method.

Update Existing Template – updates the chosen template with the current option configuration. Select a necessary template in the dropdown and click "Update".

Or Create a New Template – creates a new template based on the current option configuration. Enter a new template name in input box and click "Create New Template".

2.3.4. Options Configuration

By default there is one section with an empty 3x3 table. You can change the table size using dropdowns "Columns" and "Rows". If you need more sections click the "Add New Section" button. Each section has its own table and options. Custom options are created within the table cells. Hover an empty cell and click the "pen" icon to configure a new custom option. See a picture below.

You can move custom options. Simply drag&drop them to a new place.

Section Label – the section title your customers will see on the Storefront. To remove the entire section click the "Remove" link. To reorder sections click the "Move Up" and "Move Down" links respectively.

The entire section may depend on a specific field and visibility condition. For instance, you want to hide/unhide the entire section if a specific option selected by the customer. In this case set the default visibility of the section to Visible or Hidden. And set the condition when it should turn the state, i.e. make it Hidden or Visible IF {condition}... Click the "pen" icon to build a condition.

To remove all custom options and sections click the "Remove All" button.

2.3.4.1. General Settings

All options share a number of the same settings while the other have unique settings. Below are common setting:

• Copy Configuration From – you can copy the option configuration from another option.
• Title – the option label your customers will see on the Storefront.
• Field ID – unique field ID. Used for dependency rules.
• Required – select if the option is required or optional.
• Price – if the option has a money value set the price here. Price could be positive or negative.
• Price Type – set if the price is fixed or a percent of the product's base price.
• Sku – enter the option's Sku if needed.
• Customer Group – choose which customer groups will see the option.
• Visibility, Make it – this setting is for conditional branching. You can make a field hidden by default and make it visible on a specific condition.
• Tooltip – appears when customer hovers the custom option. Allows to add description, tables, images, links via the built-in WYSIWYG editor.
• Comment – enter your comments here. Will be displayed below the custom option on the Storefront.
• CSS Class – if you want to style the field using a custom CSS rule and a CSS class here.
• HTML Argument – add additional arguments to the HTML tag of the field.

Click button "Apply" to save the option, "Cancel" to go back without changing the option or "Remove" to delete the option.

2.3.4.2. Properties of Input Box

To create an input box select "Input Box" in dropdown "Field Type". The following additional settings will be available (for the general settings please see Chapter 2.3.4.1):

• Validation – choose the validation rule. The following validation rules are available:

• Email
• Number
• Money
• Phone
• Zip Code

• Max Len – the maximum number of characters allowed to be entered.
• Default Value – the text to be displayed in the field by default.
• Hide on focus – the default text will disappear as soon as the field is on focus, when this checkbox is selected.

2.3.4.3. Properties of Textarea

To create a textarea select "Textarea" in dropdown "Field Type". The following additional settings will be available (for the general settings please see Chapter 2.3.4.1):

• Default Value – the text to be displayed in the field by default.
• Hide on focus – the default text will disappear as soon as the field is on focus, when this checkbox is selected.

2.3.4.4. Properties of File

To add a file select "File" in dropdown "Field Type". The following additional settings will be available (for the general settings please see Chapter 2.3.4.1):

• Allowed File Extensions – enter which file types are allowed for uploading. For instance, png, jpg, jpeg, gif, etc. Add allowed file extensions separated by comma.

2.3.4.5. Properties of Dropdown

To add a dropdown select "Dropdown" in "Field Type". For the general settings please see Chapter 2.3.4.1.

To add more options click link "+ Add Option".

Each option has the following settings:

• -- Please Select -- – default option value.
• Title – the option label displayed on the Storefront.

• Image SRC – allows to upload an image for the option. Click button "Upload Image" and pick a necessary image file from your computer.
• Color – allows to pick a solid color using a color selector.
• Base Img? – allows to replace the base product image with the chosen option.
• Price – the option price.
• Price Type – the price type, fixed or percentage.
• Onetime Fee? – if selected the option price is added only once regardless of the product quantity in the cart.
• Tier – set up tier prices if you provide a lower price for bulk. Click the "pen" icon to edit tier prices.

Each dropdown option may have its own quantity field. Check the "Qty" checkbox to show the Quantity inputbox next to the option on the Storefront. If option has no quantity field, tier prices will rely on the quantity of the product itself.

To add another quantity break click link "+ Add Tier Price". In field "Min QTY" enter the minimum quantity the tier price is set for. Then enter the tier price itself in column "Price".

In dropdown "Price Type" choose if the tier price is a fixed amount or a percent from the product's base price. Then click "Apply", or "Cancel" to discard the changes. To remove a single tier price click the "Remove" link.

• Sku/Product Id – set a fixed SKU for option or associate the option to another product.
• Weight – for a tangible option set weight here. It will be added to the product's base weight for a proper shipping cost calculation on checkout.
• Qty – check this if option has its own quantity field.
• Def – check this to select the option by default.
• Visibility, Make it… If… – if the option depends on other options create a dependency rule here.
• Tooltip – appears when customer hovers the custom option. Allows to add description, tables, images, links via the built-in WYSIWYG editor.
• User Groups – select which customer groups will see the option.
• CSS Class – for custom CSS rules add your custom CSS class here.
• Order – set the options' order or use the arrows to reorder.
• Del – removes the option.

2.3.4.6. Properties of Radio Buttons

To add radio buttons select "Radio Buttons" in dropdown "Field Type". For the general settings please see Chapter 2.3.4.1. For additional settings see Chapter 2.3.4.5.

2.3.4.7. Properties of Check Boxes

To add checkboxes select "Check Boxes" in dropdown "Field Type". For the general settings please see Chapter 2.3.4.1. For additional settings see Chapter 2.3.4.5.

2.3.4.8. Properties of Multiple Select

To add a multiple select choose "Multiple Select" in dropdown "Field Type". For the general settings please see Chapter 2.3.4.1. For additional settings see Chapter 2.3.4.5.

2.3.4.9. Properties of Date

To add a date selection option choose "Date" in dropdown "Field Type". For the general settings please see Chapter 2.3.4.1. This option adds an input box with a date selector (calendar) on the Storefront.

2.3.4.10. Properties of Image

You can add an image by choosing "Image" in dropdown "Field Type". The following additional settings will be available (for the general settings please see Chapter 2.3.4.1):

• Upload Image – select an image to upload.
• Image ALT – add an alternate text for the image.
• Image Title – enter the image title.

2.3.4.11. Properties of DIV/HTML Text

With this field you can add your own HTML elements on the form, such as tables, images, videos, additional JS widgets, etc.

 

2.3.5. CSS Adjustment and Extra JavaScript textareas (for advanced use only)

The CSS Adjustment textarea allows to add custom CSS styles. You can modify the look of options, e.g. colors, font size, margins, background, etc.

The Extra JavaScript textarea is used to embed custom JS functionality to form, like 3rd-party widgets, AJAX, custom validation, etc. You need to have experience in JavaScript to use it.

2.4. Customer Groups

To manage customer groups go to Apps > Dynamic Product Options > Customer Groups.

The table displays all groups including the system "NOT LOGGED IN" and "Registered" ones.

To create a new group click button "Create New Group". To edit group click button "Edit Group" next to the group.

To remove group click "Remove" next to the group. The system groups can't be removed. To remove multiple groups together select them on the grid and choose mass action "Remove Groups".

2.4.1. Create/Edit Group

To create a new group enter the group name and click button "Create Group".

To remove the current group click button "Remove Group".

2.4.2. Add Customers to Group

After group has been created, you can add customers into it. Click button "Add Customer". A modal window will appear with the list of all customers registered in your store.

Search customers by the last or first name, or by email address. Then click button "+ Add Customer to Group".

To remove a customer from the group click button "Remove from Group".

2.5 Product Option Templates

The app is aimed to simplify options editing for multiple products and provides the advanced option template functionality. All created option templates are stored following: Apps > Dynamic Product Options > Templates.

To create a new template click button "Create New Template".

To edit existing template click button "Edit Template" next to the template.

If you need a copy of a template click button "Clone". It's useful in cases when you need another template with only a few changes in it.

To remove a template click button "Remove". If you want to remove multiple templates at once use mass action "Remove Templates".

2.5.1. Edit Template

The custom options in a template are configured the same way as in products.

The editing area is divided into the following blocks:

• Template Configuration. Set a unique template name here.
• Settings. Set the form style, appearance, the price-, SKU-, and weight policies here.
• Custom Option Editor. Configure options here.
• CSS and JavaScript editors. Adjust the form CSS and add your custom JavaScript here.

Click button "Back" to navigate to the list of all templates.

To remove the template click button "Remove Template".

Save changes by clicking the "Save" button. If you want to apply changes to all associated products click button "Save & Apply to Products". The button is visible only if the template is assigned to at least one product. After clicking the button you will see a progress bar. Please wait until you get 100%.

2.6. Dependent Custom Options

With this app you can create dependent custom options. The functionality allows to save space on the product view or offer customers relevant options only by making one option dependent on the other one. You are able to create a chain of dependent options, manage the visibility of a section or hide the whole sections with fields in it based on the previous selection.

To create dependent options a special condition should be set. Please notice that the hidden options are marked with the "Hidden" label in the screenshot above.

To set the conditional branching you can do the following:

1. Choose a field to make it dependent on the Storefront.
2. Open the field for editing and find settings "Visibility" (displays, hides or disables the field on the Storefront), "Make it" (displays or hides the field if all conditions are met) and "If" (sets special conditions).

3. Set Visibility = Hidden, Make it = Visible and open the condition editor via the "Edit" icon.
4. Click "Add" and choose a field in dropdown to add a condition to.
5. Click link "is" and choose a way the condition will be met.
6. Click on "…" and enter the option's title in the chosen field. The entered option will manage the visibility of the dependent one. The whole condition will look like (F2 =='Leno Weave'), where "F2" is field's ID, "==" is the condition, "Leno Weave" is the option value the current field relies on.
7. Click buttons "Apply" and save the changes.

You can create a complex chain of dependent custom options as well add condition combinations relying on multiple fields at the same time.

2.7. Product Associated Options

The Dynamic Product Options app allows to offer more relevant products to your customers by associating options to other products or creating a bundle offer.

To create an associated custom option do the following:

1. Create an option of one of the following types: checkbox, radio button, dropdown, multiple select.
2. In column "Sku/Product Id" click "+Link" to find a necessary product in a popup. Click "+ Select" to associate the product with the option. The option image, title, price, SKU properties will be populated automatically.

3. To override the associated product's title, price and price type click the "edit" icon next to the "Sku/Product Id" column.
4. Click "Apply" and save the changes.

If custom option is associated to a product and is pinned to it at the same time the option's price, title and SKU will be updated on the Storefront automatically once product changed. The SKU of the associated product will be displayed next to the option in cart and in order.

Customer will see the additional options on the same product view. If an option is out of stock it will be grayed out and disabled on the Storefront. Customer won't be able to select it. If the option has been selected the associated product's inventory will be deducted on checkout. You get the full inventory support on the options' level.

In addition, you can enable individual quantities for options, i.e. let customers choose how many items they want to order. The option price will be multiplied by the quantity selected, i.e. {option qty} x {option price}.

2.8. Text, Image, Color and Rich-Text Swatches

The app enhances the color and text swatches functionality allowing to use a visual color selector per option, enable the swatch setting or reload the Base Image.

You can upload images or set solid colors via the color selector. To enable the color or image swatch functionality on the Storefront, mark checkbox in the "Swatch" column. The app allows to replace the base image with uploaded pictures by checking setting "Base Img?".

To create text swatches do not select image or color. Just mark checkbox in the "Swatch" column.

To create Rich-Text swatches click on the "pen" icon in the "Swatch" column. A WYSIWYG Editor will appear. You can design the swatch the way you need it.

2.9. Swatches in a Dropdown

The app allows to show image and color swatches in a dropdown. Create an option of the "Dropdown" type. Then configure color or image swatches in it. Here is how it will look on the Storefront:

The options in the dropdown are searchable. Customers can easily find the necessary option by typing a keyword.

2.10. Tooltips

Tooltips allow to provide more information about each specific option when customer hovers the option. You can add notes, links, tables, images, videos to each option or option value by using the WYSIWYG editor. Just click the "Edit" icon in the "Tooltip" column to create a tooltip.

This is what the tooltips look like on the Storefront:

 

 

2.11. Math Formula Pricing

The purpose of the math formula pricing is to provide more flexibility with the product price calculation. You can now use any custom mathematical formula to calculate the final product price. The input to formula is custom options the customer chooses on the form.

The price formula can be of any complexity, can have math functions and constants, have conditional branching.

The feature will be useful to those who needs a custom method of price calculation not supported by Shopify, such as:

• Price calculation based on the object size or dimensions
• Complex tier price calculation based on quantity and the custom options selected
• Single setup fees for a bulk purchase not dependent on the quantity ordered
• Additional fees that depend on multiple custom options at the same time

2.11.1. Formula Creation

Formulas can be created and edited for each product and variant individually following:
Apps -> Dynamic Product Options -> {product} -> Price Formulas

Click the "Add New Formula" button to create a new formula:

2.11.2. Formula Editor Overview

The form has the following elements:

Add New Formula - button. Product can have multiple accumulative formulas executed by chain. Click this button if you want to add another formula to the product. Make sure to set the correct order in field Position.

Delete Formula - button. If you no longer need a formula you can delete it using this button. You should save the product to finish deletion.

Name - text field. Enter the formula title here. Not visible on frontend.

Position - text field. If you have multiple formulas in the same product you should set the correct order of execution.

Status - dropdown. Formula is enabled by default. You may temporarily disable it using this dropdown.

Date From - Date To - range selector with calendar. If you plan to have a limited promotion specify the "from-to" dates when the formula should be active. You can set both, either, or none dates.

Customer Group - multiple list box. Choose groups the formula is active for. All Groups is set by default.

Apply Formula To - dropdown. This dropdown allows setting what the calculated value should be applied to. If "Item Price" selected the formula result will be applied to the item price. The row total will be calculated as the item price multiplied by the quantity. If "Row Total" selected the formula result will be applied to the row total not depending on the quantity selected. The item price will be calculated as the division of the calculated row total and the quantity.

Show Product Price on Frontend as - dropdown. Visible if "Row Total" is selected in the previous dropdown. If "Default" selected the customer will see the "price per item" on the product view on frontend. If "Multiplied by the QTY" selected the customer will see the row total value. It's useful when you calculate the package price based on multiple conditions, to show the final price to the customer before adding product to cart.

Condition - text area. Condition defines when formula should be executed, for example:
{width} > 0 && {len} > 0 - making sure the width and the length entered are positive
{print_label} && {txt.length} >= 15 || {print_default} - if customer has selected to print label and (&&) entered 15 or more characters of text, or (||) the default label selected.

Need help on condition syntax? - link. Shows tips on the condition syntax.

Run always - checkbox. This checkbox will disable the Condition textarea, meaning the formula will always run without conditions. Also, you will not be able to fork the condition using button "Else".

Price= - text area. Enter your formula here. It should result to a float value. For example:
{width} * {len} * 0.8 - calculate the area of a rectangle and multiply it by the rate
PI * sqrt({radius}) * 0.8 - calculate the area of a circle and multiply it by the rate

Need help on price syntax? - link. Shows a hint on the price syntax.

Set formula for the product shipping weight if the condition is TRUE - checkbox. Check this checkbox if you want to override the product shipping weight. If checked a text area appears below it, where you enter your custom formula for the product weight.

Else? - button. Using this button you can fork your condition and add another formula. New set of fields will appear for Condition, Formula, and Weight. For example, custom tier price for quantities up to 10, 20, and 30 and if length is 20 or greater:
if ({qty} < 10 && {len} >= 20) Price = 20;
else if ({qty} < 20 && {len} >= 20) Price = 18;
else if ({qty} < 30 && {len} >= 20) Price = 16;
etc.

Disallow purchasing the product if the following criteria are met: Formula and error message - text boxes. Your custom validation criteria. Enter the formula and the error message. You can create multiple validation messages. Examples:
if ({width} <= 0 || {len} <= 0) Error = "Width and length should be greater than 0"
if (floor({width}) != {width}) Error = "Width should be integer"
etc.

2.11.3. Using Custom Options in Formulas

You can pass the data entered by customer via the custom option variables. Variables are enclosed into curly braces: {variable}. All variables currently supported by the app are listed in the Appendix A.

To use custom option in formula the option should have a unique SKU.

In the screenshot below we have 2 options - Width and Length, SKUs are "width" and "len" accordingly. Our variables will be {width} and {len}:

If custom option is a Field or Textarea the dynamic variable returns a string. If string is numeric it is converted into the number automatically.

If custom option is a Dropdown, Checkbox, or Radio, i.e. has sub-options, the variables will return the sub-option title. You can use such variables as Boolean variables, i.e.:
if ({red} || {blue}) Price = 10;
else if ({green} && {qty} > 20) Price = 8;

If you have a Dropdown with numeric sub-options, you can use the values in the formula as well:
if ({size10} || {size20} || {size30}) Price = {size10} * 0.5 + {size20} * 0.4 + {size30} * 0.3;

If variable is not set it returns 0/false.

You can get the option price using variable {sku.price}, for example:
if ({leather}) Price = {leather.price};
if ({cloth}) Price = {cloth.price};

If your price relies on the length of text entered you can use variable {sku.length}, for example:
if ({custom_text.length} > 0) Price = {custom_text.length} * 0.02;

If you enabled quantities for options you can use variable {sku.qty}, for example:
if ({ram}) Price = 500 + {ram.qty} * 20;

2.11.4. Other variables

Selected quantity: {qty}
Price after product options selected: {configured_price}
Price before options selected: {initial_price}
Price after all calculations applied: {price}

2.11.5. Accumulative Price

If you have a long formula it is possible to set up a few smaller ones and make the price accumulative. Create multiple formulas by clicking "Add New Formula" button. Set the correct order in field Position. The accumulative price is summed via variable {price}. Each next formula has {price} calculated by the previous formula. Example:

[Formula 1, position 1] - Material price
if ({cloth} && {width} > 0 && {len} > 0) Price = {width} * {len} * 5;
else if ({leather} && {width} > 0 && {len} > 0) Price = {width} * {len} * 10;

[Formula 2, position 2] - if chair selected in addition
if ({chair}) Price = {price} + 50 * {chair.qty}

[Formula 3, position 3] - discount for a bulk purchase
if ({qty} < 10) Price = {price} * 1;
else if ({qty} < 20) Price = {price} * 0.9;
else if ({qty} < 30) Price = {price} * 0.8;
else Price = {price} * 0.7;

2.11.6. Sub-Conditions

The app allows to have conditions directly within the formula using a special syntax. For example:
Price = {price} + ({size10} ? 24.99 : 0) + ({size20} ? 44.99 : 0) + ({size30} ? 64.99 : 0);

Here, it adds the custom option price to the final price depending on the dropdown option selected.

2.11.7. Mathematical functions

You can use math functions like sin, cos, tan, etc. in your formulas or conditions. For example:
if ({side1} > 0 && {size2} > 0 && {angle} > 10) Price=0.5 *{size1} *{size2} *sin({angle}) *{rate}

Please find the list of all supported math functions in Appendix A.

Appendix A

Use the following condition and math operators:

Operator	Explanation	Example
()	Sub condition	( {sku1} + {sku2} ) / PI
+	Addition	{sku1} + 10
-	Subtraction	{sku1} - 10
*	Multiplication	2 * PI * {sku_radius}
/	Division	{sku1} / 1.5

 

Math functions:

Function	Explanation
abs(x)	Returns the absolute value of x
acos(x)	Returns the arccosine of x, in radians
asin(x)	Returns the arcsine of x, in radians
atan(x)	Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians
atan2(y,x)	Returns the arctangent of the quotient of its arguments
ceil(x)	Returns x, rounded upwards to the nearest integer
cos(x)	Returns the cosine of x (x is in radians)
exp(x)	Returns the value of Ex
floor(x)	Returns x, rounded downwards to the nearest integer
log(x)	Returns the natural logarithm (base E) of x
max(x,y,z,...,n)	Returns the number with the highest value
min(x,y,z,...,n)	Returns the number with the lowest value
pow(x,y)	Returns the value of x to the power of y
random()	Returns a random number between 0 and 1
round(x)	Rounds x to the nearest integer
sin(x)	Returns the sine of x (x is in radians)
sqrt(x)	Returns the square root of x
tan(x)	Returns the tangent of an angle

 

Constants:

Constant	Explanation
E	Returns Euler's number (approx. 2.718)
LN2	Returns the natural logarithm of 2 (approx. 0.693)
LN10	Returns the natural logarithm of 10 (approx. 2.302)
LOG2E	Returns the base-2 logarithm of E (approx. 1.442)
LOG10E	Returns the base-10 logarithm of E (approx. 0.434)
PI	Returns PI (approx. 3.14)
SQRT1_2	Returns the square root of 1/2 (approx. 0.707)
SQRT2	Returns the square root of 2 (approx. 1.414)

 

Variables:

Variable	Explanation
{configured_price}	Price after product options selected
{initial_price}	Price before options selected
{price}	Price after all calculations applied
{option_sku}	Call any product option by its SKU enclosed into {}
{option_sku.qty}	The quantity of sub-option
{option_sku.price}	Get the price of option by sku
{option_sku.length}	Get the length of entered text
{qty}	Product quantity selected