Support Center

Creating mobile pages with widgets

Follow

 

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

  

Topics covered in this article:

  1. Creating a mobile page
  2. Previewing a mobile page
  3. Frequently Asked Questions (FAQ)
NOTE: A 4-hour Graphics Service is included in your Marketing & Design Package. Please send us all necessary graphics (banners, slider images, etc.) as described in this article

  

 

1. Creating a mobile page

Your apps and mobile website are, simply put, carefully structured mobile pages that link to one another. The homepage, category page, sales page, fashion lookbook, info page... How can you easily create so many pages that are so different in designs and functions?

The answer is the widget! Available in various sizes and functions, these building blocks can be easily personalized, added to, and rearranged on a mobile page.

Step 1. Add a page
 
  1. Log in to your Shopgate Admin page, 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.
 

 

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 the "Publish" button 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. Here is how to apply separate designs to the apps and the mobile website.

 

 

2. Previewing 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 on "Settings" on the right.


  2. Click on 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.

 

 

3. Frequently Asked Questions (FAQ)

3.1 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,

  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.

 

 

3.2 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.

 

 

Comments