How to add an image to a template in the visual template editor

How To

How do I add images to a template in the visual template editor?

Follow these steps

Images can be added to a template in the visual template editor from two different sources:

• Images from your GlobalTill product data (the images saved on a products web data tab).
• Images from your computer.

To add an image to a template in the visual template editor, follow any of the below methods depending on your situation.

---

From an image stored on your computer

This method adds an image from your computer to a template, this is often used for company logos and non-product specific images that will remain consistent from label to label.

To reference an image stored on your computer, follow these steps.

1. Select Image from the left menu to add an image component to the template.
2. Ensure the image component is selected then under properties select Select Local File.
   
   
3. Search for the image you have locally stored and open it.
4. Reposition and resize as necessary.
   

---

From GlobalTill product data (with a single image)

This method adds the first image listed on a products web data tab. If you add additional images to your web data, update your template to ensure it's using the correct image before printing anything from the template editor.

If you have only one image for each product and want to add that image to a template, follow these steps.

1. Select Image from the left menu to add an image component to the template.
2. Ensure the image component is selected, then under properties select Insert Data Field.
   
   
3. From the list, select the Images array to open a drop down, select image_url, then select Insert Data Field.
   
   
4. Reposition and resize as necessary.
   

---

From GlobalTill product data (with multiple images)

This method uses a container component which you can filter to reference a specific product image on a template. Retailers can have multiple images for a single product, this method lets you filter through them and add the specific image field to the template.

To filter through a product's images to its first associated image then add it to a template, follow these steps.

1. Select Container from the left menu to add a container component to the template.
2. Ensure the container component is selected, then under properties select Data Field and select Images.
   
   
3. Select Advanced Settings, then add the following to the filter by section: Primary_Image_Flag - Is - 1, these specific settings filter the array to the primary image, then select Apply.
   
   
4. Select Image from the left menu and drag it inside the container component by dropping it on top of it.
5. Ensure the image component is selected then under properties Select Insert Data Field.
   
   
6. Select Image_url, the select Insert Data Field.
   
   
7. Reposition and resize as necessary.
   

More Information

For more information about the visual template editor, see the article Getting started with the visual template editor.