Add widgets in the Mobile CMS

Mobile CMS on the Admin Console allows you to implement and change your mobile app user interface based on the user interface of the CMS. The implementation of this functionality for the mobile app depends on how you and your partner configure the Mobile SDK.

If configured, you can use widgets to customize your Shop, Search, and Account pages.

The four widgets you can add to your mobile pages are Link List, Product Carousel, Search History, and Slideshow.

Link List

The link list widget lets you link out to various pages in the app for your users. You can choose to display links in a list or grid view.

1. Click the Add icon on a page in the Mobile CMS
2. Select Link List in the Mobile Elements section.
3. Select a link Layout of List or Grid.
4. Click Add to add a link.
5. Add an Icon for the link if desired.
6. Select the Type of link you wish to include (see Available links for details).
7. Click Done beside the link you added.
8. Repeat steps 4 to 7 as needed.
9. Click Edit beside each link to modify its details.
10. Click the Delete icon to remove a link.
11. Click Save when you are done.

Available links

• Categories (Shop Categories) – The search page with products that can be filtered.
• Quick Order – The search and bar code scan to quickly locate items. Users can then tap Add to cart & checkout to place the order. You must sign in before you can checkout.
• Brands (Shop Brands) – The list of available brands, ordered alphabetically.
• Search – The search and bar code scan.
• *Order History (Orders) – The user's order history.
• *Lists – The user's saved lists.
• *Saved Orders – The user's saved orders.
• Location Finder – The list of shop locations.
• *Saved Payments (My Saved Payments) – The user's saved payment methods.
• *Invoices (Invoice History) – The user's invoice history.
• *Request for Quote (My Quotes) – The user's requested quotes.
• *Change Customer (Change Customer/Delivery Method) – The page for users to change their default billing address, shipping method preference, and shipping address.
• *View Account on Website – Only available for the Account page. Opens the user's account information on their device's default browser.
• Settings – The user's Settings page.
• Sign Out – Only available for the Account page. Signs the user out of their account for the domain.
• Custom – Manually input a URL link. Opens the entered URL on the default browser of the user's device.

Product Carousel 

The Product Carousel widget displays a horizontal, scrollable set of products, each linked to their respective product detail page. 

Carousel Types

• Cross Sells – Cross-sell products based on web configurations.
• Featured Category – Products from the selected category.
• Recently Viewed – The user's most recently viewed products.
• Top Sellers – The top selling products from all categories, selected categories, or customer segments.

Add a product carousel widget

1. Click the Add icon on a page in the Mobile App CMS.
2. Select Product Carousel in the Mobile Elements section.
3. Enter the Title for the carousel.
4. Select a carousel type. Depending on your selection, additional fields may display.
   • • Cross Sells – No additional fields.
     • Featured Category – Use the Select Category section to locate and select the category you wish to feature in the carousel.
     • Recently Viewed – No additional fields.
     • Top Sellers – Choose to display products from All Categories, Selected Categories, or Customer Segments. If you choose Selected Categories, use the Select Category section to locate and select one or more categories from which to display top selling products.
5. Select the Price checkbox to display prices in the product carousel.
6. Click Save.

Search History

The Search History widget displays the user's previous search terms to quickly see previous search results.

1. Click the Add icon on a page in the Mobile App CMS.
2. Select Search History in the Mobile Elements section.
3. Enter the Title.
4. Select the Number of Previous Searches (1-10) to display in the section.
5. Click Save.

Slideshow

You can set several slides to rotate in the slideshow widget. You can link each slide (image or color) to a specific URL to display promotions or direct users to other features outside your mobile app. Once the last slide appears, the slideshow rotates back to the first slide. The user can also manually forward slides.

1. Click the Add icon on a page in the Mobile CMS.
2. Select Slideshow in the Mobile Elements section.
3. Click the Settings tab.
4. Set the Timer Speed (ms), which determines how long each slide displays (default is 10000).
5. Set the Animation Speed (ms), which determines how quickly the sliding animation takes to get to the next slide (default is 500).
6. Click the Content tab to configure the slides.
7. Click Add to add a new slide.
8. Select a Background of Image or Color.
   • • If you select Image, click Add Image to select or upload the image of your choice and click Choose.
       • 1250 x 500 pixels is the recommended image size.
       • Images are resized to fit the width of the device with an aspect ratio of 5:2. The top and bottom of the image will be cut off if necessary to maintain the aspect ratio.
   • If you select Color, click the Color Swatch to select or enter your color choice. You can input a Hex or RGB code and adjust the A value to set the color's opacity.
9. Add the URL Link to which the user is directed when they tap the slide.
10. Enter the main Heading text and select or enter its Heading Color that overlays the selected background.
11. Enter the Subheading text and select or enter its Subheading Color, if desired.
12. Choose a Text Alignment of Left, Center, or Right.
13. Click Done beside the slide you added.
14. Click Edit beside each slide to modify its details.
15. Click the Delete icon to remove a slide.
16. Click Save when you are done.