Page widgets explained

Use page widgets to build a page for your app and mobile website.

NOTE: A 4-hour Graphics Service is included if you purchased a Premium Package. Please send us all necessary graphics (banners, slider images, etc.) as described in this article Understanding my Design Package.

 

What is a page widget?

A page widget is a special "building block" used to build a mobile page on your apps and mobile website. Offered here in various sizes and looks, widgets can be used to create a unique and impressive look. When tapped on a mobile screen, each widget can open a category, a list of products, search results, and many other pages.

 

How to use a page widget

To use the widget system,

  1. Log into your Shopgate Admin.
  2. Navigate to Design → Pages.
  3. You will find a drop-down labeled "Add a new widget" on the right side.

There are several different widgets to choose from:

Image

 

Step 1: Choose an image size.

IMPORTANT: Please choose the right size before you upload the image. The current system does NOT allow any size changes afterwards.
  • Available sizes: 400x200 pixels to 1200x1200 pixels
  • Smartphone width: 1200 pixels
  • Tablet width: 2400 pixels

Step 2: Click "Upload Image" to add an image.

  • Position your image in the preview window.
  • Zoom with  and ; Reset with
  • When you're happy with the image, click the checkmark on the top right.

Step 3: Add a link to your image.

  • Click on the Link field to open the link wizard. Choose a destination for this page.

Step 4: Add a title ("Alt text") to your image.

  • This title will be visible when the image is not available or connection is too slow.
  • This title will come up in a search result.

Step 5: Save the image.

  • Click Add at the bottom of the window.
  • When you are back on the Pages page, click Publish.
Image Slider

 

An image slider is used to display multiple images. A user can view the images by tapping on the left/right arrows or swiping an image left or right.

Step 1: Choose a size for the image slider.

IMPORTANT: Please choose the right size before you upload the image. The current system does NOT allow any size changes afterwards.
  • Available sizes: 1200x300 pixels to 1200x800 pixels
  • Smartphone width: 1200 pixels
  • Tablet width: 2400 pixels

Step 2: Click Upload image to add an image.

  • Position your image in the preview window.
  • Zoom with  and ; Reset with (this is not "Rotate").
  • When you're happy with the image, click the checkmark on the top right.

Step 3: Add a link to your image.

  • Click the Link field to open the link wizard. Choose a destination for this image.

Step 4: Add a title ("Alt text") to your image.

  • This title will show when the image is not available or connection is too slow.
  • This title will also come up in a search result.

Step 5: Add another image to the slider.

  • Click Upload Image to add an image.
  • Repeat the steps above to configure this image.

Step 6: Configure slider behaviors.

  • AutoplaySlide Show: slide your images automatically.
  • Show bullet navigation: show page indications at the bottom of the images. A maximum of 10 dots will be shown.
  • Play in an endless loop: images will always be sliding in a loop.
  • Autoplayinterval (ms): define the time interval between your slides by entering a number in milliseconds.

Step 7: Save the slider

  • After you have uploaded and configured every image in your slider, click Add.
  • When you are back on the Pages page, click Publish.
Text Editor

A text editor can be used to create a customized content block.

Step 1: Create content.

  • Enter your texts, images, tables and links in the Text mode.

Step 2: Use HTML mode.

  • Switch to HTML mode for more styling controls.

Step 3: Save the code.

  • When you're happy with your page, click Add.
  • When you are back on the Pages page, click Publish.
Category List

 

Step 1: Choose a category.

  • Your first level categories will display by default.
  • To display a sub-category, select it from the list.
  • To add more categories, add another "Category list" widget.

Step 2: Configure list behaviors.

  • Enter a Headline for this category list. You will see the real-time preview on the right.
  • Show images: show thumbnail preview images to the left of a category.
  • Sort order: sort your categories by Relevance, Name ascending, or Name descending.
  • Link to Show all products: show a text on top of the category list. When this text is clicked, a page with all products listed will open.
  • Collapse child category: choose whether you want to collapse your sub-categories.

