You can use the Mall template to quickly synchronize the homepage of your online store to the app with just one click. Synchronize the latest information of the online store to the app in real-time without editing back and forth.
*Note: The current Mall template only syncs the homepage content that supports the SHOP Builder. The app will not support synchronization if your homepage is not using SHOP Builder.
This article will cover the following:
1. Setup steps
Step 1
Go to SHOPLINE Admin > [Shopper App Management] > [App Design] > [Homepage Design] > [Current Template]. Click Set up next to "Mall template" to enter the app page editor.
*Note: If a "Page/component update alerts" pop-up window appears on the App Design page, please click "upgrade now" to upgrade the feature in the Admin. If you click "Cancel upgrade," the online store homepage content will not be synchronized.
Step 2
When you reach the Mall template editing page, you will see a pop-up reminder. Click Got it to close the window.
Step 3
The elements menu on the left side and the preview area in the center will automatically synchronize the online store homepage content. Besides Top/Bottom/Sidebar Navigation, Main Tab, Floating Action Button and Live Floating Action Button, other synchronized elements cannot be re-edited and set on this page. Please go to [Online Store Design] > [Pages] to modify the widgets.
The content in the preview area is consistent with the display on the app. If you see a blank page in the preview area and a prompt that there are no supported elements, it may be that the online store homepage is not using the SHOP Builder, or the widgets on your homepage cannot be synchronized.
Step 4
Click the elements in the left menu to edit. Please refer to the articles below for the setups.
- Top Navigation | Shopper App
- Bottom Navigation | Shopper App
- Sidebar Navigation｜Shopper App
- Main Tab Settings｜Shopper App
- Floating Action Button | Shopper App
- Live Floating Action Button | Shopper App
*The settings for Top Navigation and Bottom Navigation are shared with the Simple template. If a modification has been made in one template, the other template will also be automatically synchronized.
Step 5
Click Theme Settings on the left to configure the color and product settings. Please refer to the article for the setups: Theme Settings | Shopper App.
*The settings for Theme Setting are shared with the Simple template. If a modification has been made in one template, the other template will also be automatically synchronized.
Step 6
Click Update and use at the top right to synchronize the updates. If your app has been updated to the latest version, after restarting the app, the homepage in the app will be updated immediately. If the app has not been updated to the newest version, please update it first to view the synchronized homepage.
*Notes:
- Customers who have not updated to the latest version of the app will still see the original homepage in the Simple template. Customers who have updated the new app version will see the latest template content. Therefore, it is recommended that you maintain the original homepage content in the Simple template for some time.
- When using the Mall template, if your online store's homepage is switched from the page supporting the New Page Builder to a normal page, the app homepage will display the content of the original homepage. The homepage content will not be synchronized.
- Updating the synchronizable widget content on the online store's homepage will be synchronized to the app.
Step 7
In the "Current Template" section on the [App Design] page, you will find an "In Use" label next to the template you are using for the app.
2. Display differences with online store widgets
i. Notes on synchronization
- Supports synchronizing 10 page widgets: Announcement Bar, Text, Gallery, Image with Text, Slider, Video Group, Category, Product Slider, Product List, Product with Text, Collapse Paragraph, Category Tab, and Countdown.
- Blogs, Sales Combo, Instagram, Subscriptions, and Custom Liquid are currently not supported for synchronization.
- Headers and footers are currently not supported for synchronization.
- Only the settings in Color > Announcement Bar in the store settings can be synchronized. The rest of the settings are currently not supported for synchronization.
ii. Differences with online store widgets
| i. Announcement Bar | The title is aligned to the left. Ellipsis ("...") appears if the text exceeds a line. |
| The element will not be synchronized if there is no title. | |
| ii. Slider | The app will not synchronize the "Font Size" and "Padding" settings. |
| The app will not synchronize button background colors or button text colors. | |
| When "Text Position(Mobile)" is set to "Below media", the text color will be fixed in black. | |
| iii. Image with Text | The app will not synchronize titles without images. |
| After setting the GIF image, the app will show the first GIF image by default. | |
| iv. Category | The app will not synchronize the element when the category has no images (or vice versa) or the products do not set images or categories. |
| v. Video Group | The app will not synchronize videos in minimal mode, auto-play, default mute, or the "Padding" settings. |
| The play button color will follow [App Design] > [Theme Settings] > [Color]. | |
| The app will pause video playbacks by default. | |
| The app will not synchronize videos with invalid URLs. | |
| Facebook videos currently do not display cover images in the app, but customers can still watch the video normally after tapping the play button. | |
| vi. Product List | 2 products per row on display by default. |
| vii. Category Tab | Tag colors will follow [App Design] > [Theme Settings] > [Color]. |
| The element will not display if no products or categories are assigned. | |
| viii. Countdown | The app will not synchronize the "Padding" setting. |
| When "Customize Widget Colors" is disabled, the button color in the app will follow [App Design] > [Theme Settings] > [Color] instead of the online store settings. | |
| The element will not display if the campaign period is not configured. |
Comments