Conditional Logic (Aris Options): Option B is shown/ hidden according to the value of option A
Conditional Logic (Aris and Shopify): Option B is shown/ hidden according to the value of option A (Aris and Shopify)

\n","Overview","cmrydxtfg000ncg7kzfd08uc5","building-options","label","articles",[755,756,757,758,759,760,761,762,18,763,764,765],{"_164":648,"_166":649,"_168":650,"_170":651,"_734":880,"_736":737,"_738":767,"_740":741,"_742":881,"_744":-5},{"_164":644,"_166":645,"_168":646,"_170":647,"_734":876,"_736":737,"_738":739,"_740":741,"_742":877,"_744":649},{"_164":640,"_166":641,"_168":642,"_170":643,"_734":857,"_736":737,"_738":858,"_740":741,"_742":859,"_744":649},{"_164":636,"_166":637,"_168":638,"_170":639,"_734":853,"_736":737,"_738":739,"_740":741,"_742":854,"_744":649},{"_164":632,"_166":633,"_168":634,"_170":635,"_734":841,"_736":737,"_738":739,"_740":741,"_742":842,"_744":-5},{"_164":628,"_166":629,"_168":630,"_170":631,"_734":820,"_736":737,"_738":821,"_740":741,"_742":822,"_744":-5},{"_164":624,"_166":625,"_168":626,"_170":627,"_734":806,"_736":737,"_738":739,"_740":741,"_742":807,"_744":-5},{"_164":620,"_166":621,"_168":622,"_170":623,"_734":797,"_736":737,"_738":798,"_740":741,"_742":799,"_744":625},{"_164":613,"_166":614,"_168":615,"_170":616,"_734":785,"_736":737,"_738":767,"_740":741,"_742":786,"_744":24},{"_164":609,"_166":610,"_168":611,"_170":612,"_734":781,"_736":737,"_738":739,"_740":741,"_742":782,"_744":24},{"_164":604,"_166":605,"_168":606,"_170":607,"_734":766,"_736":737,"_738":767,"_740":741,"_742":768,"_744":-5},[769,770,771],"3 min",[],{"_164":778,"_747":779,"_490":780},{"_164":775,"_747":776,"_490":777},{"_164":772,"_747":773,"_490":774},"iii-differences-between-the-3-types-of-option-url","

Feature / Behavior	Product Group	Only URL	Allowed Opened URL
Purpose	Link option values to other products in your store	Redirect customers to any internal or external URL	Combine URL redirection with option selection (can still be added to cart)
Navigation	Seamless switching between related products	Opens the assigned link directly	Opens the assigned link directly (hyperlink), while keeping the option selectable
Add to Cart	Yes, customers can add the selected product	No, clicking redirects to the link only	Yes, option value can still be added to cart along with the linked URL
Use Cases	Variants across products (e.g., Shoe 1, Shoe 2, Shoe 3)	Redirect to collection pages, product guides, or external resources	Show extra info (e.g., size guide link) while still letting customers purchase the option
Display Options	Standard option value	Standard option value + linked URL	- Clickable Option Value (turns value into hyperlink) - Separate URL Label (value + hyperlink)

","III. Differences between the 3 Types of Option URL","ii-how-to-set-it-up","

Step 1: Go to Aris Option, click on Create Option Set

Step 2: Add Options, you can pick any Option types in the Single Selection (Dropdown, Color/Image Swatches, Radio Button).
Note: The feature \"Allowed open URL\" will also be available on the Multiple Selections Option types.

Step 3: Fill in the Option values
You can fill in the preferable number of values that you want to have, and it's worth noting that Group product and Only URL feature will not work with \"Add charge\" and \"Bundle variant\".

Step 4: Assign Products/URLs to the values.

Product Group

After filling in the values, clicking on \"Add products\" to assign the products to those values successfully. Additionally, you can still \"Add products\" without option values.

\n
The set up of it can be seen in this vid: https://youtu.be/pPX-zl4I74M
\n

This feature enables seamless navigation between products within your store, as demonstrated in the first section of the product page.

Only URL

After filling in the values, putting in the URL that you want to have in the blank boxes besides the option values. This could be any links that you want, no restrictions in forms, origins, etc.

\n
The set up of it can be seen in this vid:
\n

The feature helps directing customer to the broader space where you can share the main ideas of the product with them or directing the customer to another section of the store.

Allowed opened URL

After filling in the values, putting in the URL that you want in the blank boxes besides the option value, which is similar to only URL. You can either choose \"Clickable option value\" (a hyperlink text), or \"Separate URL label\" (Divide the value into 2 lines, one is the variant title and the other is a hyperlink text)

This feature share the main function with the Only URL feature, however, it can be added to cart.
So it will be the combination between Only URL and the normal option value.
And you can check out how it works on the last section here

\n
The set up of it can be seen in this vid: https://youtu.be/g6HyzGOYk90
\n

Step 5: Choose the Assigned products and hit \"Save\"

","II. How to set it up?","i-what-is-option-url-feature","

Using Option URL feature will facilitate customers in seamlessly transitioning between different sites.
They can choose products that share certain commonalities (e.g., design, print, etc.) but differ in other aspects (e.g., materials, product types, colors, etc.), or putting in different URLs to share more information about the product. These are the examples that you can check:

\n","I. What is Option URL feature",[783],[],{"_164":746,"_747":784,"_490":749},"

Scenario: Only if customers choose a Colors, the Sizes responsive to the Colors will show. You can check out our Demo product to see how it works 😊

Here is the step-by-step instruction on how to set up the Conditional logic

\n
Kindly note that for the conditional logic to work, the product should have both Shopify Option and Aris Option
\n

Step 1: Creating Shopify Option

In the product that the conditional logic will apply, going to the Variants section, filling the variant value.
In this case, I will put in 3 Colors, Green Yellow and Red, then hit Save (Option A)

Step 2: Creating Aris Option

Doing the same steps as in the Guideline of Creating Option Set, then putting in the same number of Options as the number of Logic that you want to create.
In this case, I have 3 colors so I created 3 options Size for it (and I called this Option B)

In the Set up of Option B, click on Create Conditional logic

Then choose the Option that you want to have the Size linked with, putting in their value.
For example, I have \"Size for Green\" option and I will link it to Shopify variants called \"Green\"

Doing the same thing with other sizes, and choose the Product that you want to have this Option to show on, then hit \"Save\"

You can check on the result in the Preview section (on the right side of the options) or you can open the online Product page and see how the Conditional logic works.

\n",[787,788,789],[],{"_164":746,"_747":796,"_490":749},{"_164":793,"_747":794,"_490":795},{"_164":790,"_747":791,"_490":792},"rules-and-conditions","

You can define rules that determine when to Show, Hide or Disable a specific option.

\n
Show this option if All / Any of the following match
\n

All → The condition will apply only when every rule you add is true.
Example: Show “Engraving Font” only if “Add Engraving” is Yes and “Material” is Wood.
Any → The condition will apply if at least one rule is true.
Example: Show “Gift Wrap” if “Additional Gift” is Mug or Notebook.

Condition Types Explained