Step 3: Preview the list.

  • After you have finished the configurations, preview the category list on the right.

Step 4: Save the slider.

  • When you're happy with the category list, click Add.
  • When you are back on the Pages page, click Publish.
Product List

Step 1: Choose products.

  • Product highlights (default)
  • Search results
  • Brands
  • Product numbers
  • Categories

Step 2: Configure list behaviors.

  • Enter a Headline for this product list. You will see the real-time preview on the right.
  • Layout: display products in grid or list.
  • Sort order: display products in the order of Relevance, Price ascending, or Price descending.
  • Number of products per load: choose between 1-24 products per load.
  • Show name: turn ON to show product names in the list.
  • Show prices (sale & original): turn ON to show the discounted price along with the original prices (with a strikethrough) in the list.
  • Show reviews: turn ON to show product reviews (in the form of 5 stars) in the list.

Step 3: Preview the list.

  • After you have finished the configurations, preview the category list on the right.

Step 4: Save the slider.

  • When you're happy with the category list, click Add.
  • When you are back on the Pages page, click Publish.
Product Slider

 

Step 1: Choose products.

  • Product highlights (default)
  • Search results
  • Brands
  • Product numbers
  • Categories

Step 2: Configure list behaviors.

  • Enter a Headline for this product list. You will see the real-time preview on the right.
  • Layout: display products in default or carousel.
  • Sort order: display products in the order of Relevance, Price ascending, or Price descending.
  • Number of products per load: choose between 1-24 products per load.
  • Show name: turn ON to show product names in the list.
  • Show prices (sale & original): turn ON to show the discounted price along with the original prices (with a strikethrough) in the list.
  • Show reviews: turn ON to show product reviews (in the form of 5 stars) in the list.
  • Autoplay interval (ms): When carousel is selected, set a time interval between your slides in milliseconds. By default, the slides play at a 7000 ms (7 seconds) interval.

Step 3: Preview the list

  • After you have finished the configurations, preview the category list on the right.

Step 4: Save the slider

  • When you're happy with the category list, click Add.
  • When you are back on the Pages page, click Publish.
"Deal of the day"

 

Step 1: Add the widget.

  • Click Add to add this widget (screenshot above).

Step 2: Go to "Deal of the day" page.

  • Click here to open it in a new tab.
  • Alternatively, open your Shopgate Admin in a new tab and navigate to "Marketing" > "Deal of the day."

Step 3: Configure a "Deal of the day" promotion.

Note: Time is in 24-hour format.
  1. Configure a new deal or view your current deals by following the instructions here.
  2. Make sure all promotions are added and up-to-date. They will now show up on the selected page of your mobile website and/or apps automatically.
Nested Category Filter

 

Step 1: Select a category with nested subcategories.

Step 2: Configure the filter.

  • Enter a Headline for your filter.
  • Choose 1, 2, 3, or 4 as your max levels of subcategory.
  • If a category has fewer levels of subcategories, only the available levels will be displayed.
  • Enter a label for each of the nested subcategories. These labels will be displayed in the filter.

Step 3: Save the filter.

  • When you're happy with your nested category filter, click Save.
  • When you are back on the Pages page, click Publish.
HTML code

 

Step 1: Enter your HTML code.

  • Enter a HTML code in the text editor in HTML mode.

Step 2: Test the code behavior.

  • Test your code in a code editing software. Make sure the code is correct and does not break your mobile shop.

 Step 3: Save the code.

  • When you're happy with your HTML code, click Add.
  • When you are back on the Pages page, click Publish.

 

Frequently Asked Questions 

Where can an image link to?

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

Within the 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 the difference between a product list and a product slider?

If configured with the same products, a product list and a product slider will display the same products. However, a product slider is smaller in height, while a product list can take up much more space and show more information.

A product slider is recommended to use on the homepage to save space. Product lists, by default, are used everywhere else to display products.

 

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