How to create option set:

Introduction

There are two ways to create a new option in the Tepo app: build from scratch or use a template. This guide provides a comprehensive step-by-step process for creating a new option set from scratch. Please refer to this guide if you prefer using a template.

Create a New Option Set from Scratch

Step 1. Go to Option set page:

From the app’s navigation menu, on the left-hand side of the screen, please select the Option Sets tab.

Click on the Create option set button, and then select the option labeled Create from scratchfrom the dropdown menu. This selection indicates that you wish to build a new option set without using a template.

You will be automatically redirected to the option set editor page. This page is the workspace where you will configure and manage your new option set.



The option set editor page is divided into two main sections for ease of use:

The Options List section is on the screen's left side. This allows you to manage all the options that will be included in your option set. You can add new options, edit existing ones, and remove no longer needed options.

The Preview Product Page section is on the screen's right side. This area provides a preview of how the added options will appear on your store's product page. This feature enables you to visualize the layout and make necessary adjustments before finalizing the option set.

Step 3. Add New Option Set

Within the Options List section, you will see a button labeled +Add new option. Click on this button to begin adding new options to your option set.

Upon clicking the +Add new option button, a dropdown menu will appear, displaying a variety of option types that you can add to your option set.

These option types include: Text option (Single-line & Multi-line text); Photo upload; File Upload; Toggle; Date & Time Picker; Font Picker; Color Picker; Image swatch; Color swatch; Checkbox; Radio button; Image Dropdown; Dropdown list; Inline button; Combobox; Heading; Description; Divider; Option Group; Cross-product-link; HTML.

Step 4. After choosing an option type, you'll see all general settings for this option.

(These settings will be a little different between each option type)

Label - required field

This title will be displayed at: Cart page, checkout, order details page. Please do not use special characters ([ ] \ / " ' < > &) in Label.

Display name

This title will be displayed on the product page.

Option values

For option types of Image/Color swatch, Checkbox, Radio button, Dropdown & Inline button, you will need to add option values which your customers can choose from

Click on the +Add new button to add a new option value. A new input field will appear where you can enter the name or label for the option value.



Optional settings:

Pre-select value: If you want a specific value to be pre-selected by default, you can choose it from this setting. This is useful for guiding customers towards a recommended option.

Mark as required: Enable this setting if you want to make the option compulsory. When enabled, customers will be required to select an option or fill in the field before they can add the item to the cart. This ensures that critical information is collected before the purchase is completed.

Add-on price: Link option values with existing product variants to add an extra charge for specific options. This is useful for options that have an add-on price, such as premium materials or customizations. You can check our guide for references.

Show tooltip: Add a tooltip text or short information for the option.

Custom class: Use this field to apply custom CSS styling to the option. Enter the CSS class name that you want to apply to the option for custom styling.

Conditional settings: Add rules to display the option based on previous selections made by the customer. This feature allows for dynamic option sets that adapt based on customer choices, providing a more personalized experience. You can find more information about the conditional settings in our guide here.

Learn more on how to use a template to create your option set

How to publish option set

Step 5. Click on Select products to apply this option set

a. Apply on products

You can search and choose products by picking one by one Manually or select all the products from the list to assign this option set in bulk.

b. Apply on specific variants

Now, you have the ability to apply an option set to specific variants within your Shopify products. Simply choose the option "Specific variants" > "Choose Product". A list of products will then be displayed, allowing you to select/search your products and the specific variants to which you want to apply the option set.

c. Automated apply

Or clicking on Automated button and add add a condition by which to select matching products using Title/Type/Tag/ Vendor. Existing and future products that match the conditions will automatically be applied this option set.



You can find the Type/Tag/ Vendor in the Product section of your Shopify Admin page.

c. Apply to all products

You can quickly apply this option set to all products in your store.



→ Click Apply to save the selected products or to save the added conditions.

Step 6. Finally, click on Create button to create and publish this option set to the selected product pages

→ If you have activated the app in the current theme, you can see them on the storefront now!




→ If not? Please take 1 minute to activate app in current theme

You can now see your fantastic work on the product page!

Learn more: How to change options position on the product page?

Hopefully this instruction has helped you. Things change all the time, so if you run into issues please don't hesitate to share them with us at support@tepo.app or use the in-app live chat. We're happy to lend a hand 🤩

Updated on: 22/08/2024