Question 1

Set up Option set

Accepted Answer

How to create option set:

${youtube}Follow detailed instruction below or watch our 2-min tutorial here

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 e

Question 2

Customize style for app options (using CSS)

Accepted Answer

Getting started

By default, options from app will inherit styles from your theme. Depending on how your theme is set up, these styles may not carry over in the best way possible. However, they can be styled with CSS code. This document will provide an introduction on how to customize the style of options added by our app.

|| A basic understanding of HTML and CSS code may be required to customize the options to your liking. If you can't seem to figure it out, please don't hesitate to send your customization request to us at the in-app live chat. We're happy to lend a hand 🤩

Step 1 - Go the your Online Store -> Themes then choose Edit code

Step 2 - Open the Assets folder and choose to Add a new asset. Create a blank file and add the file name as tepo-product-options

This is where you can add the CSS snippet and within the curly brackets, you will need to add CSS properties (each on a new line) that will style your elements.

Step 3 - Add the css file to your theme.liquid

Open theme.liquid file and paste this code {{ 'tepo-product-options.css' | asset_url | stylesheet_tag }} before the tag

![](https://storage.crisp.chat/users/hel

Question 3

Customize Shopify variants options

Accepted Answer

This feature allows you to change the appearance of your Shopify options to Image or Color swatch without altering their underlying functionality or setup.

💡 Makes it easy for customers to view variant images changed while choosing variants by clicking on the color/image swatches

|| With the Free and Grandfather plan, you can sync options for up to 20 products. However, if you have more than 20 products, you'll need to upgrade to the Unlimited plan. The Unlimited plan allows you to sync options for all products in your store, regardless of how many you have. For more details and features, please have a look at the Pricing details page here.

| To see how the feature works in action, please visit our demo product. Password (if needed): 123

In this article, you will understand how to use this feature from our app to customize the style of options (as known as variant pickers) which created from Shopify. Here is 3 main steps:

Step 1: Sync Shopify product variants options to the app
Step 2: Customize the option display style as your wish
Step 3: Check the new swatches on your product

To get the detailed instruction, please read through each step below:

Step 1: Sync Shopify prod

Question 4

Set up Add-on price

Accepted Answer

|| Our app add charge/price to option using the add-on price feature. It is available on the Unlimited plan. Learn more about the detailed Pricing plan

What is Add-on Price?

The Add-on Price feature in Tepo allows you to charge extra fees for product options in two ways:

Flat Fee (Add-on Charge Price): Add a fixed price directly to an option value. This fee is automatically added to the main product price when selected.
Linked Variant (Add-on Product): Link an option value to an existing product variant in your Shopify store. The linked product is added to the cart alongside the main product, increasing the total cost.

This feature is perfect for:

Custom services (e.g., engraving, gift wrapping 🎁).
Premium options (e.g., faster delivery 🚚 or special packaging 📦).
Related products (e.g., accessories, warranties).

This guide provides a comprehensive step-by-step process for adding the charge with add-on products on your store. Please refer to this guide if you prefer using flat fee for your options.

How to add price to options with add-on product?
How add-on price feature works on your storefront?
How to view add-on sale report?

How to add price to options with add-on product:

Step 1: Add an option to option set

![](h

Question 5

Enable app in current theme

Accepted Answer

To make sure Tepo Product Options work in your theme, please follow the steps below:

Go to your Themes > Customize theme
Click on App embeds section
Find Tepo Product Options app
Turn on the toggle to enable app

Or you can go to the app portal "Tepo Product Options" and click on the Enable app in current theme button. It'll redirect you to the theme's App embeds and turn on the app by default.

Click Save to save the changes in your theme.

Finally, check on the front-end if the options show up on one of the products you’ve selected or not. If they don’t, please contact to our support via the in-app Live Chat

Updated on: 27/07/2023

Question 6

How to hide Add-on products from SEO, Shopify search?

Accepted Answer

As you know, our app provides an add-on product feature to create option charge and increase the main product price when choosing a specific option value – of course – these add-on products are not for sale. In this article, we will help you to hide these add-on items from SEO and Recommendations

There have three main steps to achieve that:

Step 1: Create a custom definition
Step 2: Add metafield to add-on product

Step 1: Create a custom definition

From your shop’s admin screen, click Settings at the bottom left of the main menu. Click Custom Data > Products

Click Add Definition.

Name the definition ‘Hide from Search’ (or a similar name of your choice).
Under Namespace and key, enter: seo.hidden
Click Select type and choose Integer and One value.
In the Access option, select Storefronts.

Your screen should look like the below:

Step 2: Add metafield to add-on product

Once you’ve added the meta field, a new panel will show up at the very bottom of the product edit screen. Click the metafield and change it to a 1, then Save your product.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293

Frequently Read Articles

Browse All Categories