Products, variant images, size guides and cross-sells

A template does nothing until it's assigned to a product. The Products tool in the template builder is where that happens — and where you set up variant images, size guides and cross-sells for those products.

Assigning products#

1. Open the template in the builder and pick the Products tool.
2. Click Add products and choose products from the Shopify picker.
3. Save the template.

The assigned products appear under Assigned Products. Tick rows and click Remove … selected to unassign in bulk, or use the bin icon on a single row.

Each product can only have one template assigned. One template can power as many products as you like, so a range that shares the same print areas and inputs is one template assigned to many products.

Once a product is assigned, the Customise button on its product page works — provided the Customise Button theme block is on that product's template in your theme. The builder reminds you with an Add to theme banner the first time you assign a product. See Installing Pixel Wrangler.

Variant Images — a different blank per colour#

By default every variant of a product shows the template's base image. Variant Images swaps the base image when the shopper picks a variant — a black tee blank for Black, a white blank for White.

1. Under Variant Images, set Product option for image switching:
   • Use variant image — uses each variant's featured image from Shopify. No uploads needed.
   • Option 1 / 2 / 3 — pick the product option (usually Colour) and upload your own blank per option value.
   • Disabled — every variant shows the template base image.
2. If you picked an option, a grid appears per product: one column per side, one row per option value. Click a cell to upload the blank for that side and value (PNG, JPEG or WebP).
3. Save.

The customer's cart thumbnail and preview use the variant image they picked, so what they see in cart matches the garment they ordered.

Size Guides#

Under Size Guides, click Select Page next to a product and choose a page from your Shopify Online Store → Pages. The customizer then shows a Size Guide button in the size-and-quantity step, which opens that page's content in a dialog.

Change or remove it with the buttons beside the page name.

Cross-sells — offer the design on other products#

After a shopper adds a design to the cart, the success screen can offer the same design on the other products assigned to this template — the same artwork on a hoodie after they bought the tee.

1. Assign at least two products to the template.
2. Under Cross-sells, switch on Offer this design on other products.
3. Optionally set a Heading (default "Also available on").
4. Tick the products to offer and use the arrows to order them. Up to 12 products can be offered.

The product being customised is excluded automatically. Each cross-sell shows a preview of the shopper's design on that product and adds it to the cart in one click.

What's next#

• What the shopper sees on the product page: The storefront customizer
• Build the canvas the products share: Templates 101