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.
Step 1
In the SHOPLINE Admin, go to [Online Store Design] > [Mobile App Management] > [App Design]. In the "Current Template" section, click Set up next to "Mall template" to enter the editing page.
*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 the Top and Bottom Navigation bars, 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.
[Coming Soon]
*Notes on synchronization:
- Supports synchronizing 10 page widgets: Announcement Bar, Text, Gallery, Image with Text, Slider, Video Group, Category, Product Slider, Product List, and Product with Text.
- Widgets like Collapse Paragraphs, Blogs, Instagram, Subscriptions, Custom Liquid, and Countdowns 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.
Step 4
Click the Top Navigation and Bottom Navigation in the left menu and edit them on the right.
Please refer to the articles below for the setups.
[Coming Soon]
*The settings for Top Navigation, Bottom Navigation, and Overall Color Setting are shared with the Simple template. If a modification has been made in one template, the other template will also be automatically synchronized.
[Coming Soon] 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.
The current difference between synchronizing the page widgets and the app elements
- 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.
- 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.
- 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.
- Product with Text: The app will not synchronize product sets.
- Video Group: The app will not synchronize videos in full-width mode, auto-play, default mute, or with invalid URLs. No video ratio settings will be synchronized; the app will show videos in the default width and ratio and pauses video playbacks by default.
- Product List: 2 products per row on display by default.
Comments