App Design

Understanding your design package

Purchased a Premium Package? Congratulations! We will design amazing mobile website and iOS and Android apps for you at no additional costs.

In this article, you will find everything you need to know about your design package at Shopgate.

What's included?

Your Design Package consists of a 4-hour dedicated design service* from your Shopgate Design Team. This is the average time we need to create the looks for your mobile shop and make small changes for one round of iteration.

* If more support for design is desired, please contact Sales for an estimation.

In general, your design service is divided into two parts: Layout & Color Service, and Graphic Service.

Graphic Service

Submitting design graphics to the iOS App Store and Google Play Store.

✓

Scaling your logo graphics for a better visual experience, if necessary or upon request.

✓

Modifying, adapting, and improving your app icon, if necessary or upon request. What is this?

✓

Modifying, adapting, and improving app loading screen, if necessary or upon request.

✓

Modifying, adapting, and improving the Android feature graphic, if necessary or upon request.

✓

Setting background color (simple or gradient) and/or image to app graphics, if necessary or upon request.

✓

Adding elements like a slogan or a product image to a specific graphic, if necessary or upon request.

✘

We can NOT create a new logo, icon, or graphics completely from scratch. Graphics will need to be provided.

✘

We can NOT change the font or color of a text element (search, footer, product descriptions, etc.)

✘

We can NOT add a background image inside your mobile website.

✘

We can NOT implement special effects for your homepage using Javascript code.

Send us your layout preferences & graphics

Your input and involvement are essential as we build a great mobile website and native apps for you! Please read the next two chapters (Layout & Color and Graphics) and send your layout preference and graphics to us.

To use this email template, click on the email address below to open a pre-filled email, or copy the subject and content yourself.

✓ I would like to design my shop to layout: e.g. Simply Elegant✓ Details about Homepage Layout: e.g. 5 graphics are needed. The one on top should be ... Two images on the 2nd row are ...✓ Color theme: e.g. Yellow ✓ Main color: #FFFF00 ✓ Font & color for graphics (NOT for texts in the framework of the apps and mobile website)✓ Our corporate design guidelines can be found at this link or attached, if necessary

Layout & Color: Get that Look you want!

Before we start to make any designs, we would like to hear about your preferences and ideas.

The Lookbook

How your shop looks matters! Look at these beautiful looks and imagine any of them could be yours!

Click on a look below to open a mobile website. Options for viewing the Apps should be provided if opened on a mobile device.

All Combined / Active / Sporty

Grid

Modern / Flat

Trendy

Showroom

Team Spirit

Playful

Simply Elegant

Attractive

Choose Your Layout

With the Homepage Widget System, there are endless options to design your mobile shop! Below we're showing you 24 different layouts for your inspiration. Please tell us in the request email which layout is your favorite, how we can apply it, and which graphics you want to use.

To send graphics for use in your homepage layout, go to Layout Element.

Define Theme And Colors

At Shopgate, we offer 10 distinct color themes for your mobile website and apps. These themes not only set the main tone of your shop but also offer carefully selected colors for 29 different elements in your mobile website and 5 in your smartphone apps with the latest iOS8 layout. These beautiful colors can then be fully customized with the exact color code to express your individuality.

This process is described in the table blow. To help us get the exact look you want, please tell us in the request email your choice of color theme and the hex code of the main color you want to display. If more than one color is provided, please specify where each color should go. (See table below)

Step 1. Pick a color theme

Step 2. Fine-tune with Hex code

Blue

Green

Red

Yellow

