Using Page Widgets

Step 1: Choose an image size.

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

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.

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

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.

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.

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.

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.

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.

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.

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.

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.