If you build an overseas shopping mall using Shopify, WordPress, or Magento, you will use themes to set the design. After selecting the theme style, you will set the design in the order of replacing the actual products to be sold, slides, and banner images. If there is no clear plan or concept in this process, the design can become distracting. In this post, we will learn about the elements needed to maintain a sense of unity and learn about overseas shopping mall design settings that can make your brand stand out.

Standardized title

The title, which is the product name used in the shopping mall, is one of the most important elements in search engine optimization (SEO). The title should be based on keywords and should be used by creating rules unique to the site. The "title/keyword 1/keyword 2/keyword 3/keyword 4" format, which is often seen in domestic Gmarket or eBay, should be avoided at all costs. If there are keywords that must be added in addition to the title, please add them through the description (product description) or tags. The general title format is brand + product name + specifications, and the brand can be added to the brand section in addition to the title, so if it is a product that you manufactured yourself, you do not have to include the brand in the title.

Images suitable for shopping malls

80% of shopping mall design is photos. Photos can be divided into product images and banner images. When studying overseas shopping mall designs, you can feel the difference between overseas and domestic shopping malls in the photos. Overseas shopping malls mostly use product-focused photos, while domestic shopping malls often use model-focused cuts. This is more noticeable in fashion and beauty product lines. As Soho malls such as Style Nanda lead domestic shopping mall trends, fashion shopping mall designs seem to have become formatted. This design format created star models and solidified the model-focused format. Model-focused designs can be positive in Southeast Asia, where Korean culture is popular. However, if you are targeting North America or Europe, it is better to use product photos as the main product image in terms of design. Amazon and other marketplaces also require product images with a white background as the main image, so you can reduce resources for product listing linkage in the future.

Have you ever seen a blurry image while surfing the web? Blurry images are caused by poor image optimization. If you are creating a slide image or banner image, you should use a 1024px image or, in the case of Shopify, a 2048px image, which is the maximum image size, to provide a clear image. Most themes provide a function that automatically adjusts the size of only high-quality images uploaded to their sections, so if you are creating a slide image, we recommend that you upload high-quality images. In addition, product images should use images of the same size. Product images also provide an automatic resizing function, but it is recommended to use images of the same size for a unified design.

▲ Product image of a certain size

Select main color

The element that determines the concept of the site other than the image (photo) is the main color of the shopping mall. Color is an important element that shows the design concept of the site along with the brand logo. The basic rule is to use 2-3 colors excluding black and white. The main color is used for the main header of the bar banner and slide, and the sub color is used for the CTA button, footer, and other banner images. The easiest way to select colors that create a sense of unity is to set the main color according to the logo color. Even if you only use the logo and main color, you can maintain a sense of unity in the shopping mall. Once you have decided on the main color, you can save the color code of that color and use it commonly in emails and flyers sent from the shopping mall.

▲ Color code

• #FFFFFF - White
• #2D2D2D - Dark Grey
• #50B83C - Green

Use 3 or fewer fonts

The most important factor in choosing a font is readability. No matter how good the design of a font is, if it is poorly readable, you should avoid using it. Also, excessive use of fonts can be toxic to the design. Remember that you should use no more than three fonts to maintain a sense of unity. If you use a font family, you can create a more balanced design. Of course, the fonts should also be used in the same size.

▲ E-book design using the open sanse font family (source:canva)

▲ Example of banner design using font family

Most of the themes provided by shopping mall builders, including Shopify, are linked with external fonts such as Google fonts in addition to the fonts provided by the theme, so font conversion is possible with simple settings without coding. However, as the saying goes, “less is more,” so in order to maintain a clean design and readability, please refrain from using excessive fonts.
_
You can maintain a sense of unity by simply configuring the title, image, color, and font mentioned above. However, since the main character of the shopping mall is the product, you should avoid excessive color selection or complex design and design it so that you can focus on the product. I hope you will create the foundation of your shopping mall branding with these four elements.