Condition Type	Description	Example
contains	True if the selected option includes the specified value.	Show if Size option contains Small (Medium Small will be accepted)
does not contain	True if the selected option does not include the specified value.	Show if Size option does not contain Small. (Medium Small won't be accepted)
is equal to	True if the selected option’s value exactly matches the specified value.	Show if Size option is equal to Small (Medium Small won't be accepted)
is not equal to	True if the selected option’s value does not match the specified value.	Show if Size option is not equal to Small (Medium Small will be accepted)
starts with	True if the selected option’s value begins with the specified text.	Show if Size option starts with S (Small will be accepted)
ends with	True if the selected option’s value ends with the specified text.	Show if Size option ends with l (Medium Small will be accepted)
greater than	True if the selected option’s numeric value is higher than the entered number.	Show if Quantity option is greater than 5.
less than	True if the selected option’s numeric value is lower than the entered number.	Show if Quantity option is less than 3.
has any value	True if the selected option has any value selected or entered.	Show if Custom Text option os input.
has no value	True if the selected option is empty or not selected.	Show if Custom Text option hasn't been input

","Rules and conditions","how-to-set-up-the-conditional-logic","

\n
Kindly note that, for the Conditional logic feature to work, all related options need to be in the same Option Set.
\n

1. In the Aris Option tab -> Option Set section -> click the Create Option Set button -> Click Add option button -> Choose your Option Type

2. To begin, you need to create your primary option (Option A). In this case, we created a radio button option asking if the customer would like to add a card.

3. Then, create the second option as a text option (Option B) so customers can fill in their message.

4. Within the second option (Option B), click Create Conditional logic

Then, pick the Label on Cart of the option that you would like your second option (Option B) to depend on from the dropdown list.

Please choose the correct Label on Cart and make sure that it contains your affirmative option value above.

\n
Please note that every time you change any data of the options related to the Conditional logic, you will need to update the conditions again to ensure everything matches and works smoothly.
\n

5. Hit Save to finish the option B setup.

6. In the Select product section, choose the products you want this Option Set to apply to.

7. Hit the Save button on the top right corner to save the Option Set and you're all done!

You can check on the result in the Preview section (on the right side of the options) or you can open the online Product page and see how the Conditional logic works.

\n
The set up of it can be seen in this vid: https://youtu.be/m9Sbhz3j5z0
\n

\n","How to set up the Conditional logic","

Scenario: Only if customers choose to add a card, the option to put in a message on the card will show. You can check out our Demo product to see how it works 😊

",[800,801],"4 min",[],{"_164":746,"_747":805,"_490":749},{"_164":802,"_747":803,"_490":804},"export-translations","

1. Go to the Aris Option page and select the option sets you want to export.

Click Export → Translation.

2. Choose the export range:

All option sets on the current page
All option sets in the store
Only selected sets

3. Select language and Click Export again to download the CSV file.

You will receive a CSV file containing all the option sets with their translation fields. This file can be shared with translators or modified directly.

Import Translations

1. Navigate to the Aris Option page and select Import → Translation.

2. Choose Add file and then Select your CSV file containing the updated translations.

3. Click Open to upload the file, then click Upload to import it into option sets.

Review the imported data, then click Save so the translations will apply across your storefront.

CSV Translation Fields

When exporting or importing translations, the CSV will include special fields for localized content, in addition to the core option fields.

This is a German translation example. The language should change according to your selection during import/export.

Field	Type	Description
no. - German	Number	Sequence number for easier reference. Not required to edit.
row_type	Text	Defines whether the row is an `option_set` or an `option`. System field – do not edit.
Locale id	String (UUID)	Locale identifier. Auto-generated by system – do not edit.
Option set id	String (UUID)	Unique ID of the option set. Auto-generated – do not edit.
Option set name	Text	The name of the option set. Auto-generated – do not edit.
Option key	String	Unique key of the option. Auto-generated – do not edit.
Value id	String (UUID)	ID for specific values in options. Auto-generated – do not edit.
Automated key	String	Used for automated options. System field – do not edit.
Option type	Text	Type of option (e.g., `text`, `font`, `swatch_multi_image`). System field – do not edit.
Label on product (English - default)	Text	Default label shown on the product page (English). Auto-filled – do not edit.
Label on product (German)	Text	The translation of product label in German. Customer should fill this.
Label on cart (English - default)	Text	Default label shown in the cart (English). Auto-filled – do not edit.
Label on cart (German)	Text	The translation of cart label in German. Customer should fill this.
Value (English - default)	Text	Default option value in English. Auto-filled – do not edit.
Value (German)	Text	The translation of option value in German. Customer should fill this.
Value description (English - default)	Text	Default description of the value (English). Auto-filled – do not edit.
Value description (German)	Text	The translation of the value description in German. Customer should fill this.
Placeholder (English - default)	Text	Default placeholder text (English). Auto-filled – do not edit.
Placeholder (German)	Text	The translation of placeholder text in German. Customer should fill this.
Help text (English - default)	Text	Default help text (English). Auto-filled – do not edit.
Help text (German)	Text	The translation of help text in German. Customer should fill this.
Tooltip text (English - default)	Text	Default tooltip text (English). Auto-filled – do not edit.
Tooltip text (German)	Text	The translation of tooltip text in German. Customer should fill this.
Condition field	Text	Condition applied to the option. Auto-filled – do not edit.
Condition type	Text	Defines the condition type. Auto-filled – do not edit.
Condition value (English - default)	Text	Default condition value in English. Auto-filled – do not edit.
Condition value (German)	Text	The translation of condition value in German. Customer should fill this.
Automated type	Text	Type of automated field. System field – do not edit.
Keyword compare type	Text	Keyword comparison setting. Auto-filled – do not edit.
Automated value (English - default)	Text	Default automated value (English). Auto-filled – do not edit.
Automated value (German)	Text	The translation of automated value in German. Customer should fill this.

\n
Editable fields are bolded parameters and include: Product label (German), Cart label (German), Value (German), Value description (German), Placeholder (German), Help text (German), Tooltip text (German), Condition value (German), and Automated value (German).
\n

\n","Export Translations","

The Import/Export Option Sets’ Translation feature allows you to manage translated option labels and content in bulk using CSV files.
This is especially useful if you sell in multiple languages or want to quickly update translations without editing each option manually in the app.

\n",[808,809,810],[],{"_164":817,"_747":818,"_490":819},{"_164":814,"_747":815,"_490":816},{"_164":811,"_747":812,"_490":813},"translation-for-app-settings","

In addition to translating option content, you can also translate app settings text (such as button labels and messages) to match your store’s languages.

\n
⚠️ Note: App settings are in English by default.
If your store supports multiple languages, you will need to translate these manually.
\n

Where to find this setting

Go to Settings in Aris Product Options
Select Localization
Click Translate setting

","Translation for App Settings","step-2-translate-options-in-aris","

Once your store is ready, follow these steps to translate your product options:

2.1 Select the translate button

2.2 Pick the Target Language

From the dropdown menu, select the language into which you want to translate the options.

2.3 Enter Translations

For each option in the set, enter the translated text in the provided fields including Label on product, Label on cart, and Option values.

2.5 Save Your Translations

After entering all translations, click the Save button to apply the changes.

2.6 Double Check Your Store

Visit your online store and switch to the target language using the language selector.
Verify that the translated options appear correctly and are consistent with the rest of your store’s content.

\n","Step 2: Translate Options in Aris","step-1-prepare-your-store","

Before you translate your options, you need to ensure your store is set up to support multiple languages:

Add Languages in Shopify
- Go to Shopify Settings > Languages.
- Add the languages you want to offer in your store.
- Publish the languages so they are available for use.
\n

Install a Translation App

Use a compatible translation app to help manage your store’s content, you can consider Shopify Translate & Adapt, Transcy, or Transtore - Language Translate.

These apps allow you to translate your store’s text, including the options created in the Aris app.

\n","Step 1: Prepare Your Store",[823,824,825,826,827],"6 min",[],{"_164":746,"_747":840,"_490":749},{"_164":837,"_747":838,"_490":839},{"_164":834,"_747":835,"_490":836},{"_164":831,"_747":832,"_490":833},{"_164":828,"_747":829,"_490":830},"contents-of-the-csv-files","

Field	Type	Description
no.	Number	The order number of the exported option sets, each CSV row starting with a different number will be a different option set. To add multiple options to one option set, the customer needs to add multiple rows with the same order number. Rows without an order number will not be imported into the customer's store.
option_set_name	Text	Option set name, used to differentiate option sets
option_id	Text	option_id is unique for each option template. Each CSV row starting with a different ID represent a different option To add multiple option values to one option, the customer needs to add multiple rows with the same option_id. Rows without an option_id will not be added to the option.
label_product	Text	The Label on Product is the title for your option. It is the text appearing above the option field on the storefront product page, featured product, quick view and edit option in cart.
label_cart	Text	The Label on Cart is the text appearing on the Cart summary screen, Checkout, and Order detail page, next to what customers have inputted or selected for the option. This value needs to be unique for each and every one of your options. The Label on Cart can not be left blank on option types: Single line text, Multi-line text, Number, Datetime, Email, Phone, Color picker, File Upload, Switch, Swatch, Radio buttons Drop-down Menu, Checkboxes
option_type	Text	Option types represent type of the option value and it can not be left blank. Here is the list of option_types default values: text: Single line text textarea: Multi-line text number: Number date: Datetime email: Email phone: Phone color: Color picker file: File Upload switch: Switch hidden_field: Hidden field swatch_single_color: Color swatch (single selection) swatch_single_image: Image swatch (single selection) radio: Radio buttons select: Drop-down Menu swatch_select_color: Color Drop-down Menu swatch_select_image: Image Drop-down Menu swatch_multi_color: Color swatch (multiple selections) swatch_multi_image: Image swatch (multiple seletccions) checkbox: Checkboxes paragraph: Paragaraph heading: Heading divider: Divider modal: Pop-up size_chart: Size chart
required	Text	Require field to be picked before adding to cart. This field contains 2 default values: TRUE: enable required FALSE: disable required
hidden_label	Text	This field allows hiding the label on product from the product page, featured product, quick view, and edit option in cart. It contains 2 default values: TRUE: hide label_product FALSE: show label_product
status	Text	Check if the option set is activated or not. This contains 2 default values: TRUE: active option set FALSE: deactive(draft) option set
isHide	Text	Check if the option is hidden or not inside the option set. This contains 2 default values: TRUE: hide option FALSE: show option
switch_label	Text	The label besides the switch or so called the content of the switch This text will be visible in product page, featured product, quick view and collection page Represent as the value of switch besides the label in the cart, checkout and order detail pages.
default_status	Text	Show as the switch is selected or not selected automatically. This contains 2 default values: TRUE: default selected FALSE: default unselected
default_value	Text	The default value of an option, this value will be added to the cart page automatically when the buyer clicks the Add to Cart button without changing the option or option value.
place_holder	Text	The preview value of the option and the value will be removed when the buyer fill in the value or add the option to cart.
min	Number	Minimum value của option Number
max	Number	Maximum value của option Number
help_text	Text	A text line used to guide buyer
allow_hover_img	Text	Show the bigger images when the customer hover on a swatch variant. This contains 2 default values: TRUE: enable hover image FALSE: disable hover image
value_id	Text	ID of an option value Each id respresents a different option and there will be no duplication id inside 1 option
value	Text	The values/variants that has been set on an option
price	Number	Price of an option value/variant
value_type	Text	Show type of the option and check if the product is changed to charge types or not. This contains 3 default values: adjustprice: no charge for option value chargeorbundle: option value includes add charge useexistingvariant: option value includes bundle
styles_heading	Text	Text size of the Heading option. This contains 6 values: h1: Heading 1 h2: Heading 2 h3: Heading 3 h4: Heading 4 h5: Heading 5 h6: Heading 6
heading_color	Text	Option type Heading color value, showing in HEX code. For example: #ffffff
border_styles	Text	Border style of Divider option type. This contains 4 values: solid: Solid double: Double dashed: Dashed dotted: Dotted
divider_color	Text	Option type Divider color value, showing in HEX code. For example: #ffffff
title_on_product	Text	Label of Pop-up option type, representing the value that can be clicked on to show the pop-up. The value is visible in product page, featured product, collection page and quick view
title_modal	Text	Title of Pop-up option type, showing on the top of the box when you click on the Pop-up title.
size_modal	Number	Pop-up size. There are 3 common values: 380: Small 620: Medium 980: Large
chart_title	Text	Label of Size Chart option type, representing the value that can be clicked on to show the Size Chart. The value is visible in product page, featured product, collection page and quick view
chart_header	Text	Title of Size Chart option type, showing on the top of the box when you click on the Size Chart title.
conditional_logic	json	Condition for an option to show/hide using json format, working range is restricted to 1 option set only. For example: {\"type\":\"show\",\"logic\":\"any\",\"condition_items\":[{\"field\":\"arisify_shopify_option\",\"type\":\"contains\",\"field_label\":\"arisify_shopify_option\",\"org_option_values_combobox\":null,\"filter_option_values_combobox\":null,\"value\":\"Blue\"},{\"field\":\"Single line text\",\"type\":\"contains\",\"field_label\":\"Single line text\",\"field_option_key\":\"w2n2B5imofqxFB1cLHNq2vOm9hRUS2\",\"org_option_values_combobox\":null,\"filter_option_values_combobox\":null,\"value\":\"arisify\"},{\"field\":\"Switch\",\"type\":\"contains\",\"field_label\":\"Switch\",\"field_option_key\":\"ovSe2xZoykKAbdsaNiQiKmrCrLDRde\",\"org_option_values_combobox\":null,\"filter_option_values_combobox\":null,\"value\":\"Yes\"},{\"field\":\"Color swatch (single selection)\",\"type\":\"contains\",\"field_label\":\"Color swatch (single selection)\",\"field_option_key\":\"gzUEp0Onfy4s_PzMgv9qH9zQCLEF6C\",\"org_option_values_combobox\":[{\"value\":\"option_1\",\"label\":\"option_1\"}],\"filter_option_values_combobox\":[{\"value\":\"option_1\",\"label\":\"option_1\"}],\"value\":\"option_1\"}]}

\n
Required fields are notes as BOLD parameters and those include: no.; option_id; label_cart; option_type; value_id; value

value_id and value columns will need to be rendered in nanoid form, 30 characters long
This tool can be used to render the form
\n

Woah lah, a list of option sets will soon appear on your Aris Option.
If you have any difficulty while working on this feature, don’t hesitate to contact us promptly via Livechat or the email address help@arisify.io

\n","Contents of the CSV files","how-to-import-option-set","

Navigate to the Aris Option page then click on Import

Click on Add File

Choose the file that were exported or any supported file in the CSV format, then click on Open file

\n
After importing, please navigate to all the Option set having add charge option and click on Save to re-activate the add charge option.
\n

\n","How to import Option Set","how-to-export-option-set","

First, navigating to the Aris Option page

You can select the option set that you want to export by ticking on the box besides option. Then click Export

Select Export Range, you can choose to export All option sets on current page or whole store, or only selected one.

Click on Export button again to download a CSV file automatically. You can use this file to import or use as template to fill in the options in bulk

","How to export Option Set","import-export-supported-format","

Our Import/Export feature uses CSV to synchronize data. CSV stands for comma-separated values, a file format (.csv) for spreadsheets. You can use CSV files to import and export products, customers, inventory, orders (export only), and discounts (export only).

Here is our sample folder with different files format that cover all the option types available in the app

📎 Arisify-sample-options.csv

\n","Import/Export supported format","

Leveraging the Import/Export feature streamlines the process of setting up new stores, saving valuable time. This functionality is particularly beneficial for merchants who operate in multiple countries or those managing diverse product lines across various stores.

⚠️ Note: Import and export files are limited to 5MB. If you need to process larger files, feel free to contact our support team for assistance.

\n",[843,844,845],[],{"_164":746,"_747":852,"_490":749},{"_164":849,"_747":850,"_490":851},{"_164":846,"_747":847,"_490":848},"editable-fields","

The following fields can be updated in bulk:

Option sets name
Rename the selected option sets.
\n
Status (Option set)
Change the status of the option set to Active or Draft.
\n
Required field (Option)
Set whether the option is required for customers to complete before checkout.
\n
Label on Product (Option)
Edit the option label displayed on the product page.
\n
Label on Cart (Option)
Edit the option label displayed on the cart page.
\n
Conditional logic (Option)
Define rules to show or hide specific options based on conditions set within the option set.
\n
Help text (Option)
Provide guidance text for customers to help them make informed selections when choosing an option.
\n
Tooltip (Option)
Add a tooltip to appear when you hover over the question icon next to the option.
\n
Quantity (Option value)
\n
Allow quantity selection for option values so customers can specify how many units of each option they want to purchase.
\n

\n","Editable Fields","how-it-works","

Step 1: Select Option Sets

Choose one or more option sets to update from the list, then click Bulk Edit.

Step 2: Bulk Edit Popup

A popup window will appear with editable fields. Update values for selected option sets directly in this popup. Changes will apply to all selected option sets simultaneously.

\n","How It Works","

The Bulk Edit feature allows you to edit multiple option sets or options at once. It helps you save time by updating several option sets simultaneously and keeps them consistent across products. This makes managing product customizations much simpler and more efficient.

⚠️ Note: Bulk edit supports updating up to 5 option sets at a time.

\n",[855],[],{"_164":746,"_747":856,"_490":749},"

1. In the Aris Option tab -> View Option Template button

$\"\"$

2. Click on Create Option Template to start building your option.

3. Fill in the Option information

\n
These are the terms you will see and what they mean:
\n
\n
Option name
\n
\n
The Option name is the name of the option showing in our app and it will not display on the storefront product page. This data only shows while setting up options and can help you keep them organized.
\n
\n
Label on Product:
\n
\n
The Label on Product is the title for your option. It is the text appearing above the option field on the storefront product page.
\n
\n
Label on Cart:
\n
\n
The Label on Cart is the text appearing on the Cart summary screen, Checkout, and Order detail page, next to what customers have inputted or selected for the option. This value needs to be unique for each and every one of your options.
\n
\n
Option Type:
\n
\n
The Option Type includes 19 types that you can choose according to your needs:
\n
- Single input: Single line text, Multi-line text, Number, DateTime, Color Picker, File Upload, Switch
\n
- Single selection: Color Swatch, image Swatch, Radio Buttons, Drop-Down Menu.
\n
- Multiple selections: Checkboxes, Color Swatch, Image Swatch.
\n
- Static Data: Paragraph, Heading, Divider, Pop-up, Size Chart.
\n

4. Click the Save button to save your option template.

Need help? Let us know via in-app live chat or email: help@arisify.io

\n",[860,861,862,863],"2 min",[],{"_164":873,"_747":874,"_490":875},{"_164":870,"_747":871,"_490":872},{"_164":867,"_747":868,"_490":869},{"_164":864,"_747":865,"_490":866},"testing-the-setup","

Use a customer account with the appropriate tags or status.
Log in from a specific country (use a VPN for testing if needed).
Visit the product page.
Verify that the correct option set appears or is hidden, based on the conditions.

\n","Testing the Setup","step-3-apply-filters-based-on-customer-group-or-country","

Customer Group Filter

You have three visibility settings under the Customer Group section:

1. All Customers
This option set is visible to everyone without any filtering.

2. Manual
Select specific customers manually to display the option set to.

3. Automated
Display the option set based on dynamic rules like customer tags, email, login status, or whether the user is a guest.

Automated Option Set Display Rules
Configure conditions to display the option set only when specific criteria are met.

Available Conditions:

Customer tags
Customer name
Customer email
Logged-in customer
Guest (non-logged-in customer)

Condition Matching Options:

All conditions must be met
Any condition can be met

Example:

Rule: Customer tag is equal to \"Specials\"
- Only customers with the \"Specials\" tag will see the option set.
\n

Country Filter

You can control which countries see the option set using country-based rules.

1. All Countries (Toggle ON)

Option set is shown in all countries by default.

2. Include (Show only in selected countries)

Turn ON the Include toggle.
Select countries where this option set should appear.
Example: Select United States, Canada → Option set will only appear to users in those countries.

3. Exclude (Hide in selected countries)

Turn ON the Exclude toggle.
Select countries where the option set should not appear.
Example: Select France, Germany → Option set will be hidden from customers in these countries.

4. Country Selector List

Use the searchable country list to easily find and select countries.
You can filter by Market or Country tab.

\n","Step 3: Apply Filters Based on Customer Group or Country","step-2-assign-the-option-set-to-products","

While editing the option set, go to the Product Selection section.
Select the products where this option set should appear.

\n","Step 2: Assign the Option Set to Products","step-1-create-option-sets","

Start by creating the option set with the specific options (e.g., size, color, warranty) you want to display only to certain customer groups or countries.

\n
How to create an option set
\n

\n","Step 1: Create Option Sets",[878],[],{"_164":746,"_747":879,"_490":749},"

Scenario 1: You first install our app and want to add options to a product but don't know where to start

Scenario 2: You have used the app for a while and want to refer to the options of the Template for the new product that you sells

Step 1:

Go to Aris Option -> Use a Template.
In this case, you can either choose the option beside or under the \"Create Option Set\"

Then you will be directed to a new page with more than 20 Templates that fit multiple products that you sell.

\n
On the Free plan, there are 5 available templates, and there are 20 templates for Pro Product Option plan and above.
\n

There are information about the plans and option types below the Template title, which you can based on to build your own later.

Step 2:

Select \"Apply\" to apply the template to a new Option Set, or \"View demo\" to see how the demo product works.

Preview the available options included in this template on the right side.

Step 3:

When clicking on \"Apply\", you will be directed to the Option Set main page, you can customize the Option names, attributes that fit your store. Then pick the product for this template to show on a product just like what you did on Option set

Hit \"Save\" after selecting the products having this template.

",[882,883,884,885,886,887,888],[],{"_164":746,"_747":907,"_490":749},{"_164":904,"_747":905,"_490":906},{"_164":901,"_747":902,"_490":903},{"_164":898,"_747":899,"_490":900},{"_164":895,"_747":896,"_490":897},{"_164":892,"_747":893,"_490":894},{"_164":889,"_747":890,"_490":891},"step-6-view-on-product-page","

Click Apply to open your product page to preview the result

If you have activated the app in the theme, you can see the options on the storefront now! If not? Take 1 minute to activate the app.

Now you can check your great work on the storefront!

Need help? Let us know via in-app live chat or email: help@arisify.io

\n","Step 6: View on product page","step-5-save-option-set","

Click the Save button on the top right corner to finish the Option Set setup.

","Step 5: Save option set","step-4-apply-option-set","

Apply the Option Set to all products or a group of products by choosing one of these 3 conditions: All product/ Manual/ Automated.

If you choose All product then this Option Set will show on all active products in your store.

If you choose Manual then this Option Set will only show on certain chosen products.

If you choose Automated then this Option Set will show on all products that satisfy the setup conditions.

You can choose Product title/ type/ vendor/ tag/ price/ Collection to set up conditions to show this Option Set.

You can find the Product title/ type/ vendor/ tag/ Collection in the Product section of your Shopify Admin page.

\n
Tick the checkbox in the Required column to make options compulsory. Customers cannot skip required options to proceed with adding products to Cart.
\n $\"\"$
The required option will show on the product page with a red asterisk *.
\n $\"\"$

\n
You can also configure option sets to display based on Customer Group and Country. Learn more here.
\n

\n","Step 4: Apply option set","step-3-fill-in-option-details","

Fill in all the option details needed here then click the Save button to finish the Option setup.

\n
These are the terms you will see and what they mean:
\n
\n
Option name
\n
\n
The Option name is the name of the option showing in our app and it will not display on the storefront product page. This data only shows while setting up options and can help you keep them organized.
\n
\n
Label on Product:
\n
\n
The Label on Product is the title for your option. It is the text appearing above the option field on the storefront product page.
\n
\n
Label on Cart:
\n
\n
The Label on Cart is the text appearing on the Cart summary screen, Checkout, and Order detail page, next to what customers have inputted or selected for the option. This value needs to be unique for each and every one of your options.
\n

\n
You can save the option you just created to the Option Template list and use it for multiple Option Sets simultaneously.
\n

","Step 3: Fill in option details","step-2-add-option","

After clicking the Create Option Set button, a new Option Set will show up. You can edit the Option Set's name here.

Click the Add Option button to create a new option in your Option Set.

After clicking on the \"Add Option\" button, there is a list of Option Type for you to pick.

\n
\n
Option Type:
\n
\n
The Option Type includes 32 types that you can choose according to your needs:
\n
- Single input: Single line text, Multi-line text, Number, DateTime, Color Picker, File Upload, Switch
\n
- Single selection: Color Swatch, image Swatch, Radio Buttons, Drop-Down Menu.
\n
- Multiple selections: Checkboxes, Color Swatch, Image Swatch.
\n
- Static Data: Paragraph, Heading, Divider, Pop-up, Size Chart.
\n

\n
Click the Select From Option Template button to use the Option Template that you have created (if any).
\n

","Step 2: Add option","step-1-create-option-set","

In the Aris Option tab -> click the Create Option Set button

","Step 1: Create option set","

\n
Option Set = a set of options that you can use for specific products.
\n

\n","cmpz0z3le00005eb44red8b4v","name","tagline","Custom product options, personalization & conditional logic","status","live","appStoreUrl","https://apps.shopify.com/aris-product-options","categories",[918,16,919,920,921,922,923,924,925,926,927,928,929],{"_164":2206,"_166":2207,"_752":196,"_753":2208},{"_164":1865,"_166":1866,"_752":472,"_753":1867},{"_164":1682,"_166":1683,"_752":407,"_753":1684},{"_164":1567,"_166":1568,"_752":371,"_753":1569},{"_164":1485,"_166":1486,"_752":346,"_753":1487},{"_164":1432,"_166":1433,"_752":329,"_753":1434},{"_164":1414,"_166":1415,"_752":324,"_753":1416},{"_164":1366,"_166":1367,"_752":287,"_753":1368},{"_164":1265,"_166":1266,"_752":270,"_753":1267},{"_164":996,"_166":997,"_752":241,"_753":998},{"_164":967,"_166":968,"_752":232,"_753":969},{"_164":930,"_166":931,"_752":215,"_753":932},"cmrydxw05003ucg7k5q0938m5","customizations",[933,934,935,936],{"_164":224,"_166":225,"_168":226,"_170":227,"_734":963,"_736":737,"_738":739,"_740":741,"_742":964,"_744":-5},{"_164":220,"_166":221,"_168":222,"_170":223,"_734":945,"_736":737,"_738":739,"_740":741,"_742":946,"_744":225},{"_164":216,"_166":217,"_168":218,"_170":219,"_734":941,"_736":737,"_738":739,"_740":741,"_742":942,"_744":225},{"_164":209,"_166":210,"_168":211,"_170":212,"_734":937,"_736":737,"_738":739,"_740":741,"_742":938,"_744":-5},[939],[],{"_164":746,"_747":940,"_490":749},"

Checkout the Demo page to see how the feature works in the store front.

After filling in the Option Set in Aris Option, navigating to Settings tab in Aris option

Toggle on the \"Show widget on quickview (Collection page, Home page)\" if you want the option to show on Quick View, and \"Show widget on home page (featured product section only)\" if you want it to appear on Featured product.

\n
In Order to have the Quick View pop-up, the product should have the pre-saved options in Shopify and the Quick View feature turning on in the live theme.
\n

Hit \"Save\" after turning on the feature

Then check on the main Online Store to see if the options are working there or not?

Need help? Let us know via in-app live chat or email: help@arisify.io

\n",[943],[],{"_164":746,"_747":944,"_490":749},"

Please check out these article for further instructions:

",[947,948,949,950],[],{"_164":960,"_747":961,"_490":962},{"_164":957,"_747":958,"_490":959},{"_164":954,"_747":955,"_490":956},{"_164":951,"_747":952,"_490":953},"button-text-customization","

You can also adjust the button text on collection pages to fit your store’s style:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Button	Default Text
Add to cart	Add to cart
Added to cart	Added to cart
Sold out	Sold out

👉 Remember to click Save after making any changes.

✨ With Shopify Option Design, you can override the default theme design to create a more engaging and customized shopping experience for your customers.

\n","Button Text Customization","collection-page-settings","

Show on Collection page: Enable or disable Shopify Option Design on collection pages.
Show option name: Display the option name above Shopify variants in collections.
Show variant name on hover: Show the variant name when hovering over options.
Show add to cart button: Add an Add to Cart button directly on collection pages.
Ajax \"add to cart\": Allow customers to add items to the cart without reloading the page.
Limit number of swatches: Control how many swatches are shown. If the number is exceeded, a “+” button will appear.
- Limit number field: Enter the maximum number of swatches (e.g., 4).
\n

\n","Collection Page Settings","product-page-settings","

Show on Product page: Enable or disable displaying Shopify Option Design on product pages.
Show option name: Display the option name above Shopify variants.
Show variant name on hover: Reveal the variant name when customers hover over an option.
Show image on hover: Display the variant image on hover.
Show on Featured product: Allow Shopify Option Design to appear on featured products.
Show on Quickview: Display Shopify Option Design in quick view mode.

\n","Product Page Settings","how-to-access","

From your Shopify Admin, go to Apps > Aris Product Options.
Click Setting in the left sidebar.
Select Shopify Design Setting.

","How to Access",[965],[],{"_164":746,"_747":966,"_490":749},"

1. Edit add charge notification

Open our app, go to Aris Option, click on Settings.

Edit it your way, but place the code {add_price} at the position where you want to show the extra charge -> Save changes.

$\"You$

Ex: I want this notification: \"This will add $xx.\"

$\"\"$

Tadaa! Here it goes. Let our support agents know via in-app live chat or email: help@arisify.io. if you need help on this.

$\"\"$

If you don't want the add charge notification, you can go to Aris Option -> Settings -> Toggle off in \"Show add charge notification\"

2. Update add charge amount to product price

Go to the Settings section in Aris Option, toggling on the \"Update add charge amount to product price\"

3. Edit Option in Cart

Go to Settings section in Aris Option, toggling on the \"Show \"Edit Options\" button\"

You can see how the feature works in this collection of our demo store: https://demo-po.arisify.io/collections/avis-option

","cmrydxvxt003rcg7k78q012nb","support",[970,971],{"_164":233,"_166":234,"_168":235,"_170":236,"_734":990,"_736":737,"_738":739,"_740":741,"_742":991,"_744":-5},{"_164":228,"_166":229,"_168":230,"_170":231,"_734":972,"_736":737,"_738":739,"_740":741,"_742":973,"_744":-5},[974,975,976,977],[],{"_164":987,"_747":988,"_490":989},{"_164":984,"_747":985,"_490":986},{"_164":981,"_747":982,"_490":983},{"_164":978,"_747":979,"_490":980},"4-need-help-submitting-a-request","

If you’re unsure how to describe your request, or if you’d like our team to submit it on your behalf, please contact our support team.

\n
📩 Support contact: help@arisify.io
\n

Our team will be happy to assist and make sure your request is properly recorded.

Notes

Feature requests are reviewed and prioritized based on demand, feasibility, and impact
Submitting a request does not guarantee immediate implementation, but voting helps increase priorit

\n","4. Need help submitting a request?","3-voting-tracking","

You can vote on existing feature requests to help prioritize development
Feature status is updated directly on the roadmap (Pending → Approved → In Progress → Done)

\n","3. Voting & tracking","2-how-to-create-a-feature-request","

After clicking Request a feature, a submission form will appear.

Fill in the following fields:

Title – A short, clear summary of your request
Description – Detailed explanation of the feature and your use case
Tags (optional) – Help categorize your request
Attach file (optional) – Upload screenshots or reference files (JPEG, JPG, PNG, SVG up to 5MB)

Click Submit to send your request.

\n","2. How to create a feature request","1-where-to-submit-a-feature-request","

You can submit feature requests directly inside the app via the Feature Request / Roadmap section.

Steps:

Open Aris Product Options in your Shopify admin
Go to Feature request from the left sidebar
You’ll see the Roadmap, where requests are grouped by:
- Pending
- Approved
- In Progress
- Done
- Rejected
\n
Click Request a feature (top-right corner)

\n","1. Where to submit a feature request",[992],[],{"_164":993,"_747":994,"_490":995},"our-contact","

Email

help@arisify.io

Chat

In-app live chat

Arisify Community: Join our Facebook group

Youtube channel: https://www.youtube.com/channel/UC2-A2tgA7dqna8bpKaSgCJw/featured

\n","Our contact","cmrydxvrb003jcg7kyl4kmtd5","integration",[999,1000,1001,1002,1003,1004,1005],{"_164":262,"_166":263,"_168":264,"_170":265,"_734":1174,"_736":737,"_738":1175,"_740":741,"_742":1176,"_744":-5},{"_164":258,"_166":259,"_168":260,"_170":261,"_734":1170,"_736":737,"_738":739,"_740":741,"_742":1171,"_744":-5},{"_164":254,"_166":255,"_168":256,"_170":257,"_734":1162,"_736":737,"_738":739,"_740":741,"_742":1163,"_744":-5},{"_164":250,"_166":251,"_168":252,"_170":253,"_734":1154,"_736":737,"_738":739,"_740":741,"_742":1155,"_744":-5},{"_164":246,"_166":247,"_168":248,"_170":249,"_734":1074,"_736":737,"_738":1075,"_740":741,"_742":1076,"_744":-5},{"_164":242,"_166":243,"_168":244,"_170":245,"_734":1058,"_736":737,"_738":739,"_740":741,"_742":1059,"_744":-5},{"_164":237,"_166":238,"_168":239,"_170":240,"_734":1006,"_736":737,"_738":798,"_740":741,"_742":1007,"_744":-5},[1008,1009,1010,1011,1012,1013,1014,1015,1016,1017,1018,1019,1020],[],{"_164":746,"_747":1057,"_490":749},{"_164":1054,"_747":1055,"_490":1056},{"_164":1051,"_747":1052,"_490":1053},{"_164":1048,"_747":1049,"_490":1050},{"_164":1045,"_747":1046,"_490":1047},{"_164":1042,"_747":1043,"_490":1044},{"_164":1039,"_747":1040,"_490":1041},{"_164":1036,"_747":1037,"_490":1038},{"_164":1033,"_747":1034,"_490":1035},{"_164":1030,"_747":1031,"_490":1032},{"_164":1027,"_747":1028,"_490":1029},{"_164":1024,"_747":1025,"_490":1026},{"_164":1021,"_747":1022,"_490":1023},"related-endpoints","

The same Webview Token can be used with public API endpoints under:

/api/public/v1/*\n

Common endpoints include:

/api/public/v1/option-sets\n/api/public/v1/option-sets/:id\n/api/public/v1/settings\n/api/public/v1/localizations\n

For server-side integrations, use an API Token instead of a Webview Token.

\n","Related endpoints","example-basic-storefront-integration","

<div id=\"avisplus-options\"></div>\n\n<script>\n  const APO_WEBVIEW_TOKEN = \"apo_wv_your_token_here\";\n  const productId = \"{{ product.id }}\";\n\n  async function initAvisPlusOptions() {\n    const response = await fetch(\n      `https://public-api.avisplus.io/api/public/v1/option-sets?product_id=${productId}`,\n      {\n        headers: {\n          Authorization: `Bearer ${APO_WEBVIEW_TOKEN}`,\n        },\n      }\n    );\n\n    if (!response.ok) {\n      console.error(\"Failed to load AvisPlus option sets\");\n      return;\n    }\n\n    const data = await response.json();\n\n    const container = document.getElementById(\"avisplus-options\");\n    container.innerHTML = \"<pre>\" + JSON.stringify(data, null, 2) + \"</pre>\";\n  }\n\n  initAvisPlusOptions();\n</script>\n

\n","Example: basic storefront integration","best-practices","

Use the Webview Token only for frontend integrations.
Add all storefront domains to the token whitelist before going live.
Use the Authorization header whenever possible.
Only use the ?token= query parameter for iframe or webview cases where headers are not available.
Do not expose server-side API Tokens in your storefront code.
Avoid calling the API repeatedly on every small UI change. Cache the option set data on the page when possible.

\n","Best practices","common-errors","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Status code	Meaning	How to fix
`401`	Token is invalid, inactive, revoked, or has the wrong format	Make sure the token starts with `apo_wv_` and is active
`403`	Webview access requires the correct plan	Please upgrade to a supported plan
`403 Origin not allowed`	The request domain is not whitelisted	Add your storefront domain to the token whitelist
`429`	Too many requests	Use backoff and retry logic

\n","Common errors","rate-limit","

The Webview API supports up to:

600 requests / minute\n

If your storefront receives a 429 error, please apply backoff and retry logic.

Example:

async function fetchWithRetry(url, options, retries = 3) {\n  for (let i = 0; i < retries; i++) {\n    const response = await fetch(url, options);\n\n    if (response.status !== 429) {\n      return response;\n    }\n\n    await new Promise((resolve) => setTimeout(resolve, 1000 * (i + 1)));\n  }\n\n  throw new Error(\"Too many requests. Please try again later.\");\n}\n

\n","Rate limit","render-webview-html","

You can also use the Webview endpoint to render the ready-made Webview HTML.

GET /api/public/v1/webview\n

Example:

GET https://public-api.avisplus.io/api/public/v1/webview\nAuthorization: Bearer apo_wv_xxxxx\n

The response returns the Webview HTML and automatically injects the verified access token into:

window.ACCESS_TOKEN\n

This allows the Webview page to continue calling related APIs after the token is verified.

\n","Render Webview HTML","get-option-sets-by-product","

Use this endpoint to get option sets assigned to a Shopify product.

GET /api/public/v1/option-sets?product_id=<shopify_product_id>\n

Example request:

const APO_WEBVIEW_TOKEN = \"apo_wv_your_token_here\";\nconst productId = \"{{ product.id }}\"; // Shopify Liquid\n\nasync function loadOptionSets(productId) {\n  const response = await fetch(\n    `https://public-api.avisplus.io/api/public/v1/option-sets?product_id=${productId}`,\n    {\n      headers: {\n        Authorization: `Bearer ${APO_WEBVIEW_TOKEN}`,\n      },\n    }\n  );\n\n  if (!response.ok) {\n    throw new Error(`API error: ${response.status}`);\n  }\n\n  return response.json();\n}\n\nloadOptionSets(productId)\n  .then((data) => {\n    console.log(\"Option sets:\", data);\n  })\n  .catch((error) => {\n    console.error(\"Failed to load option sets:\", error);\n  });\n

You do not need to pass the shop domain in this request. The system will detect the shop from the Webview Token.

\n","Get option sets by product","domain-whitelist","

Before calling the Webview API from your storefront, make sure your store domain is added to the token whitelist.

The API will validate the request origin or referrer. If the domain is not whitelisted, the request will be rejected.

Example domains you may need to whitelist:

your-store.myshopify.com\nyour-custom-domain.com\n

\n","Domain whitelist","authentication","

We recommend passing the token through the Authorization header:

Authorization: Bearer <your_webview_token>\n

Example:

Authorization: Bearer apo_wv_xxxxx\n

For iframe or webview cases where custom headers are difficult to send, you may also pass the token through a query parameter:

?token=<your_webview_token>\n

\n","Authentication","base-url","

https://public-api.avisplus.io\n

\n","Base URL","token-type","

For browser or storefront integration, please use a Webview Token.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Use case	Token type	Prefix	Minimum plan
Calling the API directly from browser, theme, storefront, or widget	Webview Token	`apo_wv_...`	Premium

The Webview Token is designed for frontend use. It can be exposed in the browser as long as your store domain is added to the token whitelist.

\n
Important: Do not use an API Token starting with apo_api_ in browser code. API Tokens are intended for server-side integrations only.
\n

\n","Token type","when-should-you-use-the-webview-api","

Use this API when you want to:

Render product options in a custom storefront section
Build a custom product page layout
Display options inside a custom widget or iframe
Connect ArisifyPlus Product Options with a headless or customized frontend experience

\n","When should you use the Webview API?","

The Webview API allows you to fetch and render ArisifyPlus Product Options data directly on your storefront, custom theme, or embedded widget.

This is useful when you want to display product options in a custom frontend instead of relying only on the default app block.

\n",[1060,1061,1062,1063],[],{"_164":746,"_747":1073,"_490":749},{"_164":1070,"_747":1071,"_490":1072},{"_164":1067,"_747":1068,"_490":1069},{"_164":1064,"_747":1065,"_490":1066},"contact","

For Program questions, contact: partnership@arisify.io

\n","Contact","how-to-join","

Complete the affiliate registration form and make sure all information provided is accurate for our review. All submitted information is used lawfully and kept confidential in accordance with our policy.

The registration form requires:

Account email and password (password must include uppercase, lowercase letters and a number)
First name, Last name, and Nickname
User Type — one of: Individual, App, or Agency
- If App: provide your App Name
- If Agency: provide your Agency Name
\n
Confirmation that all information is true and accurate
Agreement to the Terms of Service and Privacy Policy of the Affiliates program

After submitting, you verify your email via a one-time password (OTP) to complete enrollment. We may accept or reject any application at our sole discretion.

\n","How to Join","program-overview","

The Program allows you to promote Aris Product Options, Variants (the \"App\") using an approved affiliate tracking link (\"Affiliate Link\"). When a referred merchant becomes a paying customer, you may earn a commission subject to the Program Terms.

Key highlights:

25% commission on Eligible Revenue from each Qualified Referral.
Commissions accrue for 24 months from the referred merchant's first successful payment.
45-day pending period before commissions are earned and eligible for payout.
Minimum withdrawal threshold of USD $100.

For the complete rules, see the Affiliate Program Terms & Conditions.

\n","Program Overview","

Welcome to the Aris Affiliate Program. Promote Aris Product Options, Variants with an approved affiliate tracking link and earn commission whenever a referred merchant becomes a paying customer.

\n",[1077,1078,1079,1080,1081,1082,1083,1084,1085,1086,1087,1088,1089,1090,1091,1092,1093,1094,1095,1096],"7 min",[],{"_164":746,"_747":1153,"_490":749},{"_164":1150,"_747":1151,"_490":1152},{"_164":1147,"_747":1148,"_490":1149},{"_164":1144,"_747":1145,"_490":1146},{"_164":1141,"_747":1142,"_490":1143},{"_164":1138,"_747":1139,"_490":1140},{"_164":1135,"_747":1136,"_490":1137},{"_164":1132,"_747":1133,"_490":1134},{"_164":1129,"_747":1130,"_490":1131},{"_164":1126,"_747":1127,"_490":1128},{"_164":1123,"_747":1124,"_490":1125},{"_164":1120,"_747":1121,"_490":1122},{"_164":1117,"_747":1118,"_490":1119},{"_164":1114,"_747":1115,"_490":1116},{"_164":1111,"_747":1112,"_490":1113},{"_164":1108,"_747":1109,"_490":1110},{"_164":1105,"_747":1106,"_490":1107},{"_164":1102,"_747":1103,"_490":1104},{"_164":1099,"_747":1100,"_490":1101},{"_164":1097,"_747":1065,"_490":1098},"19-contact","19. Contact","18-governing-law-dispute-resolution","

These Terms are governed by the laws of [Governing Law/Jurisdiction]. Any disputes will be resolved in [Courts/Arbitration Venue], unless required otherwise by applicable law.

\n","18. Governing Law & Dispute Resolution","17-independent-contractor-relationship","

You are an independent contractor. Nothing in these Terms creates an employment, partnership, or agency relationship. You have no authority to bind Aris.

\n","17. Independent Contractor Relationship","16-disclaimer-limitation-of-liability","

The Program and marketing materials are provided \"as is\" without warranties of any kind.
To the maximum extent permitted by law, Aris will not be liable for indirect, incidental, special, consequential, or punitive damages, or for loss of profits/revenue related to the Program.
Our total liability under the Program will not exceed the total commissions paid to you in the preceding 3/6/12 months.

\n","16. Disclaimer & Limitation of Liability","15-program-changes","

We may update or modify the Program or these Terms at any time (including commission rules, payout schedule, and eligibility). Changes take effect when posted or communicated. Continued participation after changes means you accept the updated Terms.

\n","15. Program Changes","14-termination","

Either party may terminate your participation at any time, with or without cause, by written notice.
Upon termination, you must stop using Affiliate Links and brand assets.
Accrued commissions earned before termination may still be paid, unless termination results from fraud, abuse, or violation of these Terms—in which case commissions may be voided.

\n","14. Termination","13-confidentiality","

If we share non-public information (e.g., roadmap, pricing arrangements, internal metrics), you must keep it confidential and use it only for Program purposes.

\n","13. Confidentiality","12-intellectual-property","

You are granted a limited, non-exclusive, non-transferable, and revocable license to use our approved logos, brand name, and marketing materials solely for the purpose of promoting the App under this Program.
You may not modify, alter, or misuse our brand assets, nor use them in any misleading, deceptive, or unauthorized manner.

\n","12. Intellectual Property","11-prohibited-activities","

You must not:

Fraud & Manipulation: Engage in fraud, abuse, or manipulation of tracking systems, including but not limited to cookie stuffing, fake leads, or incentivized installs without prior written approval.
Self-Referral: Use Self-Referral methods to generate commissions for your own accounts or businesses.
Unauthorized Branded Ads: Bid on or purchase ads using branded keywords (including variations and misspellings such as \"Aris Product Options, Variants\", \"Aris Options\", or the Company/Brand name) without prior approval.
Spam & Deceptive Practices: Use spam, unsolicited bulk messaging, or any deceptive or misleading promotional tactics.
Misrepresentation: Misrepresent pricing, features, guarantees, or falsely present yourself as Aris or an official representative.
Prohibited Content: Promote the App on websites or platforms that contain illegal content, hate speech, or content that violates intellectual property or third-party rights.

Violation may result in immediate termination and forfeiture of unpaid commissions.

\n","11. Prohibited Activities","10-affiliate-responsibilities-compliance","

You agree to:

Honest Representation: Represent the App honestly and do not make misleading, deceptive, or unsubstantiated claims.
Compliance with Laws: Comply with all applicable laws, regulations, and platform policies, including advertising and consumer protection rules.
Affiliate Disclosure: Clearly disclose your affiliate relationship where required (e.g., \"I may earn a commission if you sign up through my link.\") in accordance with FTC guidelines or applicable local laws.
Use of Brand Assets: Use only approved brand assets and messaging provided by Aris, unless otherwise approved in writing.

\n","10. Affiliate Responsibilities & Compliance","9-taxes","

You are responsible for all taxes, duties, and governmental charges related to commissions you receive. We may require tax forms or documentation before issuing payouts, depending on your location and applicable laws.

\n","9. Taxes","8-payouts","

Payout Method: You may request a payout through the affiliate portal/dashboard once your commissions are eligible for payout.
Payout Schedule: We will process and issue payouts within up to 60 days after a valid payout request is submitted and approved.
Minimum Withdrawal Threshold: Affiliates may request payout once earnings exceed the minimum withdrawal threshold of USD $100. If you do not reach the threshold, the balance will roll over until the threshold is met.
Eligibility: Only Approved (Earned) Commissions are eligible for payout. Pending Commissions are not payable.
Clawback Policy: Commissions are only payable on revenue that is successfully collected and not subject to refund, chargeback, reversal, cancellation, or other invalidation. If Shopify issues any billing adjustment (such as downgrades, uninstall, refund, chargeback or other billing corrections after payout), we may deduct the corresponding amount from future payouts (or require repayment where legally permitted).
Verification: We may request additional information to verify your identity, payment details, or compliance before processing a payout request.

\n","8. Payouts","7-pending-period-commission-validation","

Pending Period Length: Each commission enters a pending period of 45 days starting from the referred merchant's First Successful Payment date.
Effect of Pending: During the pending period, the commission is recorded as Pending Commission and is not considered earned and not eligible for payout.
Cancellation/Refund During Pending: If the merchant's subscription is cancelled, refunded, charged back, reversed, or otherwise deemed invalid (in whole or in part), then no commission will be earned for the affected amount, and it will be treated as ineligible.
Approval After Pending: If no issues occur during the pending period, the commission will automatically convert to Approved (Earned) Commission after day 45.
Fraud/Abuse Exception: We reserve the right to extend the pending period, withhold payouts, or void commissions if fraud, abuse, tracking manipulation, or violations are suspected.

\n","7. Pending Period (Commission Validation)","6-eligible-referrals","

You earn commissions only when New Customers install the app for the first time and upgrade to a paid plan via Shopify billing.
Commissions will not be paid in the following cases:
- The customer re-installs the app or already exists in our system.
- The subscription is cancelled, refunded, or charged back.
- Self-referrals, such as purchasing through your own affiliate link, domain, email, or payment method.
\n

\n","6. Eligible Referrals","5-tracking-attribution","

Attribution is subject to our tracking system. If tracking is blocked due to browser settings, ad blockers, cookie restrictions, or other technical factors outside our control, we may be unable to attribute the referral.
Attribution Window: A referral is valid when a merchant clicks an affiliate's referral link and completes installation and payment within 30 days using the same device/browser. Referrals outside this window will not generate commission.
We reserve the right to resolve attribution questions in good faith based on available evidence (e.g., system logs).

\n","5. Tracking & Attribution","4-definitions","

Qualified Referral: A new merchant who installs the App and subscribes to a paid plan through your Affiliate Link, and is not already an existing customer or attributed to another partner/channel at the time of referral.
Eligible Revenue: Net subscription fees actually paid to Aris for the App by a Qualified Referral, excluding (where applicable) taxes, refunds, chargebacks, discounts, credits, partner revenue share, and any non-recurring fees not explicitly included in the Program.
Self-Referral: You (or your company) subscribing to the App using your own Affiliate Link.
First Successful Payment: The first subscription payment successfully processed and received by Aris for the App from a referred merchant.
Pending Commission: A commission amount that has been recorded but is still within the 45-day pending period and therefore not yet earned or payable.
Approved (Earned) Commission: A commission amount that has passed the pending period and is not subject to cancellation, refund, chargeback, reversal, fraud, or policy violations.

\n","4. Definitions","3-commission-structure","

Commission Rate: 25% of Eligible Revenue from each Qualified Referral.
Commission Duration: Commissions accrue for 24 months starting from the date the referred merchant makes their first successful payment for a paid subscription.
Pending Period: All commissions are subject to a 45-day pending period (see Section 7) before they are considered earned and eligible for payout.
After 24 months, no further commissions will accrue.

\n","3. Commission Structure","2-eligibility-enrollment","

You must provide accurate and complete information during application and keep it updated.
We may accept or reject any application at our sole discretion.
You must be legally able to enter into a binding agreement and comply with all applicable laws and regulations.

\n","2. Eligibility & Enrollment","1-program-overview","

\n","1. Program Overview","

Effective Date: 15/03/2026

Program Name: Aris Product Options, Variants Affiliate Program (\"Program\")

Company: Aris Product Options, Variants (\"Aris\", \"we\", \"us\", \"our\")

Affiliate: The individual or entity accepted into the Program (\"you\", \"your\")

By applying to or participating in the Program, you agree to these Terms & Conditions.

\n",[1156,1157],[],{"_164":746,"_747":1161,"_490":749},{"_164":1158,"_747":1159,"_490":1160},"how-to-show-aris-option-details-in-vify-order-printer","

Step 1: Open the template editor

In Shopify admin, open Vify Order Printer
Go to the Template tab
Click Edit on the template you want to use (Invoice, Packing Slip, etc.)

Step 2: Open “Items information”

After entering the template editor, look at the left-side menu
Select Items information

Step 3: Enable “Show properties”

In Items information, find the option Show properties
Toggle it ON

This setting allows Vify to display line item properties, where Aris stores option data.

Step 4: Save and verify

Click Save
Open a sample order that contains Aris options
Preview or print the document to confirm option details are shown correctly

Need help?

If you need help setting this up or don’t see option details after enabling Show properties, please contact our support team.

📩 Support: help@arisify.io

\n","How to Show Aris Option Details in Vify Order Printer","

By default, Aris stores option selections in order properties. However, Shopify’s built-in order print and invoice templates do not display this field (line_item_properties).

As a result, to show Aris option details on invoices or printed documents, you’ll need to use a third-party order printer app.

No worries — the recommended app in this case offers a free plan.

\n
Install Vify order printer
\n

\n",[1164,1165],[],{"_164":746,"_747":1169,"_490":749},{"_164":1166,"_747":1167,"_490":1168},"how-to-set-up-export-with-aris-options","

Step 1: Create a new export

Open SyncX: Order Export in your Shopify admin
Click Create New

Step 2: Add export fields

Click Add Export Fields

Step 3: Include Aris option data (Properties)

In the field search box, type properties
Select the relevant properties fields
- This ensures Aris option details are included in the export
\n

Step 4: Save the export setup

After selecting the required fields, click Save

Step 5: Verify exported data

Run the export
Review the data preview to confirm that Aris option details appear correctly

Step 6: Download the CSV file

Click Download CSV to export orders with Aris option data included

Need help?

If you need assistance setting this up or want help verifying your export format, please contact our support team.

📩 Support: help@arisify.io

\n","How to Set Up Export with Aris Options","

By default, Aris stores option selections in order properties. However, Shopify’s built-in order export does not include this field (line_item_properties).

As a result, to export orders with Aris option details, you’ll need to use a third-party order export app.No worries — the recommended app in this case offers a free plan.

To ensure Aris option details appear in exported files, configure SyncX Order Export to include properties fields when exporting orders.

\n
Click here to install the app: App link
\n

\n",[1172],[],{"_164":746,"_747":1173,"_490":749},"

If you're using both Aris app and EComposer app, kindly follow these instructions to reposition Aris options in the EComposer app.

Step 1: In the EComposer builder app, open the product page template that you want to reposition Aris option -> Open Elements tab

Step 2: Navigate to the Extensions tab -> Add more.

Step 3: Search for \"Aris Product\" -> Install now.

Step 4: Drag and Drop this Aris Product Options element to the ideal position as you wish.

Step 5: Click on Save & Publish

Step 6: In the Setting of Aris option, please ensure that Widget Position is set as “Default”. If not, Aris options will not show properly on the product page.

Step 7: Double-check on the Online store to make sure it works as your expectations.

\n",[1177,1178,1179,1180,1181,1182,1183,1184,1185,1186,1187,1188,1189,1190,1191,1192,1193,1194,1195,1196,1197,1198],"19 min",[],{"_164":1262,"_747":1263,"_490":1264},{"_164":1259,"_747":1260,"_490":1261},{"_164":1256,"_747":1257,"_490":1258},{"_164":1253,"_747":1254,"_490":1255},{"_164":1250,"_747":1251,"_490":1252},{"_164":1247,"_747":1248,"_490":1249},{"_164":1244,"_747":1245,"_490":1246},{"_164":1241,"_747":1242,"_490":1243},{"_164":1238,"_747":1239,"_490":1240},{"_164":1235,"_747":1236,"_490":1237},{"_164":1232,"_747":1233,"_490":1234},{"_164":1229,"_747":1230,"_490":1231},{"_164":1226,"_747":1227,"_490":1228},{"_164":1223,"_747":1224,"_490":1225},{"_164":1220,"_747":1221,"_490":1222},{"_164":1217,"_747":1218,"_490":1219},{"_164":1214,"_747":1215,"_490":1216},{"_164":1211,"_747":1212,"_490":1213},{"_164":1208,"_747":1209,"_490":1210},{"_164":1205,"_747":1206,"_490":1207},{"_164":1202,"_747":1203,"_490":1204},{"_164":1199,"_747":1200,"_490":1201},"22-changelog","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Date	Change
2026-05-25	Wrapped long examples, sample responses, and JSON structures in expandable sections for GitBook readability.
2026-05-25	Added `option_url` and `url_display` fields with accepted values.
2026-05-25	Updated API host to `https://public-api.avisplus.io`, added Swagger URL, clarified token handling, clarified `field` vs `key` usage, reorganized option type enum, and added examples.
2026-04-09	Added the `translated` field to option set responses when the `locale` query parameter is provided.
2026-04-06	Released Public API v1 with option sets list/detail, settings, and localizations endpoints.

\n","22. Changelog","21-example-conditional-logic-between-two-options","

View conditional logic JSON example

{\n  \"key\": \"engraving_text_key\",\n  \"type\": \"text\",\n  \"option_name\": \"Engraving text\",\n  \"label_product\": \"Enter engraving text\",\n  \"required\": false,\n  \"conditional_logic\": {\n    \"type\": \"show\",\n    \"logic\": \"all\",\n    \"condition_items\": [\n      {\n        \"field\": \"add_engraving_key\",\n        \"type\": \"contains\",\n        \"field_label\": \"Add engraving?\",\n        \"value\": \"yes_value_id\"\n      }\n    ]\n  }\n}\n

In this example:

engraving_text_key is the key of the option being controlled.
add_engraving_key is the key of the controlling option.
yes_value_id is the selected value ID that triggers the condition.

---

\n","21. Example: Conditional Logic Between Two Options","20-example-option-with-values","

View option JSON example

{\n  \"key\": \"color_option_key\",\n  \"type\": \"swatch_single_color\",\n  \"option_id\": \"color_option_id\",\n  \"option_name\": \"Color\",\n  \"label_product\": \"Choose your color\",\n  \"label_cart\": \"Color\",\n  \"required\": true,\n  \"sort\": 1,\n  \"option_values\": [\n    {\n      \"value_id\": \"red_value_id\",\n      \"value\": \"Red\",\n      \"type\": \"adjustprice\",\n      \"isValueActive\": \"TRUE\",\n      \"price\": 5,\n      \"swatch\": {\n        \"color\": \"#FF0000\",\n        \"file_image\": {},\n        \"file_image_url\": \"\",\n        \"is_color\": true,\n        \"colors_number\": \"one\"\n      }\n    }\n  ]\n}\n

\n","20. Example: Option with Values","19-important-notes","

Boolean-like values stored as strings

Some fields look like booleans but are returned as strings.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Field	Returned values
`isValueActive`	`\"TRUE\"` or `\"FALSE\"`
`allow_multiple`	`\"true\"` or `\"false\"`
`app_status`	`\"true\"` or `\"false\"`

Client applications should parse these fields as strings unless explicitly converted.

IDs

key, option_id, and value_id are usually 30-character nanoid strings. Some values may be UUID v4 values depending on data source or legacy data.

Price

Price values are numbers and may contain decimals.

Group ID

group_id only exists when type = \"option_group\". Its value is a timestamp generated by Date.now().

Group and step parents

group_parent and step_parent only exist when an option is a child of a group or a step.

Swatch types

is_color = true means the swatch is a color swatch.
is_color = false means the swatch is an image swatch.

\n","19. Important Notes","18-value-type-enum","

Valid values for option_values[].type.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Type	Description
`adjustprice`	Fixed additional price.
`percentagecharge`	Percentage-based charge based on the original product price.
`chargeorbundle`	Charge or bundle linked to a product or variant.
`useexistingvariant`	Use an existing Shopify variant.
`createcharge`	Create a new charge as a separate line item.

\n","18. Value Type Enum","17-option-type-enum","

Valid values for options[].type.

Input options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Type	Description
`text`	Single-line text input.
`textarea`	Multi-line text input.
`number`	Number input.
`email`	Email input.
`phone`	Phone number input.
`date`	Date or datetime picker.
`file`	File upload.
`color`	Color picker.
`font`	Font selector.
`hidden_field`	Hidden field.

Choice options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Type	Description
`radio`	Radio buttons. Single selection.
`checkbox`	Checkboxes. Multiple selection.
`button_single`	Button option. Single selection.
`button_multi`	Button option. Multiple selection.
`select`	Drop-down menu.
`combo_box`	Combo box.
`combo_select`	Combo dropdown.

Swatch options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Type	Description
`swatch`	Swatches, legacy or generic.
`combo_color`	Combo color.
`combo_image`	Combo image.
`swatch_single_color`	Color swatch. Single selection.
`swatch_single_image`	Image swatch. Single selection.
`swatch_multi_color`	Color swatch. Multiple selection.
`swatch_multi_image`	Image swatch. Multiple selection.
`swatch_select_color`	Color dropdown.
`swatch_select_image`	Image dropdown.

Pricing, quantity, and configuration options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Type	Description
`switch`	On/off toggle.
`slider`	Numeric slider.
`quantity`	Quantity input.
`dimension`	Dimension input, such as W × H × D.

Content and layout options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Type	Description
`paragraph`	Display text.
`heading`	Display heading.
`html`	Custom HTML.
`divider`	Divider line.
`space`	Spacer.
`modal`	Popup modal.
`size_chart`	Size chart.
`step`	Multi-step wizard.
`option_group`	Option group.

\n","17. Option Type Enum","16-inventory-structure","

Inventory data is hydrated from a separate collection and is not stored directly inside option_sets.

View inventory JSON structure

{\n  \"status\": false,\n  \"items\": [\n    {\n      \"value_id\": \"string (for option_value) or undefined\",\n      \"key\": \"string (for option input type) or undefined\",\n      \"sku\": \"\",\n      \"barCode\": \"\",\n      \"available\": \"0\",\n      \"onHand\": \"0\",\n      \"committed\": \"0\",\n      \"unavailable\": \"0\",\n      \"tracked\": false,\n      \"continueSelling\": false,\n      \"option_name\": \"\",\n      \"option_value\": \"\"\n    }\n  ]\n}\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Field	Type	Description
`status`	boolean	Whether inventory tracking is enabled for this option.
`items`	array	List of inventory items. Each item corresponds to an option value or an input-type option.
`items[].value_id`	string or undefined	ID of the option value. May exist when the item belongs to an `option_value`.
`items[].key`	string or undefined	Option key. May exist when the item belongs to an input-type option such as `text` or `number`.
`items[].sku`	string	SKU.
`items[].barCode`	string	Barcode.
`items[].available`	string or number	Available inventory quantity.
`items[].onHand`	string or number	Actual on-hand inventory quantity.
`items[].committed`	string or number	Committed quantity, usually reserved by existing orders.
`items[].unavailable`	string or number	Unavailable inventory quantity.
`items[].tracked`	boolean	Whether inventory is tracked.
`items[].continueSelling`	boolean	Whether selling continues when out of stock.
`items[].option_name`	string	Option name.
`items[].option_value`	string	Option value name.

\n","16. Inventory Structure","15-dimension-values-structure","

View dimension values JSON structure

{\n  \"default\": \"66\",\n  \"label\": \"Width\",\n  \"X\": {\n    \"label\": \"Width\"\n  },\n  \"Y\": {\n    \"label\": \"Height\"\n  },\n  \"Z\": {\n    \"label\": \"Depth\"\n  }\n}\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Field	Type	Description
`default`	string	Default dimension value.
`label`	string	Main dimension label.
`X.label`	string	Label for width.
`Y.label`	string	Label for height.
`Z.label`	string	Label for depth.

\n","15. Dimension Values Structure","14-slider-structure","

View slider JSON structure

{\n  \"status\": false,\n  \"rows\": 1,\n  \"per_row\": 2.5,\n  \"show_icon\": true,\n  \"show_dot\": false\n}\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Field	Type	Description
`status`	boolean	Whether the slider configuration is enabled.
`rows`	number	Number of rows.
`per_row`	number	Number of items per row.
`show_icon`	boolean	Whether to show icons.
`show_dot`	boolean	Whether to show dots.

\n","14. Slider Structure","13-step-structure","

Used for multi-step options when type = \"step\".

View step JSON structure

{\n  \"items\": [\n    {\n      \"step_id\": \"string\",\n      \"icon\": \"url\",\n      \"name\": \"Step Name\",\n      \"desc\": \"Description\"\n    }\n  ],\n  \"layout\": \"step-dots\"\n}\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Field	Type	Description
`items`	array	List of steps.
`items[].step_id`	string	Unique step ID.
`items[].icon`	string	Step icon URL.
`items[].name`	string	Step name.
`items[].desc`	string	Step description.
`layout`	string	Step layout style. Example: `step-dots`.

\n","13. Step Structure","12-conditional-logic","

Conditional logic controls whether an option is shown or hidden based on another option’s selected value.

View JSON structure

{\n  \"type\": \"show\",\n  \"logic\": \"all\",\n  \"condition_items\": [\n    {\n      \"field\": \"option_key\",\n      \"type\": \"contains\",\n      \"field_label\": \"Option Name\",\n      \"value\": \"value_id\"\n    }\n  ]\n}\n

Field descriptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Field	Type	Description
`type`	string	Action when the condition matches. Accepted values: `show` or `hide`.
`logic`	string	How conditions are combined. Accepted values: `all` for AND logic or `any` for OR logic.
`condition_items[].field`	string	Key of the controlling option used for comparison. This must match `options[].key`.
`condition_items[].type`	string	Condition operator. Examples: `contains`, `is`.
`condition_items[].field_label`	string	Display label of the controlling option. Used for reference only.
`condition_items[].value`	string or null	Comparison value. For selectable options, this usually matches `option_values[].value_id`.

Example: show engraving text only when engraving is selected

{\n  \"type\": \"show\",\n  \"logic\": \"all\",\n  \"condition_items\": [\n    {\n      \"field\": \"engraving_option_key\",\n      \"type\": \"contains\",\n      \"field_label\": \"Add engraving?\",\n      \"value\": \"yes_value_id\"\n    }\n  ]\n}\n

In this example:

field = the key of the “Add engraving?” option.
value = the value_id of the “Yes” option value.
The target option will be shown only when the selected value contains yes_value_id.

\n","12. Conditional Logic","11-optionvalue-object","

option_values[] contains the selectable values of a choice-based option, such as radio, checkbox, dropdown, button, and swatch options.

Field	Type	Description
`value_id`	string	Unique value ID. Usually a 30-character nanoid.
`value`	string	Label displayed on the storefront. Examples: `Red`, `Size M`, `Custom text`.
`type`	string	Pricing type. See Value Type Enum.
`isValueActive`	string	Boolean-like string. Always `\"TRUE\"` for active or `\"FALSE\"` for disabled, not a boolean.
`price`	number	Fixed additional price. Decimal value. Example: `5.99`.
`percentageCharge`	number	Percentage-based charge based on the original product price. Example: `10` means 10%.
`option_show_price`	string	Price display mode. Accepted values: `only_value`, `only_label`, `both`, or `none`.
`productId`	string	Linked Shopify product ID. Used for charge or bundle logic.
`productVariationId`	string	Linked Shopify variant ID.
`productName`	string	Linked product name.
`variantId`	string	Shopify variant ID.
`variantName`	string	Variant name.
`variantBundleName`	string	Variant name in bundle logic.
`productBundleName`	string	Product name in bundle logic.
`handle`	string	Shopify product handle.
`is_product_bundle`	boolean	Whether the value is part of bundle logic.
`isAdd`	boolean	Add charge flag.
`variant_image`	string	Variant image URL.
`inventory_quantity`	number	Cached inventory quantity from Shopify.
`des_value`	string	HTML description or tooltip content for the value.
`swatch`	object	Swatch display configuration.

View swatch JSON structure

{\n  \"color\": \"#FF0000\",\n  \"file_image\": {},\n  \"file_image_url\": \"https://...\",\n  \"is_color\": true,\n  \"colors_number\": \"one\"\n}\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Field	Type	Description
`color`	string	Hex color. Example: `#FF0000`.
`file_image`	object	Uploaded file data used by the frontend.
`file_image_url`	string	Swatch image URL.
`is_color`	boolean	Whether the swatch displays a color or an image. `true` = color swatch, `false` = image swatch.
`colors_number`	string	Number of colors displayed. Accepted values: `one` or `two`.

\n","11. OptionValue Object","10-option-object","

options[] contains the option fields inside an option set.

Important identifier mapping

This is the most important part when consuming option data externally:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Field	Meaning	Recommended usage
`key`	Stable unique option key. Usually a 30-character nanoid.	Use this as the main option identifier in external logic.
`option_id`	Unique option ID.	Internal option ID. Do not confuse this with `key`.
`option_name`	Internal option name used in admin.	For admin/internal reference only. Not the storefront label.
`label_product`	Label displayed on the product page.	Use this as the customer-facing label on product page UI.
`label_cart`	Label displayed in cart or order.	Use this as the customer-facing label in cart/order UI.
`option_values[].value_id`	Unique ID of a selectable value.	Use this as the selected value identifier for choice-based options.

For conditional logic, condition_items[].field must use the controlling option’s options[].key. It should not use option_id, option_name, or the display label.

Key fields

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Field	Type	Description
`key`	string	Unique option key. Usually a 30-character nanoid.
`type`	string	Option type. See Option Type Enum.
`option_id`	string	Unique option ID. Usually a 30-character nanoid.
`option_name`	string	Internal option name. Used in the admin only and not displayed on the storefront.
`label_product`	string	Label displayed on the product page storefront.
`label_cart`	string	Label displayed in the cart or order.
`input_name`	string	Technical name describing the UI input type.
`class_name`	string	Custom CSS class.
`required`	boolean	Whether the customer is required to select or enter a value.
`sort`	number	Option sorting order inside the option set. Smaller numbers appear first.
`default_value`	string	Default value.
`placeholder`	string	Input placeholder.
`min`	string	Minimum value. Used by `number` and `date`.
`max`	string	Maximum value. Used by `number` and `date`.
`min_length`	string or number	Minimum character length. Used by `text`.
`max_length`	string	Maximum character length.
`min_selections`	string	Minimum number of selections. Used by multi-choice option types such as `checkbox`, `button_multi`, and `swatch_multi`.
`max_selections`	string	Maximum number of selections.
`allow_multiple`	string	Boolean-like string. Always `\"true\"` or `\"false\"`, not a boolean.
`allow_value`	string	Input validation rule. Examples: `only_letters`, `only_letters_number`.
`help_text`	string	Help text shown to customers.
`help_text_select`	string	Help text display mode. Accepted values: `tooltip` or `none`.
`tooltip_display`	string	Tooltip display mode. Accepted values: `hide`, `show`, or `value`.
`tooltip_text`	string	Tooltip content.
`switch_label`	string	Label for the switch option when `type = \"switch\"`. Default: `Yes`.
`default_status`	string or boolean	Default status for switch or group.
`display_type`	string	Display type. Accepted values: `accordion` for group or `hyperlink` for modal.
`styles_heading`	string	HTML heading tag. Accepted values: `h1` to `h6`, or `p`.
`content_heading`	string	Heading content when `type = \"heading\"`.
`option_show_price`	string	Price display mode. Accepted values: `only_value`, `only_label`, `both`, or `none`.
`add_price_quantity_type`	string	Pricing mode by quantity. Accepted values: `each` or `once`.
`unit`	string	Measurement unit. Used by `dimension` and `slider`. Default: `m`.
`step`	number or object	Step value for number or slider, or multi-step configuration.
`prefix`	string or null	Display prefix.
`suffix`	string or null	Display suffix.
`quantity_label`	string	Label for advanced quantity input.
`value_country`	string	Country code. Default: `US`.
`is_color`	boolean	Whether the swatch is a color swatch. `true` = color swatch, `false` = image swatch.
`is_option_default_value`	boolean	Whether the option has a default value.
`option_default_value`	string	Default value ID. Matches `value_id` in `option_values`.
`show_option_value_qty`	boolean	Whether to show a quantity input for each option value.
`check_total_qty`	boolean	Whether to validate total quantity.
`is_onetime`	boolean	Whether the charge is applied only once and not multiplied by product quantity.
`addcharge_per_character`	boolean	Whether to charge per entered character.
`text_transform`	string	Text transform setting. Accepted values: `uppercase`, `lowercase`, `capitalize`, or empty string.
`hide_price`	boolean	Whether to hide the displayed price.
`option_url`	string	URL behavior for the option. Accepted values: `none`, `group_product`, `only_url`, or `allowed_open_url`.
`url_display`	string	Controls how the URL is displayed or opened. Accepted values: `click_value` or `click_view`.
`rich_text_value`	string	Rich text content. Used by `paragraph` and `html`.
`rich_text_value_modal`	string	Rich text content for modal popup.
`rich_text_value_size_chart`	string	Rich text content for size chart.
`editor_type`	string	Editor type for modal. Accepted values: empty string for rich text or `code_editor`.
`group_id`	number	Group ID. Only available when `type = \"option_group\"`. Value is generated by `Date.now()`.
`group_parent`	string	Parent group ID. Only available when the option belongs to a group.
`step_parent`	string	Parent step ID. Only available when the option belongs to a step.
`button`	object	Button configuration. Example: `{ \"button_type\": \"combine\", \"step_required\": true }`.
`dimension_price_total`	string	Dimension-based pricing formula. Example: `x * {{price}}`.
`conditional_logic`	object	Conditional show/hide logic. See Conditional Logic.
`slider`	object	Slider configuration.
`live_preview`	object	Live preview configuration.
`dimension_values`	object	Dimension configuration.
`inventory`	object	Inventory configuration.
`option_values`	array	List of option values. See OptionValue object.

URL-related fields

Use these fields when an option needs to work with product grouping or URL-based behavior.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Field	Value	Description
`option_url`	`none`	Default value when no URL behavior is selected.
`option_url`	`group_product`	Used for grouped product behavior.
`option_url`	`only_url`	The option only contains a URL.
`option_url`	`allowed_open_url`	Allows the URL to be opened.
`url_display`	`click_value`	The URL action is triggered when the customer clicks the option value.
`url_display`	`click_view`	The URL action is triggered when the customer clicks the view/open action.

\n","10. Option Object","9-get-localizations","

Use this endpoint to retrieve localization strings for a specific locale.

GET /api/public/v1/localizations\n

Query parameters

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Parameter	Type	Required	Description
`locale`	string	Yes	BCP 47 language code. Examples: `en`, `vi`, `fr`, `de`. If this parameter is missing, the API returns `400`.

Example request

curl -X GET \"https://public-api.avisplus.io/api/public/v1/localizations?locale=en\" \\\n  -H \"Authorization: Bearer <api-token>\"\n

Response 200

{\n  \"shop\": \"my-store.myshopify.com\",\n  \"locale\": \"en\",\n  \"has_overrides\": true,\n  \"data\": {\n    \"text_price_add\": \"+{price_add}\",\n    \"text_alert_required_min_characters\": \"Minimum {min} characters required\",\n    \"dynamic_checkout_notification\": \"Please select all required options\",\n    \"text_total_price\": \"Total: {total}\"\n  }\n}\n

Localization fields

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Field	Type	Description
`shop`	string	Shop domain identified from the authenticated API token.
`locale`	string	Locale code passed by the client.
`has_overrides`	boolean	Whether there is a separate `setting_locales` document for this locale. `true` = locale-specific overrides exist, `false` = response only uses base strings from `display_settings`.
`data`	object	Object in `key -> translated string` format. Base values come from `display_settings`; overrides from `setting_locales[locale].data` are merged on top. Empty override values such as `null` or `\"\"` fall back to the base value.

Localization fallback behavior

If no setting_locales document is found for the requested locale, the API still returns 200.

In that case:

has_overrides is false.
data is returned from the base display_settings.
The API does not return 404 for missing locale overrides.

Common translation keys in `data`

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Key	Type	Description
`text_price_add`	string	Format for displaying additional price. Placeholder: `{price_add}`.
`customize_alert_required_min_characters`	string	Alert shown when the input is below the minimum character length. Placeholder: `{min}`.
`dynamic_checkout_notification`	string	Message shown near checkout when required options have not been selected.
`add_to_cart`	string	Text for the “Add to cart” button.
`added_to_cart`	string	Message shown after a product is added to the cart.
`sold_out`	string	Text displayed when the product is sold out.

\n","9. Get Localizations","8-get-settings","

Use this endpoint to retrieve app settings for the authenticated shop.

GET /api/public/v1/settings\n

The shop is automatically identified from the API token. This endpoint does not require query parameters.

Example request

curl -X GET \"https://public-api.avisplus.io/api/public/v1/settings\" \\\n  -H \"Authorization: Bearer <api-token>\"\n

Response 200

{\n  \"shop\": \"my-store.myshopify.com\",\n  \"data\": {\n    \"_id\": \"...\",\n    \"app_status\": \"true\",\n    \"use_css_version\": \"v2\",\n    \"shopify_option\": {},\n    \"show_add_charge_feat\": true,\n    \"show_conditional_logic_feat\": true\n  }\n}\n

Settings data

Field	Type	Description
`_id`	string	Settings document ID.
`app_status`	string	Boolean-like string. Always `\"true\"` for enabled or `\"false\"` for disabled, not a boolean.
`use_css_version`	string	CSS rendering version. Accepted values: `v1` or `v2`.
`shopify_option`	object	Shopify option display configuration. Controls whether native Shopify options are shown or hidden on the storefront.
`show_add_charge_feat`	boolean	Whether the add charge or extra pricing feature is enabled.
`show_conditional_logic_feat`	boolean	Whether the conditional logic feature is enabled.
`widget`	object	ArisPlus widget configuration. Includes fields such as `position`, `enabled`, and other widget settings.
`s_option_img`	object	Swatch image display configuration.
`s_option_backg_size`	string	CSS `background-size` value for image swatches.
`s_option_show_tooltip`	boolean	Whether to show tooltip on swatch hover.
`add_to_cart_style`	object	Add-to-cart button style configuration.
`cart_page`	object	Option display configuration for the cart page.
`product_page`	object	Option display configuration for the product page.
`validate_settings`	string	Validation display setting. Common values: `inline` or `alert`. May be auto-computed from the shop’s installation history if not explicitly set.
`custom_css`	string	Custom CSS injected into the storefront.
`app_embed`	boolean	Whether the app embed extension is active on the current theme.
`app_embed_theme_id`	string	ID of the theme where app embed is enabled.
`app_embed_theme_name`	string	Name of the theme where app embed is enabled.
`theme_version`	string	Theme version string.
`hide_hover_img_swatches`	boolean	Whether to hide hover images for swatches.
`show_watermark_on_product_page`	boolean	Whether to show the ArisPlus watermark on the product page.
`listFonts`	array of objects	Custom fonts uploaded by the merchant. Each item may include `name`, `family`, `type`, `css`, and `fontURL`.

\n","8. Get Settings","7-get-option-set-by-id","

Use this endpoint to retrieve a single option set by ID.

GET /api/public/v1/option-sets/:id\n

Input

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Parameter	Type	Required	Description
`id`	string	Yes	Path parameter. MongoDB ObjectId of the option set.
`locale`	string	No	Query parameter. BCP 47 language code. When provided, option labels and values are overlaid with translated values when available.

Example request

curl -X GET \"https://public-api.avisplus.io/api/public/v1/option-sets/option_set_id?locale=en\" \\\n  -H \"Authorization: Bearer <api-token>\"\n

Response 200

The data object uses the same structure as each item in data[] from the List Option Sets API.

{\n  \"shop\": \"my-store.myshopify.com\",\n  \"data\": {\n    \"_id\": \"option_set_id\",\n    \"option_set_name\": \"Gift Wrap Options\",\n    \"status\": true,\n    \"type\": \"manual\",\n    \"options\": []\n  }\n}\n

Response 404

Returned when the id does not exist or the option set has been soft-deleted.

{\n  \"error\": \"Option set not found\"\n}\n

\n","7. Get Option Set by ID","6-list-option-sets","

Use this endpoint to retrieve a paginated list of option sets for a shop.

GET /api/public/v1/option-sets\n

Query parameters

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Parameter	Type	Required	Description
`page`	integer	No	Page number, 1-based. Default: `1`.
`limit`	integer	No	Number of results per page. Minimum: `1`, maximum: `100`. Default: `20`.
`status`	string	No	Filter by option set status. Accepts `\"true\"` for active option sets or `\"false\"` for inactive option sets.
`product_id`	string	No	Filter option sets that apply to a specific Shopify product ID. The API uses the same matching logic as the storefront: manual sets assigned to the product, all-product sets, and automated sets whose conditions match the product.
`name`	string	No	Case-insensitive substring search by option set name. Example: `color`, `wrap`.
`locale`	string	No	BCP 47 language code, for example `en`, `vi`, `fr`, or `de`. When provided, option labels and values are overlaid with translated values when available.

Sort order

The response is sorted by:

sort ascending
created_at descending

Example request

curl -X GET \"https://public-api.avisplus.io/api/public/v1/option-sets?page=1&limit=20&status=true&product_id=1234567890&locale=en\" \\\n  -H \"Authorization: Bearer <api-token>\"\n

Response 200

{\n  \"shop\": \"my-store.myshopify.com\",\n  \"data\": [\n    {\n      \"_id\": \"option_set_id\",\n      \"option_set_name\": \"Gift Wrap Options\",\n      \"status\": true,\n      \"type\": \"manual\",\n      \"all_products\": false,\n      \"products\": [\"1234567890\"],\n      \"options\": [],\n      \"sort\": 0,\n      \"created_at\": \"2026-04-06T00:00:00.000Z\",\n      \"updated_at\": \"2026-04-09T00:00:00.000Z\"\n    }\n  ],\n  \"pagination\": {\n    \"page\": 1,\n    \"limit\": 20,\n    \"total\": 58,\n    \"pages\": 3\n  }\n}\n

`data[]` Option Set object

Field	Type	Description
`_id`	string	Unique option set ID. MongoDB ObjectId.
`option_set_name`	string	Display name of the option set.
`status`	boolean	Option set status. `true` = active, `false` = disabled.
`type`	string	Option set applying type. Accepted values: `manual`, `automated`, `all`.
`all_products`	boolean	Whether the option set applies to all products in the shop.
`products`	array of strings	Assigned Shopify product IDs. Usually available when `type = \"manual\"`.
`options`	array	List of options in the option set. See Option object.
`translated`	boolean	Only appears when `locale` is provided. `true` = translations were applied, `false` = no translation was found and original values are returned.
`sort`	number	Sorting order. Smaller numbers appear first. Default: `0`.
`conditional_applying_product`	object	Product auto-apply conditions. Used when `type = \"automated\"`.
`conditional_applying_customer`	object	Customer-based applying conditions.
`select_customer_type`	string	Customer selection mode. Accepted values: `all`, `manual`, `automated`, or `none`.
`customers`	array	List of customer IDs. Only available when `select_customer_type = \"manual\"`.
`markets`	object	Shopify Markets configuration.
`exclude_products`	object	Product exclusion configuration.
`template_info`	object	Template information. Only available when the option set was created from a template.
`isClone`	boolean	Indicates whether this option set was cloned from another option set.
`cloneId`	string	Source option set ID. Only available when `isClone = true`.
`live_preview_bg`	object	Background configuration for live preview.
`save_count`	number	Total number of times the option set has been saved.
`option_set_tag`	array of strings	Tags assigned to the option set.
`import_from`	string or null	Import source. Example: `easify`. May be `null` or missing if the option set was created manually.
`import_at`	ISO date string	Import timestamp.
`created_at`	ISO date string	Creation timestamp.
`updated_at`	ISO date string	Last update timestamp.

`pagination` object

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Field	Type	Description
`page`	integer	Current page.
`limit`	integer	Number of results per page.
`total`	integer	Total number of option sets matching the filter.
`pages`	integer	Total number of pages. Calculated by `Math.ceil(total / limit)`.

\n","6. List Option Sets","5-endpoints-overview","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Method	Endpoint	Purpose
`GET`	`/api/public/v1/option-sets`	Retrieve a paginated list of option sets.
`GET`	`/api/public/v1/option-sets/:id`	Retrieve a single option set by ID.
`GET`	`/api/public/v1/settings`	Retrieve app settings for the authenticated shop.
`GET`	`/api/public/v1/localizations`	Retrieve localization strings for a specific locale.

\n","5. Endpoints Overview","4-rate-limiting","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Rule	Value
Limit	60 requests per minute per shop
Calculation	Sliding window
Identifier	`shop_id`, identified from the API token
Exceeded response	`429` with a retry message

\n","4. Rate Limiting","3-error-format","

Error responses use the following format:

{\n  \"error\": \"<error description>\"\n}\n

Common error codes

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Code	Description
`400`	Bad request. Required query parameter is missing or invalid.
`401`	Missing authorization header or invalid API token.
`403`	The shop does not have an active subscription, or the app is uninstalled.
`404`	The requested resource does not exist.
`429`	Rate limit exceeded.
`500`	Server error.

\n","3. Error Format","2-authentication","

All API requests require the following authorization header:

Authorization: Bearer <api-token>\n

API token rules

The API token is issued per shop.
Each shop has one unique API token.
The shop must have an active app subscription.
The app must not be uninstalled from the shop.
If the shop does not meet these requirements, requests will return 403.

Token handling

Currently, API/Webview tokens are generated and provided by the ArisPlus team. Merchants do not generate tokens directly from the app UI yet.

Keep the API token secure. Do not publish it in public repositories, screenshots, client-side storefront code, or public documents.

\n","2. Authentication","1-api-host-base-url-and-swagger","

API Host

https://public-api.avisplus.io\n

Base URL

https://public-api.avisplus.io/api/public/v1\n

Swagger UI

https://public-api.avisplus.io/swagger/\n

Use Swagger UI to check the latest request/response schema and test API endpoints.

GitBook expandable blocks

Long examples and sample responses are placed inside expandable sections to keep the page easier to scan.

Version path

The current API version path is:

/api/public/v1\n

Breaking changes will be released under a new version path, for example:

/api/public/v2\n

Adding new fields is not considered a breaking change. Client applications should ignore unknown fields to remain compatible with future updates.

\n","1. API Host, Base URL, and Swagger","cmrydxvnb003ecg7k8mm30cbd","subscription-and-billings",[1268,1269,1270,1271],{"_164":279,"_166":280,"_168":281,"_170":282,"_734":1360,"_736":737,"_738":767,"_740":741,"_742":1361,"_744":-5},{"_164":275,"_166":276,"_168":277,"_170":278,"_734":1311,"_736":737,"_738":1312,"_740":741,"_742":1313,"_744":280},{"_164":271,"_166":272,"_168":273,"_170":274,"_734":1291,"_736":737,"_738":858,"_740":741,"_742":1292,"_744":-5},{"_164":266,"_166":267,"_168":268,"_170":269,"_734":1272,"_736":737,"_738":858,"_740":741,"_742":1273,"_744":-5},[1274,1275,1276,1277,1278],[],{"_164":746,"_747":1290,"_490":749},{"_164":267,"_747":1288,"_490":1289},{"_164":1285,"_747":1286,"_490":1287},{"_164":1282,"_747":1283,"_490":1284},{"_164":1279,"_747":1280,"_490":1281},"need-assistance","

If you have any questions about canceling subscription or refunds, our 24/7 support team is here to help!

📩 Live chat support in the app
📧 Email us at help@arisify.io

We appreciate having you as a user and hope to see you again in the future!

\n","💬 Need Assistance?","important-notes","

Immediate Effect: Switching to the FREE plan cancels your paid subscription immediately.
Billing: No further charges will occur after cancellation.
Feature Availability: When you cancel, you’ll move to our Free plan and can still keep using the app. Your option sets and settings stay saved. Paid features will be paused, so you can review your existing setups anytime (but you won’t be able to edit them). If you upgrade again later, everything will be ready to continue.

\n","❗ Important Notes","shopify-app-credit-refund","

Automatic Refund Calculation: Shopify will determine the unused portion of your subscription and issue a refund in the form of app credit.
Usage of App Credit: This credit can be applied to future Shopify app charges.
Processing Time: The refund may take a few days to appear, depending on Shopify’s processing time.

\n","💰 Shopify App Credit Refund","

Step 1: Open Your Subscription Settings

Log in to your Shopify Admin Panel.
Go to Apps > ArisPlus Product Options.
Navigate to the Pricing tab.

Step 2: Switch to the FREE Plan

Locate the FREE Plan and click Select.
Your paid plan will be canceled immediately.

✅ Your subscription is now canceled, and you will not be charged further.

\n","🔽 How to Cancel Your Subscription","

If you no longer need a paid plan for ArisPlus Product Options, you can cancel your subscription anytime by switching back to the FREE plan. Your current subscription will be canceled immediately, and no further charges will occur.

💡 If you cancel before your billing cycle ends, Shopify will automatically calculate and process a refund for the unused portion of your subscription as app credit. This credit can be used toward future Shopify app charges.

\n",[1293,1294,1295,1296,1297],[],{"_164":746,"_747":1310,"_490":749},{"_164":1307,"_747":1308,"_490":1309},{"_164":1304,"_747":1305,"_490":1306},{"_164":1301,"_747":1302,"_490":1303},{"_164":1298,"_747":1299,"_490":1300},"need-help","

If you need assistance or have any questions, our support team is available 24/7.

📩 Live chat support in the app
📧 Email us at help@arisify.io

🚀 Upgrade now and unlock the full potential of ArisPlus Product Options!

\n","Need Help?","billing-payment-information","

All plan changes are handled through Shopify billing.
Annual plans come with a 2-month discount compared to the monthly rate.
Upgrades and downgrades take effect instantly.

\n","💳 Billing & Payment Information","switching-between-plans","

You can switch between plans at any time, whether upgrading or downgrading. The new plan will take effect immediately after confirmation.

If you downgrade, keep in mind that some advanced features may no longer be available.

Will I be charged after downgrading from Paid plan to Free plan?

It depends on timing:

Switch to Free within the 14-day trial → no charge.
Switch after the trial ends → Shopify will still charge for the full paid month, even if you downgrade mid-cycle.

Plan changes are billed through Shopify, so the exact charge (if any) depends on when the downgrade happens. If you’re unsure or you notice an unexpected charge, contact us with your store URL and the downgrade date. We’ll check it with you and make it right.

\n","🔁 Switching Between Plans","how-to-upgrade-your-plan","

If you’re currently on a Free or lower-tier plan and want to unlock more features, follow these steps:

Step 1: Open the Subscription Settings

Log in to your Shopify Admin Panel.
Go to Apps > ArisPlus Product Options.
Navigate to the Pricing tab.

Step 2: Select Your New Plan

Review the available plans:
- Pro ($12/month or $120/year – save 2 months!)
- Advanced ($24/month or $240/year – save 2 months!)
- Premium ($59/month or $590/year – save 2 months!)
\n
Click Select on your desired plan.

Step 3: Confirm Your Upgrade

Click Approve, and Shopify will process the change immediately.
Your new plan is now active instantly, and you can start enjoying upgraded features right away!

\n","🔄 How to Upgrade Your Plan","

At ArisPlus, we want to help your business grow by providing flexible plan options that fit your needs. Whether you’re looking for more customization, advanced features, or priority support, upgrading your plan is quick and easy!

💡 Any plan upgrade or change takes effect immediately, so you can start using your new features right away!

\n",[1314,1315,1316,1317,1318,1319,1320,1321,1322,1323,1324,1325],"15 min",[],{"_164":746,"_747":1359,"_490":749},{"_164":1356,"_747":1357,"_490":1358},{"_164":1353,"_747":1354,"_490":1355},{"_164":1350,"_747":1351,"_490":1352},{"_164":1347,"_747":1348,"_490":1349},{"_164":1344,"_747":1345,"_490":1346},{"_164":1341,"_747":1342,"_490":1343},{"_164":1338,"_747":1339,"_490":1340},{"_164":1335,"_747":1336,"_490":1337},{"_164":1332,"_747":1333,"_490":1334},{"_164":1329,"_747":1330,"_490":1331},{"_164":1326,"_747":1327,"_490":1328},"11-frequently-asked-questions","

Do Free and Pro plans include API access?

No. API access starts from the Advanced plan.

Does Advanced include Webview access?

No. Webview access is available only on Premium.

Does Advanced include Webhooks?

No. Webhooks are available only on Premium.

Are API Token and Webview Token usage counted separately?

No. They share the same quota for that billing cycle.

For example, Premium includes 25,000 total calls per billing cycle across both API Token and Webview Token usage.

When does my API quota reset?

Your API quota resets at the beginning of each Shopify app billing cycle.

The billing cycle starts when your paid subscription charge begins, immediately after the 14-day free trial ends.

It does not start when you generate an API token or make your first API call.

Do webhook deliveries count toward quota?

No. Webhook deliveries do not count toward your monthly API quota.

However, API requests made after receiving a webhook do count.

Do unused API calls roll over?

No. Unused included calls expire at the end of each billing cycle.

Do overage blocks roll over?

No. Overage blocks only apply to the current billing cycle.

Can I avoid overage charges?

Yes. You can reduce usage by caching API responses, avoiding unnecessary repeated requests, using webhooks instead of polling, or upgrading to a plan with a higher included quota.

What happens if I hit the Advanced spending cap?

Further API usage may be paused until the next billing cycle or until you upgrade to Premium.

What happens if I hit the Premium spending cap?

Further API or Webview usage may be paused until the next billing cycle, unless you increase your spending cap.

Is Premium unlimited?

No. Premium is designed for higher-volume usage, but it is not unlimited by default.

Premium includes 25,000 calls per billing cycle and has a default API overage spending cap of $50 per cycle. You may increase the spending cap if your store needs higher usage.

Will I be charged overage during a free trial?

No. Free trial stores do not have paid API overage.

If the trial quota is used up, API access may be paused until the store upgrades or the quota resets.

Will development stores be charged overage?

No. Development stores are not charged API overage.

If the development quota is used up, API access may be paused until the quota resets or the store moves to a paid subscription.

Why do I need to approve a new subscription to enable automatic overage?

Some existing subscriptions may not include usage-based billing yet.

To enable automatic API overage, Shopify may require you to approve a new subscription that includes both the monthly plan and usage-based billing terms.

Aris will show a confirmation message before redirecting you to Shopify approval.

Where will charges appear?

All subscription and usage charges are handled by Shopify and appear on your Shopify invoice.

","11. Frequently asked questions","10-usage-alerts-and-service-notifications","

Aris will send usage and service notifications when important usage events happen.

These alerts are designed to help you monitor usage, avoid unexpected charges, and prevent service interruptions.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Event	What it means
80% quota reached	Your usage is getting close to your included quota
90% quota reached	Your usage is very close to your included quota
100% quota reached	Your included quota has been fully used
Extra block triggered	An additional usage block has been added or charged
Spending cap reached	Your configured spending cap has been reached
API calls are rejected	Requests may be failing due to quota, rate limit, invalid token, access issue, or spending cap
Webhook delivery fails	Aris could not deliver webhook events successfully
Webhook is paused or stopped	Webhook delivery may be disabled due to repeated failures

Aris may notify you by in-app message, email, or other available communication channels.

Merchants are responsible for monitoring their own API usage and integration behavior.

\n","10. Usage alerts and service notifications","9-when-api-access-may-be-paused-or-rejected","

API access may be paused, blocked, or rejected in the following cases:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Situation	Result
Trial store exceeds trial quota	API access may be paused
Development store exceeds development quota	API access may be paused
Advanced user reaches the $15 spending cap	API access may be paused until reset or upgrade
Premium user reaches the current spending cap	API or Webview access may be paused unless the cap is increased
Invalid token is used	API request is rejected
Webview domain is not whitelisted	Webview request is rejected
Rate limit is exceeded	Requests may be temporarily rejected
Webhook delivery repeatedly fails	Webhook delivery may be paused or stopped

\n","9. When API access may be paused or rejected","8-how-shopify-billing-works","

Aris Product Options billing is handled by Shopify.

Your subscription fee and any applicable usage charges are processed by Shopify and appear on your Shopify invoice.

Depending on your subscription state, the billing flow may work differently.

8.1. Buy a one-time usage block

This allows you to add extra quota without changing your current subscription.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Action	Result
Buy one-time usage block	Extra quota is added for the current billing cycle
Current subscription	No subscription change
Billing approval	Approved once through Shopify
Rollover	No rollover to next cycle

One-time usage blocks only apply to the current billing cycle.

8.2. Enable automatic overage billing

If you want automatic overage billing, Shopify will require you to approve a new subscription that includes usage-based billing.

When this happens:

Your current subscription will be cancelled immediately.
A new subscription will start immediately.
A new billing cycle will begin.
Shopify will issue app credit for unused time from your previous subscription according to Shopify’s billing rules.

Aris will always show a confirmation message before redirecting you to Shopify approval.

You can review the billing change before approving it in Shopify.

After you approve the subscription in Shopify, API overage can be applied automatically when your usage exceeds the included quota.

You do not need to approve each overage block manually, as long as your usage remains within your approved spending cap.

If you increase your Premium spending cap, Shopify may ask you to approve the updated billing terms.

\n","8. How Shopify billing works","7-webhooks","

Webhooks are available only on the Premium plan.

Webhooks allow your system to receive real-time updates when Aris Product Options data changes, instead of repeatedly polling the API.

Available webhook topics:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Webhook topic	When it is triggered
`option_set.updated`	When an option set is saved, updated, or published
`option_set.deleted`	When an option set is deleted
`settings.updated`	When app settings, widget settings, or custom CSS are updated

Webhook deliveries do not count toward your API quota in the billing cycle.

However, if your system receives a webhook and then calls the API to fetch updated data, that API request does count toward your quota.

Example:

Aris sends your system an option_set.updated webhook.
Your system calls GET /option-sets/:id to fetch the latest data.
The webhook delivery does not count toward quota.
The API request counts as 1 API call.

If webhook delivery repeatedly fails, Aris may pause or stop webhook delivery to protect system stability. Aris will send a notification when webhook delivery fails, is paused, or is stopped.

\n","7. Webhooks","6-api-token-vs-webview-token","

Aris Product Options supports two token types.

API Token

The API Token is designed for server-side integrations.

You can use it for:

ERP sync
OMS sync
3PL sync
Mobile app backend
Headless storefront backend
Reporting
Automation
Internal tools

Rate limit: 60 requests per minute

Important: The API Token is a secret key and must not be exposed in the browser or frontend code.

Webview Token

The Webview Token is designed for client-side usage, where options need to be displayed outside the standard Shopify storefront.

You can use it for:

Custom landing pages
WordPress pages
Custom storefront pages
External websites
Embedded product option widgets outside Shopify theme pages

Rate limit: 600 requests per minute

Important: The Webview Token is public-facing but protected by domain whitelist validation. You must add approved domains before using Webview access.

\n","6. API Token vs Webview Token","5-what-counts-as-an-api-call","

An API call is counted each time your system sends a request to Aris Product Options API endpoints, such as:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Endpoint	Description
GET /option-sets	Retrieve option sets and related option data
GET /option-sets/:id	Retrieve one specific option set
GET /settings	Retrieve widget settings, CSS settings, or feature settings
GET /localizations	Retrieve translated UI strings

Each successful API request counts as 1 API call.

If your plan includes both API Token and Webview Token access, both token types share the same usage quota.

\n","5. What counts as an API call?","4-how-overage-blocks-and-spending-caps-work","

Overage applies when your API usage exceeds the included quota in your billing cycle.

Aris supports two billing methods for API overage:

One-time charge
Usage charge

Your overage experience depends on which billing method your store is using.

4.1. Overage blocks by plan

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Plan	Included quota	Overage block	Overage price
Advanced	5,000 calls / billing cycle	5,000 calls	$5 / block
Premium	25,000 calls / billing cycle	25,000 calls	$10 / block

If your usage enters a new overage block, the full block charge applies.

Example:

If you are on Premium and use 50,001 calls in one billing cycle:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Item	Calculation
Included quota	25,000 calls
Extra usage	25,001 calls
Overage blocks	2 blocks
Overage charge	$20

Why 2 blocks?

Because Premium overage is charged per additional 25,000-call block:

25,001–50,000 calls = first extra block
50,001–75,000 calls = second extra block

4.2. If you are using one-time charge

Under the one-time charge method, Aris does not automatically charge API overage in the background.

When your included quota is used up, you can manually approve and buy extra usage blocks through Shopify.

How one-time charge works

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Item	How it works
Extra usage charge	Manually approved by you
Auto charge	No
Shopify approval	Required for each purchase
Extra block validity	Current billing cycle only
Rollover	No
Billing cycle	Based on your existing subscription start date
Cycle change when switching plans	No
Spending cap	Not applied

Important:

One-time charge users only pay for extra blocks they manually approve.

Aris will not automatically add overage charges without your approval.

Advanced plan with one-time charge

If you are on Advanced and use one-time charge:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Item	Details
Included quota	5,000 calls / billing cycle
Extra block	5,000 calls
Price per extra block	$5
Maximum extra blocks	Up to 3 blocks
Maximum extra charge	$15 / billing cycle

After 3 extra blocks are used, API access may be paused until the next billing cycle or until you upgrade to Premium.

Advanced one-time charge example:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Usage	Charge
0–5,000 calls	Included
5,001–10,000 calls	Buy 1 block: $5
10,001–15,000 calls	Buy 2 blocks: $10 total
15,001–20,000 calls	Buy 3 blocks: $15 total
Above 20,000 calls	API access may be paused or upgrade may be required

Premium plan with one-time charge

If you are on Premium and use one-time charge:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Item	Details
Included quota	25,000 calls / billing cycle
Extra block	25,000 calls
Price per extra block	$10
Spending cap	No fixed spending cap
Extra block approval	Manually approved by you

Premium users using one-time charge can buy as many extra blocks as needed.

Premium one-time charge example:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Usage	Charge
0–25,000 calls	Included
25,001–50,000 calls	Buy 1 block: $10
50,001–75,000 calls	Buy 2 blocks: $20 total
75,001–100,000 calls	Buy 3 blocks: $30 total
100,001–125,000 calls	Buy 4 blocks: $40 total
125,001–150,000 calls	Buy 5 blocks: $50 total
Above 150,000 calls	You can continue buying more blocks if needed

4.3. If you are using usage charge

You may be using the usage charge method if your subscription includes Shopify usage-based billing, or if you switch from one-time charge to automatic usage billing.

Under the usage charge method, API overage can be charged automatically when your usage exceeds the included quota.

You do not need to approve each overage block manually, as long as the charge is within the spending cap you approved in Shopify.

How usage charge works

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Item	How it works
Extra usage charge	Automatically charged when usage exceeds quota
Auto charge	Yes
Shopify approval	Required when enabling usage charge or increasing cap
Extra block validity	Current billing cycle only
Rollover	No
Billing cycle	Follows Shopify billing cycle
Spending cap	Required by Shopify

Important:

Usage charge is designed to avoid service interruption. Once approved, extra blocks can be charged automatically within your approved spending cap.

Advanced plan with usage charge

If you are on Advanced and use usage charge:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Item	Details
Included quota	5,000 calls / billing cycle
Extra block	5,000 calls
Price per extra block	$5
Spending cap	$15 / billing cycle
Can increase cap?	No

Advanced usage charge example:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Usage	Charge
0–5,000 calls	Included
5,001–10,000 calls	+$5
10,001–15,000 calls	+$10 total
15,001–20,000 calls	+$15 total
Above 20,000 calls	API access may be paused or upgrade may be required

After the $15 spending cap is reached, API access may be paused until the next billing cycle or until you upgrade to Premium.

Premium plan with usage charge

If you are on Premium and use usage charge:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Item	Details
Included quota	25,000 calls / billing cycle
Extra block	25,000 calls
Price per extra block	$10
Spending cap	$50 / billing cycle
Can increase cap?	Yes

Premium has a default spending cap because Shopify requires a specific spending limit for usage-based billing.

The spending cap start from $50 / billing cycle, which equals up to 5 extra blocks.

Premium usage charge example with the default $50 cap:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Usage	Charge
0–25,000 calls	Included
25,001–50,000 calls	+$10
50,001–75,000 calls	+$20 total
75,001–100,000 calls	+$30 total
100,001–125,000 calls	+$40 total
125,001–150,000 calls	+$50 total
Above 150,000 calls	API or Webview access may be paused unless the cap is increased

Premium users can increase the spending cap if they need higher API or Webview usage.

If the spending cap is increased, automatic overage can continue within the newly approved cap.

4.4. Quick comparison

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Topic	One-time charge	Usage charge
How extra usage is charged	Merchant manually buys extra blocks	Extra blocks are charged automatically
Does merchant approve each block?	Yes	No, if within approved spending cap
Spending cap required?	No	Yes, required by Shopify
Premium default $50 cap applies?	No	Yes
Can Premium exceed $50 usage?	Yes, by buying more blocks manually	Yes, by increasing spending cap
Billing cycle	Based on existing subscription start date	Follows Shopify billing cycle
Does changing plan reset cycle?	No	Follows Shopify billing behavior
Do blocks roll over?	No	No

\n","4. How overage blocks and spending caps work","3-billing-cycle-and-quota-reset","

A billing cycle is a 30-day period used to calculate your included API quota, overage usage, and quota reset.

Your quota does not reset by calendar month.

At the beginning of each new billing cycle, your included quota resets based on your current plan.

Unused included calls do not roll over to the next billing cycle.

Overage blocks also do not roll over to the next billing cycle.

3.1. For users with an active subscription when API becomes public

If you already have an active subscription when the API feature becomes publicly available, including Pro, Basic, Advanced, or Premium, your API billing cycle is based on your existing subscription start date.

\n
Example:
\n
If your active subscription started on June 5, your API billing cycle runs from: June 5 to July 4
\n
Your next cycle starts on: July 5
\n
This cycle will continue to follow the same 30-day rhythm.
\n

Changing from one plan to another does not change this API billing cycle when you are using the one-time charge mechanism.

\n
Example:
\n
If your subscription cycle runs from June 5 to July 4, and you upgrade from Advanced to Premium on June 20, your API cycle still remains: June 5 to July 4
\n
It does not restart on June 20.
\n

3.2. One-time charge cycle

Existing users with an active subscription at the time API becomes public will automatically use the one-time charge mechanism for API overage.

Under the one-time charge mechanism:

Your API cycle is based on your existing subscription start date.
One billing cycle equals 30 days.
Your cycle runs from day A to day A + 29.
Changing plan does not change the cycle.
One-time usage blocks only apply to the current cycle.
Extra blocks do not roll over to the next cycle.

Example:

If your subscription started on May 10:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Cycle	Date range
Cycle 1	May 10 – June 8
Cycle 2	June 9 – July 8
Cycle 3	July 9 – August 7

If you buy an extra usage block during Cycle 1, that block is only valid until June 8.

3.3. Usage charge cycle

If you switch from one-time charge to automatic usage charge, your cycle will follow Shopify’s billing cycle.

This means your API quota, overage calculation, and spending cap will follow the Shopify billing cycle connected to your approved usage-based subscription.

\n","3. Billing cycle and quota reset","2-trial-and-development-store-usage","

Free trial and development stores can use API access for testing and setup, subject to usage limits.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Store type	API Token	Webview Token	Webhooks	Quota	Paid overage
Advanced trial	Yes	No	No	2,000 calls / billing cycle	No
Premium trial	Yes	Yes	Yes	2,000 calls / billing cycle	No
Development store	Testing access if eligible	Testing access if eligible	Testing access if eligible	2,000 calls / billing cycle	No

Free trial and development stores do not have paid API overage.

If the quota is used up, API access may be paused until:

The quota resets,
The store upgrades to a paid plan, or
The store moves to a paid subscription.

Trial and development store usage is intended for testing and setup, not production traffic.

You will not be charged API overage during a free trial or on a development store.

\n","2. Trial and development store usage","1-summary","

Aris Product Options offers API access starting from the Advanced plan.

Plan	API access	Webview access	Webhooks	Included usage	Overage price	Monthly overage cap
Free	No	No	No	_	_	_
Pro	No	No	No	_	_	_
Advanced	Yes (60 req/ min)	No	No	5,000 API calls/billing cycle	$5/5,000-call block	$15
Premium	Yes (60 req/ min)	Yes (600 req/ min)	Yes	25,000 API calls/billing cycle	$10/ 25,000-call block	-

API, Webview, and webhook-related features are only available on supported plans.

Your usage resets at the beginning of each new billing cycle.

\n
One billing cycle is 30 days. Your quota resets by billing cycle, not by calendar month.
\n

Unused calls do not roll over to the next billing cycle.

All subscription and usage charges are processed by Shopify.

\n","1. Summary","

API and Webview access are included in selected Aris Product Options subscription plans. There is no separate API-only plan.

\n",[1362],[],{"_164":1363,"_747":1364,"_490":1365},"find-the-perfect-plan-to-boost-your-sales-with-arisplus-product-options","

At ArisPlus, we’re here to help you take your Shopify store to the next level by increasing Average Order Value (AOV), Conversion Rate Optimization (CRO), and overall sales. Whether you're just starting or scaling your business, we offer flexible pricing plans tailored to your needs.

💡 No matter which plan you choose, you’ll get a 14-day free trial to explore all the features risk-free!

Choose the Right Plan for Your Business

🚀 FREE Plan – Get Started with Unlimited Customization

💰 $0/month

Perfect for new businesses or those testing product customization for the first time. This plan lets you:
✅ Offer unlimited product options and variants
✅ Use 23 different option types to personalize products
✅ Apply options on Product, Home, and Collection pages
✅ Make your store more interactive with conditional logic
✅ Access 5 ready-made templates for a quick setup
✅ Get 24/7 live chat support whenever you need help

💡 Best for: Store owners who want to try out advanced product options with zero investment!

💎 PRO Plan – Boost Sales with Price Add-ons & Upsells

💰 $12/month or $120/year (Get 2 months free!)

The Pro Plan is designed to help you maximize revenue by offering better product customization and upsell opportunities. You get everything in the Free Plan, plus:
✅ 30+ option types for even more customization
✅ Price add-ons & bundles to increase AOV
✅ POS integration to sync online and in-store options
✅ File uploads (up to 20MB) for personalized orders
✅ Font selector & advanced design customization to match your brand

💡 Best for: Businesses looking to sell more with product upgrades, add-ons, and better customer personalization!

📈 ADVANCED Plan – Optimize CRO with More Control & Bulk Actions

💰 $24/month or $240/year (Get 2 months free!)

The Advanced Plan is perfect for growing businesses that need more control over product options, bulk actions, and advanced features to boost conversion rates. It includes everything in the Pro Plan, plus:
✅ 35+ option types, including advanced customization fields
✅ Product grouping to manage cross-selling efficiently
✅ Import/export options for bulk setup and edits
✅ Multi-file upload support for customer convenience
✅ Shopify swatch support for up to 3,000 products
✅ Display Shopify variants on collection pages

💡 Best for: Businesses that need powerful bulk actions, automation, and enhanced user experience to drive conversions!

🏆 PREMIUM Plan – The Ultimate Customization & Priority Support

💰 $59/month or $590/year (Get 2 months free!)

If you run a Shopify Plus store or need a highly customized solution, our Premium Plan provides exclusive features tailored to your business. This plan includes everything in the Advanced Plan, plus:
✅ Custom feature development to meet unique store needs
✅ Exclusive design customization for a seamless brand experience
✅ Live calls with technical experts for direct support
✅ 24/7 top-priority assistance so you always get help first

💡 Best for: Established brands and Shopify Plus merchants who need custom features, high-level support, and a seamless user experience!

Start Your Free 14-Day Trial Today!

With ArisPlus Product Options, you can increase AOV, drive conversions, and create a smooth shopping experience with the right mix of customization and automation.

💡 No commitment, no risk – just 14 days of exploring how our app can help grow your store!

🚀 Find the perfect plan for your business and start customizing today! Check out our pricing page

\n","Find the Perfect Plan to Boost Your Sales with ArisPlus Product Options","cmrydxven0034cg7ke2q4vaym","troubleshooting",[1369,1370,1371,1372,1373,1374,1375,1376,1377],{"_164":316,"_166":317,"_168":318,"_170":319,"_734":1410,"_736":737,"_738":739,"_740":741,"_742":1411,"_744":-5},{"_164":312,"_166":313,"_168":314,"_170":315,"_734":1406,"_736":737,"_738":739,"_740":741,"_742":1407,"_744":-5},{"_164":308,"_166":309,"_168":310,"_170":311,"_734":1402,"_736":737,"_738":739,"_740":741,"_742":1403,"_744":-5},{"_164":304,"_166":305,"_168":306,"_170":307,"_734":1398,"_736":737,"_738":739,"_740":741,"_742":1399,"_744":-5},{"_164":300,"_166":301,"_168":302,"_170":303,"_734":1394,"_736":737,"_738":739,"_740":741,"_742":1395,"_744":-5},{"_164":296,"_166":297,"_168":298,"_170":299,"_734":1390,"_736":737,"_738":739,"_740":741,"_742":1391,"_744":-5},{"_164":292,"_166":293,"_168":294,"_170":295,"_734":1386,"_736":737,"_738":739,"_740":741,"_742":1387,"_744":-5},{"_164":288,"_166":289,"_168":290,"_170":291,"_734":1382,"_736":737,"_738":739,"_740":741,"_742":1383,"_744":-5},{"_164":283,"_166":284,"_168":285,"_170":286,"_734":1378,"_736":737,"_738":739,"_740":741,"_742":1379,"_744":-5},[1380],[],{"_164":746,"_747":1381,"_490":749},"

Yes, Product Options Variant Option is compatible with Online Store 2.0.

\n",[1384],[],{"_164":746,"_747":1385,"_490":749},"

If you decide to uninstall the Product Options Variant Option app, please note that all custom product options created using the app will be removed from your store. Your product data will remain unaffected.

If you have any concerns or feel that something isn't quite right with the app, please reach out to us via the in-app live chat or email (help@arisify.io). We value your feedback and are eager to resolve any issues to make your experience better.

Also, if there are features you think would enhance the app, we’d love to hear your ideas. We’re always open to suggestions and will consider adding them to our development plans if feasible!

Will I be charged after uninstalling the app?

If you uninstall before the trial ends, you won’t be charged.

If you uninstall after the trial ends, Shopify will still charge the full amount for that billing period—even if you uninstall before the period finishes.

Shopify handles app billing, so charges can depend on exactly when you uninstall within the billing cycle. If you see anything that doesn’t feel right, message us with your store URL and the uninstall date. We’ll review it quickly—and we’ll make it right for you.

\n
Contact support via help@arisify.io
\n

\n",[1388],[],{"_164":746,"_747":1389,"_490":749},"

No, the Product Options Variant Option app is built to be fast and efficient, with minimal impact on your website's speed and performance. It's optimized to run smoothly without slowing down your site.

\n",[1392],[],{"_164":746,"_747":1393,"_490":749},"

Absolutely, you can easily add a bundling product on the product page of other products using our Bundle feature.

\n",[1396],[],{"_164":746,"_747":1397,"_490":749},"

If you find that the Add charge is not included in orders, please check and verify that the associated add-on products (which are linked to your options) are set to Active and Available on Online Store/ POS sales channels. Inactive add-on products can cause the Add charges to not function correctly.

If the add-on products are already set to active on your Online Store, the Add charge amount still does not reflect in the order, the reason could be that:

The Product Options Variant Option app might be conflicting with another app installed in your store. These conflicting apps might relate to price adjustments, discounts, cart drawers, delivery and pickup, booking, or other features that could overlap with the functionality of our app.
Additionally, conflicts with certain Shopify themes can also occur.

In such cases, please reach out to us for assistance. You can send your request to our email (help@arisify.io) or message us through in-app Live Chat. By doing so, our developers can thoroughly check your store to sort out the exact causes of the conflicts and provide assistance in resolving the issues effectively.

\n",[1400],[],{"_164":746,"_747":1401,"_490":749},"

You can charge customers extra using our Add charge feature. It's simple and time-saving. No coding skills needed!

\n",[1404],[],{"_164":746,"_747":1405,"_490":749},"

You can show or hide custom options based on predefined conditions with our app's Conditional logic feature:

\n",[1408],[],{"_164":746,"_747":1409,"_490":749},"

If you find that the option set is not showing up on your storefront, please check the following points:

App activation: Ensure that the Product Options Variant Option app is activated on your theme. To do this, kindly check:

The dashboard to verify that the app is activated.

The Setting from the Aris option tab to verify that the Aris app is ON

Option set application status: Confirm that your options set is correctly assigned to your test product(s).

Add to Cart button status: Ensure that the \"Add to Cart\" button is enabled in your theme settings. To verify this, open your theme editor and navigate to the Product Template section. From there, check that the \"Buy button\" is activated.

If you have already checked the above 3 points, and your option set is still not appearing on the product page, it is possible that:

(1) There might be a conflict between the app and your theme

(2) You have installed and enabled multiple product options apps simultaneously

(3) There is a conflict with another existing app in your store. (If apps use the same resources, it often causes conflicts.)

In such cases, please reach out to us for assistance. You can send your request to our email (help@arisify.io) or message us through in-app Live Chat.

Our support team will be happy to assist you in resolving any conflicts or issues.

\n",[1412],[],{"_164":746,"_747":1413,"_490":749},"

The \"Aris Option\" tab is where you can create unlimited custom options for your product, outside the Shopify limit. This part includes features and option types that Shopify doesn't have such as text, pop-up, file upload, add charge, etc.

The \"Shopify Option\" tab is where you can customize the already there Shopify Option created when you make the product, which is the Shopify variant. There are 6 styles you can choose from: Button, Dropdown menu, Color or image swatch, Swatch in button, Swatch in dropdown menu and Swatch with price.

","cmrydxvd10032cg7kbq2inkd2","app-settings",[1417],{"_164":320,"_166":321,"_168":322,"_170":323,"_734":1418,"_736":737,"_738":858,"_740":741,"_742":1419,"_744":-5},[1420,1421,1422],[],{"_164":1429,"_747":1430,"_490":1431},{"_164":1426,"_747":1427,"_490":1428},{"_164":1423,"_747":1424,"_490":1425},"save-changes","

After adjusting your settings, don’t forget to click Save at the bottom right to apply everything.

\n","Save Changes","localization-tab","

In the Localization tab, you can:

Change default option texts (e.g., button labels, upload text, notifications).
Translate texts into your preferred language using the Translate setting button.

\n","Localization tab","general","

Application status: Toggle this on or off to enable/disable ArisPlus Product Options across your store.
- When disabled, the Aris options will no longer appear on your storefront (for all themes). To deactivate the app theme by theme, you’ll need to manually turn it off inside each theme.
\n
Your theme: Shows which Shopify theme is currently applied (e.g., Dawn).

Widget Settings

Position: Choose where the options widget appears on your product page (e.g., Above Add to Cart button).
- 👉 For detailed step-by-step instructions on repositioning, check our guide here.
\n
Show widget on quickview: Turn this on if you’d like the Aris options to display in product quickview pop-ups on collection or homepage sections.
Show widget on home page: Enable this to show Aris options on the featured product block on your homepage.

Fonts

Fonts uploaded here work across Font options and the Product Personalizer, like your own font library.

Font name: Enter only letters and spaces. This will be the display name shown on the product page.
Upload fonts: Upload custom fonts in .otf, .ttf, .woff, or .woff2 formats.
- Uploading a font with the same name will replace the existing one.
- Don’t forget to click Submit to apply your changes.
\n

Cart Page

Allow Edit option in cart: Toggle this on to let customers edit product options directly in the cart.
\n
- Great for when you want to give customers flexibility to change their mind before checkout.
\n
Add-On Product Display in Cart: (Available
\n
- Display Separately: Shows add-ons as separate line items for clearer order details.
\n
$\"\"$
- Merge with Main Product (default): Combines add-ons with the main product as part of its custom options.
\n
$\"\"$

Product Page

Update add charge amount to product price: Automatically updates the product’s price whenever a chargeable option is selected.
Show add charge notification: Shows a notification letting customers know when an extra charge has been applied.
Show Compare-at price: Lets customers see the original product price alongside the updated price with add-ons.

Out-of-Stock Options

This setting works only with Bundle and Add charge options (not Keep Price, since those don’t track stock).

Disable option value: Shows the option value but makes it unclickable when stock runs out.
Hide option value: Completely hides option values that are out of stock until they’re available again.

Error Validation Display Type

Inline validation error: Displays an error message right under the option when validation fails.
Validation error alert: Shows a browser pop-up alert with the error message.

Highlight

Show highlight: Turn this on to highlight options that are required but not yet selected, making them more noticeable to customers.

\n","General","cmrydxv8z002xcg7kps1symsz","shopify-options-styling",[1435,1436,1437,1438],{"_164":338,"_166":339,"_168":340,"_170":341,"_734":1481,"_736":737,"_738":739,"_740":741,"_742":1482,"_744":-5},{"_164":334,"_166":335,"_168":336,"_170":337,"_734":1457,"_736":737,"_738":858,"_740":741,"_742":1458,"_744":-5},{"_164":330,"_166":331,"_168":332,"_170":333,"_734":1451,"_736":737,"_738":739,"_740":741,"_742":1452,"_744":-5},{"_164":325,"_166":326,"_168":327,"_170":328,"_734":1439,"_736":737,"_738":739,"_740":741,"_742":1440,"_744":-5},[1441,1442,1443,1444],[],{"_164":746,"_747":1450,"_490":749},{"_164":957,"_747":1449,"_490":959},{"_164":954,"_747":1448,"_490":956},{"_164":1445,"_747":1446,"_490":1447},"button-text-customization-collection-page","

You can customize the text shown on buttons and status labels:

Add to cart – Default text for the Add to cart button
Added to cart – Text shown after a product is added
Sold out – Text shown when a product or variant is unavailable

These fields allow you to match your storefront wording or language preferences.

\n","Button Text Customization (Collection Page)","

These settings control how options appear on collection pages.

Show on Collection page: Display Shopify options styling directly on collection listings.

Show option name: Show the option label above swatches or selectors on collection items.

Show variant name on hover: Display variant names when hovering over swatches on collection pages.

Show add to cart button: Show an Add to cart button directly on the collection page.

Ajax “Add to cart”: Add products to cart without reloading the page.

Limit number of swatches: Restrict how many swatches are shown.
If the limit is exceeded, a “+” button will appear to reveal more options.

\n","

These settings control how Shopify options styling appear on the product page.

Show on Product page: Enable or disable displaying Shopify options styling on the product page.
Show option name: Display the option label (e.g. Color, Size) above the option values.

Show variant name on hover: Show the variant name when customers hover over a swatch or option value.

Show image on hover : Display the variant image when hovering over an option value.
Useful for image-heavy variants.

Show on Featured product: Apply Shopify options styling to featured product sections (e.g. homepage featured blocks).
Show on Quickview: Enable Shopify options styling inside Quick View / Quick Shop modals (if supported by the theme).

\n","

",[1453],[],{"_164":1454,"_747":1455,"_490":1456},"customizing-shopify-option","

From Dashboard, heading to Shopify Option, then you may notice the Design Library button on the top right corner of the page. Click on the button, you will be led to a new tab with both designs and previews of customizations.

In this section, you can customize the Styles in Product Page and Collection Page in your store.
Click on the Customize hyperlink on the top corner of each style box, you will open a new pop-up.
In this pop-up, you can choose the size, the shape, border type and the effect of the Styles.

After customizing your designed style, click on the Save button in the bottm right corner of the Pop-up

","Customizing Shopify Option",[1459,1460,1461,1462,1463,1464],[],{"_164":746,"_747":1480,"_490":749},{"_164":1477,"_747":1478,"_490":1479},{"_164":1474,"_747":1475,"_490":1476},{"_164":1471,"_747":1472,"_490":1473},{"_164":1468,"_747":1469,"_490":1470},{"_164":1465,"_747":1466,"_490":1467},"step-5-check-the-result","

In the Shopify options list, next to the Option name, you will see the number of products that this Option is connected to. (for example: \"affects only 1 product\")

Click on that text and you will see the list of products. Continue and click on the Eye icon (to see Product in Online store) or the Tag icon (to see Product in Shopify Admin) to check for the result of your customization.

","Step 5. Check the result","step-4-save-display-style","

After choosing the styles you want for your Shopify options on the Product page and Collection page, please click the Save button on the top right corner to save all the changes.

\n
4.1. After clicking the Save button, if you choose the \"Color or image swatch\" -> \"Color/ custom image\" style, you can now start uploading the colors or images you want for your Shopify option by clicking the icon under the Customize column.
\n
4.2. The priority order for swatch will be as follows:
\n
\n
Image URL
\n
Upload file
\n
Color
\n
\n
4.3. After uploading the color/ image you want, click the Update button and that's it.
\n

","Step 4. Save Display Style","step-3-choose-display-style","

Here you can choose the Display style you want for a Shopify option on the Product page and the Collection page.

Pick the Display Style of the Shopify Variants

\n
For the \"Button\" and \"Dropdown\" styles, the style will automatically update on your storefront after you save.
\n
For the Swatch type style (Color/Image Swatch, Swatch with price, Swatch Dropdown and Swatch in Button), you can choose if that Shopify option uses its original \"Variant image\" (already set up in the Product section) or if you want to upload new custom colors/ images in the \"Customize\" button.
\n
*Note: Only for the \"Swatch\" style -> \"Color/ custom image\" can you use the \"Customize\" button to upload the colors and custom images you want for the variants.
\n

","Step 3. Choose Display style","step-2-sync-shopify-option","

This step will help our app update all the Shopify options you have in your store.

By proceeding, default styling from our app will be applied to all Shopify variants for the selected product, overriding the existing styles in your store.

Note: Depending on your theme, further adjustments may be necessary to achieve optimal results. If you need assistance, please don’t hesitate to reach out to our live chat support team.

After the sync, you will see the list of Shopify options below.

","Step 2. Sync Shopify Option","step-1-select-products","

First of all, you can select up to 100 products that you want to apply the customizations

","Step 1. Select Products","

\n
This feature will help you customize the visual display of your Shopify options without changing how they work or their original setup.
\n
Please refer to the video tutorial here.
\n

\n",[1483],[],{"_164":746,"_747":1484,"_490":749},"

What this feature does

Shopify Options Styling lets you customize the visual appearance of Shopify option selectors (colors, images, buttons, dropdowns) so they look more engaging and consistent with your storefront design.

\n
⚠️ Disclaimer (Important)
This feature only affects the visual presentation of options (styling, layout, and display).
It does not create or modify Shopify variants.
\n
Before applying styling, you must set up your product variants correctly in Shopify Admin.
Shopify Options Styling simply enhances how those existing variants are displayed on the storefront.
\n
(Adapted from the official disclaimer in the Shopify Options Styling documentation.)
\n

Supported styling types (visual only)

You can visually style option selections in multiple formats, such as:

Color swatches

Image swatches

Dropdowns with colors

Dropdowns with images

Button-style swatches

Swatches with prices

These styles help customers understand choices faster without changing product logic.

Where styles are displayed

Collection page

Styled options can be shown directly on collection pages, allowing customers to preview and interact with options before opening the product page.

Product page

On the product page, options are displayed with enhanced visuals while still mapping to the variants you’ve already created in Shopify Admin.

When to use Shopify Options Styling

This feature is ideal when you want to:

Improve option clarity and UX without touching variant logic
Make color or image-based choices more intuitive
Keep Shopify variant management unchanged while upgrading the storefront look

\n","cmrydxv3h002qcg7k4vupl4af","inventory-and-orders",[1488,1489,1490,1491,1492,1493],{"_164":359,"_166":360,"_168":361,"_170":362,"_734":1551,"_736":737,"_738":858,"_740":741,"_742":1552,"_744":-5},{"_164":363,"_166":364,"_168":365,"_170":366,"_734":1538,"_736":1539,"_738":767,"_740":741,"_742":1540,"_744":-5},{"_164":355,"_166":356,"_168":357,"_170":358,"_734":1526,"_736":737,"_738":767,"_740":741,"_742":1527,"_744":-5},{"_164":351,"_166":352,"_168":353,"_170":354,"_734":1522,"_736":737,"_738":739,"_740":741,"_742":1523,"_744":-5},{"_164":347,"_166":348,"_168":349,"_170":350,"_734":1518,"_736":737,"_738":739,"_740":741,"_742":1519,"_744":-5},{"_164":342,"_166":343,"_168":344,"_170":345,"_734":1494,"_736":737,"_738":767,"_740":741,"_742":1495,"_744":-5},[1496,1497,1498,1499,1500,1501],[],{"_164":746,"_747":1517,"_490":749},{"_164":1514,"_747":1515,"_490":1516},{"_164":1511,"_747":1512,"_490":1513},{"_164":1508,"_747":1509,"_490":1510},{"_164":1505,"_747":1506,"_490":1507},{"_164":1502,"_747":1503,"_490":1504},"notes","

Aris options can only be added to products that already have option sets assigned in the app.
If an option has an add-on charge, the price will be calculated and added to the draft order item price.
Some option types that are used to redirect or transfer customers between pages, such as Group Product and Option URL, do not work with Shopify draft orders.
Allowed Option URL can still work with draft orders, as this option type allows the product to be added to cart.
The draft order is synced with Shopify, but final order actions such as invoice, payment, shipping, taxes, and customer details should be completed in Shopify admin.

\n","Notes","export-draft-orders","

To export draft orders, click Export on the Draft orders page.

You can choose one of the following export options:

Current page
All draft orders
Selected draft orders
Draft orders by date

After choosing the export option, click Export to download the file.

$\"Export$

\n","Export draft orders","manage-existing-draft-orders","

From the Aris Draft orders page, you can view existing draft orders and open them again when needed.

Click the action icon next to a draft order to open it.

$\"Manage$

You can also open the draft order detail page, then click Open in Shopify admin to continue editing it in Shopify.

\n","Manage existing draft orders","create-a-new-draft-order-with-aris-options","

Step 1: Click Create draft order

On the Draft orders page, click Create draft order.

$\"Create$

Step 2: Add a product

Click Add product.

$\"Add$

Search for the product you want to add, then select the product or variant.

After selecting the product, click Add.

$\"Select$

Step 3: Add Aris options

After the product is added to the draft order, click + Add Aris options under the product name.

$\"Add$

Step 4: Select option values

A popup will appear showing the available Aris options for that product.

Choose the option values you want to apply to the product.

If the selected options include add-on charges, the item price will be updated automatically based on the option setup.

After selecting the options, click Save options.

$\"Select$

Step 5: Review the draft order

Once the options are saved, you can review the product, selected options, item price, subtotal, and total.

The draft order will be synced with Shopify.

$\"Review$

Step 6: Finish the draft order in Shopify admin

To continue editing or completing the draft order in Shopify, click Open in Shopify admin.

In Shopify admin, you can finish the remaining draft order details, such as:

Customer
Discounts
Shipping
Taxes
Markets & currency
Tags
Notes
Invoice or payment

Any changes made in Shopify admin will sync back to Aris automatically.

$\"Open$

\n","Create a new draft order with Aris options","how-to-access-draft-orders-in-aris","

From your Shopify admin, go to:

Apps > Aris Product Options > Draft orders

On this page, you can view all draft orders created through Aris, including their draft number, date, status, number of items, total price, and quick action button.

$\"Draft$

You can also filter draft orders by status:

All
Open
Invoice sent
Completed

\n","How to access Draft Orders in Aris","

With Aris Product Options, you can create Shopify draft orders and add custom options directly from the Aris app. This is useful when you want to manually create a draft order for a customer while still keeping the selected product options and add-on prices.

\n",[1520],[],{"_164":746,"_747":1521,"_490":749},"

Step 1: Access Confirmation Email Template

Navigate to Settings > Notifications > Customer Notifications.
Locate and select Order confirmation
Click on the Edit code button to access the email template’s HTML code.

Step 1: Access New Order Email Template

Navigate to Settings > Notifications > Staff Notifications
Locate and select New order
Click on the Edit code button to access the email template’s HTML code

Step 2: Place your cursor in the HTML body of the template use the shortcut Ctrl + F (Command + F on Mac) to open the search function.

Search for line.line_item.title in the existing code and the tag {% endif %}

Paste the following code snippet after the tag {% endif %}.

{% unless line.properties == empty %}\n<ul>\n  {% for property in line.properties %}\n\t{% if property.first contains '_apo' %}{% continue %}{% endif; %}\n  <li> {{ property.first }}: {{ property.last }}</li>\n  {% endfor %}\n</ul>\n{% endunless %}\n

Step 3: Save changes

Click on the “Save” button to apply the changes to the template.

Wait for approximately 30 seconds for the changes to take effect.

\n",[1524],[],{"_164":746,"_747":1525,"_490":749},"

Step 1: Access Packing Slip Template

Navigate to Settings > Shipping and delivery > (Packing Slip) Edit template

Step 2: Add custom code to Packing Slip template

Place your cursor in the HTML body of the template use the shortcut Ctrl + F (Command + F on Mac) to open the search function.

Search for “{{ line_item.title }}” or “line_item.title” in the existing code.

After locating the tag </span>

paste the following code

{% unless line_item.properties == empty %}\n<ul>\n  {% for property in line_item.properties %}\n\t{% if property.first contains '_apo' %}{% continue %}{% endif; %}\n  <li>{{ property.first }}: {{ property.last }}</li>\n  {% endfor %}\n</ul>\n{% endunless %}\n

Step 3 : Save changes

Click on the “Save” button to apply the changes to the template.

Wait for approximately 30 seconds for the changes to take effect.

\n",[1528,1529,1530],[],{"_164":746,"_747":1537,"_490":749},{"_164":1534,"_747":1535,"_490":1536},{"_164":1531,"_747":1532,"_490":1533},"ii-order-tag","

When placing orders, automatically tag them based on selected Aris options. You can customize or edit the tag names to better categorize, track, and manage orders.

\n
Note
Fixed tags and dynamic tags cannot be applied together.
\n
\n
You can set up and use multiple dynamic tags in the same workflow without limitation.
\n
However, a fixed tag can only be used on its own and cannot be combined with dynamic tags.
\n
\n
This rule helps keep your tagging system consistent and prevents conflicts between static and dynamic tagging rules.
\n

Steps 1 : Add Workflow → Select Add Tag.

Step 2: Enter the tag name using one of the following types:

Type 1: Fixed tag for all orders with Aris options
A static tag added to all orders containing Aris options.

Type 2 – Fixed tag for all orders with Aris Options Add-on
A static tag that is automatically added to every order containing Aris Add Charge options, regardless of which specific options were selected.

Type 3: Dynamic tag based on the selected Aris option in order
A tag generated from the selected Aris option in the order.
In the option selection popup, choose the option set and option to define the tag source.

a. Choose Option element

b. Choose Option set

c. Choose a specific option and save

","II. Order Tag","i-order-note","

Add selected Aris options to the order note when an order is placed.
Max: 1 note per order.

Step 1: Add Workflow → Select Add Note.

Alternatively, you can click + Add Note in the lower half of the menu to create a new note quickly, without going through Add Workflow. This is especially useful if you are setting this up for the first time.

\n
You will need to update the access permissions to continue. This step is required if you are setting this up for the first time, ensuring the app has the necessary authorization to view and edit your store data.
\n
View personal data – Customers
Access customer information, including:
\n
\n
Name
\n
Email address
\n
Phone number
\n
Physical address
\n
Geolocation
\n
IP address
\n
Browser and operating system details
\n
\n
View and edit store data
\n
View products
See all product details, including their publication status on sales channels or collections.
\n
Edit orders
Modify any order details from the last 60 days.
\n
View your Online Store
Access and review your store’s Theme.
\n

Step 2: Check the template and edit if needed

Settings:

Keep existing order notes: When this option is enabled, any new note generated will be added as a separate line beneath the existing order note. This ensures previous notes remain intact instead of being replaced.

Note limit: Each order can only have one note created through this workflow. If another note is generated later, it will follow the “keep existing” rule if enabled, or overwrite the current note if not.

HTML content: The order note supports HTML formatting, allowing you to style text, include links, or structure the content for better readability.

Note status: Determines whether the note template is set as Active (ready to be used immediately) or Draft (saved for later editing before use).

View the liquid variable list: You can use these variables in the note template

Variable description	Variable name
Line items	`{% for line in line_items %}\n ...\n{% endfor %}\n`
Name	`{{ line.name }}\n`
Title	`{{ line.title }}\n`
Variant title	`{{ line.variant_title }}\n`
Properties	`{% for p in line.properties %}\n ...\n{% endfor %}\n`
Quantity	`{{ line.quantity }}\n`
Original price	`{{ line.original_line_price \| money }}\n`
Final price	`{{ line.final_line_price \| money }}\n`
Total Discount	`{{ line.total_discount \| money }}\n`
Weight	`{{ line.grams }}\n`
SKU	`{{ line.sku }}\n`
Vendor	`{{ line.vendor }}\n`
Image	`{{ line.image \| img_url }}\n`

\n","I. Order Note","

The feature allows you to add tags and notes to orders for easy tracking. It helps you organize and categorize orders based on priority, status, or special requirements, making order management more efficient and ensuring nothing gets missed.

",[1541,1542,1543],"Jul 27, 2026",[],{"_164":746,"_747":1550,"_490":749},{"_164":1547,"_747":1548,"_490":1549},{"_164":1544,"_747":1545,"_490":1546},"b-how-to-use-our-app-on-your-pos-devices-after-the-integration","

This tile allows adding options from Aris Product Options in the product after you added the product to cart.

For a quick visual walkthrough, watch this short video: https://youtube.com/shorts/_1TX-SZ3bh0

1. Add the product that the customer wants to cart.

You can either type in the product in the Search in the Home tab or in the Product tab. The product can also be found inside the Products tab

$\"\"$

2. Select the variants of the product (if any), choose the Location of the variant/product and click on \"Add to cart\"

$\"\"$

3. Navigate to the Home tab, click on Aris Product Options tile

$\"\"$

4. Click on \"Add Option\" in the tile, then select the options you want and hit \"Save\"

$\"\"$ $\"\"$

Note: If the customer selects the Add Charge option, there may be an additional product added to the cart automatically and this product has the same price/properties of the Add Charge option.
$\"\"$

5. Click on the Button representing the cart function, then click on 3 dots icon to acquire more actions

$\"\"$

6. Verify that all information got added correctly and hit \"Checkout\".

$\"\"$

Woah lah, you can now start selling offline with our option through Shopify POS!

","B. How to use our app on your POS devices after the integration","a-how-to-integrate-our-app-into-the-pos-system","

1. Install the Point of Sale application on your mobile/POS device and log in

$\"\"$

For a quick visual walkthrough, watch this short video: https://youtube.com/shorts/0d4fMHH-cTQ

2. Navigate to the Homepage and click on “Add tile”

$\"\"$

3. Select \"App\" -> \"Aris Product Options\"

Kindly note that to have this selection, our app needs to be installed in your Shopify Admin prior to this.

$\"\"$ $\"\"$

4. Click \"Save\" after adding the tiles and putting them in the correct position

$\"\"$

The POS integration is now officially live on the store front.

","A. How to integrate our app into the POS system","

Shopify POS is a point-of-sale app that you can use to sell your products in person. You can use Shopify POS to sell almost anywhere, including brick-and-mortar stores, markets, and pop-up shops. The Shopify POS app is available for only iOS and Android devices.

Shopify POS syncs with Shopify to track orders and inventory across your retail locations, online store, and other active sales channels. You can even view and manage your store's orders from the app.

With the integration of our Product Options Variant Option app and Shopify POS, you can further customization customer experience by bringing as much customization to them both online and offline.

",[1553,1554,1555,1556],[],{"_164":746,"_747":1566,"_490":749},{"_164":1563,"_747":1564,"_490":1565},{"_164":1560,"_747":1561,"_490":1562},{"_164":1557,"_747":1558,"_490":1559},"manage-your-option-inventory","

To manage inventory for all options in one place:

Go to Aris Product Options in your Shopify admin.
\n
Click Inventory in the Aris Options side menu.
\n
From the Inventory page, you can:
\n
- View all option values with inventory tracking enabled
- Update stock quantities
- Monitor Available, Committed, and On hand stock levels
- Update bulk quantities
\n
$\"\"$

This helps you easily manage inventory across all products and options from a single dashboard.
If you need help setting up inventory tracking, feel free to contact our support team.

\n","Manage Your Option Inventory","inventory-details-details-menu","

Click Details next to an option value to manage detailed stock information:

Unavailable: Quantity that cannot be sold.
Committed: Quantity reserved for existing orders.
Available: Quantity customers can currently purchase.
On hand: Total physical stock in your inventory.

Continue Selling When Out of Stock

Enable this option to allow customers to purchase even when stock reaches zero.
Disable it to automatically stop sales when the option is out of stock.

View Adjustment History

Click View adjustments history to review all past inventory changes for that option value.

\n","Inventory Details (Details Menu)","setting-up-inventory-tracking-for-your-option","

Step 1. Create Your Option

Open Aris Product Options and create a new option (or edit an existing one).
In the Basic settings tab, enter your Option name and Option values (for example: Color – Green, Grey, Blue, Black).
If you are using image swatches, upload an image that matches or represents each option value.

\n
The option values you create here will be used for inventory tracking in the next steps.
\n

Step 2. Enable Inventory Tracking

In the Basic settings tab, scroll down and enable Track inventory.

Once enabled, additional inventory-related columns will appear for each option value, such as SKU, Inventory tracked, and Available quantity.

Step 3. Set Up Inventory Information

After enabling Track inventory, configure inventory details for each option value.

SKU (Optional)

You can assign a SKU to each option value for internal tracking.
If left empty, the system will display No SKU in the inventory list.

Inventory / Stock Tracking

For each option value:

Make sure Inventory tracked is checked.
Enter the Available quantity directly, or click Details for advanced inventory settings.

\n","Setting up inventory tracking for your option","

With this feature, you can:

Set available stock for each option value
Automatically stop sales when an option is out of stock (or continue selling if needed)
Monitor inventory changes and adjustments in one place

This is especially useful for products where different options have different stock levels, such as colors, materials, or custom variations.

\n","cmrydxuvi002gcg7k55tjm25d","storefront-display",[1570,1571,1572,1573,1574,1575,1576,1577,1578],{"_164":399,"_166":400,"_168":401,"_170":402,"_734":1670,"_736":737,"_738":739,"_740":741,"_742":1671,"_744":-5},{"_164":395,"_166":396,"_168":397,"_170":398,"_734":1666,"_736":737,"_738":739,"_740":741,"_742":1667,"_744":400},{"_164":391,"_166":392,"_168":393,"_170":394,"_734":1651,"_736":737,"_738":1652,"_740":741,"_742":1653,"_744":-5},{"_164":387,"_166":388,"_168":389,"_170":390,"_734":1629,"_736":737,"_738":739,"_740":741,"_742":1630,"_744":-5},{"_164":383,"_166":384,"_168":385,"_170":386,"_734":1617,"_736":737,"_738":739,"_740":741,"_742":1618,"_744":-5},{"_164":379,"_166":380,"_168":381,"_170":382,"_734":1611,"_736":737,"_738":739,"_740":741,"_742":1612,"_744":-5},{"_164":375,"_166":376,"_168":377,"_170":378,"_734":1599,"_736":737,"_738":739,"_740":741,"_742":1600,"_744":-5},{"_164":372,"_166":373,"_168":374,"_170":350,"_734":1583,"_736":737,"_738":739,"_740":741,"_742":1584,"_744":-5},{"_164":367,"_166":368,"_168":369,"_170":370,"_734":1579,"_736":737,"_738":739,"_740":741,"_742":1580,"_744":-5},[1581],[],{"_164":746,"_747":1582,"_490":749},"

When there are Span tags surround the Add charge like this:

$\"\"$

Here is a simple 2-Step instruction on how to remove it.

Step 1: Shopify Admin > Settings > Store details > Store currency > Change formatting

$\"\"$

Step 2: Delete all tags <span></span> and click on \"Save\"

Please note: Only remove the span tag.

Like in the example below, the </span> is removed in all 4 boxes leaving the ${{amount}} USD and ${{amount}}.

$\"\"$

\n",[1585,1586,1587,1588],[],{"_164":746,"_747":1598,"_490":749},{"_164":1595,"_747":1596,"_490":1597},{"_164":1592,"_747":1593,"_490":1594},{"_164":1589,"_747":1590,"_490":1591},"step-3-save-changes","

Click on the “Save” button to apply the changes to the template.

Wait for approximately 30 seconds for the changes to take effect.

\n","Step 3: Save changes","step-2-add-the-code","

Place your cursor in the HTML body of the template use the shortcut Ctrl + F (Command + F on Mac) to open the search function.

Search for line.variant.title in the existing code and the tag {% endif %}

Paste the following code snippet after the tag {% endif %}.

\n
NOTE: There should be three separate blocks in total that contain this code, so please make sure to add the snippet after each of those three {% endif %} tags.
\n

{% unless line.properties == empty %}\n<ul>\n  {% for property in line.properties %}\n\t{% if property.first contains '_apo' %}{% continue %}{% endif; %}\n  <li> {{ property.first }}: {{ property.last }}</li>\n  {% endfor %}\n</ul>\n{% endunless %}\n

","Step 2: Add the code","step-1-access-new-order-email-template","

Navigate to Settings > Notifications > Staff Notifications
Locate and select New order
Click on the Edit code button to access the email template’s HTML code

\n","Step 1: Access New Order Email Template","

Step 1: Access Confirmation Email Template

Navigate to Settings > Notifications > Customer Notifications.
Locate and select Order confirmation
Click on the Edit code button to access the email template’s HTML code.

\n",[1601,1602,1603],[],{"_164":746,"_747":1610,"_490":749},{"_164":1607,"_747":1608,"_490":1609},{"_164":1604,"_747":1605,"_490":1606},"2-help-text","

Help Text appears beneath the option input and is always visible. It’s ideal for detailed instructions or explanations to assist customers during selection.

On the Options tab, when creating or editing an option, click on Advanced Setting to view and edit the Help text.

3. Adding a Link to Help Text or Tooltip

You can insert HTML anchor (<a>) tags to make a portion of the text clickable. This is the code to add a link to Tooltip or help text, you can enter this code to either box for the display

Open link in the same tab

<a href=\"https://www.shopify.com/\">Visit Shopify</a>\n

Open link in a new tab

<a href=\"https://www.shopify.com/\" target=\"_blank\">Visit Shopify</a>\n

\n
Note:
\n
\n
target=\"_blank\" ensures the link opens in a new tab.
\n
Always test links to ensure they are functional and accurate.
\n
\n

4. Adding an image to Help Text or Tooltip

You can embed an image in the Help Text or Tooltip using the <img> tag.

Format:

<img src=\"IMAGE_URL\" alt=\"DESCRIPTION\" style=\"width: 100%; height: auto;\">\n

Example:

<img src=\"https://demo-po.arisify.io/cdn/shop/products/JunctionParkaBlackLabel.jpg?v=1707193221&width=600\" \nalt=\"Girl in a jacket\" style=\"width: 100%; height: auto;\">\n

Instructions:

Replace IMAGE_URL with your actual image URL.
Replace \"DESCRIPTION\" with a meaningful description (used for accessibility).
Use style=\"width: 100%; height: auto;\" to ensure the image scales properly.

\n","2. Help Text","1-tooltip","

Tooltips display a small pop-up message when customers hover over the ❓ icon next to an option. This is ideal for brief, contextual explanations.

How to Add a Tooltip

On the Options tab, when creating or editing an option, click on Advanced Setting to view and edit the tooltip.

","1. Tooltip","

\n",[1613],[],{"_164":1614,"_747":1615,"_490":1616},"customizing-aris-option","

From Dashboard, heading to Design Click on the button, you will be in the whole new tab with lots of new things.

In this Section, you can customize Font size, the styles of Label on product and variant style, as well as the Color, Shape, Width and Spacing of all the Options inside your store.\nClicking on different tabs will give you different customized styles, for example, in the Swatches tab, you can even customize the Border color selected/unselected

If you have programming background or just simply want to test out your new customization, this section is for you. You can navigate to the bottom of the Design page, and put in your custom CSS

After choosing the right customization, hit the Save button on the top right corner of the Design Option page

","Customizing Aris Option",[1619,1620,1621],[],{"_164":746,"_747":1628,"_490":749},{"_164":1625,"_747":1626,"_490":1627},{"_164":1622,"_747":1623,"_490":1624},"ii-how-to-activate","

Step 1: Create an Option

Create a new option or edit an existing one

\n
How to create an option set
\n

Choose any option type listed in I. Available options to set up. In this example, we selected Single selection - Button.

Step 2: Enable “Not Allow Deselect”

Navigate to Advanced Settings

Check Not allow deselect

Step 3: Save the Option

Click Save
The feature will be applied immediately to the product page

If you have questions or need help setting this up, feel free to reach out to our support team.

\n","II. How to Activate","i-available-options","

This feature works only with single-selection option types:

Color swatch
Image swatch
Radio button
Button

\n
⚠️ This feature does not apply to multi-select options (e.g. checkboxes).
\n

\n
Demo :You can view a live demo here: 👉 https://demo-po.arisify.io/products/not-allow-deselect
\n

\n","I. Available options","

When this feature is activated:

Customers can switch between option values
Customers cannot deselect the currently selected value
One option value will always remain selected

This helps prevent accidental unselection and ensures required input is always provided.

\n",[1631,1632,1633,1634,1635],[],{"_164":1648,"_747":1649,"_490":1650},{"_164":1645,"_747":1646,"_490":1647},{"_164":1642,"_747":1643,"_490":1644},{"_164":1639,"_747":1640,"_490":1641},{"_164":1636,"_747":1637,"_490":1638},"step-5-set-alt-tags-for-images","

Click on each image to find Alt text field, the Alt text of each image must exactly match the Value title of its corresponding option value.
This connection allows the product image to update automatically when a customer selects an option.

For instance, if your option values are \"Cyan Blue\", \"Green\", and \"Black\", you should set the Alt texts of the related images to \"Cyan Blue\", \"Green\", and \"Black\" accordingly.

\n
NOTE: This feature only works on the product page. It may not function correctly on other pages like collection or homepage, because those pages usually do not display product image thumbnails in the same dynamic way.
\n

That's it! Your product images will now dynamically change when a customer selects an option.

\n","Step 5. Set Alt Tags for Images","step-4-upload-your-product-images","

Upload all relevant images to your Shopify product media.
Ensure the image you want to show for a specific option is already attached to the product.

","Step 4: Upload Your Product Images","step-3-set-the-desktop-layout-to-thumbnail","

In the Theme Editor, open the Default Product template and locate the Product Information section.

Update the Desktop Layout setting to Thumbnails, as this layout will be the foundation for enabling the image change functionality.

","Step 3: Set the Desktop Layout to \"Thumbnail\"","step-2-enable-image-switching-feature","

In the Advanced settings tab, select \"Change product image on option selection\"

","Step 2. Enable Image Switching feature","step-1-create-your-options","

In the Basic tab, enter option values and upload an image that matches or is associated with the product variant you want shown.

The option value you created here will be used in later steps.

","Step 1. Create Your Options",[1654,1655,1656,1657],"9 min",[],{"_164":746,"_747":1665,"_490":749},{"_164":1625,"_747":1664,"_490":1627},{"_164":1661,"_747":1662,"_490":1663},{"_164":1658,"_747":1659,"_490":1660},"iii-setup-guide","

STEP 1. Create Options

Inn the Aris Option tab -> click the Create Option Set button.

\n
How to create an option set
\n

STEP 2. Add option

Choose any option type listed in I. Available options to set up live preview. In this example, we selected Single Line Text to demonstrate how customers can enter text and instantly see it displayed in the product preview.

STEP 3. Enable Live Preview

Navigate to the Product Personalizer tab.
Turn on the Live Preview switch for each option to display it on the product mockup.

\n
Note:
Not all input types support preview (e.g., text fields do, dropdowns may not).
If an option doesn't support preview, the personalizer tab will not appear.
Refer to Section I: Available Options for supported types.
\n

STEP 4. Configure Live Preview by Option Type

4.1 Single Input (Text/Number)

Used for custom names, messages, numbers, etc.

Default value for preview:

Text: Sets the starting value shown in preview (e.g., \"Your Name\"). This can differ from the value in the Basic tab.

\n
\n
If there is no Default value in the Advanced tab → Display Preview text in the preview section in both in-app and public preview.
\n
If there is a Default value in the Advanced tab but no Preview text → Display Default value in the preview section in both in-app and public preview.
\n
If there is both a Default value in the Advanced tab and Preview text → Display Default value in the public preview, and Preview text only in the in-app preview.
\n
\n
$\"\"$
\n

Color: Set default color of the text. If color selection is restricted, this becomes the fixed color.
\n
Font: Choose from available Google Fonts or upload your own. This becomes the fixed font if font selection is restricted.
\n
Size: Set the initial text size in pixels.
\n
Position:
\n
You can drag and move the text directly in the Preview Panel, or manually adjust the X-axis, Y-axis, Rotate values. Changes made in either the panel or settings will sync automatically.
\n
- X-axis: Moves text horizontally. Increase to shift right, decrease to shift left.
- Y-axis: Moves text vertically. Increase to move down, decrease to move up.
- Rotate: Tilts text clockwise or counterclockwise.
\n

Linked with: Connect the text to other input types like:

Color Picker
Font Selector
Color swatch

Allow Customers To Change:

Text Position: Enable to allow customers to reposition the text within the preview. Disable to fix the text position.
Text Size: Enable to allow customers to resize the text mage. Disable to lock preset dimensions.

How the customer can edit the input field:

In live preview: Allows customers to make changes directly by interacting with the live preview.
With font size picker: Allows customers to customize text using font and size selectors.
Allow both: Enables both methods for maximum flexibility.

4.2 Multi-line Text

Ideal for messages or notes requiring multiple lines.

Default value for preview:

Text: Accepts line breaks.
Curved text: Not supported for multi-line.
Text Box Size: Set width and height.
Alignment: Align left, center, or right.

All other settings are the same as Single Input.

4.3 Option Types with Image Preview

Applies to: Image Swatch, Drop down menu, Image swatch Dropdown menu, Button, Checkbox, Radio Button, Switch, Combo box

Preview Image

Enhance the live preview for option types like Image Swatch, Dropdown, or Checkbox by configuring preview images in one of three ways:

Single Image: Use one image (set up in the Basic setting) for both the preview and the selector swatch. By default, any uploaded image will be used for both.
Dual Image: Upload a separate image in the Personalizer > Preview section to differentiate the preview image from the selector swatch.
Preview Only: If an image isn't uploaded in the selector Basic settings and only a preview image is added under Personalizer > Preview, the option will display as a text label in the selector but will show the uploaded image in the live preview. This approach is beneficial when swatches are unnecessary, yet a visual is required in the final design.

Preview Shape
Choose a standard shape or upload a custom PNG to define how the image appears. Adjust the shape's size and unlock the aspect ratio for more customization.

Image Size & Position
Manually set the Width and Height of the preview image or adjust directly in the Preview panel. Changes reflect in size fields; the aspect ratio is locked by default but can be unlocked. Fine-tune placement by dragging the image; the X-Axis, Y-Axis, and Rotate values will update accordingly.

Image scaling mode: Choose how the uploaded image fits within the preview shape

Fit – Displays the entire image, even if it leaves borders around the edges.
Cover – Fills the entire shape; parts of the image may be cropped.
Fit Width – Matches the shape’s width; may leave gaps at the top and bottom.
Fit Height – Matches the shape’s height; may leave gaps on the sides.
Fill – Stretches the image to completely fill the shape; may distort the image.

Allow Customers To Change:

Image Position: Enable to allow customers to reposition the image within the preview. Disable to fix the image position.
Image Size: Enable to allow customers to resize the image. Disable to lock preset dimensions.

Disable any option to lock these features.

\n
💡 Tip: Assign a default value for each input to show a preview when the page loads.
\n

4.4 Color Swatch

Used to change colors of text or elements on the product.

Linked Behavior: Can affect text color or switch images.

Preview Configuration: Same steps as for other image-based types.

Preview Image: To enable live preview for this option, please upload an image in Personalizer > Preview.

4.5 File Upload

Preview Shape: Choose a preset shape or upload a custom PNG to set the image boundary. The image will adapt to the chosen shape. Unlock the aspect ratio for flexible adjustments if required.

Preview Image: Upload an image here to serve as a placeholder. This image will appear in the preview area before the customer uploads their own.

Image Size: Specify the default Width and Height for the preview image manually or by adjusting it in the Preview Panel. Changes here will automatically update in the size settings. The aspect ratio is locked by default for proportion preservation but can be unlocked for custom resizing.

Image Position: Drag the uploaded image in the Preview Panel to reposition it. X-axis, Y-axis, and Rotate values will update in real time based on placement.

Image scaling mode: Choose how the uploaded image fits within the preview shape

Fit – Displays the entire image, even if it leaves borders around the edges.
Cover – Fills the entire shape; parts of the image may be cropped.
Fit Width – Matches the shape’s width; may leave gaps at the top and bottom.
Fit Height – Matches the shape’s height; may leave gaps on the sides.
Fill – Stretches the image to completely fill the shape; may distort the image.

Allow Customers To Change:

Image Position: Enable to allow customers to reposition the image within the preview. Disable to fix the image position.
Image Size: Enable to allow customers to resize the image. Disable to lock preset dimensions.

STEP 5. Assign Option Set to Products

After setting everything up, assign the option set to the correct products in your store.

The selected preview product must be re-selected here. Preview settings won't carry over unless this is done.

Ensure that all assigned products have similar base images to maintain accurate positioning.

\n
📌 Note: Live preview will only work if the assigned products have matching dimensions to the preview mockup.
\n

\n","III. Setup Guide","ii-panel-navigation","

1. Product Personalizer Menu

Each option contains:

Basic Setting
Advanced Setting
Product Personalizer

Use the Product Personalizer tab to enable the live preview feature.

2. Preview Menu

Once enabled, the live preview appears on the right, featuring a Change background button and a Zoom button. You can either display the product's default image or upload a personal image.

2.1 Select Background

Choose between:

a. Main Product Image

Use product's main image as preview background

\n
Selecting a Product for Preview:
\n
\n
Please select a specific product or variant in the Preview panel before proceeding with setup. Even if you have multiple product targets, choose one to apply for preview.
\n
\n

b. Custom Background Option:

Upload a custom background to use instead of the product’s main image.

Example: For custom phone cases, use a blank phone case image for easier personalization, even if the main product image shows an angled view with a design.

2.2 Preview Options

Once you've selected a preview background (either your main product image or a custom background you upload), choose how to display the options:

All product images (default): Selected options will appear on all product images. Customers can switch between images while the option preview remains visible.
First product image only: Selected options will only appear on the first product image. If customers switch to other images, the preview will not be shown.
Variant image only: Selected options will only appear on the variant image and not the main product image
Last product image only: Selected options appear only on the last product image.
Specific product image: Selected options appear only on the specific product image you choose.

3. Option and Text/Image Element Order

The order of options and their values in the left panel determines the layering of design elements in the right panel. Options listed higher in the left panel will appear lower in the layer order on the right (from bottom to top).

This typically follows the logic of customers choosing options from top to bottom on the storefront, aligning with inside-out design layers (e.g., for a poster: background first, followed by other elements). Ensure options are correctly ordered to achieve the desired visual layering in the final product preview.

\n","II. Panel Navigation","

Single line text/ Multi-line text/ Number: Demo link
Color/ Image swatch: Demo link
File upload: Demo link
Dropdown Menu: Demo link
Button: Demo link
Checkbox: Demo link
Radio Button: Demo link
Switch: Demo link
Combo box: Demo link

Explore the demos by visiting: Product Personalizer Demos

\n","

The Product Personalizer allows customers to customize products directly on the store. They can add text, upload images, choose colors, and more—all with a live preview. It’s a simple way to let shoppers see their personalized design before adding it to the cart.

",[1668],[],{"_164":746,"_747":1669,"_490":749},"

Step 1: On your live Product page, click Right Mouse -> Inspect.

Step 2: Press this key combination Ctrl + Shift + C and point to the element you want to use for the positioning of options. Kindly make sure that you choose the whole element, not just the title of that element.

For example, here I choose the \"Quantity\" element

Step 3: Here you will see a line of code for that element, copy the class of that element and then fill it in the element box for option position.

For example, the \"Quantity\" element has this code: <div class=\"product-form__input product-form__quantity\">

This would be the HTLM element we need: product-form__input product-form__quantity

Step 4: After you get the class, add “.” at the top and replace the space characters with “.” to finish, and then hit \"Save changes\".

For example: product-form__input product-form__quantity -> .product-form__input.product-form__quantity

\n",[1672,1673,1674],[],{"_164":746,"_747":1681,"_490":749},{"_164":1678,"_747":1679,"_490":1680},{"_164":1675,"_747":1676,"_490":1677},"method-2-using-the-aris-app-s-setting","

Step 1: Open Aris Product Options, navigate to the Aris Option, click on the \"Setting\" tab, and locate the \"Widget\" section where you can set up option position on the Product page

Step 2: Locate the \"Widget\" section where you can set up option position on the Product page and choose the position you want

For positions related to the product variants and the \"Add to cart\" button, you can simply choose and hit \"Save\".
For positions related to the HTML element, you'd need to fill in the HTML element before hitting \"Save\".

The change can take a couple of minutes to update, please reload the product page and check for the result.

\n","Method 2: Using the Aris app's setting","method-1-using-the-app-block","

Step 1: Go to Online Store → Themes → Edit theme.

Step 2: Open the template: Products → Default product.

Step 3: In the Product information section, click Add block → Apps → Aris Product Options to insert the app block.

Step 4: Drag the Aris Options block to adjust its position on the page. Once done, click Save.

","Method 1: Using the App Block","

You can now choose where options show on your product page

\n","cmrydxuht001zcg7kjdafh2a0","pricing-and-upsell",[1685,1686,1687,1688,1689,1690,1691,1692,1693,1694,1695,1696,1697,1698,1699,1700],{"_164":464,"_166":465,"_168":466,"_170":467,"_734":1861,"_736":737,"_738":739,"_740":741,"_742":1862,"_744":-5},{"_164":460,"_166":461,"_168":462,"_170":463,"_734":1845,"_736":737,"_738":858,"_740":741,"_742":1846,"_744":465},{"_164":456,"_166":457,"_168":458,"_170":459,"_734":1841,"_736":737,"_738":739,"_740":741,"_742":1842,"_744":465},{"_164":452,"_166":453,"_168":454,"_170":455,"_734":1837,"_736":737,"_738":739,"_740":741,"_742":1838,"_744":465},{"_164":448,"_166":449,"_168":450,"_170":451,"_734":1833,"_736":737,"_738":858,"_740":741,"_742":1834,"_744":465},{"_164":444,"_166":445,"_168":446,"_170":447,"_734":1815,"_736":737,"_738":767,"_740":741,"_742":1816,"_744":449},{"_164":440,"_166":441,"_168":442,"_170":443,"_734":1801,"_736":737,"_738":739,"_740":741,"_742":1802,"_744":449},{"_164":436,"_166":437,"_168":438,"_170":439,"_734":1789,"_736":737,"_738":739,"_740":741,"_742":1790,"_744":449},{"_164":432,"_166":433,"_168":434,"_170":435,"_734":1781,"_736":737,"_738":739,"_740":741,"_742":1782,"_744":449},{"_164":428,"_166":429,"_168":430,"_170":431,"_734":1769,"_736":737,"_738":739,"_740":741,"_742":1770,"_744":449},{"_164":424,"_166":425,"_168":426,"_170":427,"_734":1765,"_736":737,"_738":739,"_740":741,"_742":1766,"_744":449},{"_164":420,"_166":421,"_168":422,"_170":423,"_734":1753,"_736":737,"_738":739,"_740":741,"_742":1754,"_744":465},{"_164":416,"_166":417,"_168":418,"_170":419,"_734":1739,"_736":737,"_738":767,"_740":741,"_742":1740,"_744":465},{"_164":412,"_166":413,"_168":414,"_170":415,"_734":1735,"_736":737,"_738":739,"_740":741,"_742":1736,"_744":-5},{"_164":408,"_166":409,"_168":410,"_170":411,"_734":1713,"_736":737,"_738":739,"_740":741,"_742":1714,"_744":413},{"_164":403,"_166":404,"_168":405,"_170":406,"_734":1701,"_736":737,"_738":739,"_740":741,"_742":1702,"_744":465},[1703,1704,1705],[],{"_164":746,"_747":1712,"_490":749},{"_164":1709,"_747":1710,"_490":1711},{"_164":1706,"_747":1707,"_490":1708},"preview-on-the-online-store","

Open the assigned product on your online store and select the option value. The additional charge will be calculated automatically based on the product price.

$\"Preview$

\n
Note: Because the charge is calculated as a percentage of the product price, the additional amount may vary between products or variants with different prices.
\n

\n","Preview on the online store","how-to-set-up-add-charge-by-percentage","

Step 1: Create an Option Set

From the Aris Option dashboard, create a new Option Set or open an existing one.

$\"Create$

Step 2: Create an option

Add a new option to the Option Set, then enter the option name and its values.

$\"Create$

Step 3: Choose Add Charge by Percentage

Find the option value that requires an additional charge. Open its pricing settings, select Add Charge, and choose Percentage (%) as the calculation type.

$\"Choose$

Enter the percentage you want to add to the product price.

$\"Enter$

Step 4: Assign products and save

Assign the Option Set to the products where you want the option to appear, then click Save.

$\"Assign$

\n","How to set up Add Charge by Percentage","

The Add Charge by Percentage feature allows you to increase the product price by a percentage instead of using a fixed amount.

For example, if a product costs $100 and you set an Add Charge of 20%, the additional charge will be $20, bringing the total product price to $120.

\n",[1715,1716,1717,1718,1719,1720],[],{"_164":746,"_747":1734,"_490":749},{"_164":1731,"_747":1732,"_490":1733},{"_164":1728,"_747":1729,"_490":1730},{"_164":1725,"_747":1726,"_490":1727},{"_164":1722,"_747":1723,"_490":1724},{"_164":892,"_747":1721,"_490":894},"

Click the Save button to finish the Bundle option setup.

Click the Save button on the top right corner to save the Option Set and you're all done 🤗

-> Here is how the Add Bundle option will show on the product page.

-> Here is how the Add Bundle option will show on the cart page.

-> Here is how the Bundle option will show on the checkout page.

Need help? Let us know via in-app live chat or email: help@arisify.io :star_struck:

\n","step-4-attach-product-to-the-option-value","

Attach the bundle product to the suitable option value

","Step 4: Attach product to the option value","step-3-fill-in-the-required-fields","

Add a Label on Product to inform customers about the belt bundle option for their t-shirt.
Change the Label on Cart value to something more descriptive.
- Be sure to keep the Label on Cart values unique, as they will overwrite each other if they match.
\n
In the Option Values section, write a descriptive option informing customers about the bundle product.

\n","Step 3: Fill in the required fields","step-2-create-option-set","

In the Aris Option tab -> click the Create Option Set button

This Option Set will be applied to a main product (for example: a t-shirt) that needs the belt as a bundle product.

","Step 2: Create option set","step-1-prepare-the-product","

In your Shopify Products page, create a product to be a bundle product. Include an image and set the price for the bundle product (for example: a black belt with the price of $25). This product must be available on the Online Store sales channel for the feature to work properly.

\n
If you already have a pre-existing product that you want to use as a Bundle product, you can skip this step
\n

","Step 1: Prepare the product","

Checkout our Demo product to see how the Add bundle feature works

Here is the step-by-step instruction on how to set up Add Bundle.

\n",[1737],[],{"_164":746,"_747":1738,"_490":749},"

Add Bundle for an option value: The Bundle feature allows you to attach a pre-existing product to an option value.

\n",[1741,1742,1743],[],{"_164":1750,"_747":1751,"_490":1752},{"_164":1747,"_747":1748,"_490":1749},{"_164":1744,"_747":1745,"_490":1746},"how-to-change-the-add-charge-version","

We currently support switching between Add Charge v2 and v3 for new customers.
For more details or assistance, please contact our support team at help@arisify.io.

\n","How to change the Add Charge version?","comparison-table","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Topic	Add Charge v1 (Legacy)	Add Charge v2 (Legacy)	Add Charge v3 (Current)
How pricing is applied	Uses Draft Order to add price to the customer order	Uses an actual Shopify product to add price to the main product	Uses a bundle-style mechanism; Add Charge is generated only when in cart
Creates extra products in Shopify Admin	No	Yes	No
Supported charge types	✅ Fixed amount ✅ Percentage (%)	✅ Fixed amount ❌ Percentage (%)	✅ Fixed amount ✅ Percentage (%) ✅ Negative values
Shopify discount compatibility	⚠️ Not fully supported (often requires a discount box / workaround)	✅ Works normally with Shopify discounts (real product behavior)	✅ Works normally with Shopify discounts
Bundle app compatibility	Depends on the Bundle app	Usually OK	⚠️ Works with discounts, but may not work with some bundle apps (still works with Aris Bundle)
Dynamic checkout buttons	❌ Not supported	✅ Supported only on cart page + checkout	✅ Supported
Extra capabilities	—	—	✅ Supports Dimension option

Add Charge v1 (Legacy)

How it works

Applies Add Charge using a Draft Order approach.
Add Charge can be set as a percentage (%).
Does not create an actual product in your Shopify store.

Known limitations

Discount behavior is not fully compatible, so stores may rely on a manual discount input box/workaround.
Dynamic checkout buttons do not work with this version.

Add Charge v2

How it works

Create an actual Shopify product to represent the add-on charge.
When customers select an Add Charge option, the corresponding Add Charge product/variant is added to cart alongside the main product.

What it supports

Add Charge is fixed amount only (no percentage).

Compatibility notes

✅ Shopify discounts generally work well (because it behaves like a standard product/variant).
✅ Dynamic checkout buttons typically work on cart page and checkout.

Add Charge v3 (Current)

How it works

Uses a bundle-style Add Charge mechanism.
Add Charge is generated only when the item is in cart.
Does not create extra add-on products in Shopify Admin.

What it supports

✅ Fixed amount
✅ Percentage (%)
✅ Negative Add Charge values
✅ Dimension option / Formula price

Compatibility notes

✅ Shopify discounts generally work normally.
✅ Fully work with dynamic checkout buttons

Known limitations

⚠️ May not work alongside some bundle apps (still works with Aris Bundle).

Which version should you choose?

Choose Add Charge v3 if you want:

Dynamic checkout button compatibility on the product page
More flexible pricing (percentage and negative values)
No extra add-on products created in Shopify

Choose Add Charge v2 if you want:

A “real product” approach that typically aligns best with Shopify discount rules
Fixed-price add charges and the ability to manage add-on product behavior in Shopify

\n","Comparison table","quick-summary","

Add Charge v3 (Current): Bundle-style Add Charge generated in cart. Supports percentage add charge and negative values. Works with dynamic checkout buttons on product + cart pages. No extra products created in Shopify.
Add Charge v2 : Uses an actual Shopify product to represent add-on charges. Best compatibility with Shopify discounts. Fixed amount only.
Add Charge v1 (Legacy): Uses Draft Order logic. Supports percentage add charge, but discounts and dynamic checkout buttons are limited.

\n","Quick summary",[1755,1756,1757],[],{"_164":746,"_747":1764,"_490":749},{"_164":1761,"_747":1762,"_490":1763},{"_164":1758,"_747":1759,"_490":1760},"how-it-appears-on-your-store","

-> Here is how the Add Charge will show on the Product page.

Customers will see the option values with the updated pricing displayed clearly.

-> Here is how the Add Charge option will show on the Cart page.

After selecting an Add Charge option, the product will be added to the cart with the total updated price (base price + add charge).

-> Here is how the Add Charge option will show on the Checkout page.

At checkout, the system automatically adds the total price - you’ll see the main product and an associated “add-on” charge line, handled by our app for accurate billing.

-> Here is how it appears on the Order details

-> Here is the draft order which is created to generate the add charge

","How It Appears on Your Store","how-to-create-an-add-charge","

Follow these steps to set up the Add Charge feature:

1. Create a New Option Set

Go to the Aris Option tab → click Create Option Set.

2. Add an Option

Click Add Option and choose the Option Type for your Add Charge (e.g., dropdown, button, swatch, etc.).

3. Set the Add Charge Value

Under Option values, find the value you want to add a charge to.

Click Keep price → choose Add charge from the dropdown.

Enter the amount you’d like to add to the product’s base price.

Example:
If you set 25 for Medium and 30 for Large, and your store’s default currency is USD, the additional charges will be $25 and $30.

4. Assign to Products

In the Select product section,

choose the products that should include this Option Set.
Finally, click Save at the top right corner to apply your changes.

","How to Create an Add Charge","

This version is no longer available for new stores and cannot be downgraded to.

\n",[1767],[],{"_164":746,"_747":1768,"_490":749},"

Step 1: In your Shopify admin > Product section > filter by Types \"Aris-add-charge” > Select all add-on products

Step 2: After selecting all add-on products > Bulk Edit > Column -> Scroll down and hit \"Show all metafiles\" -> Find and select \"Meta description (SEO)\"

Step 3: Fill in the code <meta name=\"robots\" content=\"noindex\"> in all the add-on products

Step 4: Hit Save and that's it

",[1771,1772,1773],[],{"_164":746,"_747":1780,"_490":749},{"_164":1777,"_747":1778,"_490":1779},{"_164":1774,"_747":1775,"_490":1776},"how-to-hide-add-charge-product-from-related-products-section","

There are 2 main ways to hide the add charge product from this section,

Solution A. Replace this section with Featured Collections section

Navigate to the Customize theme section

Direct to any product pages, click + Add section, select Featured Collections

Select the Collection that doesn't include add charge product and hide the \"Related Products\"

Hit Save

Solution B. Manually pick related products

Install Shopify Search & Discovery (FREE) app on Shopify App Store
Once installed, click on Recommendation section

Click add recommendation or click on any products on the table
Select Complementary Products (A block inside Product information section), or Related Products (A section on the product page)

Tick \"Hide auto-generated recommendations\"
Hit Save

The related/complementary products selected from this section is specially customized for each products and any products that doesn't have this selection will have auto-generated Related products section and it will have a high chance of showing the add charge products.

Need help? Let us know via in-app live chat or email: help@arisify.io :star_struck:

\n","How to hide add charge product from Related products section","you-may-also-like-or-related-products-section","

This section is mostly generated automatically by the Shopify algorithm to complement products with the same attributes. It is visible as a block on the Product page.

","\"You may also like\" or \"Related Products\" section","

Sometimes, the add charge product will be visible on a section of your theme, the \"You may also like\" or related product section.

\n",[1783,1784],[],{"_164":746,"_747":1788,"_490":749},{"_164":1785,"_747":1786,"_490":1787},"after-the-custom-data-is-set-up-hiding-your-add-on-products-would-be-easy-using-","

Step 6: In your Shopify admin -> Product section -> filter by Types: Aris-add-charge -> Select all add-on products

Step 7: After selecting all add-on products -> Bulk Edit -> Column -> Scroll down and hit \"Show all metafiles\" -> Find and select \"SEO hidden\"

Step 8: Fill in the number 1 in all the add-on products

Step 9: Hit Save and that's it

","After the Custom Data is set up, hiding your add-on products would be easy using the bulk edit. Here are the next steps ","

Step 1: In your Shopify Admin -> Settings

Step 2: In the Settings > Metafields and metaobjects > Products

Step 3: Add definition

Step 4: Select type -> Integer

Step 5: Fill in the information below and hit \"Save\"

Name: SEO Hidden > Hit the tag \"custom.seo_hidden\"
Namespace and key: seo.hidden
Minimum value: 1
Maximum value: 1

\n
If you run into an Error message stating that the the seo.hidden metafield hasbeen used somewhere already, you can use the link below to continue.
\n
Replace the \"yourdomain.myshopify.com\" part with your actual domain to make this link work: https://yourdomain.myshopify.com/admin/settings/custom\\\\_data/product/metafields/migrate/seo/hidden
\n

\n",[1791,1792,1793],[],{"_164":746,"_747":1800,"_490":749},{"_164":1797,"_747":1798,"_490":1799},{"_164":1794,"_747":1795,"_490":1796},"result","

After the products are set to Unlisted, they will no longer appear in your storefront search, collections, recommendations, sitemap, or search engine results.

However, they can still be used as add-on products for Add Charge v2.

\n","Result","step-by-step-instruction","

Step 1

Go to Shopify admin > Products. Click Search and filter.

Step 2

Filter by Product type = Aris Product Option.

Step 3

Select the add-on products > Click More actions or ....

Step 4

Choose Unlist products and confirm.

After this, the add-on products will be hidden from your storefront while still being available for Add Charge v2 pricing.

\n","Step by step instruction","

Add Charge v2 may create add-on products in your Shopify admin for pricing purposes. If you do not want these products to appear on your storefront, you can set them to Unlisted.

\n",[1803,1804,1805],[],{"_164":1812,"_747":1813,"_490":1814},{"_164":1809,"_747":1810,"_490":1811},{"_164":1806,"_747":1807,"_490":1808},"c-hide-add-charge-product-from-google-search","

Step 1: Find Aris add charge

In your Shopify admin, go to Products
Filter products by Type = “Aris-add-charge”

Step 2: Bulk edit

Step 2.1 Select all add-on products ⇒ Click Bulk edit

Step 2.2 Click Columns, scroll down, and select Meta description (SEO)

Step 3: Add meta description

In the Meta description field, enter:

<meta name=\"robots\" content=\"noindex\">

Step 4: Save changes

","C. Hide Add charge product from Google Search","b-hide-add-charge-product-from-search-bar","

Step 1: Open Settings

Step 1.1 From your Shopify admin, go to Settings

Step 1.2 In Settings, navigate to Metafields and metaobjects → Products

Step 2: Add definition

Step 3: Select type -> Integer

Step 5: Fill in the information below and hit \"Save\"

Name: SEO Hidden > Hit the tag \"custom.seo_hidden\"
Namespace and key: seo.hidden
Minimum value: 1
Maximum value: 1

\n
If you run into an Error message stating that the the seo.hidden metafield hasbeen used somewhere already, you can use the link below to continue.
\n
Replace the \"yourdomain.myshopify.com\" part with your actual domain to make this link work: https://yourdomain.myshopify.com/admin/settings/custom\\\\_data/product/metafields/migrate/seo/hidden
\n

\n","B. Hide Add charge product from Search bar","a-hide-add-charge-product-from-the-all-collection-page","

Step 1: Find Aris add charge

When creating an Add charge product with Aris, our app will automatically generate the \"Aris-add-charge\" Type. Please check and add this Type to all Add Charge products you have created.

Step 2: Create a new collection without Aris Add charge

Step 2.1 From the Shopify admin page, click Products > Collections.

Step 2.2 In the Collection, create a new collection named “All products“.

Set the condition to remove products with the Product type “Aris-add-charge” as below: “Type” – “is not equal to” – “Aris-add-charge”.

Step 2.3 Scroll down to the Search engine listing preview part, and click Edit web SEO.

Step 2.4 In the URL handle field, enter “all“.

Step 2.5 Click Save to finish.

\n","A. Hide Add charge product from the All Collection Page",[1817,1818,1819,1820,1821],[],{"_164":746,"_747":1832,"_490":749},{"_164":849,"_747":1831,"_490":851},{"_164":1828,"_747":1829,"_490":1830},{"_164":1825,"_747":1826,"_490":1827},{"_164":1822,"_747":1823,"_490":1824},"step-by-step-setup-guide","

Step 1: Create or Edit an Option

Go to main page of Shopify admin -> Aris Product Options -> Aris Option.
Click on Create Option Set (or edit an existing set).
Add an option type for extra charges (e.g., Checkboxes, Dropdown Menu, Color Swatch, Image Swatch).
Fill in your Option Values and assign your extra charges (Add Charge).

Step 2: Enable One-time Charge

In the option values setup, locate the value with an extra charge.
Tick the checkbox for One-time charge.

Step 3: (Optional) Enable Quantity for Option Value

Turn on Show \"Quantity\" for option value if you want customers to select how many add-on units they need.
Set Min / Max Quantity limits for the option value if desired.

Step 4: Save Changes

Choose your desired group of option and hit Save on the top right corner.

\n
Real-World Use Cases
\n
\n
Gift Wrapping / Cards: Buying 10 shirts for a team, but only requesting 2 Gift Boxes ($5 each) → Total Add Charge = $10 (instead of $5 × 2 × 10 = $100).
\n
Logo Digitization Fee: Buying 100 custom polo shirts with a $25 One-time Digitization Fee → Total Add Charge = $25.
\n
Personalized Engraving Fee: Fixed fee of $15 for custom text, regardless of how many items are in the order.
\n
\n

\n","Step-by-Step Setup Guide","supported-option-types","

One-time Charge is available across single and multi-selection option types, including:

Color Swatch & Image Swatch
Radio Button & Checkboxes
Dropdown Menu, Color Dropdown & Image Dropdown
Button & Combo Box

\n","Supported Option Types","key-benefits-of-one-time-charge-quantity-for-option-value","

Independent Add-on Quantities: Customers can select multiple units of an add-on (e.g., 3 gift bags or 2 greeting cards) without having the cost multiplied by bulk main product quantities (e.g., 50 t-shirts).
Fixed Setup & Customization Fees: Ideal for one-off service fees such as logo engraving setup, embroidery digitization, or rush processing fees.
Flexible Pricing Rules: Control minimum and maximum quantity limits per option value while maintaining one-time fee logic per order.

\n","Key Benefits of One-time Charge + Quantity for Option Value","

By default, any extra charge assigned to an option value multiplies by the quantity of the main product selected in the cart. Enabling One-time Charge overrides this behavior.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Feature / Setting	Add Charge Calculation Formula	Example Scenario ($10 Add Charge, Main Product Qty: 5)
Standard Add Charge	`Add Charge Amount × Option Value Qty × Main Product Qty`	$10 × 1 × 5 = $50
One-time Charge (Single Selection)	`Add Charge Amount × 1` (Flat Fee)	$10 × 1 = $10 (independent of main product qty)
One-time Charge + Quantity for Option Value	`Add Charge Amount × Option Value Qty`	If customer selects 3 add-on units: $10 × 3 = $30 (independent of main product qty)

\n","

The One-time Charge feature allows you to apply a flat additional fee to an option value without multiplying that charge by the main product quantity.

With the latest update, One-time Charge now works seamlessly alongside Quantity for Option Value, giving you complete flexibility to charge per add-on item while keeping it independent of the main product's purchase quantity.

\n",[1835],[],{"_164":746,"_747":1836,"_490":749},"

This add charge version is applied to stores that installed our app before 10:00 AM, October 10 (UTC).

Checkout our Demo product to see how the Add charge works

Here is the step-by-step instruction on how to set up Add Charge.

1. In the Aris Option tab -> click on the Create Option Set button

2. Click on the Add Option button to pick an Option Type for the Addcharge.
Note: This feature is supported in Single Input and Single/Multiple Selection options.

3. In the field Option values, find the option value you want to add an additional charge, click on \"Keep price\" to open the dropdown menu and select \"Add charge\".

Then, click on the tag icon (next to the \"Add charge\" box) and you will see a pop-up where you can fill in the add charge amount.

Here is what you need to fill in (just like when you create a new product in your store)

Variant title: This will be the name of the variant for the product above (if you have more than 1 Add charge variant, all of the variants will be under the same product). The variant title should be the same as the option value.
Variant price: The Add charge amount

Since this Add charge is an actual product, just the same as the other product in your store, you can find it in the Product section in your Shopify Admin and update further details for it such as image, stock, etc.

In this example, I want to add 25 for the medium size and 30 for the large size. If your store's default currency is USD, it will be 25 USD and 30 USD additional charges.

4. Hit Save to finish the Add Charge option setup.

5. In the Select product section, choose the products you'd like this Option Set to be applied to.

Finally, hit Save on the top right corner of the Option Set to save the changes for the Option Set and you're all done 🤗

-> Here is how the Add Charge variant will show on the Product page.

-> Here is how the Add Charge option will show on the Cart page.

Once customers select an Add Charge option value, the main product and the Add Charge product will be added to the cart together and you will see 2 products in the cart.

-> Here is how the Add Charge option will show on the Checkout page.

Similar to the Cart page, you will see the main product and the Add Charge product here.

Check out the next article for some suggestions on how to organize and manage the Add Charge products created using our app.

\n",[1839],[],{"_164":746,"_747":1840,"_490":749},"

The \"Add-charge by Character\" feature allows merchants to charge customers additional fees based on the number of characters entered by customers in a Single Line Text option.

This feature is particularly useful for products that require customization, such as engraving, monogramming, or personalized messages.

",[1843],[],{"_164":746,"_747":1844,"_490":749},"

The Add-charge by Quantity feature allows merchants to apply additional charges to products based on the quantity customers input. This feature provides two flexible pricing options to accommodate various business needs: Price for Each Quantity and Price for Any Quantity.

1. Price for Each Quantity

With this pricing type, the entered quantity is multiplied by the add-on price. This option is ideal for situations where the cost increases proportionally with the quantity selected.

How it Works:

The add-on price is set for one unit of the additional feature or service.
\n
When a customer selects a specific quantity, the total add-on charge is calculated as:
\n
Total Add-on Price = Add-on Price x Quantity Selected
\n

2. Price for Any Quantity

With this pricing type, the add-on price remains fixed regardless of the quantity entered. This option is suitable for flat-rate additional features or services that do not depend on quantity.

How it Works:

The add-on price is set as a single fixed amount.
Customers can enter any quantity, but the add-on charge remains the same.

\n",[1847,1848,1849,1850],[],{"_164":746,"_747":1860,"_490":749},{"_164":1857,"_747":1858,"_490":1859},{"_164":1854,"_747":1855,"_490":1856},{"_164":1851,"_747":1852,"_490":1853},"d-what-s-new-in-this-version","

This updated version of Add Charge brings key improvements:

✅ No extra products created in your Shopify store.
→ No need to hide or manage additional add-on products.
→ No SEO or storefront clutter concerns.

✅ Works with dynamic checkout buttons directly on the product page.
→ The old version only worked at the cart level.

⚠️ Note:

Because no separate add-on product is created, inventory tracking for Add Charge items is not available.
One-time charge is not available

\n","D. What’s New in This Version?","b-how-it-appears-on-your-store","

-> Here is how the Add Charge will show on the Product page.

Customers will see the option values with the updated pricing displayed clearly.

-> Here is how the Add Charge option will show on the Cart page.

After selecting an Add Charge option, the product will be added to the cart with the total updated price (base price + add charge).

-> Here is how the Add Charge option will show on the Checkout page.

At checkout, the system automatically adds the total price - you’ll see the main product and an associated “add-on” charge line, handled by our app for accurate billing.

","B. How It Appears on Your Store","a-how-to-create-an-add-charge","

Follow these steps to set up the Add Charge feature:

1. Create a New Option Set

Go to the Aris Option tab → click Create Option Set.

2. Add an Option

Click Add Option and choose the Option Type for your Add Charge (e.g., dropdown, button, swatch, etc.).

3. Set the Add Charge Value

Under Option values, find the value you want to add a charge to.

Click Keep price → choose Add charge from the dropdown.

Enter the amount you’d like to add to the product’s base price.

Example:
If you set 25 for Medium and 30 for Large, and your store’s default currency is USD, the additional charges will be $25 and $30.

4. Assign to Products

In the Select product section,

choose the products that should include this Option Set.
Finally, click Save at the top right corner to apply your changes.

Special: Add Charge by Percentage

You can also set an add charge based on a percentage of the product price instead of a fixed amount.

For example, if the product price is $100 and you set a 10% add charge, the extra charge will be $10, making the final price $110.

This is useful for fees that should change depending on the product price, such as warranty, rush production, gift wrapping, or premium upgrades.

\n
Note: Percentage add charge is calculated based on the product price and will update automatically if the product price changes.
\n

For example:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Product price	Percentage add charge	Extra charge	Final price
$100	10%	$10	$110
$250	15%	$37.50	$287.50
$500	20%	$100	$600

\n","A. How to Create an Add Charge","

This new version is applied to stores that installed our app after 10:00 AM, October 10 2025 (UTC).

\n",[1863],[],{"_164":746,"_747":1864,"_490":749},"

Add charge v3.0 (Current): Allows you to increase the product price based on customers’ selections - all without creating new products in your store.
Add-charge by Quantity
Add-charge by Character
Add Charge v2.0: Automatically generate an actual product which is used as an Add charge option to increase the price per product according to customers' selection.
One-time add charge (Legacy): By default, the add charge quantity will match the quantity of the main product. The One-time Charge feature allows the add charge to be applied only once per order, regardless of the main product qu
Hide Add-on Products: Manage all Add charge options created with Aris
Hide Add-on Products using Unlisted status
Hide Add charge product from Search bar
Hide Add charge product from 'Related Products' section
Hide Add charge product from Google Search
Add charge v1.0 (Legacy): Automatically generates a draft order at checkout to apply additional charges to the order.
Versions comparison and updates: This document provides an overview and comparison of the different Add Charge feature versions in Aris, including behavior, limitations, and upgrade considerations.

\n","cmrydxtq00010cg7krb3a42ts","option-types",[1868,1869,1870,1871,1872,1873,1874,1875,1876,1877,1878,1879,1880,1881,1882,1883,1884,1885,1886,1887,1888,1889,1890,1891,1892,1893,1894,1895,1896,1897,1898,1899,1900,1901],{"_164":600,"_166":601,"_168":602,"_170":603,"_734":2176,"_736":737,"_738":858,"_740":741,"_742":2177,"_744":-5},{"_164":468,"_166":469,"_168":470,"_170":471,"_734":2165,"_736":2166,"_738":767,"_740":741,"_742":2167,"_744":597},{"_164":596,"_166":597,"_168":598,"_170":599,"_734":2161,"_736":737,"_738":739,"_740":741,"_742":2162,"_744":-5},{"_164":592,"_166":593,"_168":594,"_170":595,"_734":2153,"_736":737,"_738":798,"_740":741,"_742":2154,"_744":597},{"_164":588,"_166":589,"_168":590,"_170":591,"_734":2145,"_736":737,"_738":798,"_740":741,"_742":2146,"_744":597},{"_164":584,"_166":585,"_168":586,"_170":587,"_734":2137,"_736":737,"_738":767,"_740":741,"_742":2138,"_744":597},{"_164":580,"_166":581,"_168":582,"_170":583,"_734":2129,"_736":737,"_738":798,"_740":741,"_742":2130,"_744":597},{"_164":576,"_166":577,"_168":578,"_170":579,"_734":2121,"_736":737,"_738":767,"_740":741,"_742":2122,"_744":597},{"_164":572,"_166":573,"_168":574,"_170":575,"_734":2111,"_736":737,"_738":767,"_740":741,"_742":2112,"_744":597},{"_164":568,"_166":569,"_168":570,"_170":571,"_734":2101,"_736":737,"_738":767,"_740":741,"_742":2102,"_744":597},{"_164":564,"_166":565,"_168":566,"_170":567,"_734":2093,"_736":737,"_738":798,"_740":741,"_742":2094,"_744":597},{"_164":560,"_166":561,"_168":562,"_170":563,"_734":2085,"_736":737,"_738":767,"_740":741,"_742":2086,"_744":597},{"_164":556,"_166":557,"_168":558,"_170":559,"_734":2077,"_736":737,"_738":798,"_740":741,"_742":2078,"_744":597},{"_164":552,"_166":553,"_168":554,"_170":555,"_734":2069,"_736":737,"_738":767,"_740":741,"_742":2070,"_744":597},{"_164":548,"_166":549,"_168":550,"_170":551,"_734":2061,"_736":737,"_738":858,"_740":741,"_742":2062,"_744":597},{"_164":544,"_166":545,"_168":546,"_170":547,"_734":2053,"_736":737,"_738":739,"_740":741,"_742":2054,"_744":597},{"_164":541,"_166":194,"_168":542,"_170":543,"_734":2045,"_736":737,"_738":2037,"_740":741,"_742":2046,"_744":597},{"_164":537,"_166":538,"_168":539,"_170":540,"_734":2036,"_736":737,"_738":2037,"_740":741,"_742":2038,"_744":597},{"_164":533,"_166":534,"_168":535,"_170":536,"_734":2028,"_736":737,"_738":798,"_740":741,"_742":2029,"_744":597},{"_164":529,"_166":530,"_168":531,"_170":532,"_734":2020,"_736":737,"_738":798,"_740":741,"_742":2021,"_744":597},{"_164":525,"_166":526,"_168":527,"_170":528,"_734":2012,"_736":737,"_738":798,"_740":741,"_742":2013,"_744":597},{"_164":521,"_166":522,"_168":523,"_170":524,"_734":2004,"_736":737,"_738":798,"_740":741,"_742":2005,"_744":597},{"_164":517,"_166":518,"_168":519,"_170":520,"_734":1996,"_736":737,"_738":798,"_740":741,"_742":1997,"_744":597},{"_164":513,"_166":514,"_168":515,"_170":516,"_734":1988,"_736":737,"_738":798,"_740":741,"_742":1989,"_744":597},{"_164":509,"_166":510,"_168":511,"_170":512,"_734":1978,"_736":737,"_738":798,"_740":741,"_742":1979,"_744":597},{"_164":505,"_166":506,"_168":507,"_170":508,"_734":1970,"_736":737,"_738":739,"_740":741,"_742":1971,"_744":597},{"_164":501,"_166":502,"_168":503,"_170":504,"_734":1962,"_736":737,"_738":739,"_740":741,"_742":1963,"_744":597},{"_164":497,"_166":498,"_168":499,"_170":500,"_734":1954,"_736":737,"_738":739,"_740":741,"_742":1955,"_744":597},{"_164":493,"_166":494,"_168":495,"_170":496,"_734":1946,"_736":737,"_738":739,"_740":741,"_742":1947,"_744":597},{"_164":489,"_166":490,"_168":491,"_170":492,"_734":1938,"_736":737,"_738":739,"_740":741,"_742":1939,"_744":597},{"_164":485,"_166":486,"_168":487,"_170":488,"_734":1930,"_736":737,"_738":739,"_740":741,"_742":1931,"_744":597},{"_164":481,"_166":482,"_168":483,"_170":484,"_734":1922,"_736":737,"_738":858,"_740":741,"_742":1923,"_744":597},{"_164":477,"_166":478,"_168":479,"_170":480,"_734":1914,"_736":737,"_738":858,"_740":741,"_742":1915,"_744":597},{"_164":473,"_166":474,"_168":475,"_170":476,"_734":1902,"_736":737,"_738":739,"_740":741,"_742":1903,"_744":597},[1904,1905,1906],[],{"_164":746,"_747":1913,"_490":749},{"_164":1910,"_747":1911,"_490":1912},{"_164":1907,"_747":1908,"_490":1909},"advanced-option-settings","

1. Class Name

Add a custom CSS class name to apply specific styles to the Step by Step option.

2. Tooltip

Provide a short explanation that appears when customers hover over the option. Useful for quick hints.

3. Help Text

Add longer, detailed information directly below the Step by Step option. This helps customers better understand their choices at each stage.

\n","Advanced Option Settings","basic-option-settings","

1. Option Name

The internal name used to identify the Step by Step option in your app setup. Helps you manage and organize options effectively.

2. Label on Product

The title shown above the Step by Step section on the product page. This label guides customers on what they’re customizing.

3. Layout

Choose the styling format for how the Step by Step option will appear on your product page.

4. Step

Each step represents a stage in the customization process.
You can click Select Template or Add Option to include options within a step.
Add an image, name, and description to visually explain each step.
Customers must complete one step before moving on (if enabled).

5. Button

Customize the appearance of navigation buttons (Next/Previous) between steps. You can choose from:

Combine (icon + text)
Icon Only
Text Only
None

6. Must Complete Current Step to Move to Next Step

Enable this setting if customers are required to make a selection before proceeding.

\n","Basic Option Settings","

This feature is especially useful for complex products that require customers to make several layered choices (e.g., style → material → personalization). By breaking options into steps, the process feels smoother and easier to follow.

👉You can check out our Demo product to see how it works

\n",[1916,1917,1918],[],{"_164":746,"_747":1921,"_490":749},{"_164":1910,"_747":1920,"_490":1912},{"_164":1907,"_747":1919,"_490":1909},"

1. Show Next To

Choose another option’s label to display this option beside it, helping to group related options together on the product page.

2. Class Name

Assigns a custom CSS class to the Size Chart option, allowing for specific styling or behavior through CSS. This helps you maintain consistent design and functionality across your product pages.

\n","

1. Option Name

The internal name used within your app to identify the Size Chart option. This helps you manage and organize different size charts.

2. Chart Title

This is the title that will be displayed on the product page. When customers click on it, a pop-up containing the size chart content will appear.

3. Chart Header

The header shown at the top of the pop-up, providing context or a title for the size chart.

4. Show Icons

Allows you to include icons alongside the size chart, such as symbols for different body parts or clothing types. This adds a visual element to help customers better understand the chart.

5. Size Modal

Determines the size of the pop-up window (modal) in which the size chart is displayed. Options include:

Small (380px): A compact modal suitable for simple charts with minimal data.
Medium (620px): A standard modal size that works well for most size charts.
Large (980px): A larger modal for more detailed charts with extensive information.

6. Chart Template

A pre-defined layout or structure for the size chart. This allows you to quickly set up the chart using a standard format, which can be customized as needed.

7. Chart Content

The actual data within the size chart, such as measurements or size comparisons. This content is what customers will use to determine the correct size for their purchase.

8. Conditional Logic

Allows the Size Chart to be displayed or hidden based on customer selections or other conditions. This ensures the chart appears only when relevant, such as when a specific product or size is selected.

\n
How to set up Conditional logic for your options
\n

\n","

The Size Chart option type is designed to provide customers with detailed sizing information, ensuring they select the right size for their purchase. This feature is particularly useful for clothing, footwear, and other products where accurate sizing is crucial.

👉You can check out our Demo product to see how it works

\n",[1924,1925,1926],[],{"_164":746,"_747":1929,"_490":749},{"_164":1910,"_747":1928,"_490":1912},{"_164":1907,"_747":1927,"_490":1909},"

1. Pop-up Image

Upload an image that will be displayed in front of the popup label. Useful for adding a visual cue or icon before the option.

2. Display type

Choose how the popup appears on your product page - as a Hyperlink or a Button.

Hyperlink: Displays as a text link (e.g., “View size guide”).

Button: Displays as a clickable button (e.g., “Customize Now”).

3. Image Size

Select the display size of the popup image (e.g., small, medium, large) to fit your product layout.

4. Show Next To

Choose another option’s label to display this option beside it, helping to group related options together on the product page.

5. Class Name

Assigns a custom CSS class to the Pop-up option, enabling you to apply specific styling or behavior through CSS. This helps in maintaining a consistent design and functionality across your product pages.

\n","

1. Option Name

The internal name used within your app to identify the Pop-up option. This helps with organizing and managing pop-ups during setup.

2. Title on Product

The text displayed on the product page that users can click or hover over to trigger the pop-up. This serves as a prompt or link to access the pop-up content.

3. Title in Pop-up

The heading or title is shown within the pop-up window. This helps users quickly understand the content or purpose of the pop-up.

4. Size

Determines the dimensions of the pop-up window. Options include:

Small (380px): A compact pop-up for brief content.
Medium (620px): A standard size suitable for most content.
Large (980px): A larger pop-up for more detailed information.

5. Content

Defines what is displayed within the pop-up. You can include various elements such as text, tables, font styles, sizes, quotes, code, centered text, equations, links, images, colors, and more.

6. Conditional Logic

Allows the pop-up to be displayed or hidden based on customer selections or other conditions. This ensures the pop-up appears only when relevant to the customer's choices or context.

\n
How to set up Conditional logic for your options
\n

\n","

The Pop-up option type allows you to display additional information in a pop-up window when users interact with a specific element on your product page. This feature is useful for providing extra details, instructions, or promotions without cluttering the main page.

👉You can check out our Demo product to see how it works

\n",[1932,1933,1934],[],{"_164":746,"_747":1937,"_490":749},{"_164":1910,"_747":1936,"_490":1912},{"_164":1907,"_747":1935,"_490":1909},"

1. Class Name

Assigns a custom CSS class to the Divider option, enabling you to apply specific styling or behavior through CSS. This helps in maintaining a consistent design and layout across your product pages.

\n","

1. Option Name

The internal name used within your app to identify the Divider option. This helps with organizing and managing dividers during setup.

2. Style

Determines the visual style of the divider. Options include:

Solid: A continuous, unbroken line.
Double: Two parallel lines with space between them.
Dashed: A line made up of short, evenly spaced dashes.
Dotted: A line made up of small, evenly spaced dots.

3. Color

Allows you to choose the color of the divider line. This setting helps in customizing the divider to fit your design preferences and maintain consistency with your brand.

4. Conditional Logic

Allows the divider to be displayed or hidden based on customer selections or other conditions. This ensures the divider appears only when relevant to the customer's choices or context.

\n
How to set up Conditional logic for your options
\n

\n","

The Divider option type allows you to add horizontal lines or dividers to your product page, helping to separate and visually organize different sections or elements. This enhances the layout by providing clear boundaries between content areas.

👉You can check out our Demo product to see how it works

\n",[1940,1941,1942],[],{"_164":746,"_747":1945,"_490":749},{"_164":1910,"_747":1944,"_490":1912},{"_164":1907,"_747":1943,"_490":1909},"

1. Class Name

Assigns a custom CSS class to the Heading option, enabling you to apply specific styling or behavior through CSS. This helps in maintaining a consistent design and layout across your product pages.

\n","

1. Option Name

The internal name used within your app to identify the Heading option. This helps with organizing and managing the headings during setup.

2. Content

This setting lets you specify the text for the heading. It allows you to define the main text that will appear as a heading on the product page.

3. Color

Allows you to choose the color of the heading text. This setting helps in customizing the appearance of the heading to match your design preferences.

4. Style

Defines the heading level (e.g., Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6). This setting controls the size and importance of the heading, with Heading 1 being the largest and most prominent, and Heading 6 being the smallest.

5. Conditional Logic

Allows the heading to be displayed or hidden based on customer selections or other conditions. This ensures the heading appears only when relevant to the customer's choices or context.

\n
How to set up Conditional logic for your options
\n

\n","

The Heading option type allows you to add headings to your product page, which can help organize and structure the content by breaking it into clearly defined sections. This option is ideal for enhancing readability and guiding customers through the page.

👉You can check out our Demo product to see how it works

\n",[1948,1949,1950],[],{"_164":746,"_747":1953,"_490":749},{"_164":1910,"_747":1952,"_490":1912},{"_164":1907,"_747":1951,"_490":1909},"

1. Class Name

Assigns a custom CSS class to the HTML option, enabling you to apply specific styling or behavior through CSS. This helps in maintaining a consistent design and functionality across your product pages.

\n","

1. Option Name

The internal name used within your app to identify the HTML option. This helps with organizing and managing the content during setup.

2. Content

This setting lets you enter HTML code that will be rendered on the product page. You can use this to include various elements such as text, images, videos, links, and custom formatting.

3. Conditional Logic

Allows the HTML content to be displayed or hidden based on customer selections or other conditions. This ensures the HTML content appears only when relevant to the customer's choices or context.

\n
How to set up Conditional logic for your options
\n

\n","

The HTML option type allows you to insert custom HTML content directly into your product page. This is useful for adding rich text, multimedia elements, or advanced formatting that goes beyond standard text options.

👉You can check out our Demo product to see how it works

\n",[1956,1957,1958],[],{"_164":746,"_747":1961,"_490":749},{"_164":1910,"_747":1960,"_490":1912},{"_164":1907,"_747":1959,"_490":1909},"

1. Class Name

Assigns a custom CSS class to the Paragraph option, enabling you to apply specific styling or behavior through CSS. This helps maintain a consistent look and feel across your product pages.

\n","

1. Option Name

The internal name used within your app to identify the Paragraph option. This helps you organize and manage the content during setup.

2. Content

This setting lets you configure the text and formatting of the paragraph. You can include various elements such as text, font styles, sizes, quotes, code, centered text, equations, links, images, colors, and more, offering flexibility to present detailed information.

3. Conditional Logic

Allows the Paragraph to be displayed or hidden based on customer selections or other conditions. This ensures that the content appears only when relevant to the customer’s choices or context.

\n
How to set up Conditional logic for your options
\n

\n","

The Paragraph option type allows you to add customizable text blocks or other content to your product page. This feature is useful for including detailed descriptions, instructions, or any other information that enhances the customer's understanding of the product.

👉You can check out our Demo product to see how it works

\n",[1964,1965,1966],[],{"_164":746,"_747":1969,"_490":749},{"_164":1910,"_747":1968,"_490":1912},{"_164":1907,"_747":1967,"_490":1909},"

1. Class Name

Assigns a custom CSS class to the Space option, enabling you to apply specific styling or behavior through CSS for a consistent look and feel across your product pages.

\n","

1. Option Name

The internal name used within your app to identify the Space option. This helps keep your options organized during setup.

2. Spacer Height

Specifies the height of the space in pixels. This setting determines how much vertical space will be added between the options on your product page.

3. Conditional Logic

Allows the Space option to be displayed or hidden based on customer selections or other conditions. This ensures the spacing only appears when it’s needed.

\n
How to set up Conditional logic for your options
\n

\n","

The Space option type allows you to add vertical spacing between options on your product page, improving the visual layout and making the page easier to navigate. This feature is particularly useful for separating sections or grouping related options together.

👉You can check out our Demo product to see how it works

\n",[1972,1973,1974],[],{"_164":746,"_747":1977,"_490":749},{"_164":1910,"_747":1976,"_490":1912},{"_164":1907,"_747":1975,"_490":1909},"

1. Expand

Controls whether the Option Group is initially expanded or collapsed on the product page, allowing customers to focus on relevant details.

2. Tooltip

Provides a brief explanation or additional context for the Option Group. This helps customers understand what’s included without cluttering the interface.

3. Help Text

Offers more detailed information directly below the Option Group, guiding customers through their choices with additional support.

\n","

1. Option Name

This is the internal name used within your app to identify the Option Group. It helps you organize and manage the options during setup.

2. Label on Product

This label will appear above the Option Group on the product page, guiding customers on the content of the group.

3. Option List

A collection of the options that will be included within this group. This list can comprise various option types, enabling you to create a tailored combination of options that meet your specific needs.

4. Conditional Logic

Allows the Option Group to be displayed or hidden based on customer selections. This is useful for showing the group only when specific criteria are met.

\n
How to set up Conditional logic for your options
\n

\n","

The Option Group option type allows you to organize and group related options together, enhancing the product page's clarity and user experience. This feature is particularly powerful for complex products where multiple related choices are available, making it easier for customers to navigate and make selections. The grouped options can be expanded or collapsed, offering a streamlined, organized presentation.

👉You can check out our Demo product to see how it works

\n",[1980,1981,1982],[],{"_164":746,"_747":1987,"_490":749},{"_164":1910,"_747":1986,"_490":1912},{"_164":1983,"_747":1984,"_490":1985},"advanced-option-setting","

1. Change product image on option selection

When the product image alt text aligns with the option value labels and the theme setup is correct, enabling this feature will update the product image according to the selected option.

\n
How to change product image upon option selection
\n

2. Price display type

Decide whether to show or hide the additional price on the slider interface.

3. Enable search

This feature will allow customers to search within the option values in color or image dropdowns, making it easier and faster for them to find and select what they need.

4. Show price

Customize how pricing is displayed with these options:

Only Option Value: Show price next to the option value.
Only Option Label: Show price next to the label.
Show All: Display prices with both label and value for maximum transparency.

5. Placeholder Text

Add placeholder text in the combo box before any selection is made. This can prompt customers to make a choice (e.g., \"Please select your options\").

6. Tooltip

Provide additional information about each option by adding tooltips. When customers hover over an option, the tooltip will display, offering further details.

7. Help Text

Display help text below the combo box to offer further explanation or instructions, helping customers make informed selections.

8. Class Name

For advanced customization, add custom CSS class names to the combo box. This allows you to style it according to your brand’s design standards, ensuring a cohesive look across your product page.

\n","Advanced Option Setting","

1. Option Name

The internal name used to manage and identify this combo box option within your app. This helps with organization and tracking of different product options.

2. Label on Product

The label displayed next to the combo box on the product page. It guides customers on what the combo box represents (e.g., \"Select Add-ons\" or \"Choose Accessories\").

3. Label on Cart

This label appears in the shopping cart, order details, invoices, packing slips, order confirmation emails, and other order-related documents, showing the selected options clearly.

4. Option Values

Add the different options available in the combo box. You can include multiple values, and customers can select more than one. These values can be added individually using \"Add option value\" or in bulk using the \"Bulk add\" feature.

5. Default Value

Set a default selection that will be pre-selected when the product page loads, helping guide customers toward recommended or popular choices.

6. Required Field

Make it mandatory for customers to select at least one option from the combo box before adding the product to their cart. This ensures that all necessary choices are made.

7. Hide \"Label on Product\"

Option to hide the label next to the combo box on the product page, providing a cleaner and more streamlined appearance.

8. Show \"Quantity\" for Option Value

Enable customers to specify the quantity for each selected option in the combo box. You can set minimum and maximum quantity limits for better control.

9. Add description for option value

You can add a descriptive text below the option value to provide additional information about the selection.

10. One Time Charge

This setting allows you to modify how additional charges are applied to a specific option value. Normally, the extra charge for an option is multiplied by the quantity of the product purchased (e.g., an additional charge of $10 would become $50 if the quantity is 5). However, by enabling the \"One time charge\" feature, the extra charge will only be added once, regardless of the product quantity. This is useful when you want to apply a flat fee for certain options without scaling the charge with the number of items purchased.

11. Min/Max Selection

Set minimum and maximum limits on the number of options that can be selected from the combo box, providing greater control over customer choices.

12. Option URL

Allows you to link specific options within the combo box to external URLs. Customers can be directed to another page or site for additional information when selecting certain options.

\n
How to set up Option URL for your options
\n

13. Conditional Logic

Apply conditional logic to control when certain options in the combo box are displayed based on other selections made by the customer, enhancing the shopping experience.

\n
How to set up Conditional logic for your options
\n

\n","

The Combo Box option type is a versatile selection tool that combines the functionality of a dropdown menu with the flexibility of checkboxes, allowing customers to select multiple options from a list. This option type is ideal for products that offer various add-ons or configurations, enabling customers to customize their purchases easily. When an option is selected, it will appear right under the option box, giving a clear view of all chosen items.

👉You can check out our Demo product to see how it works

\n",[1990,1991,1992],[],{"_164":746,"_747":1995,"_490":749},{"_164":1910,"_747":1994,"_490":1912},{"_164":1907,"_747":1993,"_490":1909},"

1. Change product image on option selection

When the product image alt text aligns with the option value labels and the theme setup is correct, enabling this feature will update the product image according to the selected option.

\n
How to change product image upon option selection
\n

2. Price display type

Decide whether to show or hide the additional price on the slider interface.

3. Enable search

This feature will allow customers to search within the option values in color or image dropdowns, making it easier and faster for them to find and select what they need.

4. Show price

Customize how pricing is displayed with these options:

Only Option Value: Show price next to the option value.
Only Option Label: Show price next to the label.
Show All: Display prices with both label and value for maximum transparency.

5. Placeholder Text

Add placeholder text that appears in the dropdown menu before a selection is made. This can prompt customers to make a choice (e.g., \"Please select an image\").

6. Tooltip

Provide additional information about each image option by adding tooltips. When customers hover over an image, the tooltip will display, offering further details.

7. Help Text

Display help text below the dropdown menu to offer further explanation or instructions, helping customers make informed selections.

8. Class Name

For advanced customization, add custom CSS class names to the image dropdown menu. This allows you to style it according to your brand’s design standards, ensuring a cohesive look across your product page.

\n","

1. Option Name

The internal name used to identify this group of image dropdown options within your app, helping you organize and manage your product options efficiently.

2. Label on Product

This label appears next to the image dropdown menu on the product page, guiding customers on what the dropdown list represents (e.g., \"Select Design\" or \"Choose Pattern\").

3. Label on Cart

The label shown in the shopping cart, order details, invoices, packing slips, order confirmation emails, and other order-related documents. It clearly indicates the image selection made by the customer.

4. Option Values

Add the different image choices available in the dropdown menu. Each option value includes an image icon where you can upload any image you want (supported formats: PNG, JPEG, JPG, WEBP), accompanied by a text box where you can fill in the name or description of the image. You can add these values individually using \"Add option value\" or in bulk using the \"Bulk add\" feature.

5. Required Field

Make it mandatory for customers to select an image option from the dropdown menu before adding the product to their cart. This ensures that all necessary choices are made.

6. Hide \"Label on Product\"

Option to hide the label next to the image dropdown menu on the product page for a cleaner, more streamlined appearance.

7. Default Value

Set a default image option that will be pre-selected when the product page loads, guiding customers towards a recommended or popular choice.

8. Show \"Quantity\" for Option Value

Enable customers to specify the quantity for each image option in the dropdown menu. You can set minimum and maximum quantity limits for better control.

9. Add description for option value

You can add a descriptive text below the option value to provide additional information about the selection.

10. One Time Charge

11. Min/Max Selection

You can define the minimum and maximum number of options that a customer can select. This ensures that customers make a choice within a specified range.

12. Option URL

Allows you to link specific image options in the dropdown menu to external URLs. Customers can select these options to be directed to another page or site for additional information.

\n
How to set up Option URL for your options
\n

13. Conditional Logic

Apply conditional logic to control when certain image dropdown menu options are displayed based on other selections made by the customer. This creates a more personalized and interactive shopping experience.

\n
How to set up Conditional logic for your options
\n

\n","

The Image Dropdown Menu option type allows customers to select from a list of image-based options presented in a dropdown format. This option type is ideal for products with multiple visual variations, such as different designs, patterns, or styles, providing a visual representation along with a textual description for each option.

👉You can check out our Demo product to see how it works

\n",[1998,1999,2000],[],{"_164":746,"_747":2003,"_490":749},{"_164":1910,"_747":2002,"_490":1912},{"_164":1907,"_747":2001,"_490":1909},"

1. Change product image on option selection

When the product image alt text aligns with the option value labels and the theme setup is correct, enabling this feature will update the product image according to the selected option.

\n
How to change product image upon option selection
\n

2. Price display type

Decide whether to show or hide the additional price on the slider interface.

3. Enable search

This feature will allow customers to search within the option values in color or image dropdowns, making it easier and faster for them to find and select what they need.

4. Show price

Customize how pricing is displayed with these options:

Only Option Value: Show price next to the option value.
Only Option Label: Show price next to the label.
Show All: Display prices with both label and value for maximum transparency.

5. Placeholder Text

Add placeholder text that appears in the dropdown menu before a selection is made. This can prompt customers to make a choice (e.g., \"Please select a color\").

6. Tooltip

Provide additional information about each color option by adding tooltips. When customers hover over a color, the tooltip will display, offering further details.

7. Help Text

Display help text below the dropdown menu to offer further explanation or instructions, helping customers make informed selections.

8. Class Name

For advanced customization, add custom CSS class names to the color dropdown menu. This allows you to style it according to your brand’s design standards, ensuring a cohesive look across your product page.

\n","

1. Option Name

The internal name used to identify this group of color dropdown options within your app. It helps you organize and manage your product options effectively.

2. Label on Product

This label appears next to the color dropdown menu on the product page, guiding customers on what the dropdown list represents (e.g., \"Select Color\" or \"Choose Shade\").

3. Label on Cart

The label shown in the shopping cart, order details, invoices, packing slips, order confirmation emails, and other order-related documents. It clearly indicates the color selection made by the customer.

4. Option Values

Add the different color choices available in the dropdown menu. Each option value includes a color icon where you can select any color you want, accompanied by a text box where you can fill in the name or description of the color. You can add these values individually using \"Add option value\" or in bulk using the \"Bulk add\" feature.

5. Default Value

Set a default color option that will be pre-selected when the product page loads, guiding customers towards a recommended or popular choice.

6. Required Field

Make it mandatory for customers to select a color option from the dropdown menu before adding the product to their cart. This ensures that all necessary choices are made.

7. Hide \"Label on Product\"

Option to hide the label next to the color dropdown menu on the product page for a cleaner, more streamlined appearance.

8. Show \"Quantity\" for Option Value

Enable customers to specify the quantity for each color option in the dropdown menu. You can set minimum and maximum quantity limits for better control.

9. Add description for option value

You can add a descriptive text below the option value to provide additional information about the selection.

10. One Time Charge

11. Min/Max Selection

You can define the minimum and maximum number of checkbox options that a customer can select. This ensures that customers make a choice within a specified range.

12. Option URL

Allows you to link specific color options in the dropdown menu to external URLs. Customers can select these options to be directed to another page or site for additional information.

\n
How to set up Option URL for your options
\n

13. Conditional Logic

Apply conditional logic to control when certain color dropdown menu options are displayed based on other selections made by the customer. This creates a more personalized and interactive shopping experience.

\n
How to set up Conditional logic for your options
\n

\n","

The Color Dropdown Menu option type allows customers to select from a list of colors presented in a dropdown format. This option type is ideal for products that come in various colors, providing a visual representation along with a textual description for each color option.

👉You can check out our Demo product to see how it works

\n",[2006,2007,2008],[],{"_164":746,"_747":2011,"_490":749},{"_164":1910,"_747":2010,"_490":1912},{"_164":1907,"_747":2009,"_490":1909},"

1. Change product image on option selection

When the product image alt text aligns with the option value labels and the theme setup is correct, enabling this feature will update the product image according to the selected option.

\n
How to change product image upon option selection
\n

2. Price display type

Decide whether to show or hide the additional price on the slider interface.

3. Placeholder Text

Add placeholder text that appears in the drop-down menu before a selection is made. This can prompt customers to make a choice (e.g., \"Please select a size\").

4. Show price

Customize how pricing is displayed with these options:

Only Option Value: Show price next to the option value.
Only Option Label: Show price next to the label.
Show All: Display prices with both label and value for maximum transparency.

5. Tooltip

Provide additional information about each option by adding tooltips. When customers hover over an option, the tooltip will display, offering further details.

6. Help Text

Display help text below the drop-down menu to offer further explanation or instructions, helping customers make informed selections.

7. Class Name

For advanced customization, add custom CSS class names to the drop-down menu. This allows you to style it according to your brand’s design standards, ensuring a cohesive look across your product page.

\n","

1. Option Name

The internal name used to identify this group of drop-down options within your app. It helps you organize and manage your product options effectively.

2. Label on Product

This label appears next to the drop-down menu on the product page, guiding customers on what the drop-down list represents (e.g., \"Select Size\" or \"Choose Color\").

3. Label on Cart

The label shown in the shopping cart, order details, invoices, packing slips, order confirmation emails, and other order-related documents. It clearly indicates the selection made by the customer.

4. Option Values

Add the different choices available in the drop-down menu. You can do this individually by selecting \"Add option value\" or in bulk using the \"Bulk add\" feature. Each option value represents a specific choice (e.g., \"Small\", \"Medium\", \"Large\").

5. Default Value

Set a default option that will be pre-selected when the product page loads, guiding customers towards a recommended or popular choice.

6. Required Field

Make it mandatory for customers to select an option from the drop-down menu before adding the product to their cart. This ensures that all necessary choices are made.

7. Hide \"Label on Product\"

Option to hide the label next to the drop-down menu on the product page for a cleaner, more streamlined appearance.

8. One Time Charge

9. Show \"Quantity\" for Option Value

Enable customers to specify the quantity for each option in the drop-down menu. You can set minimum and maximum quantity limits for better control.

10. Min/Max Selection

You can define the minimum and maximum number of options that a customer can select. This ensures that customers make a choice within a specified range.

11. Option URL

Allows you to link specific options in the drop-down menu to external URLs. Customers can select these options to be directed to another page or site for additional information.

\n
How to set up Option URL for your options
\n

12. Conditional Logic

Apply conditional logic to control when certain drop-down menu options are displayed based on other selections made by the customer. This creates a more personalized and interactive shopping experience.

\n
How to set up Conditional logic for your options
\n

\n","

The Drop-down Menu option type allows customers to make selections from a drop-down list on the product page. This option type is ideal for offering a range of choices in a compact, organized format, such as sizes, colors, or product variants.

👉You can check out our Demo product to see how it works

\n",[2014,2015,2016],[],{"_164":746,"_747":2019,"_490":749},{"_164":1910,"_747":2018,"_490":1912},{"_164":1907,"_747":2017,"_490":1909},"

1. Change product image on option selection

When the product image alt text aligns with the option value labels and the theme setup is correct, enabling this feature will update the product image according to the selected option.

\n
How to change product image upon option selection
\n

2. Show slider

Transform extensive lists of swatches into a streamlined slider using the slider feature. This functionality tidies up your product page, presenting options in an organized and visually pleasing manner, particularly beneficial when offering many selections.

Number of Rows: The slider defaults to 1 row. To display more swatches simultaneously, choose the number of rows per slide. For instance, selecting 2 rows with 4 swatches per row will show 8 swatches in one view.
Swatches per Row: Set the number of swatches per row by considering swatch size, option label length, and label position. For default swatch sizes with labels below, about 3 or 3.5 swatches fit per row. If labels are beside swatches, you might fit 2 per row. You can choose whole numbers like 3, or use 3.5 to display half of the last swatch if needed.
Show arrows icon: Enable the arrow icon on the slider by selecting this option.
Show indicators: Show indicators marking the current slider page.

3. Display selected value on label

When this setting is enabled, the selected value appears next to the option label.

4. Price display type

Decide whether to show or hide the additional price on the slider interface.

5. Tooltip display

Default: Display only the selection's image on hover.
Tooltip as value: Show the selection image and option value on hover.
Tooltip as description: Display the selection's image and its description on hover.

6. Option Value Column

Organize the button options into 1, 2, 3, or 4 columns for a more organized and visually appealing presentation on the product page.

7. Tooltip

Add tooltips to the buttons to provide additional information about each option. When customers hover over a button, the tooltip will display, offering further details.

8. Help Text

Display help text below the buttons to offer further explanation or instructions, helping customers make informed selections.

9. Class Name

For advanced customization, add custom CSS class names to the buttons. This allows you to style them according to your brand’s design standards, ensuring a cohesive look across your product page.

\n","

1. Option Name

This is the internal name used to identify the group of buttons within your app. It helps you manage and organize your product options effectively.

2. Label on Product

This label is displayed next to the buttons on the product page, guiding customers on what the buttons represent (e.g., \"Choose Size\" or \"Select Style\").

3. Label on Cart

This label is shown in the shopping cart, order details, invoices, packing slips, order confirmation emails, and other order-related documents. It clearly indicates the options selected by the customer.

4. Option Values

You can add button values either individually by clicking \"Add option value\" or in bulk using the \"Bulk add\" feature. Each button value represents a distinct choice (e.g., \"Small\", \"Medium\", \"Large\").

5. Default Value

Set a default selection for one of the button options to be pre-selected when the product page loads. This can highlight a recommended or popular choice.

6. Required Field

This setting makes it mandatory for customers to select a button option before they can add the product to their cart. This ensures that all necessary choices are made.

7. Hide \"Label on Product\"

You can opt to hide the label next to the buttons on the product page for a cleaner and more minimalist layout.

8. Show \"Quantity\" for Option Value

Enable this option to allow customers to specify the quantity for each button option. You can set minimum and maximum quantity limits to control how many of each option can be selected.

9. Add description for option value

You can add a descriptive text below the option value to provide additional information about the selection.

10. One Time Charge

11. Option URL

This setting allows you to link specific button options to external URLs. Customers can click on these buttons to access additional information or be directed to another page or site.

\n
How to set up Option URL for your options
\n

12. Conditional Logic

Apply conditional logic to control when certain buttons are displayed based on other selections made by the customer. This creates a dynamic and tailored shopping experience.

\n
How to set up Conditional logic for your options
\n

\n","

The Button option type allows customers to make selections by clicking on button-style options on the product page. This option type provides a user-friendly and visually appealing way to present choices, such as size, color, or style.

👉You can check out our Demo product to see how it works

\n",[2022,2023,2024],[],{"_164":746,"_747":2027,"_490":749},{"_164":1910,"_747":2026,"_490":1912},{"_164":1907,"_747":2025,"_490":1909},"

1. Change product image on option selection

When the product image alt text aligns with the option value labels and the theme setup is correct, enabling this feature will update the product image according to the selected option.

\n
How to change product image upon option selection
\n

2. Option Value Column

You can arrange the checkbox options into 1, 2, 3, or 4 columns, depending on how you want them displayed on the product page, allowing for better organization and visibility.

3. Tooltip display

Default: Display only the selection's image on hover.
Tooltip as value: Show the selection image and option value on hover.
Tooltip as description: Display the selection's image and its description on hover.

4. Price display type

Decide whether to show or hide the additional price on the slider interface.

5. Show price

Customize how pricing is displayed with these options:

Only Option Value: Show price next to the option value.
Only Option Label: Show price next to the label.
Show All: Display prices with both label and value for maximum transparency.

6. Tooltip

Add tooltips to provide more information about each checkbox option. When customers hover over the option, the tooltip will display, offering additional context without cluttering the page.

7. Help Text

This text appears below the checkboxes, providing further explanation or instructions to assist customers in making their selections.

8. Class Name

For advanced customization, you can add custom CSS class names to style the checkboxes according to your design preferences, ensuring a seamless and cohesive look on your product page.

\n","

1. Option Name

This is the internal name used to identify this group of checkboxes within your app. It helps keep your options organized and easily manageable.

2. Label on Product

This label appears next to the checkboxes on the product page, helping customers understand what the options represent (e.g., \"Additional Features\" or \"Select Toppings\").

3. Label on Cart

This label is displayed in the shopping cart, checkout, order details, invoices, packing slips, order confirmation emails, and other order-related documents to show which options were selected by the customer, providing clarity on their choices.

4. Option Values

Each checkbox option includes an image icon (supported formats: .png, .jpeg, .jpg, .webp) and a text label. The image helps visually represent the option, while the text describes it. You can add these values individually or in bulk for efficiency.

5. Required Field

This setting makes it mandatory for customers to select at least one checkbox option before adding the product to their cart, ensuring they make a choice.

6. Hide \"Label on Product\"

If you prefer a cleaner look, you can hide the label next to the checkboxes on the product page, focusing solely on the checkbox options.

7. One Time Charge

8. Show \"Quantity\" for Option Value

This setting lets customers specify a quantity for each selected checkbox option. You can also set minimum and maximum limits for these quantities, giving you control over how much of each option can be chosen.

9. Min/Max Selection

You can define the minimum and maximum number of checkbox options that a customer can select. This ensures that customers make a choice within a specified range.

10. Default Value

Set default checkbox options that are pre-selected when the product page loads. This can guide customers towards recommended or popular choices.

11. Add description for option value

You can add a descriptive text below the option value to provide additional information about the selection.

12. Option URL

This setting allows you to link specific checkbox options to external URLs. For instance, you can direct customers to additional information about a particular option on a different site or page.

\n
How to set up Option URL for your options
\n

13. Conditional Logic

Use conditional logic to show or hide certain checkbox options based on other selections the customer has made. This creates a more personalized and dynamic shopping experience.

\n
How to set up Conditional logic for your options
\n

\n","

The Checkboxes option type is ideal for allowing customers to make multiple selections from a list of options on the product page. Each checkbox represents an individual option, giving customers the flexibility to choose more than one item or feature.

👉You can check out our Demo product to see how it works

\n",[2030,2031,2032],[],{"_164":746,"_747":2035,"_490":749},{"_164":1910,"_747":2034,"_490":1912},{"_164":1907,"_747":2033,"_490":1909},"

1. Change product image on option selection

When the product image alt text aligns with the option value labels and the theme setup is correct, enabling this feature will update the product image according to the selected option.

\n
How to change product image upon option selection
\n

2. Option Value Column

You can arrange the radio button options into 1, 2, 3, or 4 columns, depending on how you want them displayed on the product page.

3. Show price

Customize how pricing is displayed with these options:

Only Option Value: Show price next to the option value.
Only Option Label: Show price next to the label.
Show All: Display prices with both label and value for maximum transparency.

4. Price display type

Decide whether to show or hide the additional price on the slider interface.

5. Tooltip

Add a tooltip to provide more information about each radio button option. When customers hover over the option, the tooltip will display, offering additional context without cluttering the page.

6. Help Text

This text appears below the radio buttons, providing further explanation or instructions to assist customers in making their choice.

7. Class Name

For advanced customization, you can add custom CSS class names to style the radio buttons according to your design preferences. This allows for a tailored and cohesive look on your product page.

\n","

1. Option Name

The internal name used to identify this option within your app. It helps keep your options organized.

2. Label on Product

This label appears next to the radio buttons on the product page, indicating what the options represent (e.g., \"Size\" or \"Material\").

3. Label on Cart

4. Option Values

Each radio button option includes an image icon (supported formats: .png, .jpeg, .jpg, .webp) and a text label. The image helps visually represent the option, while the text describes it. You can add these values individually or in bulk.

5. Default Value

Set a default radio button option that is pre-selected when the product page loads. This can guide customers toward a recommendary option.

6. Required Field

This makes it mandatory for customers to select a radio button option before adding the product to their cart. It ensures that a choice is made.

7. Hide \"Label on Product\"

If you prefer a cleaner look, you can hide the label next to the radio buttons on the product page.

8. Show \"Quantity\" for Option Value

This allows customers to specify a quantity for the selected option. You can also set minimum and maximum limits for the quantity, giving you control over how much of the option can be chosen.

9. One time charge

10. Add description for option value

You can add a descriptive text below the option value to provide additional information about the selection.

11. Option URL

This setting allows you to link specific radio button options to other products in your store or external URLs. For instance, if you want to provide more information about a particular option, you can direct customers to a detailed page.

\n
How to set up Option URL for your options
\n

12. Conditional Logic

Use conditional logic to show or hide the radio button options based on other selections the customer has made. This creates a dynamic and personalized shopping experience.

\n
How to set up Conditional logic for your options
\n

\n","

The Radio Button option type is a versatile tool that allows customers to make single selections from a list of options on the product page. Each option is represented by a circular button, making it easy for users to see all available choices and select one.

👉You can check out our Demo product to see how it works

\n",[2039,2040,2041],"5 min",[],{"_164":746,"_747":2044,"_490":749},{"_164":1910,"_747":2043,"_490":1912},{"_164":1907,"_747":2042,"_490":1909},"

1. Change product image on option selection

When the product image alt text aligns with the option value labels and the theme setup is correct, enabling this feature will update the product image according to the selected option.

\n
How to change product image upon option selection
\n

2. Show slider

Number of Rows: The slider defaults to 1 row. To display more swatches simultaneously, choose the number of rows per slide. For instance, selecting 2 rows with 4 swatches per row will show 8 swatches in one view.
Swatches per Row: Set the number of swatches per row by considering swatch size, option label length, and label position. For default swatch sizes with labels below, about 3 or 3.5 swatches fit per row. If labels are beside swatches, you might fit 2 per row. You can choose whole numbers like 3, or use 3.5 to display half of the last swatch if needed.
Show arrows icon: Enable the arrow icon on the slider by selecting this option.
Show indicators: Show indicators marking the current slider page.

3. Swatch title display

Control the visibility of the swatch title by choosing from the following options: \"Default,\" \"Show option value title,\" or \"Hide option value title.\" This helps you tailor the display based on your design preferences.

4. Option value column

Customize the layout by selecting how many columns (1, 2, 3, or 4) the image swatches should be displayed in. This allows for better organization and presentation, depending on the number of image offered.

5. Show price

Customize how pricing is displayed with these options:

Only Option Value: Show price next to the option value.
Only Option Label: Show price next to the label.
Show All: Display prices with both label and value for maximum transparency.

6. Price display type

Decide whether to show or hide the additional price on the slider interface.

7. Tooltip

A brief pop-up message that appears when customers hover over an information icon near the image swatch option, providing additional details or context.

8. Help text

Detailed information displayed directly beneath the image swatch option, offering clear instructions or explanations to assist customers.

9. Tooltip display

Default: Display only the selection's image on hover.
Tooltip as value: Show the selection image and option value on hover.
Tooltip as description: Display the selection's image and its description on hover.

10. Class name

Customize the styling of the image swatch option by assigning a CSS class name, giving you greater control over its appearance in your store.

\n","

1. Option name

This is the internal name for the image swatch option, used to identify and manage it within your product setup.

2. Label on product

The label displayed on the product page next to the image swatches, guiding customers on what the selection is for (e.g., \"Choose a style\").

3. Label on cart

4. Required field

Make this option mandatory, ensuring that customers must select an option value before proceeding with their purchase.

5. Hide \"Label on Product\"

Choose whether to display or hide the label next to the image swatches on the product page. This can help maintain a cleaner design if the image swatch's purpose is self-evident.

6. One time charge

7. Option values

This setting includes a image icon where you can upload images (supported formats: .png, .jpeg, .jpg, .webp), paired with a text box for entering the option value.

You can add these values individually using the \"Add option value\" feature or in bulk using the \"Bulk add\" feature. This flexibility allows for quick setup and easy management of multiple image options.

8. Show \"Quantity\" for option value

This allows customers to specify a quantity for the selected option. You can also set minimum and maximum limits for the quantity, giving you control over how much of the option can be chosen.

9. Option URL

This setting allows you to link specific option values to external URLs, enabling customers to seamlessly transition between different sites or pages for additional information.

\n
How to set up Option URL for your options
\n

10. Default value

This is the image swatch that is pre-selected when the product page loads, guiding customers toward a default option you recommend.

11. Add description for option value

You can add a descriptive text below the option value to provide additional information about the selection.

12. Conditional logic

Set rules to display or hide this option based on other selections made by the customer. This helps create a dynamic, personalized shopping experience where only relevant options are shown.

\n
How to set up Conditional logic for your options
\n

\n","

The Image swatch option type is a versatile and visually engaging way to allow customers to view and select products using images. It enhances the shopping experience by providing clear visual choices, making it easier for customers to pick the exact product type they want.

👉You can check out our Demo product to see how it works

\n",[2047,2048,2049],[],{"_164":746,"_747":2052,"_490":749},{"_164":1910,"_747":2051,"_490":1912},{"_164":1907,"_747":2050,"_490":1909},"

1. Change product image on option selection

When the product image alt text aligns with the option value labels and the theme setup is correct, enabling this feature will update the product image according to the selected option.

\n
How to change product image upon option selection
\n

2. Show slider

Number of Rows: The slider defaults to 1 row. To display more swatches simultaneously, choose the number of rows per slide. For instance, selecting 2 rows with 4 swatches per row will show 8 swatches in one view.
Swatches per Row: Set the number of swatches per row by considering swatch size, option label length, and label position. For default swatch sizes with labels below, about 3 or 3.5 swatches fit per row. If labels are beside swatches, you might fit 2 per row. You can choose whole numbers like 3, or use 3.5 to display half of the last swatch if needed.
Show arrows icon: Enable the arrow icon on the slider by selecting this option.
Show indicators: Show indicators marking the current slider page.

3. Swatch title display

4. Option value column

Customize the layout by selecting how many columns (1, 2, 3, or 4) the color swatches should be displayed in. This allows for better organization and presentation, depending on the number of colors offered.

5. Price display type

Decide whether to show or hide the additional price on the slider interface.

6. Show price

Customize how pricing is displayed with these options:

Only Option Value: Show price next to the option value.
Only Option Label: Show price next to the label.
Show All: Display prices with both label and value for maximum transparency.

7. Tooltip

A brief pop-up message that appears when customers hover over an information icon near the color swatch, providing additional details or context.

8. Help text

Detailed information displayed directly beneath the color swatch option, offering clear instructions or explanations to assist customers.

9. Class name

Customize the styling of the color swatch option by assigning a CSS class name, giving you greater control over its appearance in your store.

\n","

1. Option name

This is the internal name for the color swatch option, used to identify and manage it within your product setup.

2. Label on product

The label displayed on the product page next to the color swatches, guiding customers on what the selection is for (e.g., \"Choose a color\").

3. Label on cart

4. Required field

Make this option mandatory, ensuring that customers must select a color before proceeding with their purchase.

5. Hide \"Label on Product\"

Choose whether to display or hide the label next to the color swatches on the product page. This can help maintain a cleaner design if the color swatch's purpose is self-evident.

6. Option values

This setting includes a color icon where you can select any color, paired with a text box for entering the option value.

7. Default value

This is the color swatch that is pre-selected when the product page loads, guiding customers toward a default option you recommend.

8. Add description for option value

You can add a descriptive text below the option value to provide additional information about the selection.

9. One time charge

10. Show \"Quantity\" for option value

This allows customers to specify a quantity for the selected option. You can also set minimum and maximum limits for the quantity, giving you control over how much of the option can be chosen.

11. Option URL

This setting allows you to link specific options to external URLs, enabling customers to seamlessly transition between different sites or pages for additional information.

\n
How to set up Option URL for your options
\n

12. Conditional logic

Set rules to display or hide this option based on other selections made by the customer. This helps create a dynamic, personalized shopping experience where only relevant options are shown.

\n
How to set up Conditional logic for your options
\n

\n","

The Color swatch option type is a versatile and visually engaging way to allow customers to select colors for products. It enhances the shopping experience by providing clear visual choices, making it easier for customers to pick the exact color they want.

👉You can check out our Demo product to see how it works

\n",[2055,2056,2057],[],{"_164":746,"_747":2060,"_490":749},{"_164":1910,"_747":2059,"_490":1912},{"_164":1907,"_747":2058,"_490":1909},"

1. Class Name

Assigns a custom CSS class to the hidden field, allowing for specific styling or behavior management in the cart or order details.

\n","

1. Option Name

This is the internal name used within your app to identify the hidden field. It helps keep your options organized during setup but won’t be shown to customers.

2. Label on Cart

This label will appear next to the hidden field’s value in the cart summary, checkout, and order details, helping to identify the hidden information.

3. Default Value

This is the preset value that will automatically be included with the hidden field. It’s useful for consistently applying certain data across all orders without customer input.

4. Conditional Logic

Allows the hidden field to be applied only when specific conditions are met, based on other customer selections. This is useful for dynamically adding hidden data when certain criteria are fulfilled.

\n
How to set up Conditional logic for your options
\n

\n","

The Hidden Field option type is used to include data that isn’t visible to customers on the product page but appears in the cart and order details. This is useful for adding hidden information or metadata that doesn’t require customer interaction but needs to be tracked through the purchasing process.

\n",[2063,2064,2065],[],{"_164":746,"_747":2068,"_490":749},{"_164":1910,"_747":2067,"_490":1912},{"_164":1907,"_747":2066,"_490":1909},"

1. Class Name

Add a custom CSS class name to apply specific styles to the Dimension option.

2. Tooltip

Provide a short explanation that appears when customers hover over the option. Useful for quick hints.

3. Help Text

Add longer, detailed information directly below the Dimension option. This helps customers better understand their choices at each stage.

\n","

1. Option Name

The internal name used to identify the Dimension option within your app’s settings. This name does not appear on the storefront product page but helps keep your options organized.

2. Label on Product

This text appears above the Dimension option on the product page, guiding customers on the type of measurement or formula they need to enter.

3. Label on Cart

The text that appears on the Cart summary screen, Checkout, and Order detail page, next to the measurements. This ensures the option name is clearly associated with the customer's order.

4. Required Field

This setting ensures that the customer must enter the dimension values before proceeding with their purchase. If enabled, the Dimension option becomes mandatory.

5. Hide \"Label on Product\"

This option allows you to hide the label that typically appears above the Dimension fields, streamlining the interface if the label is unnecessary.

6. Value X / Value Y / Value Z

You can configure up to three dimensions (X, Y, Z).

Label – Set the name of each dimension (e.g., Width, Length, Height).
Unit – Define the measurement unit (e.g., cm, inch, meter).
Default – Set the initial value shown in the input field.
Min / Max – Define the acceptable input range for each dimension.

💡 Tip: The built-in Dimension type supports up to 3 inputs. For more, you can add another Dimension option to your option set.

7. Calculate Price

Enable this option to apply dynamic pricing based on customer-entered dimensions.

Base Price – The starting unit price applied to the formula.
Price Formula – Set up a custom calculation (e.g., x * y * {{price}} for square area, or x * y * z * {{price}} for volume).
- x, y, z = customer-entered values.
- {{price}} = the base price per unit defined above.
\n

Notes:

The formula calculates the total price including the main product price.
To avoid double-counting the product’s base price:
1. Set the main product price to $0.00 and hide the price in your product template (recommended).
2. If that’s not feasible, and all your products share the same base price, please contact support for a custom solution.
\n

8. Conditional Logic

Set rules that determine when the File Upload option should be displayed or hidden based on other selections made by the customer. For instance, the option might only appear if a customer selects a specific product variant.

\n","

In addition to collecting measurements, you can set up a custom formula that uses the entered values to calculate product pricing automatically. This ensures that pricing scales seamlessly with customer inputs, providing both flexibility for shoppers and efficiency in store management.

\n",[2071,2072,2073],[],{"_164":746,"_747":2076,"_490":749},{"_164":1910,"_747":2075,"_490":1912},{"_164":1907,"_747":2074,"_490":1909},"

1. Hide Selected Value

Choose to hide the number value above the slider if you prefer a cleaner look.

2. Show Step Marker

When enabled, small markers will appear along the slider to indicate each step interval. This provides a clear visual cue and helps customers understand the range more intuitively.

3. Price display type

Decide whether to show or hide the additional price on the slider interface.

4. Show price

Customize how pricing is displayed with these options:

Only Option Value: Show price next to the option value.
Only Option Label: Show price next to the label.
Show All: Display prices with both label and value for maximum transparency.

5. Default value

Predefine the value that appears when the product page loads. This gives customers a suggested starting point and can help guide their selection.

6. Class name

Allows you to assign a custom CSS class to the Range slider field. This helps apply specific styles or behaviors to the field based on your design preferences.

7. Help text

This setting displays directly beneath the Range slider option, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.

8. Tooltip

This setting allows you to provide additional information in a pop-up message when the customer hovers over the information icon. It provides brief, contextual information without cluttering the interface.

\n","

1. Option Name

This is the internal label used to identify the Range slider option within the app’s settings. It helps you manage and organize the option but does not appear on the storefront product page.

2. Label on Product

This is the text displayed above the Range slider input field on the product page of your storefront. It provides customers with instructions or context for what they should enter.

3. Label on Cart

This is the text that appears on the Cart summary screen, Checkout, and Order detail page, alongside the customer’s numerical input. It helps identify and display the specific value entered by the customer.

4. Add-on Product

When enabled, this setting adds an additional charge to the product when this option is used. It’s useful for optional features or upgrades that come at an extra cost.

5. Step Interval

Define how much the value increases or decreases when the slider moves. For example, setting a step of “5” means values will jump by 5 units at each movement.

6. Unit

Display a unit next to the selected value (e.g., cm, kg, $, %), helping customers clearly understand what the number represents.

7. Start Value

The minimum value the customer can select.

8. End Value

The maximum value available for selection.

9. Price Type

Price for each quantity: the entered quantity is multiplied by the add-on price.
Price for any quantity: the add-on price is still the same no matter how many units are entered.

10. Conditional Logic

This feature enables you to set rules for when the Range slider should be shown or hidden based on other customer selections.

\n","

The Range Slider is a customizable input element that allows customers to choose a numeric value by sliding a handle along a visual track. It’s perfect for scenarios where you want to let customers pick a quantity, dimension, power level, donation amount, or any other measurable input — all in a more engaging and user-friendly way.

👉You can check out our Demo product to see how it works

\n",[2079,2080,2081],[],{"_164":746,"_747":2084,"_490":749},{"_164":1910,"_747":2083,"_490":1912},{"_164":1907,"_747":2082,"_490":1909},"

1. Enable quantity controls

Display + and - buttons for adjusting quantity. When checked, the \"Step interval\" box appears, allowing you to set the change in quantity per click.

2. Price display type

Decide whether to show or hide the additional price on the slider interface.

3. Show price

Customize how pricing is displayed with these options:

Only Option Value: Show price next to the option value.
Only Option Label: Show price next to the label.
Show All: Display prices with both label and value for maximum transparency.

4. Default Value

The pre-filled numerical value that appears in the Quantity field by default. It can be used to suggest a typical value or set an initial quantity, which customers can modify.

5. Tooltip

6. Help Text

This setting displays directly beneath the Quantity option, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.

7. Placeholder Text

The text is displayed within the Quantity field before the customer enters any value. It can provide an example or prompt, such as \"Enter quantity\" or \"Specify measurement.\"

8. Class Name

Allows you to assign a custom CSS class to the Quantity field. This helps apply specific styles or behaviors to the field based on your design preferences.

\n","

1. Option Name

This is the internal label used to identify the Quantity option within the app’s settings. It helps you manage and organize the option but does not appear on the storefront product page.

2. Label on Product

This is the text displayed above the Quantity input field on the product page of your storefront. It provides customers with instructions or context for what they should enter, such as \"Enter quantity\" or \"Specify amount.\"

3. Label on Cart

4. Required Field

Determines whether the Quantity field must be filled out by the customer before they can complete their purchase. If enabled, the customer is required to provide a numerical input.

5. Hide \"Label on Product\"

Allows you to hide the label text that usually appears above the Quantity field on the product page. This can be used to simplify the interface if the label is not necessary.

6. Add-On Product

This feature allows you to apply an additional charge based on the numerical input entered by the customer. For example, if a customer enters a quantity of 3, a predefined extra charge can be automatically added to the product’s price based on the quantity specified.

7. One time charge

By default, the app aligns the add-on product's quantity with the main product's quantity. If this option is checked, the add-on charge will be applied only once, regardless of the product quantity. However, for Quantity field, this feature is incompatible and thus disabled.

8. Quantity option label

This is the optional text displayed below the Label on Product on the product page. It provides additional information or a description of the option.

9. Price type

Price for each quantity: the entered quantity is multiplied by the add-on price.
Price for any quantity: the add-on price is still the same no matter how many units are entered.

10. Min/Max Value

These settings define the minimum and maximum numerical values that can be entered into the Quantity field. For example, you can set a minimum value of 1 and a maximum value of 100 to ensure inputs are within a specific range.

11. Conditional Logic

This feature enables you to set rules for when the Quantity field should be shown or hidden based on other customer selections. For example, you might configure the Number field to appear only if the customer selects a specific option or if certain criteria are met.

\n
How to set up Conditional logic for your options
\n

\n","

Just like Number option, the Quantity option type allows customers to enter a numerical value.

More specifically, this option enables you to calculate the add-on price based on the specific quantity entered by customers. Rather than using a fixed rate, the add-on price will adjust dynamically according to the number of units input, giving you greater flexibility in setting pricing based on quantity.

👉You can check out our Demo product to see how it works

\n",[2087,2088,2089],[],{"_164":746,"_747":2092,"_490":749},{"_164":1910,"_747":2091,"_490":1912},{"_164":1907,"_747":2090,"_490":1909},"

1. Tooltip

This setting provides a brief explanation when customers hover over an information icon next to the switch. It’s helpful for offering additional context without cluttering the interface.

2. Help Text

This setting appears below the switch on the product page and provides more detailed instructions or information about the option. This is useful for ensuring customers fully understand what the switch does.

3. Price display type

Decide whether to show or hide the additional price on the slider interface.

4. Class Name

This allows you to assign a custom CSS class to the switch option, enabling you to style it according to your design preferences. It’s beneficial for maintaining a consistent visual style across your storefront.

\n","

1. Option Name

This is the internal name for the switch option within your app. It helps you organize and identify the option during setup but is not visible on the storefront.

2. Label on Product

This is the title displayed above the switch on the storefront product page. It helps customers understand what the switch controls or activates.

3. Label on Cart

This is the text shown on the cart summary, checkout, and order detail pages, next to the option value that the customer has selected. It should clearly describe the setting that was toggled.

4. Required Field

If this setting is enabled, customers must interact with the switch before proceeding to checkout. It’s useful for ensuring that customers actively make a choice.

5. Hide \"Label on Product\"

When enabled, this hides the label above the switch on the product page. This is useful if the label is not necessary or if the context is clear from other elements on the page.

6. Add-on Product

When enabled, this setting adds an additional charge to the product if the switch is turned on. It’s useful for optional features or upgrades that come at an extra cost.

7. One time charge

8. Switch Value

The switch value represents the possible states of the switch (e.g., \"On\" and \"Off\"). This helps indicate to customers what the switch will enable or disable.

9. Default Status

This determines the initial state of the switch when the product page loads (e.g., \"On\" or \"Off\"). It sets the default behavior for customers, which can be altered before purchase.

10. Conditional Logic

This setting allows you to display the switch option only when certain conditions are met. It’s beneficial for creating a dynamic shopping experience, where certain options appear based on previous selections.

\n
How to set up Conditional logic for your options
\n

\n","

The Switch option type allows users to toggle a setting on or off, typically represented by a slider or switch button on the product page. This is useful for settings or features that customers can choose to enable or disable.

👉You can check out our Demo product to see how it works

\n",[2095,2096,2097],[],{"_164":746,"_747":2100,"_490":749},{"_164":1910,"_747":2099,"_490":1912},{"_164":1907,"_747":2098,"_490":1909},"

1. Image Cropper

Provides an in-app tool for cropping images after upload. This feature only supports specific file formats: .jpg, .jpeg, .png, .webp, .ico, and .svg. Note that this feature is disabled if the Multiple Files setting is active.

2. Multiple Files

Allows customers to upload more than one file at a time. If this setting is enabled, the Image Cropper feature cannot be used.

3. Price display type

Decide whether to show or hide the additional price on the slider interface.

4. Tooltip

Adds a small pop-up message with additional information or guidance when the customer hovers over the File Upload button. Useful for providing quick tips or file format requirements.

5. Help Text

Displays guidance or additional instructions below the File Upload button, helping customers understand the requirements for the upload, such as accepted file types or file size limits.

6. Class Name

Assigns a custom CSS class to the File Upload option, allowing for specific styling or behavior adjustments according to your design needs.

\n","

1. Option Name

The internal name used to identify the File Upload option within your app’s settings. This name does not appear on the storefront product page but helps keep your options organized.

2. Label on Product

This is the text that appears above the File Upload button on the product page. It guides the customer on what type of file to upload, such as \"Upload your image\" or \"Attach your document.\"

3. Label on Cart

The text that appears on the Cart summary screen, Checkout, and Order detail page, next to the uploaded file name. This ensures the file name is clearly associated with the customer's order.

4. Required Field

This setting ensures that the customer must upload a file before proceeding with their purchase. If enabled, the File Upload option becomes mandatory.

5. Hide \"Label on Product\"

This option allows you to hide the label that typically appears above the File Upload button, streamlining the interface if the label is unnecessary.

6. Add-On Product

This feature allows you to apply an additional charge based on the uploaded file. For example, uploading a custom image for a product might incur an extra fee.

7. One time charge

8. Max File Size

Easily manage file uploads on your store by setting a maximum file size limit. This feature ensures customers can upload their files while keeping uploads efficient and within the store’s capacity.

For multiple file uploads, the maximum file size applies to each individual file, not the whole option.

9. File Type

Take control of the types of files users can upload. This feature allows store owners to specify permitted file types:

All Files – Allow any file type to be uploaded.
Image Files – Restrict uploads to common image formats (e.g., JPEG, PNG, SVG, GIF, WebP, and more).
Document Files – Accept popular document formats like PDF, DOCX, XLSX, CSV, and TXT.
Custom File Extensions – Tailor the upload options by specifying the exact file types you want to allow.

10. Conditional Logic

\n
How to set up Conditional logic for your options
\n

\n","

The File Upload option type allows customers to upload files directly to your store, which is useful for products that require personalized images, documents, or other files. This option supports various file formats and includes additional customization settings.

👉You can check out our Demo product to see how it works

Our File Upload feature offers:

Upload 1 file or multiple files per option with a limit of 20MB - 50MB - 100MB depending on the app plan you are using
Upload various kinds of files depending on customers' specific needs ( .jpeg/ .jpg/ .png/ .gif/ .webp/ .tif/ .tiff/ .ico/ .csv/ .docx/ .pdf/ .xls/ .xlms/ .xlsx/ .txt/ .svg/ .ai/ .eps/ .psd/ .mp4)

\n
View detailed pricing plans
\n

\n",[2103,2104,2105],[],{"_164":746,"_747":2110,"_490":749},{"_164":1910,"_747":2108,"_490":2109},{"_164":1907,"_747":2106,"_490":2107},"

1. Tooltip

2. Help Text

This setting displays directly beneath the Text option, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.

3. Class Name

This setting allows you to assign a custom CSS class to the Color Picker. This enables you to apply specific styling or behavior to the field based on your design needs.

4. Price display type

Decide whether to show or hide the additional price on the slider interface.

\n","Advanced option settings","

1. Option Name

This is the internal name for the Color Picker option within the app’s settings. It helps you manage and organize the option but does not appear on the storefront product page.

2. Label on Product

This is the text that appears above the Color Picker on the product page. It provides context or instructions for the customer, such as \"Select your preferred color\" or \"Choose a color for your item.\"

3. Label on Cart

This is the text that appears on the Cart summary screen, Checkout, and Order detail page, next to the color selected by the customer. It ensures the selected color is clearly displayed with their order details, such as \"Color: Red.\"

4. Required Field

This setting ensures that the customer must select a color before proceeding with their purchase. If enabled, the Color Picker becomes mandatory.

5. Hide \"Label on Product\"

This option allows you to hide the label that typically appears above the Color Picker on the product page, simplifying the interface if the label is unnecessary.

6. Add-On Product

This feature allows you to apply an additional charge based on the color selected. For example, choosing a custom or premium color might incur an extra fee.

7. One time charge

8. Default Value

This setting allows you to pre-select a default color in the Color Picker, which will be displayed when the customer first views the product. Customers can change this selection if they prefer a different color.

9. Conditional Logic

This feature allows you to set rules that determine when the Color Picker should be shown or hidden based on other customer selections. For instance, the Color Picker might only appear if the customer selects a product variant that offers color customization.

\n
How to set up Conditional logic for your options
\n

\n","Basic option settings","

The Color Picker option type allows customers to select a color from a predefined palette or a color spectrum, including RGB, HSL, and Hex. This option is commonly used for products that offer color customization, such as clothing, accessories, or home decor items.

👉You can check out our Demo product to see how it works

\n",[2113,2114,2115],[],{"_164":746,"_747":2120,"_490":749},{"_164":1910,"_747":2119,"_490":2109},{"_164":2116,"_747":2117,"_490":2118},"advanced-settings","

1. Tooltip

2. Help Text

This setting displays directly beneath the Text option, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.

3. Placeholder

This is the text displayed inside the Phone input field before the customer enters their number. It acts as a prompt or example, such as \"(123) 456-7890\" or \"Enter your phone number.\"

4. Class Name

This setting allows you to assign a custom CSS class to the Phone field. This enables you to apply specific styling or behavior to the field based on your design needs.

5. Price display type

Decide whether to show or hide the additional price on the slider interface.

\n","Advanced settings","

1. Option Name

This is the internal name for the Phone option within the app’s settings. It helps you manage and organize the option but does not appear on the storefront product page.

2. Label on Product

This is the text that appears above the Phone input field on the product page. It provides context or instructions for the customer, such as \"Enter your contact number\" or \"Phone number for delivery.\"

3. Label on Cart

This is the text that appears on the Cart summary screen, Checkout, and Order detail page, next to the phone number entered by the customer. It ensures the customer’s phone number is clearly displayed with their order details, such as \"Phone: +1 234-567-890.\"

4. Required Field

This setting ensures that the customer must enter a phone number before proceeding with their purchase. If enabled, the Phone field becomes mandatory.

5. Hide \"Label on Product\"

This option allows you to hide the label that typically appears above the Phone input field on the product page, streamlining the interface if the label is unnecessary.

6. Add-On Product

This feature allows you to apply an additional charge based on the phone number provided. While not commonly used for phone numbers, it could apply if a premium service requires a phone contact.

7. Select Default Country

This setting allows you to set a default country for the phone number input, automatically providing the appropriate country code. Customers can still change the country code if needed, but this simplifies the process for the majority of users.

8. Conditional Logic

This feature allows you to set rules that determine when the Phone field should be shown or hidden based on other customer selections. For example, the Phone option might only appear if the customer selects a delivery service that requires a phone contact.

9. One time charge

\n
How to set up Conditional logic for your options
\n

\n","

The Phone option type allows customers to enter a phone number as part of their product selection or configuration. This option is especially useful for products or services that require contact information, such as appointments, deliveries, or customer support.

👉You can check out our Demo product to see how it works

\n",[2123,2124,2125],[],{"_164":746,"_747":2128,"_490":749},{"_164":1910,"_747":2127,"_490":2109},{"_164":1907,"_747":2126,"_490":2107},"

1. Tooltip

2. Help Text

This setting displays directly beneath the Text option, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.

3. Placeholder

This is the text displayed inside the Email input field before the customer enters their email address. It acts as a prompt or example, such as \"yourname@example.com\" or \"Enter your email address here.\"

4. Class Name

This setting allows you to assign a custom CSS class to the Email field. This enables you to apply specific styling or behavior to the field based on your design needs.

5. Price display type

Decide whether to show or hide the additional price on the slider interface.

\n","

1. Option Name

This is the internal name for the Email option within the app’s settings. It helps you manage and organize the option but does not appear on the storefront product page.

2. Label on Product

This is the text that appears above the Email input field on the product page. It provides context or instructions for the customer, such as \"Enter your email address for digital delivery\" or \"Provide your contact email.\"

3. Label on Cart

This is the text that appears on the Cart summary screen, Checkout, and Order detail page, next to the email address entered by the customer. It ensures the customer’s email is clearly displayed with their order details, such as \"Email: customer@example.com.\"

4. Required Field

This setting ensures that the customer must enter an email address before proceeding with their purchase. If enabled, the Email field becomes mandatory.

5. Hide \"Label on Product\"

This option allows you to hide the label that typically appears above the Email input field on the product page. This can be useful if the field’s purpose is self-explanatory and the label is not needed.

6. Add-On Product

This feature allows you to apply an additional charge based on the email address provided. For instance, if the email is required for a premium service or personalized communication, an extra fee could be added. However, this is less common for email inputs.

7. Conditional Logic

This feature allows you to set rules that determine when the Email field should be shown or hidden based on other customer selections. For example, the Email option might only appear if the customer selects a specific product customization or service.

8. One time charge

\n
How to set up Conditional logic for your options
\n

\n","

The Email option type allows customers to enter an email address as part of their product selection or configuration. This is useful for products or services that require customer contact details, like personalized products, digital downloads, or appointment bookings.

👉You can check out our Demo product to see how it works

\n",[2131,2132,2133],[],{"_164":746,"_747":2136,"_490":749},{"_164":1910,"_747":2135,"_490":2109},{"_164":1907,"_747":2134,"_490":2107},"

1. Tooltip

2. Help Text

This setting displays directly beneath the Text option, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.

3. Placeholder

This is the text displayed inside the Datetime picker field before the customer makes a selection. It serves as a prompt, such as \"Select a date\" or \"Choose a time.\"

4. Class Name

This setting allows you to assign a custom CSS class to the Datetime field, enabling you to apply specific styling or behavior according to your design requirements.

5. Price display type

Decide whether to show or hide the additional price on the slider interface.

\n","

1. Option Name

This is the internal name for the Datetime option within the app’s settings. It helps you manage and identify the option but does not appear on the storefront product page.

2. Label on Product

This is the text that appears above the Datetime picker on the product page of your storefront. It provides context or instructions for the customer, such as \"Select your delivery date\" or \"Choose an appointment time.\"

3. Label on Cart

This is the text that appears on the Cart summary screen, Checkout, and Order detail page, next to the date and time selected by the customer. It helps display the specific datetime chosen by the customer, such as \"Delivery Date: August 25, 2024, 10:00 AM.\"

4. Required Field

This setting determines whether the Datetime field must be completed by the customer before they can proceed with their purchase. Enabling this ensures that a date and time are selected.

5. Hide \"Label on Product\"

This option allows you to hide the label that typically appears above the Datetime picker on the product page. This can be used to streamline the interface if the label is not necessary for customer understanding.

6. Min/Max Date

These settings define the range of dates customers can select. Each includes three options:

Today: Restricts the date selection to today’s date.
Designated Date: Allows you to set a specific start or end date that customers can choose.
Fixed Number of Days: Enables you to set a dynamic range by specifying a number of days relative to today. For example, setting a Min Date to \"3 days from today\" ensures that customers cannot select a date earlier than three days from the current date.

7. Date Format

This setting controls how the date is displayed in the Datetime picker and on various screens. Formats like \"MM/DD/YYYY,\" \"DD/MM/YYYY,\" or \"YYYY-MM-DD\" can be chosen to match regional preferences.

8. Add-On Product

This feature allows you to apply an additional charge based on whether or not the customer selected the date or time.

For example, if the customer chooses a specific time or date for delivery instead of using the normal delivery service, an extra fee can be automatically added to the product’s price.

9. Conditional Logic

This feature allows you to set rules for when the Datetime field should be shown or hidden based on other customer selections.

For instance, the Datetime option might only appear if a customer selects a certain delivery option or service.

10. One time charge

\n
How to set up Conditional logic for your options
\n

\n","

The Datetime option type allows customers to select a specific date and time. This is particularly useful for products or services that require scheduling, such as booking appointments, selecting delivery dates, or reserving a product for a specific time.

👉You can check out our Demo product to see how it works

\n",[2139,2140,2141],[],{"_164":746,"_747":2144,"_490":749},{"_164":1910,"_747":2143,"_490":2109},{"_164":1907,"_747":2142,"_490":2107},"

1. Default Value

The pre-filled numerical value that appears in the Number field by default. It can be used to suggest a typical value or set an initial quantity, which customers can modify.

2. Placeholder Text

The text displayed within the Number field before the customer enters any value. It can provide an example or prompt, such as \"Enter quantity\" or \"Specify measurement.\"

3. Price display type

Decide whether to show or hide the additional price on the slider interface.

4. Class Name

Allows you to assign a custom CSS class to the Number field. This helps apply specific styles or behaviors to the field based on your design preferences.

5. Tooltip

6. Help Text

This setting displays directly beneath the Text option, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.

\n","

1. Option Name

This is the internal label used to identify the Number option within the app’s settings. It helps you manage and organize the option but does not appear on the storefront product page.

2. Label on Product

This is the text displayed above the Number input field on the product page of your storefront. It provides customers with instructions or context for what they should enter, such as \"Enter quantity\" or \"Specify amount.\"

3. Label on Cart

4. Required Field

Determines whether the Number field must be filled out by the customer before they can complete their purchase. If enabled, the customer is required to provide a numerical input.

5. Hide \"Label on Product\"

Allows you to hide the label text that usually appears above the Number field on the product page. This can be used to simplify the interface if the label is not necessary.

6. Min/Max Value

These settings define the minimum and maximum numerical values that can be entered into the Number field. For example, you can set a minimum value of 1 and a maximum value of 100 to ensure inputs are within a specific range.

7. Add-On Product

8. Conditional Logic

This feature enables you to set rules for when the Number field should be shown or hidden based on other customer selections. For example, you might configure the Number field to appear only if the customer selects a specific option or if certain criteria are met.

9. One time charge

\n
How to set up Conditional logic for your options
\n

\n","

The Number option type allows customers to enter a numerical value. This is useful for inputs that require quantities, measurements, or any other numerical data. The field only accepts numbers and can include settings for minimum and maximum values to ensure that inputs fall within a specified range.

👉You can check out our Demo product to see how it works

\n",[2147,2148,2149],[],{"_164":746,"_747":2152,"_490":749},{"_164":1910,"_747":2151,"_490":2109},{"_164":1907,"_747":2150,"_490":2107},"

1. Input Type

This setting specifies the format of the text input, such as plain text or text with numbers. It controls what kind of content can be entered into the Multiline Text field.

2. Default Value

This is the pre-filled text that appears in the Multiline Text field by default. It can be used to provide an example or instruction for customers, which they can then modify or replace.

3. Text Transform

This setting controls how the text entered by customers is displayed, such as converting it to uppercase, lowercase, or capitalizing the first letter of each word. It ensures consistent text formatting according to your preferences.

4. Tooltip

5. Help Text

This setting displays directly beneath the Text option, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.

6. Placeholder Text

This is the greyed-out text that appears within the Multiline Text field before the customer enters any information. It offers a hint or example of what should be entered, such as \"Enter your special instructions here.\"

7. Class Name

This setting allows you to assign a custom CSS class to the Multiline Text field. It helps in applying specific styles or behaviors to the field based on your design requirements.

8. Price display type

Decide whether to show or hide the additional price on the slider interface.

\n","

1. Option Name:

This is the internal label used to identify the Multiline Text option within the app's settings. It helps you organize and manage the option but does not appear on the storefront product page.

2. Label on Product

This is the text displayed above the Multiline Text input field on the product page. It provides a prompt or description to guide customers on what type of information they should enter, such as \"Enter your message\" or \"Provide additional details.\"

3. Label on Cart

This is the text that appears on the Cart summary screen, Checkout, and Order detail page next to the customer's entered text. It helps identify and display the specific details or comments provided by the customer.

4. Required Field

This setting specifies whether the Multiline Text field must be filled out by the customer before they can proceed with their purchase. If enabled, the customer must enter text; if disabled, the field can be left empty.

5. Hide \"Label on Product\"

This option allows you to hide the label that typically appears above the Multiline Text field on the product page. This can be useful for simplifying the interface or if the label is not necessary for the customer's understanding.

6. Min/Max Character

These settings define the minimum and maximum number of characters that customers can enter into the Multiline Text field. For example, you can set a minimum of 10 characters and a maximum of 500 characters to ensure the input meets specific criteria.

7. Add-On Product:

For the Multiline Text option type, the Add-On Product feature allows you to apply an additional charge based on the content entered in the text field. When a customer submits text, a predefined extra charge can be automatically applied to the product's price.

8. Conditional Logic

This allows you to set rules that determine when the Multiline Text field should be shown or hidden based on other selections made by the customer. For example, you could configure the text field to appear only if the customer selects a specific product customization option.

9. One time charge

\n
How to set up Conditional logic for your options
\n

\n","

The Multiline Text option type allows customers to enter longer pieces of text in a field that supports multiple lines. This is ideal for collecting detailed information or longer inputs, such as special instructions, comments, or descriptions. The text field expands vertically to accommodate the length of the input, providing a larger area for customers to type their responses.

👉You can check out our Demo product to see how it works

\n",[2155,2156,2157],[],{"_164":746,"_747":2160,"_490":749},{"_164":1910,"_747":2159,"_490":2109},{"_164":1907,"_747":2158,"_490":2107},"

1. Input type

This setting specifies the format of the text input field, such as whether it should accept plain text or numbers. It helps control the type of content customers can enter.

2. Default value

This is the pre-filled text that appears in the Single Line Text field by default. It can be used to provide an example or prompt for customers, which they can then edit or replace.

3. Text transform

This setting controls how the text entered by customers is displayed, such as converting it to uppercase, lowercase, or capitalizing the first letter of each word. It ensures the text appears consistently according to your preferences.

4. Tooltip

5. Help Text

This setting displays directly beneath the Text option, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.

6. Placeholder text

This is the greyed-out text that appears within the Single Line Text field before the customer enters any information. It provides an example or hint about what should be entered, such as \"Enter your name.\"

7. Class name

This setting allows you to assign a custom CSS class to the Single Line Text field. It helps in applying specific styles or behaviors to the text field based on your design requirements.

8. Price display type

Decide whether to show or hide the additional price on the slider interface.

\n","

1. Option name

This is the internal label used to identify the Single Line Text option within the app's settings. It helps organize and manage options but does not appear on the storefront product page.

2. Label on product

This is the text displayed above the Single Line Text input field on the product page of your storefront. It provides a prompt or description to guide customers on what to enter, such as \"Enter Your Name\" or \"Add a Custom Message.\"

3. Label on cart

This is the text that appears on the Cart summary screen, Checkout, and Order detail page, next to the customer’s input. It shows the specific text the customer has entered, helping to review or confirm their customization.

4. Required field

This setting determines whether the text field must be filled out by the customer before they can proceed with their purchase. If enabled, customers will be required to enter text; otherwise, they can leave it blank.

5. Hide \"Label on product\"

This setting allows you to hide the label text that normally appears above the Single Line Text field on the product page. It’s useful if you want to keep the interface clean or if the label is not necessary for the customer to see.

6. Min/ Max character

These settings define the minimum and maximum number of characters that customers can enter into the Single Line Text field.

For example, you can set a minimum of 5 characters and a maximum of 50 characters to ensure that entries meet specific requirements.

7. Add-on product

This allows you apply an extra charge when customers enter text into the field. You can set it up so that any text input by the customer automatically adds a specific amount to the product’s price. This feature makes it easy to charge for custom text entries, like personalization or custom messages.

8. Conditional logic

This allows you to set rules that determine when the Single Line Text field should be shown or hidden based on other options selected by the customer. For example, you could configure the text field to appear only if a customer selects a certain product customization option.

9. One time charge

\n
How to set up Conditional logic for your options
\n

\n","

The Single Line Text option type allows customers to enter a brief, single-line text input. This option type is ideal for collecting short, personalized information from customers, such as a name, initials, or a short message. It provides a simple text field where users can type their input, and is commonly used for customization options or additional details that don't require multiple lines of text.

👉You can check out our Demo product to see how it works

\n",[2163],[],{"_164":746,"_747":2164,"_490":749},"

An Option Type is a format or method that allows customers to choose how they want to customize a product in your store. For example, if you sell a t-shirt, the option types might include a dropdown menu for selecting size, checkboxes for choosing colors, or a text field for adding a personalized message.

Product Options Variant Option offers 32 different Option Types, giving you a wide range of ways to present these choices to your customers. Whether you need simple dropdowns, radio buttons, or more complex options like file uploads, our app has the tools to help you create a seamless and customized shopping experience.

\n",[2168,2169,2170],"Aug 3, 2026",[],{"_164":746,"_747":2175,"_490":749},{"_164":1910,"_747":2173,"_490":2174},{"_164":1907,"_747":2171,"_490":2172}," $\"\"$

1. Tooltip

Provide additional information about each option by adding tooltips. When customers hover over an option, the tooltip will display, offering further details.

2. Help Text

Display help text below the Font selector to offer further explanations or instructions, helping customers make informed selections.

3. Class Name

For advanced customization, add custom CSS class names to the Font selector. This allows you to style it according to your brand’s design standards, ensuring a cohesive look across your product page.

4. Price display type

Decide whether to show or hide the additional price on the slider interface.

","Advanced Option Settings:"," $\"\"$

1. Option Name

This is the internal name for the Font option within the app’s settings. It helps you manage and identify the option but does not appear on the storefront product page.

2. Label on Product

This is the text that appears above the Font selector on the product page of your storefront. It provides context or instructions for the customer, such as \"Select your font\"

3. Label on Cart

This label appears in the shopping cart, order details, invoices, packing slips, order confirmation emails, and other order-related documents, showing the selected options clearly.

4. Required Field

Make it mandatory for customers to select at least one font from the Font list before adding the product to their cart. This ensures that all necessary choices are made.

5. Add-on product

When enabled, this setting adds an additional charge to the product if the font is selected. It’s useful for optional features or upgrades that come at an extra cost.

6. One time charge

7. Hide \"Label on Product\"

Option to hide the label next to the combo box on the product page, providing a cleaner and more streamlined appearance.

8. Select from google fonts

A wide range of Google Fonts is available for selection, offering customers numerous style choices to personalize their text. To explore more font options in the preview, customers can search by the font name, allowing them to quickly find and apply the font.

9. Select from your fonts

Click on the 'Upload your fonts here' button in the app settings to upload your own fonts.

10. Number of fonts display

Choose how many fonts you want to show when the customer click on select font

11. Select options for preview

This feature allows customers to test and visualize how the customizations will appear on the live store. Currently, it only supports text previews for \"Single line text\" and \"Multi-line text\" options.

12. Conditional Logic

This setting allows you to display the font option only when certain conditions are met. It’s beneficial for creating a dynamic shopping experience, where certain options appear based on previous selections.

How to set up Conditional logic for your options

","Basic Option Settings:","

The Font option type allows customers to personalize the appearance of text on their product options by choosing from a variety of fonts. With a quick preview feature, customers can see how each font will look before making a selection.

👉You can check out our Demo product to see how it works

",[2178,2179,2180,2181,2182,2183,2184,2185],[],{"_164":746,"_747":2205,"_490":749},{"_164":2202,"_747":2203,"_490":2204},{"_164":2199,"_747":2200,"_490":2201},{"_164":2196,"_747":2197,"_490":2198},{"_164":2193,"_747":2194,"_490":2195},{"_164":2190,"_747":2191,"_490":2192},{"_164":2187,"_747":2188,"_490":2189},{"_164":1502,"_747":2186,"_490":1504},"

Single vs multiple selection controls whether customers can select one or many values.
Static elements do not collect customer input.
Some features (e.g. inventory tracking, price add-ons, validation rules) apply only to specific option types.

If you need help choosing the right option type for your product, feel free to contact our support team.

\n","6-static-layout-elements","

Used to structure content and improve UI clarity.

Option Group – Group related options
Step by step – Multi-step option flow
Space – Add spacing between elements
Paragraph – Display text content
HTML – Custom HTML content
Heading – Section title
Divider – Horizontal separator
Pop-up – Display extra content in a modal
Size chart – Show size chart reference

\n","6. Static & Layout Elements","5-toggle-logic-selections","

Used for enabling, disabling, or storing background values.

Switch – On / Off toggle
Hidden field – Include data that isn’t visible to customers

\n","5. Toggle & Logic Selections","4-quantity-measurement-selections","

Used for size, amount, or dimensional input.

Quantity – Adjustable quantity selector
Range slider – Select a value within a defined range
Dimension – Formula input

\n","4. Quantity & Measurement Selections","3-file-selection","

Used when customers need to upload their own files.

File upload – Upload images, PDFs, or documents (e.g. Logo upload)

\n","3. File Selection","2-selection-options","

Used when customers need to choose values, upload files, or input selectable quantities and toggles.

A. Visual & Choice Selections

Used to choose from predefined values such as images, colors, or labeled options.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Single selection (select only one)	Multiple selection (select multiple)
Color swatch	Color swatch
Image swatch	Image swatch
Radio button	Checkboxes
Button	Button
Drop-down menu	Drop-down menu
Color Drop-down Menu	Color Drop-down Menu
Image Drop-down Menu	Image Drop-down Menu
	Combo box

\n","2. Selection Options","1-text-basic-input-options","

Used to collect written or structured input from customers.

Single-line text – Short text input (e.g. Name, Engraving text)
Multi-line text – Longer messages or notes (e.g. Custom message, Special requests)
Number – Numeric input only (e.g. Age, Quantity, Measurements)
Datetime – Date and time picker (e.g. Delivery date)
Email – Email format validation (e.g. Contact email)
Phone – Phone number format (e.g. Contact number)
Font – Font selector for text-based customization
Color picker - Color selector for customization

\n","1. Text & Basic Input Options","

This guide provides an overview of all available option types in Aris Product Options, grouped by purpose and behavior. These option types help you collect input, display information, and create flexible product customizations.

\n
For a visual reference, you can explore the option type library here.
\n

\n
The “Free +1” tag next to an option type means that we offer a one-time free trial of option types from our paid plans, so you can try them out and see how they work before deciding to upgrade.
\n

\n","cmrydxsy10001cg7kkpkj1s7y","get-started",[2209,2210,2211,2212,2213,2214,2215,2216,2217,2218,2219,2220,2221,2222,2223,2224,2225,2226,2227,2228,2229],{"_164":652,"_166":653,"_168":654,"_170":655,"_734":2314,"_736":1539,"_738":767,"_740":741,"_742":2315,"_744":-5},{"_164":730,"_166":731,"_168":732,"_170":733,"_734":2310,"_736":737,"_738":739,"_740":741,"_742":2311,"_744":-5},{"_164":726,"_166":727,"_168":728,"_170":729,"_734":2306,"_736":737,"_738":739,"_740":741,"_742":2307,"_744":731},{"_164":722,"_166":723,"_168":724,"_170":725,"_734":2302,"_736":737,"_738":739,"_740":741,"_742":2303,"_744":731},{"_164":718,"_166":719,"_168":720,"_170":721,"_734":2298,"_736":737,"_738":739,"_740":741,"_742":2299,"_744":731},{"_164":714,"_166":715,"_168":716,"_170":717,"_734":2294,"_736":737,"_738":739,"_740":741,"_742":2295,"_744":731},{"_164":711,"_166":712,"_168":713,"_170":599,"_734":2290,"_736":737,"_738":739,"_740":741,"_742":2291,"_744":731},{"_164":707,"_166":708,"_168":709,"_170":710,"_734":2286,"_736":737,"_738":739,"_740":741,"_742":2287,"_744":731},{"_164":703,"_166":704,"_168":705,"_170":706,"_734":2282,"_736":737,"_738":739,"_740":741,"_742":2283,"_744":731},{"_164":699,"_166":700,"_168":701,"_170":702,"_734":2278,"_736":737,"_738":739,"_740":741,"_742":2279,"_744":731},{"_164":695,"_166":696,"_168":697,"_170":698,"_734":2274,"_736":737,"_738":739,"_740":741,"_742":2275,"_744":731},{"_164":691,"_166":692,"_168":693,"_170":694,"_734":2270,"_736":737,"_738":739,"_740":741,"_742":2271,"_744":731},{"_164":687,"_166":688,"_168":689,"_170":690,"_734":2266,"_736":737,"_738":739,"_740":741,"_742":2267,"_744":731},{"_164":683,"_166":684,"_168":685,"_170":686,"_734":2262,"_736":737,"_738":739,"_740":741,"_742":2263,"_744":731},{"_164":679,"_166":680,"_168":681,"_170":682,"_734":2258,"_736":737,"_738":739,"_740":741,"_742":2259,"_744":731},{"_164":675,"_166":676,"_168":677,"_170":678,"_734":2254,"_736":737,"_738":739,"_740":741,"_742":2255,"_744":731},{"_164":671,"_166":672,"_168":673,"_170":674,"_734":2250,"_736":737,"_738":739,"_740":741,"_742":2251,"_744":731},{"_164":667,"_166":668,"_168":669,"_170":670,"_734":2246,"_736":737,"_738":739,"_740":741,"_742":2247,"_744":731},{"_164":663,"_166":664,"_168":665,"_170":666,"_734":2242,"_736":737,"_738":739,"_740":741,"_742":2243,"_744":731},{"_164":659,"_166":660,"_168":661,"_170":662,"_734":2238,"_736":737,"_738":739,"_740":741,"_742":2239,"_744":731},{"_164":656,"_166":657,"_168":203,"_170":658,"_734":2230,"_736":737,"_738":739,"_740":741,"_742":2231,"_744":-5},[2232,2233],[],{"_164":746,"_747":2237,"_490":749},{"_164":2234,"_747":2235,"_490":2236},"instruction","

1. Choose Themes

Go to your Shopify Store Admin, click on Online Store -> Themes then find the theme you want to use the app on. On the theme you chose, click on Customize

$\"\"$

\n
You can also go to the activation page quickly with one click using the \"Activate app\" button on the app \"Aris option\" tab.
\n $\"\"$

2. Activate the app in your theme

Click App embeds -> Add ArisPlus Options -> Save.

After that, you're all set and can start using our app! 🎉

Need help? Let us know via in-app live chat or email: help@arisify.io :star_struck:

\n","Instruction","

\n
The app needs to be activated on the theme you want to add product options. Otherwise, your setting will not display on the Product page.
\n

\n",[2240],[],{"_164":746,"_747":2241,"_490":749},"

The Option Widget is a container that holds and displays all the custom options you create for your products. It controls the positioning of these options on the storefront, allowing you to choose where and how they appear to customers.

Using the app settings, you can customize the display location of the option widget to ensure it fits seamlessly into your product pages and enhances the shopping experience.

",[2244],[],{"_164":746,"_747":2245,"_490":749},"

Placeholder Text is a brief, descriptive text that appears within a field or input box to provide users with an example or hint about what information should be entered.

It serves as a temporary guide to indicate the expected format or content, and disappears once the user starts typing. Placeholder text helps users understand the purpose of the field and can improve the clarity and usability of forms or input areas.

",[2248],[],{"_164":746,"_747":2249,"_490":749},"

Helptext provides additional information or guidance to users about specific options or fields within your app.

The Helptext is displayed directly beneath the option or field, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.

",[2252],[],{"_164":746,"_747":2253,"_490":749},"

Tooltip provides additional information or guidance to users about specific options or fields within your app.

The Tooltip appears as a small pop-up when users hover over or click on an information icon. It provides brief, contextual information without cluttering the interface.

Below: This form of Helptext is displayed directly beneath the option or field, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.

Both forms help users understand the functionality and requirements of options, improving their overall experience with the app.

\n",[2256],[],{"_164":746,"_747":2257,"_490":749},"

The Option URL feature allows you to link specific options to external URLs, enabling customers to seamlessly transition between different sites or pages for additional information.

This feature is useful for guiding customers to related products with common attributes (like design or print) but differing in other aspects (such as materials or colors). It also allows you to direct customers to external resources or detailed product pages, enhancing their shopping experience by providing more comprehensive information or showcasing related options.

\n
How to set up Option URL for your options
\n

",[2260],[],{"_164":746,"_747":2261,"_490":749},"

The Conditional Logic feature allows you to set rules that determine when certain options or fields are displayed based on a customer's previous selections. This helps create a more personalized and relevant shopping experience by showing or hiding options based on the choices the customer makes.

\n
How to set up Conditional logic for your options
\n

",[2264],[],{"_164":746,"_747":2265,"_490":749},"

\"Quantity for Option Value\" allows you to enable or disable quantity selection for specific option values. It's particularly useful when you want customers to specify how many units of a particular option they would like to purchase.

There are two main controls available within this feature:

1. Min/Max Quantity

Min Quantity: The lowest number of an option value that a customer can select.
Max Quantity: The highest number of an option value that a customer can select.

This is ideal when you want to enforce a required minimum or cap the number of an option value that can be chosen.

2. Min/Max Total Quantity

These settings are useful when the option includes multiple option values or is part of a group where you want to control the total quantity selected across all values.

",[2268],[],{"_164":746,"_747":2269,"_490":749},"

The Bundle Variant feature enables you to link a pre-existing product to an option value, allowing you to offer a bundled product option. When this feature is used, selecting a specific option value will automatically include an additional product in the customer's purchase.

This feature simplifies creating product bundles by ensuring that the additional item is included in the purchase seamlessly and cannot be removed independently of the main product.

\n
How to set up Bundle variant for your options
\n

",[2272],[],{"_164":746,"_747":2273,"_490":749},"

The Add-on product feature allows you to automatically apply an additional cost based on the customer's selection of an option value. When this feature is enabled, selecting a specific option value generates an additional charge that increases the product's total price.

This is useful for options that come with a price increase, such as premium materials or custom features. The Add Charge ensures that the additional cost is applied seamlessly during the checkout process, reflecting the total price according to the customer's choices.

\n
How to set up Add-on product (Add charge) for your options
\n

",[2276],[],{"_164":746,"_747":2277,"_490":749},"

An Option Value is the specific choice or input available within an option type for a product. For example, if you have an option type for \"Color,\" the option values might be \"Red,\" \"Blue,\" and \"Green.\" Option values represent the actual selections customers can make when customizing a product. They help define the available choices for each option type and are crucial for accurately capturing and processing customer preferences.

",[2280],[],{"_164":746,"_747":2281,"_490":749},"

The Label on Cart is the text that appears next to the customer's selected or inputted options on the Cart summary screen, Checkout, and Order detail page. It identifies the specific option and its value, helping customers review their choices before completing the purchase. Each Label on Cart must be unique for every option to ensure clarity and avoid confusion during the checkout process.

",[2284],[],{"_164":746,"_747":2285,"_490":749},"

The Label on Product is the title or heading that appears above an option field on your storefront product page. It serves as the text that customers see, guiding them to understand what the option is for, such as \"Choose Size,\" \"Select Color,\" or \"Add a Personal Message.\" This label helps clearly communicate what the option is about, making it easier for customers to make their selections.

",[2288],[],{"_164":746,"_747":2289,"_490":749},"

An Option Name is the internal label used to identify and organize different options within our app. This name is visible only during the setup process and will not be displayed on your storefront product page. The Option Name helps you keep your options organized and easily manageable as you configure various settings in the app.

",[2292],[],{"_164":746,"_747":2293,"_490":749},"

Aris product options offers 32 different Option Types, giving you a wide range of ways to present these choices to your customers. Whether you need simple dropdowns, radio buttons, or more complex options like file uploads, our app has the tools to help you create a seamless and customized shopping experience.

Explore various option types available on our demo store by visiting this link.

\n",[2296],[],{"_164":746,"_747":2297,"_490":749},"

Our app provides pre-designed option set templates that include options, option values, conditional logic, and other configurations. These templates are crafted based on thorough research to meet the unique requirements of various types of online stores.

These templates can help you save a lot of time and effort, especially if you’re not highly technical. We are excited to share with you these templates and continuously work on enhancing their design to better align with the needs of each store type.

\n
How to create an option set for your product from a template
\n

",[2300],[],{"_164":746,"_747":2301,"_490":749},"

An Option Template in our app is a pre-defined option with option values and configurations that you can create and reuse across multiple Option Sets. Instead of setting up each option individually, you can apply the Option Template to several Option Sets at once, ensuring consistency and saving time. This feature is particularly useful for stores that need to apply the same options to multiple products or collections.

\n
How to create an Option template and use it in your Option Set.
\n

After selecting \"Template,\" you'll access a tab featuring both Aris's predefined templates and your personal templates.

To save an option set for future use, click the \"Save as Template\" button.

",[2304],[],{"_164":746,"_747":2305,"_490":749},"

An option set is a group of custom options that you want to add to your product(s).

For example, if you sell Hoodies, your option set might include size, color, print style, and fabric. If you sell cookies, your option set might include size, flavor, delivery date, and time.

Option sets allow your customers to see all the choices and variations available for a specific product.

",[2308],[],{"_164":746,"_747":2309,"_490":749},"

Shopify allows each product to have up to 3 options and no more than 100 variants. If you want to go beyond this limit, you can use a 3rd-party app like Product Options Variant Option.

Our app brings you the ability to create unlimited custom options and variants for your products, satisfying all your needs for strategic sales and personalized aesthetics.

You add variants to a product that comes in more than one option, such as size or color. Each combination of options for a product is a variant for that product.

For example, suppose that you sell T-shirts with two options: size and color. The size option has three values: small, medium, and large. The color option has two values: blue and green. One specific variant from these options is a small/ blue T-shirt.

You can see a list of variants for a product on its product details page.

Further details can be found in this Shopify document about Variant

",[2312],[],{"_164":746,"_747":2313,"_490":749},"

\n",[2316,2317],[],{"_164":2321,"_747":2322,"_490":2323},{"_164":2318,"_747":2319,"_490":2320},"step-2-create-an-option-set-and-apply-it-to-products","

Now that the app is activated in your theme, you can start building options for your products. An Option Set is a group of option fields (like colors, sizes, text inputs) that you assign to products.

How to create an Option Set:

In the app go to the Aris Option tab
Click Create Option Set

$\"\"$

Enter a name for your Option Set

$\"\"$

Click Add Option and choose the option types you need

Select from swatches, dropdowns, text, date/time, file uploads, etc.

$\"\"$ $\"\"$

Fill in the option details and settings

$\"\"$

After creating options, choose which products the Option Set should apply to

You can show the set on all products, specific products (manual), or products matching conditions (automated).

$\"\"$

Click Save

If you have already activated the app in your theme, you should now see your options on the product page.

More about Create Aris option set

","Step 2 — Create an Option Set and apply it to products","step-1-activate-the-app-in-your-shopify-theme","

Before any options can appear on your storefront, you must activate the Aris app embed in your theme. This links the app’s option display code with your live store theme; without it, nothing will show on product pages.

How to activate:

In Shopify Admin go to Online Store → Themes
Find the theme you use for your store and click Edit theme

$\"\"$

In the theme editor, open App embeds
Enable Add ArisPlus Options
Click Save

$\"\"$

Once this is done, the app will be ready to display product options on your storefront pages.

Tip: You only need to activate the app once per theme. After activation, you can skip this step next time.

More about Activate app

","Step 1 — Activate the app in your Shopify theme","footerLinks",[2326,2327,2328,2329,2330,2331,2332],{"_164":2372,"_2334":2362,"_752":2373,"_2337":2374,"_2339":2340,"_2341":2375,"_736":2376},{"_164":2367,"_2334":2362,"_752":2368,"_2337":2369,"_2339":2353,"_2341":2370,"_736":2371},{"_164":2361,"_2334":2362,"_752":1066,"_2337":2363,"_2339":2364,"_2341":2365,"_736":2366},{"_164":2356,"_2334":2350,"_752":2357,"_2337":2358,"_2339":2340,"_2341":2359,"_736":2360},{"_164":2349,"_2334":2350,"_752":2351,"_2337":2352,"_2339":2353,"_2341":2354,"_736":2355},{"_164":2344,"_2334":2335,"_752":2345,"_2337":2346,"_2339":2340,"_2341":2347,"_736":2348},{"_164":2333,"_2334":2335,"_752":2336,"_2337":2338,"_2339":2340,"_2341":2342,"_736":2343},"cmrsyoq7i009e0jrxtgxrkecq","column","resources","Privacy Policy","href","https://www.arisify.io/privacy-policy","order",0,"createdAt",["D",1784536046766],["D",1784536046766],"cmrn95auf0002ro7kxprliqi4","User Guide","/resources/help-center",["D",1784190819111],["D",1784190819111],"cmrn95asw0001ro7kusq9uwuy","product","Pricing","/pricing",1,["D",1784190819056],["D",1784190819056],"cmrn95are0000ro7kkekyz9rn","Features","/#features",["D",1784190819002],["D",1784190819002],"cmrn95aza0005ro7ke4x07xth","company","/contact",2,["D",1784190819286],["D",1784190819286],"cmrn95axn0004ro7k8tt7794k","Partners","/partners",["D",1784190819227],["D",1784190819227],"cmrn95avx0003ro7k0w31qen1","About us","/about",["D",1784190819165],["D",1784190819165],"user","admin","appUrl","https://demo.arisify.io","colors",{"_2383":2384,"_2385":2386,"_2387":2388,"_2389":2390,"_2391":2392,"_2393":2394,"_2395":2396,"_2397":2398,"_2399":2400,"_2401":2402,"_2403":2404,"_2405":2406,"_2407":2408,"_2409":2410,"_2411":2412,"_2413":2414,"_2415":2416,"_2417":2418,"_2419":2420,"_2421":2422,"_2423":2424,"_2425":2426,"_2427":2428,"_2429":2430,"_2431":2432,"_2433":2434,"_2435":2436,"_2437":2438},"primary-50","#fff1f1","primary-100","#ffe0e0","primary-200","#ffc5c5","primary-300","#ff9d9d","primary-400","#ff6464","primary-500","#ff2d2d","primary-600","#ed1515","primary-700","#c80d0d","primary-800","#a50f0f","primary-900","#881414","primary-950","#d40000","neutral-50","#f8f8f8","neutral-100","#f0f0f0","neutral-200","#e4e4e4","neutral-300","#d1d1d1","neutral-400","#a4a4a4","neutral-500","#737373","neutral-600","#525252","neutral-700","#3d3d3d","neutral-800","#262626","neutral-900","#171717","neutral-950","#0a0a0a","brand-green","#f5333f","brand-dark","#e11d2a","brand-deep","#b3141f","brand-mint","#fff6f5","ink","#161620","muted","#6b7280"]

Condition Types Explained

1. Go to the Aris Option page and select the option sets you want to export.

2. Choose the export range:

3. Select language and Click Export again to download the CSV file.

Import Translations

1. Navigate to the Aris Option page and select Import → Translation.

2. Choose Add file and then Select your CSV file containing the updated translations.

3. Click Open to upload the file, then click Upload to import it into option sets.

CSV Translation Fields

Where to find this setting

2.1 Select the translate button

2.2 Pick the Target Language

2.3 Enter Translations

2.5 Save Your Translations

2.6 Double Check Your Store

Step 1: Select Option Sets

Step 2: Bulk Edit Popup

Customer Group Filter

Country Filter

Step 1:

Step 2:

Step 3:

Reposition Aris Options on the product page

Reposition Aris Options based on an HTML element

Reposition Aris options in EComposer Landing Page Builder

1. Edit add charge notification

2. Update add charge amount to product price

3. Edit Option in Cart

Notes

Step 1: Open the template editor

Step 2: Open “Items information”

Step 3: Enable “Show properties”

Step 4: Save and verify

Need help?

Step 1: Create a new export

Step 2: Add export fields

Step 3: Include Aris option data (Properties)

Step 4: Save the export setup

Step 5: Verify exported data

Step 6: Download the CSV file

Need help?

Boolean-like values stored as strings

IDs

Price

Group ID

Group and step parents

Swatch types

Input options

Choice options

Swatch options

Pricing, quantity, and configuration options

Content and layout options

Field descriptions

Important identifier mapping

Key fields

URL-related fields

Query parameters

Localization fields

Localization fallback behavior

Common translation keys in data

Settings data

Input

Query parameters

Sort order

data[] Option Set object

pagination object

Common error codes

API token rules

Token handling

API Host

Base URL

Swagger UI

GitBook expandable blocks

Version path

Step 1: Open Your Subscription Settings

Step 2: Switch to the FREE Plan

Will I be charged after downgrading from Paid plan to Free plan?

Step 1: Open the Subscription Settings

Step 2: Select Your New Plan

Step 3: Confirm Your Upgrade

Common translation keys in `data`

`data[]` Option Set object

`pagination` object

Conditional Logic

Overview#