Support Center

Page widgets explained

Follow

 

Page widgets are supported on Shopgate.

In this article, you will find out how to use widgets to build a page.

 

Topics covered in this article:

  1. What is a page widget
  2. How to use a page widget
  3. Frequently Asked Questions (FAQ)

 

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

 

 

 

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

Come in various sizes and looks, widgets can be used to create a unique and impressive look. When pressed, each widget can open a category, a list of products, search results, and many other pages.

 

 

2. How to use a page widget

To use the widget system, log into your Shopgate Admin page:

  1. Navigate to Design >  Pages.
  2. You will find a drop down "Add a new widget" on the right side.

 

There are several different widgets to choose from:
Image Image Slider Text Editor
Category List Product List Product Slider
"Deal of the day" Nested Category Filter HTML code
     

 

 

1.

 

 

Step 1: Choose a size for the image.

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 (this is not "Rotate")
  • When you're happy with the image, click  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 the Add button at the bottom of the window.
  • When you are back on the Pages page, click Publish

 

 

2.

 

 

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  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 come up in a search result

Step 5: Add another image to the slider.

  • click  on top to add an image
  • Repeat the steps above to configure this image

Step 6: Configure slider behaviors

  • Auto play Slide 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
  • Auto play interval (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 at the bottom.
  • When you are back on the Pages page, click Publish

 

 

3.

 

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 at the bottom.
  • When you are back on the Pages page, click Publish

 

 

4.

 

 

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 on, 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 at the bottom.
  • When you are back on the Pages page, click Publish

 

 

5.

 

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 at the bottom
  • When you are back on the Pages page, click Publish

  

 

6.

 

 

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.
  • Auto play 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 at the bottom.
  • When you are back on the Pages page, click Publish

  

 

7.

 

 

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.

  

 

8.

 

 

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

  

 

9.

 

 

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 at the bottom.
  • When you are back on the Pages page, click Publish

  

 

3. Frequently Asked Questions (FAQ)

3.1 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  

 

 

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

 

 

  

Comments