Hex codes (e.g. #0b8137, #FFFFFF) are used to fine-tune colors of different elements in your mobile website and smartphone apps:

1. Shop Logo

This logo will show up in the header section of your mobile website and apps.

Element Size

In general, a header logo should have a size of 640 × 140 pixels or bigger in this ratio for mobile website and 920 × 210 pixels or bigger in this ratio for tablet apps.

Our Graphic Service

✓ Scale your logo for a better fit in the header area, upon request.✓ Upload the logo to your mobile shop.

2. App Icon

Where it shows

This icon will represent your apps in the iOS App Store and the Google Play Store.

After the app has been downloaded, this icon will display on the home screen of a user's iOS or Android device.

Element Size

This icon should have a size of 1024 × 1024 pixels or bigger in this ratio.

Our Graphic Service

✓ Scale your icon for a better fit if needed.✓ Pick graphical elements from your logo to generate an icon. What is this?✓ Set background color (simple color or gradient color), upon request.✓ Set background image, upon request.✘ We can NOT create a new icon from scratch.

3. Loading Screen

Where it shows

This image will show up when your app is being loaded on an iOS and Android device.

Element Size

The size of the loading screen varies according to the resolution and ratio of a device. In general, a loading screen should have a size of 1600 × 2560 pixels or bigger in this ratio for portrait mode and 2560 × 1600 pixels or bigger in this ratio for landscape mode.

Our Graphic Service

✓ Set background color (simple color or gradient color), upon request.✓ Set background image, upon request.✓ Add elements like slogan or graphics of a product, upon request.

4. Android Feature Image

Where it shows

This image will show up as your app feature image in the Google Play Store.

Element Size

The size of the loading screen varies according to the resolution and ratio of a device. In general, a loading screen should have a size of 1024 × 500 pixels or bigger in this ratio.

Our Graphic Service

✓ Set background color (simple color or gradient color), upon request.✓ Set background image, upon request.✓ Add elements like slogan or graphics of a product, upon request.

Layout Element

Included in your Design Package, we will design the homepage of your mobile website and apps to your request (See Homepage Layout). This will be done in the Shopgate Homepage Layout Widget. Please let us know which graphical element should we use in your layout and where should we use them.

If you want to use additional graphics for your homepage layout, please attach all of them to the request email. For example,

Additional Product Image

Existing Slider Images

Special Image For Categories

Individual Image Of Product

Campaign and Promotional Image

Your Design Managers are trained to embed a simple HTML code when necessary. However, please be aware that designing your homepage layout using javascript code is NOT included in your Design Package.

Your Design Guideline

If your shop has a Corporate Design Guideline we should follow, please provide it in pdf format or via a download link. This includes using a special font and/or color code (e.g. #FF000) in your logo graphics, and rules for displaying your logo graphics (e.g. different versions, spacing to the surroundings, etc.)

Frequently Asked Questions

What Is Homepage Layout Widget?

With the aid of this system, one can create beautiful banners, sliders, categories, products, and promotions on the homepage of a mobile website and apps with little to no effort.

This system also features an easy drag-and-drop function for re-arranging homepage elements seamlessly. This allows anyone to experiment with different layout and have a quick change of scenery when needed (Semi-annual Sale, Xmas, etc..)

Where Can A Homepage Graphic Link To?

Homepage graphics uploaded via the Shopgate Homepage Layout Widget can be linked to a page or service listed here:

Within App or Mobile Website

Product Page

Category Page

Homepage

Shopping Cart

Favorite List

My Orders

My Account

CMS Page

Shipping Info

Payment Info

Coupon Page

Add Coupon To Cart

Search Result

Terms & Conditions

Return Policy

Imprint

External

Call Phone Number

Send Email

External Link

What Is App Icon Adaption Service?

We recommend using an App Icon with clean graphic elements (little to no text) for a better App ASO (App Store Optimization). This translates to more potential customers for apps that sell products. You don't even need to include shop name in the icon - your app icon is always accompanied by the app name and/or app description.

At Shopgate, we are happy to help you generate an ASO-improved App Icon from your existing icon or logo. For example, we are able to strip texts and excessive graphics from your icon or generate an icon using your logo.

Logo/Icon You Provided

Icon We Generate

Logo With Clean Graphic (Recommended)

We can generate an icon with the most distinctive graphic from your logo.

This help article was easy to read.This help article helped me resolve my issue.Shopgate is easy to use.Other (please specify in the text box below).

This help article doesn’t make sense.It was hard to find what I was looking for.This help article didn’t answer my question at all.I wish there was a video that showed me how to do this.I now have to contact Support to resolve my issue.Other (please specify in the text box below).