Create a design that converts
  • 12 Jan 2024
  • 5 Minutes to read
  • Dark
    Light
  • PDF

Create a design that converts

  • Dark
    Light
  • PDF

Article summary

Feel free to go through this checklist before sitting down with banner images, image editing, and design settings. The design settings can be found either by going via the shortcut in your online store, or via the control panel > Design > Your Design > Design Settings for template. 

1. Choice of design template

We have two different design templates to choose from: America (9.999 kr) and Europe (Free).

Each of the templates has its own preset versions that you can choose from - and then customize them to your liking. It is these versions that have been given the names: Rio, Santiago, Berlin, etc.


You can see demos of the various templates here: https://www.mystore.no/designstore

During your demo period, you can switch between these as much as you want at no cost, but please check this out if you are going to change the template to see what is "reset" and which you will have to do again if you switch.

Upload the logo in your control panel, go to design > upload logo.
This is also where you upload your favicon. (The little logo that appears at the top of the tab/address bar of the browser).


A good and professional logo is essential for creating a strong and recognizable brand, as well as helping to create a lasting and positive impression with your customers.


When uploading your logo, it's important to follow the guidelines for optimal display.
We recommend the size 300 x 100 pixels (W/H), but if your logo is going to cover the entire top of the page, it should be 500 x 100 pixels (W/H).
Make sure to use JPEG, GIF or PNG format for the image.

3. Colors

  1. Use colors deliberately and feel free to pick up colors from your logo
  2. Choose 2-3 colors for your online store so you can keep a "red thread"
  3. Remember to think about contrast so that buttons and texts are visible. Also for those with impaired vision.


    Tip: If you want to find new color codes that match your logo, or an image that you are going to use for example, you can go to https://imagecolorpicker.com/en and get help finding both specific color codes and suggestions for entire color palettes.
    Example: Here's the suggestion we got when we uploaded the Mystore logo on this page:

  4. You can change colors in the design settings in the Control panel. For example, should you change the color of the buttons in your store. Go to Design > Design Settings > Colors > General.

4. Top bar and menu

In the design settings, you will find a point for the top bar, menu and bottom line. Here you can

Adjust the menu and top of your online store, such as whether you want a centered or left-hand logo. 

  1. Post slogans in top bar
  2. Check settings for the menu - test various possibilities 
  3. Go over the info you want to show in the bottom line

    We recommend that you add slogans or UPSs (Unique Selling Points) to your top bar. This is a great way to showcase the benefits of shopping in your store. Or showcase important information such as shipping and delivery time.



    Read more about top bar and menu settings here. 

5. Font types and sizes

We have made it easy for you to get the online store tidy when it comes to using fonts. You edit the fonts under Design>Your Design > Design Settings to "your template".

  1. You can choose from a variety of Google fonts.
  2. You choose 2 fonts in your online store. (Main font and font to headings).
  3. You can choose from 3 header thicknesses.
  4. Keep in mind that the font you choose should be easy to read. 

6. Banner images

Large parts of your front page are often the banners/pictures you show to customers. Think about what message you want to convey and what mood you want to set for your store. 

  1. Have a neat and inviting front page
  2. Build trust and credibility
  3. Showcase what you're selling
  4. Tempt customers to scroll and click through
  5. Use environmental images, not just product images
  6. Feel free to have a Call to Action on the pictures  - something that triggers the customer to click on it and says something about where they want to end up. Eg: See all our dresses here.


    Example of banner images:More info about where to post banner images and link them to links can be found here: https://support.mystore.no/knowledge/designmal-america#Bannerbilder

7. Product Images

Needless to say, good product images are essential for the customer to feel confident enough to add the item to their cart. 

  1. Have good photos – both pure product photos and environmental images
  2. Show the product in action - inspire the customer
  3. Have more images than one (max 8) - this increases conversion
  4. Have the same size/format of the images, this looks neater 
  5. Do not have too large images - then it will take a long time to load the page. this neither Google nor the customer likes. 
  6. Recommended size of images 1000 x 1000 px (if square, you can also have different format of course)

8. Visit your own store

It's important that you know how your store feels to customers. Therefore, have a routine that you visit your store after you have made changes to see how it turned out. 

You can go to the online store by clicking on the "house icon" in the upper right corner of your control panel. 

Once logged into your control panel and visiting your own store, you'll see a shortcut back to the control panel in the bottom left corner. This one is nice to know about. It can send you directly to relevant pages in the control panel from the online store. 


Design Template: America (Rio, Santiago)

You can find more detailed info and how to make specific design settings in the America template here: https://support.mystore.no/knowledge/design#america-rio-santiago

Design template: Europe (Barcelona, Berlin, Paris)

You can find more detailed info and how to make specific design settings in the Europe template here: https://support.mystore.no/knowledge/design#europa-barcelona-berlin-paris

Where can you create banners and edit images? 


You don't have to be a graphic designer or know Photoshop to create banners and edit images. There are several both free and inexpensive tools that you can make use of.
For example, Canva and Picmonkey. Test them out if and see what works best for you. 



Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.
ESC

Eddy AI, facilitating knowledge discovery through conversational intelligence