This article is for Teeinblue Product Options app, not Teeinblue POD Product Personalizer.

To add and set up custom product options for your Shopify products, follow the instructions below:

Go to All products page, it shows a list of products in Shopify products.
Search for your product.
Click on the + Add options button to start adding custom options for that product.
It'll open the product editor.

Display settings

Choose Block to add to product page:

The app contains 2 components: Form & Gallery.



"Form & Gallery": the app will add a form (containing product options) under Variants, and will show the gallery from app to show real-time preview.
"Form only": the app will only add a form, and won't replace the theme's gallery.

Form style:

Choose the way form displays on the product page:
Direct form on page (no trigger button): Form shows directly on product page:



This option will replace the theme's gallery with the app's gallery (if enabled Gallery).

Expand/collapse form with trigger button: add a trigger button on product page, click on it will expand the form below it, click again to hide.



This option will replace the theme's gallery with the app's gallery (if enabled Gallery).

Open form in a popup (with trigger button): add a trigger button on product page, click on it will open form (and gallery) on popup.



Open form in a popup (replace ATC button): replace the theme's default Add-to-cart button with the app's trigger button. Customers will need to click "Personalize" then click "Add to cart" on personalize popup.

Add fields & Preview

Field types

Click on "+Add" button to add a field. You can choose between different field types.



Text: a single line text. You can add a static text or show a field for customers to change this text.
Paragraph: multi-line text. You can add a static paragraph or show a textarea field for customers to change.
Static image: add an image to the Gallery for demo/mockup purpose, this is not added to the form.
Image upload: add a field to let customers upload their photos. The uploaded photo can be previewed in Gallery.
Image swatches: show a group of images for customers to change between.
Color swatches: show a group of colors for customers to change.
Dropdown/Options: show a list of choices as dropdown lists or buttons for customers to select.
Toggle: show a toggle for customers to enable or disable an option.
Choices list: show a multi-choice list as checkboxes or radio for customers to select.

Preview

You can switch between 2 preview modes: Form & Gallery.

If you set "Form only" in Display settings, there'll be no Gallery preview.

Click on a field on the fields list, and you can move to change the field position on Gallery:

Edit field

Re-arrange:

You can drag and drop to re-arrange the field position.

General settings

Click on a field and you can find the field settings below it.



Label: change the label of the field (customers will see it)
Display on: (available when Gallery enabled) choose where the field is visible, only on form or on Gallery as well.
Font group: show a group of fonts (prepared in Fonts page) for customers to change
Color group: show a group of colors (prepared in Colors page) for customers to change
Required: turn on to mark a field as required
Additional charge: turn on to add an extra fee if customers personalize this field. Must choose "Flat rate" if you want to charge the extra price of each item in assets (images, colors, fonts...)
Tooltip: show a (?) button next to field label, hover on it will show an instruction text.

Conditional settings

Set a condition to only show this field when another field, or a variant, match a specific value.



You can add multiple conditions, only one of them matches is enough to show the field (OR condition).

Updated on: 27/07/2023