App Design

Update your app's look and feel with widgets.

  1. Support Center
  2. Using Shopgate
  3. App Design

Creating mobile pages with widgets

Available in various sizes and functions, widgets are building blocks that can be easily personalized, added to, and rearranged on a mobile page.

In this article, you will find out how to create a mobile page for your apps and mobile website using widgets.

NOTE: A 4-hour Graphics Service is included in your Marketing & Design Package. Please send us all necessary graphics (banners, slider images, etc.).

Your apps and mobile website are, simply put, carefully structured mobile pages that link to one another. You have options like the homepage, category page, sales page, fashion lookbook...

How can you easily create so many pages that are so different in designs and functions? The answer is the widget!

Step 1. Add a page

  1. Log in to your Shopgate Admin and navigate to Design → Pages.
  2. The Pages page will open. By default, your homepage is created automatically.
  3. To add another page, click + Add new page, enter a name for the page, and Save.

Now the page is created and accessible from the Pages drop-down.

Widgets1.png

Step 2. Design the layout

  1. Select a page and a view.





  2. Add a new layout by selecting a widget.






  3. Rearrange the widgets by dragging and dropping them to the desired position.






  4. Click Publish to save any changes on this view of the page.

 

Now your page layout for this view (Smartphone or Tablet) is saved. To design the layout for another view or another page, select the page and view then repeat the steps.

In this example, the layout applies to both the apps and the mobile website. To apply separate designs to the apps and the mobile website, click here.

 

Preview a mobile page

IMPORTANT: Your changes are NOT saved automatically. Please click Publish before previewing a page.

The Homepage

To preview the homepage on your apps or on your mobile website, follow the instructions here:

On the apps

Download your preview app.

If your apps are live, download them from the App Store and the Google Play Store.
On the mobile website

Visit your mobile website in a browser.

You can also use the "Preview Mobile Shop" drop-down on the top right of your Shopgate Admin.


Other pages

To preview pages other than the homepage, follow the instructions below:

On the apps

 

Your app pages are only visible if they can be accessed via the homepage or linked to a "More" menu entry. To link a page to the homepage, follow the steps here:

  1. Add an image to the homepage (or any page that is linked to the homepage).
  2. Link the image to the page you want to preview and click Confirm.
  3. When you are back on the Pages page, click Publish.
  4. Open your app and click on the image you added. Now you should be able to preview the page in the app.

On the mobile website

 

You can preview any pages on your mobile website using the page URL:

  1. Select a page and a view, then click Settings on the right.



  2. Click the page URL to preview your page in a browser.

To make changes to the page URL, enter a different URL Key and click Save.

 

Frequently Asked Questions

How can I apply separate designs to my apps and the mobile website?

By default, the same page layouts are used for your apps and mobile website. To use separate designs for your apps and website, follow these steps:

  1. Click Settings on the right and slide one or both of these options to OFF:



  2. Now more tabs will appear on the Pages page. Configure your app designs under the tabs "Smartphone Apps" and "Tablet Apps," and the mobile website designs under the others.

Where can I find my old CMS pages?

The CMS pages you have configured before are now showing under Pages. Look for the drop-down on top of the page and click on it. You will find all the old CMS pages listed alphabetically.

 

Was this article helpful?

Articles in this section

See more
Can't find what you're looking for?
Let us help you—submit a support ticket.
Contact Support