Set Up Custom Product With Preview - aThemes Knowledge Base

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:
custom_default

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.