[intro]Before you begin this Guide, you should have applied a Theme and pointed a domain at your EKM online shop. After you have completed this Guide, you will have replaced all of the default Design Images on your EKM online shop with images that best represent your Products and your Brand. [/intro]
- Accessing Design Images
- How to find out the size of the Design Image
- Hyperlinking Design Images
- Creating new Design Images
- Display or Hide?
- Dos and Don'ts
Design Images are pictures on your EKM online shop which are neither your logo, Product or Category images. Design Images are used to:
- Depict the ethos and branding of your EKM online shop;
- Promote specific Products and Categories;
- Highlight any current offers and promotions;
- Aid navigation (by being hyperlinked to another page on your EKM online shop).
[tips]Before you hyperlink your Design Images, ensure that you have applied a domain name to your EKM online shop. [/tips]
Every Theme, when applied to your EKM online shop, has a selection of default Design Images on it. Therefore when you apply that Theme, you must replace these Design Images with your own versions. It’s essential that when you create Design Images for your EKM online shop that they are of the highest possible quality as ultimately, the look of these graphics will determine whether any new customers to your shop click deeper within it.
[remember] When replacing the Design Images, you can use royalty-free Images from the likes of Pixabay and Unsplash, but do not be tempted to use pictures from Google without express permission from the copyright holder, or pictures that are watermarked as this will make your EKM online shop look unprofessional and put customers off purchasing. [/remember]
Accessing Design Images
1. From the Dashboard, click the Shop tab:
2. You then need to ensure that your Edit Design button is turned on:
3. Next to each Design Image, you’ll notice an Edit Element button. Click it to reveal two options ‘Edit’ and ‘Show’:
4. 'Show' means that this will display the image on your EKM online shop, as most default Design Images are hidden by default, giving you the opportunity to replace them before making the element itself visible. Click the Edit button:
5. When you have opened the Edit Element window, you need to click the Content tab on the left-hand side:
How to find out the size of the Design Image
6. You can see the recommended size for the Design Image indicated here:
Any image you upload to replace this default Design Image must be those dimensions.
[remember] Before you upload any Design Images to your EKM online shop, you need to upload them to Tinypng.com first to optimise them. Optimising your images means removing superfluous data from the image without affecting the quality of the image itself. This ensures that your Design Images do not negatively impact the page loading speed of your EKM online shop. [/remember]
Hyperlinking Design Images
7. You can easily hyperlink the Design Image to make it clickable and take the customer elsewhere by pasting the back part of your target URL in the field provided. For example, if you wanted to send customers to a Clothing Category, instead of adding https://www.yourdomainname.co.uk/clothing-36-c.asp to the Image Link field, you would add /clothing-36-c.asp instead, before clicking the Save button:
However, if you wish to hyperlink the Design Image to a website or Page outside of your own EKM online shop, you would need to use the entire URL in the Image Link field instead, such as https://www.facebook.com/yourshopname.
Creating new Design Images
8. Now you know what size Design Image you need to create to replace the default version, you can begin to create one. You can use the EKM Image Builder, which will automatically create a canvas that is the right size and allow you to populate it with royalty free images, symbols and text. This is the ideal option if you have little to no experience creating Design Images. You can click here to see the EKM Image Builder Guide and click the button in the Edit Element window to launch it:
9. However, if you would like to create your own Design Images, using platforms such as Pixlr, Canva or similar, ensure that you create them in the right dimensions before uploading them to your shop by clicking the Upload Image button:
10. When you have uploaded your new Design Image and populated the Image Link field, simply click Save & Close on the bottom right-hand corner:
Display or Hide?
11. When you have populated the Edit Element window with a Design Image and completed the Image Link field to ensure that the Design Image is hyperlinked to the relevant page on your EKM online shop, the next step is to make the new image display. To do this, click the Edit Element button beneath the Design Image, and click Show:
When a Design Image is visible, the Show option will be replaced by a Hide option, so if you decide that you don't want to use that element after all, simply click Edit Element, and select Hide from the drop-down menu.
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.
- EKM Image Builder
- Uploading your Logo to your EKM online shop
- Homepage Text
- Claiming your free EKM domain name
[contact] If you need our help with your EKM online shop, contact your Account Manager or Customer Support, who will be able to point you in the right direction. We're open from 8am-6pm weekdays and 9am-5.30pm on the 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. [/contact]