Understanding my 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 2 parts: Layout & Color Service, and Graphic Service.

Layout & Color Service

Your Layout & Color Service includes:

 Mobile Website  iOS and Android Apps
Shop logo on smartphone and tablet website Shop logo on all smartphone and tablet apps
Background and overall color theme Background and overall color theme
Color fine-tune for 29 individual elements? Color fine-tune for 5 individual elements?
Homepage layout via the Widget System? Homepage layout via the Widget System?
Homepage graphics link to the desired destination? Homepage graphics link to the desired destination?
Campaigns and promotional graphics on homepage Campaigns and promotional graphics on homepage
Other banner images, slider, product highlight, etc.. Other banner images, slider, product highlight, etc..
    Home screen app icon for all phones and tablets
    App icon for submitting to both app stores
    App loading screen for all phones and tablets
    App store screenshots for all phones and tablets
    Feature image for Android Play Store

 

Graphic Service

Your Graphic Service includes:

Hosting and organizing your design graphics in our cloud server.
Uploading design graphics to your mobile shop.
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 Preference & Graphics

Your input and involvement are essential as we build a great mobile website and native apps for you! Please read the next 2 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.

In Which Format Should I Provide My Graphics?
What's The Best Way To Provide Files To Shopgate?

To: support-us@shopgate.com (For US shops)
support-de@shopgate.com (For European shops)
Subject: Design Package: Layout preference & Graphics (attached)
Content:

Hello Shopgate,

Please see my design request and graphics below:

Part 1: Layout & Colors

 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

 Part 2: Graphics

 Please make changes to these graphics: e.g. App Icon, Loading Screen, etc.
Additional requests and comments, if necessary

 

The following graphics are attached to this email:

 Logo Elements: Shop Logo, App Icon, Loading Screen, Android Feature Image, etc.
 Homepage Layout graphics
 All graphics in EPS format or best resolution
 Corporate Design Guidelines in PDF or image format, if necessary
Additional graphics, 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 favoritehow 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 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:

 

Mobile Website:

Primary Colors
Global Variables
Buttons
Forms
Header & Footer
Breadcrumb
Product List
Search Form
Category List
Product Detail Page
Cart

 

Smartphone App (iOS 8 layout):

Header Background
Home Page Divider
Content Color
Badge Color
Key Color 

 

For more details, please log on to your Shopgate Merchant Admin and navigate to Design > Theme

Melone

Orange

Pink

Flat

Dark

Bright

   

 

Graphics: Fit Elements In The Look

Logo Element

Your brand logo is an essential graphical element. Please provide the following logo-related graphics for your mobile website and apps. If providing non-vector graphics, please read your Logo Graphics Resolution Guide.

1. Shop Logo

Where it shows 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?

The Homepage Layout Widget at Shopgate is a system to design and layout the homepage of a mobile shop.

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

This system also features an easy drag-n-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.

Logo With Texts Only

We will use your logo to generate an icon of the correct size.

More tips on an App-Store-Optimized icon can be found in App Store Optimization: getting your apps found

 

In Which Format Should I Provide My Graphics?

 EPS Format

We kindly ask you to provide all graphics in EPS format for the best visual experience.

 High-Resolution Graphics

If you don't have access to EPS files, please provide all graphics in the highest resolution possible.

Make sure to check your Graphic Resolutions Guide before sending files in image formats.

CorelDraw Format

Please do NOT send graphics in CorelDraw format. If you use this program, please export graphics as EPS files.

Low-Resolution Graphics

In case we are provided with non-vector graphics below the necessary resolutions, time spent enhancing your graphics will be deducted from your graphics service time (4 hours).

 

What's The Best Way To Provide Files To Shopgate?

 Dropbox
  • Provide all graphics in a separate folder.
  • Give Shopgate permission to download from the folder.
 Email
  • Send all graphics in a compressed file.
  • Mark each graphic with a good title.

 

How Many App Updates Can I Request?

We are happy to update your apps for up to 4 times during the onboarding process* upon request. To request an app update, please read Requesting an app update

* This does not include system updates initiated by Shopgate.

 

Additional Resources

Logo Graphics Resolution Guide

In this table, you can find all necessary sizes and resolutions for your graphics: 

Mobile Website

Header Logo

= 640 x 140 px

Apps App Icon

= 1024 x 1024 px

Tablet Header Logo

= 920 x 210 px

Feature Image
Android Play Store

= 1024 x 500 px

Loading Screen

iOS:
iPhone 4S
iPhone 5
iPhone 6
iPhone 6+
iPad

Android:
Smartphone
Tablet 

 


= 640 x 960 px
= 640 x 1136 px
= 750 x 1334 px
= 1242 x 2208 px
= 2048 x 1536 px


= 1600 x 2560 px
= 2560 x 1600 px

  

Sample Graphics For Downloading

The sample graphics below will help you create necessary Logo elements in the right size. To download, click on a file or download all files in a package.

Mobile Website

Header Logo

mobile_header_logo.psd

Apps App Icon

app_icon_1024px.psd

Tablet Header Logo

tablet_header_logo.psd

Feature Image
Android Play Store

featureimage_playstore.psd

Loading Screen

iOS:
iPhone 4S
iPhone 5, 6, 6+
iPad

Android:
Smartphone
Tablet 

 


iPhone_loadingscreen_4s.psd
iPhone_loadingscreen_5_6_6plus.psd
iPad_loadingscreen.psd


android_loadingscreen_phone.psd
android_loadingscreen_tablet.psd

 

DIY The Look of Your Mobile Shop

Want to know how we design your mobile shop? Visit our support articles here:

App Store Optimization: getting your apps found 
Designing homepage layout for apps and mobile website

 

Was this article helpful?
0 out of 0 found this helpful