[caution]This Guide is intended for use with Legacy Themes or EKM online shops in Custom Mode. [/caution]
[intro] Our Image Builder is a fantastic tool for creating Design images to display on your EKM online shop. You can use the Image Builder with any elements within your Theme which are set to display images only. [/intro]
- Using a Stock Image
- Uploading your own Image
- Adding Text
- Adding Boxes
- Using Layers
- Adding Icons
- Finishing Touches
- Exporting your Design Image
- Dos & Don’ts
[caution]EKM Image Builder is accessible on all Themes except for Aerial. If you are using Aerial, you may wish to use a different legacy Theme within your Test Shop to access Image Builder to create your Design Images. [/caution]
1. To access the Image Builder, simply open any image element and click the link for the Image Builder:
[caution] When you open an Image element, if you can't see a link to the Image Builder, this could be because you're using one of our older Themes. If this is the case, simply get in contact with our Customer Support Team who will be able to amend this for you. [/caution]
2. When you open the Image Builder, you will see a list of options down the left-hand side of the screen and a blank canvas in the middle. To begin, you need to add an image to your canvas. To do this, the Insert icon:
3. On the submenu, click Image:
4. You’ll then be presented with the option of either searching for a royalty-free image on Unsplash or uploading your own image:
Using a Stock Image
If you haven’t had any professional images taken of your Products, then you can use royalty free stock images in your Design Image instead. To do this, click Insert and then the Image symbol and enter a keyword into the search bar for the kind of image you’re looking for in the search bar provided.
When you see an image listed within the results, click it to apply it to your canvas and resize it if necessary. When it comes to resizing your image, you can choose to either stretch the image to size or distort it so it will fit the canvas. Click the image to edit it, and you'll see two symbols below the bottom middle of the image. You can then click the dots around the image to distort it to fit the canvas:
Whilst distorting the image can work fine dependent on the image content, it is not always wise to do, especially if the image contains a human or animal where the distortion then becomes very obvious. Instead, click the arrows symbol in the bottom middle of the image, and you'll see a small green line appear:
Resize the image as you did before by dragging the dots around the image outline, but this time you'll notice that the image adjusts itself accordingly so it does not become distorted. This is known as 'constraining the proportions of the image'.
Uploading your own Image
If you have an image of your own you would like to add to your canvas, click the Insert symbol, and then select an image, before clicking the ‘Upload Your Own Image’ button:
Select the image from your computer and apply it to your canvas. Resize it if necessary, using the dots on the corners to stretch the image diagonally. To constrain the proportions of the image, click the arrow symbol in the bottom middle before you begin which will reveal a tiny green line - this will prevent the image from distorting.
To add text to your image, click the Insert Icon, and then click Text:
Double click the in the field provided to change the default ‘placeholder text’ into your own words, and highlight the text to change the size and using the options on the top left of the screen. You can change the colour here by clicking the square, and add a specific colour hex code:
You can then use the four-pointed arrow symbol to move the text to where you want it positioned on your Design Image.
When you have added text to an image, sometimes you need to add a box behind the text in order to make the text stand out from the image and make it easier to read. To do this, click Insert and then select Box:
You can stretch the box to fit over your text, and use the menu in the top left of the screen to make adjustments to the box, such as changing the colour of the box and the outline, adjusting the opacity of the box and adjusting the radius - which is how curved the corners are. Keep making adjustments until the box is roughly in the area you want it to be.
As we adding text before our box, the box is currently sitting ‘on top’ of our text, instead of underneath. To amend this, we need to change the order of the layers of our image. To explain further, in the world of graphic design images are made in layers. Currently, the example image has three layers - the image, the text and the box. Changing the order of the layers allows you to select which you want closest to the front. To do this, select the Layers symbol, and then you can drag and drop your layers into the correct order. The layer at the top of the list is the one that is at the front, and the layer at the bottom of the list is the base layer, the one behind all of the others:
You can also use icons - also known as ‘vector images’ - onto your canvas too. Icons are simplified symbols that can be used as part of your branding or to add detail to your design images. To add an icon, click Insert and then select the Icon symbol:
Once you’ve selected your icon, you can select the colour and opacity for it and change it’s size before moving it into position, as you did with the text layer.
Once you have added all of your layers, you just need to make some final adjustments to get everything positioned correctly. You can double-click different layers to make further changes to them, and use the four-pointed arrow symbol to drag the layers into the right place:
Exporting your Design Image
When you have finished your Design Image, simply download it to your computer by clicking the Export symbol:
You will then be able to find the image in the Download folder on your computer:
[tips] When you have downloaded the image to your computer, we recommend that you optimise the image by uploading it to Tiny Png. This is a free service, and when you upload your image it will remove any superfluous data from the image file, ensuring that you lose no detail or resolution. When you have the image has been processed by Tiny Png, upload it back onto your EKM online shop. Optimising your images ensures that your EKM online shop will load quickly and give customers a better experience. [/tips]
Dos & Don'ts
- Use opaque shapes behind the text to make the text clearer if the image has a lot of detail;
- Keep text minimal and to the point;
- Check for spelling mistakes;
- Ensure that you use the largest images possible when uploading your own;
- Look at other websites for inspiration.
- Use more than two kinds of font per image;
- Use fonts with an excessive amount of detail - this can make text difficult to read;
- Use watermarked images;
- Don’t forget that your design images are as important as your product images - these must be high quality to encourage potential customers to click deeper into your EKM online shop.
[contact] If you need our help with your EKM online shop, contact your Ecommerce Expert or the Customer Support Team, who will be able to point you in the right direction. We're open from 8am-6pm weekdays and 9am-5.30pm weekends. If you'd like to suggest a feature or an upgrade on any of the EKM platforms, please let us know on the EKM Suggestions Board. If you have a non-account specific question to ask the EKM Team, join us in EKM Community. If you need some inspiration for your EKM online shop, listen to our podcast on iTunes and Spotify.[/contact]