Enhance Personalization with Multi-level Options on Shopify
Table of Contents:
- Introduction
- Understanding Additional Options
- Setting Up Additional Options for Skin Color
3.1 Creating a Category for Skin Color
3.2 Adding Options and Thumbnails
- Setting Up Clipart Categories for Skin Color
4.1 Creating Parent and Child Categories
- Configuring Additional Options and Conditional Logic in Artwork Editor
5.1 Adding a Virtual Layer with Additional Option
5.2 Setting Up Personalization Options for Each Skin Color
5.3 Setting Up Conditional Logic for Skin Color Options
- Completing the Artwork with Personalized Text Layers and Clip Parts
- Hiding the Personalization Form until Template Selection
- Launching the Campaign and Viewing on Storefront
- Applying Additional Options to Other Cases
Article: How to Use Additional Options in Tea and Blue Tutorial Series
Introduction
Welcome back to the Tea and Blue Tutorial Series. In this video, we will be focusing on how to use the additional options feature in Tea and Blue. This feature allows you to add an extra level of selection before letting your customers choose the official layer image. We will specifically explore how to set up additional options for skin color selection. So let's get started!
Understanding Additional Options
Additional options are used to provide customers with more choices and flexibility when customizing their products. In the case of Tea and Blue, it allows you to incorporate multi-level selection for layers. For our demonstration, we will be using the example of skin color selection, where choosing a specific option will change the skin color of the girl in the live preview image.
Setting Up Additional Options for Skin Color
To begin, let's create a new category named "Skin Color" in the Additional Options page of the assets section. Within this category, we will add two options - "Light" and "Dark". You can also upload thumbnail images for each option to visually represent them on the store. Alternatively, you can set a color for each option if you prefer.
Setting Up Clipart Categories for Skin Color
To complement the skin color options, we need to create clipart categories for each skin color. We will start by creating a parent category named "Graduate Robe". Within this parent category, we will create two children categories - one for light skin and one for dark skin. This ensures that the clipart selection is specific to the chosen skin color.
Configuring Additional Options and Conditional Logic in Artwork Editor
Now we will move on to setting up the additional options and conditional logic in the artwork editor. Click on the "New Artwork" button and import the artwork size from the print area of the acrylic plaque product base. In the artwork editor, click on the plus icon button and select the "Additional Option" to add a virtual layer. Name this option as "Choose Skin Color" and select the "Skin Color" category we created earlier.
Setting Up Personalization Options for Each Skin Color
It's time to display the personalization options depending on the selected skin color. Firstly, upload a body layer in the dark skin color. In the personalization setting for this layer, choose the clipart category specific to the dark skin color. Similarly, for the light skin color layer, upload a body layer in the light skin color and choose the corresponding clipart category.
Setting Up Conditional Logic for Skin Color Options
To ensure that the correct clipart layers are shown based on the selected skin color option, we need to set up conditional logic. In the conditional settings, select to show the dark skin layer and its option only when the skin color option value matches with "Dark". Repeat the same steps for the light skin color layer, showing it when the skin color option value matches with "Light". You can also enable the "Show this layer on first load" toggle for the light skin layer, ensuring it is displayed from the beginning when customers haven't selected any options yet.
Completing the Artwork with Personalized Text Layers and Clip Parts
To enhance personalization, add other personalized text layers and clip parts to the hair layer. Make sure to check the position of each option and reorder them if necessary using the preview options on the right side of the artwork editor.
Hiding the Personalization Form until Template Selection
In some cases, you may want to hide the personalization form until the customer selects a template. To achieve this, create a template with options displayed as a drop-down list labeled as "Choose an Option". Then, in the product page settings, disable the "Auto Show Options of the First Template" toggle. This way, the personalization options will only appear once the customer selects a template.
Launching the Campaign and Viewing on Storefront
After completing the artwork, it's time to launch a campaign. From the artwork and product base, create a new campaign with a suitable name, such as "Personalized Graduate Print". Choose the acrylic plaque from the product base and select the artwork you've created for each print area. Once everything is set, click on the "Launch" button to make your campaign live. You can click on "View" to see how it displays on your storefront.
Applying Additional Options to Other Cases
The same technique can be applied to set up additional options for other cases, such as choosing hair colors before selecting a hairstyle. Feel free to refer to the overall instructions and our demo campaign in the description below. Don't forget to like and subscribe to the Tea and Blue YouTube channel for more tutorial videos in the future. See you in the next video!
Highlights:
- Learn how to use additional options in Tea and Blue Tutorial Series
- Understand the purpose and benefits of additional options in customization
- Step-by-step guide to setting up additional options for skin color selection
- How to create categories and add options with thumbnails or colors
- Configuring clipart categories for specific skin color options
- Setting up conditional logic in the artwork editor for personalized layers
- Complete the artwork with personalized text layers and clip parts
- Hide the personalization form until the template selection is made
- Launch the campaign and view it on the storefront
- Applying additional options to various customization cases
FAQ:
Q: Can I use additional options for other customization aspects?
A: Yes, you can apply the same technique to set up additional options for various cases, such as choosing hair colors before selecting a hairstyle.
Q: How can I hide the personalization form until the customer selects a template?
A: To hide the personalization form until template selection, create a template with options displayed as a drop-down list and disable the "Auto Show Options of the First Template" toggle in the product page settings.
Q: Can I reorder the options after setting them up?
A: Yes, you can reorder the options by checking their positions and using the preview options on the right side of the artwork editor.
