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 your 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 styles, widgets can be used to create a unique and impressive look for your shop and brand. 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
- Log into your Shopgate Admin.
- Navigate to Design → Pages.
- You will find a drop-down labeled "Add a new widget" on the right side.
There are several different widgets to choose from:
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.
- Configure a new deal or view your current deals by following the instructions here.
- 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.