Set Up Custom Product With Preview

Goal of this tutorial is to help you set up customization products like the one on the image below:

In the tutorial we will cover:
1. How to add the customization popup to the product page
2. How to add customization preview images
3. How to add fonts, text sizes and colors.

Add the customization popup to the product page

Step 1. Find the product you want to be customizable in the Shopify admin.
Step 2. Tag the product with the “customization_product” tag

Add customization preview images

Preview text will always appear in the vertical center of the image. 
Because of that reason, preview images should always have the part which is customizable in the vertical center.

Assign preview images to variants

To assign preview images to variants, we will use the alt text of images.

Assign preview image to all variants

Alt text will be different depending on what variants you want to assign the preview image to. If you want to assign a preview image to all variants, use the alt text:

Step 1. Click on the image in the media section of the product.

Step 2. Click “Add alt text”

Step 3. Add the alt text: custom_default

Assign preview image to one variant

Each variant has a name and we will use that name to connect it to the preview image. Alt text will consist of the keyword: “custom_” and the variant name. Names of variants are simple as they are made by connecting options.

Let’s say we have a product with following options:
Color, Size, Material

The name would be made like this:

Option 1 (Color) Option 2 (Size) Option 3 (Material) Variant Name Alt text
Black XL Cotton blackxlcotton custom_blackxlcotton
Red L Polyester redlpolyester custom_redlpolyester
Black XL blackxl custom_blackxl
S Cotton scotton custom_scotton
Black black custom_black
Cotton cotton custom_cotton
L l custom_l
Red Polyester redpolyester custom_redpolyester

After you have the alt text for the specific variant, add it to the preview image:

Step 1. Click on the image in the media section of the product.
Step 2. Click “Add alt text”

Step 3. Add the alt text

Add fonts, text sizes and colors.

Go to the themes section of your Shopify admin. Click on the Customize button next to the Actions button Once the theme loads, find the product you are editing and visit that product. You can search for it in the search bar or you can find it in the collections. Once you are on that product page, you will be able to see the button below:
Click on the red button, and the rest of the instructions will be shown there.