DeutschPurchased 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.
In general, your design service is divided into two 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 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.
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 Part 2: Graphics ✓ Please make changes to these graphics: e.g. App Icon, Loading Screen, etc.
The following graphics are attached to this email: ✓ Logo Elements: Shop Logo, App Icon, Loading Screen, Android Feature Image, etc. |
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!
| 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:
Mobile Website: Primary ColorsGlobal Variables Buttons Forms Header & Footer Breadcrumb Product List Search Form Category List Product Detail Page Cart
Smartphone App (iOS 8 layout): Header Background
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. |
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. |
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. |
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. |
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, 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. |
 |
 |
|
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 our App Marketing Guide: App Store Optimization: bringing your apps to the forefront.
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 |
|
|
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 How do I request an app update?
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 |
= 1024 x 500 px |
|
|
Loading Screen iOS: Android: |
|
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 |
|
| Apps | App Icon | |
|
Tablet Header Logo |
||
|
Feature Image |
||
|
Loading Screen iOS: Android: |
|