⚠️ Before you begin:
- SHOP Builder currently only supports Ultra Chic, Kingsman, Varm, and Philia theme templates.
- After creating a page using SHOP Builder, the page can still be displayed even if you switch to other theme templates, but it cannot be edited and the layout may be messed up. Please take note of this before publishing the page.
1. Enable new footer builder
You must enable the new footer builder before designing the footer in the new page editor.
Proceed to SHOPLINE Admin > [Online Store Design] > [Pages] and click the [Advanced Page/Edit] button to open the Advanced Page setup.
Click the Footer button.
The page will display the activation message. Click on Enable new footer builder.
Select Enable to confirm using the new footer editor.
- Once you click "Enable", the preview panel on the right will display the new footer. The existing footer will not be affected.
- The existing online store footer will be replaced after publishing. Please make sure whether you want to update the existing footer before publishing.
2. Add widget
The system will assign 2 sets of text (e.g., About, Help) and 1 set of social icon (e.g., Contact) by default. Click on the widget to edit the content.
Click the Widget button to add more widgets.
*Note: Currently supports adding up to 4 widgets
There are three types of widgets available:
- Social icon
- Custom liquid
In the text settings, you can insert the title and content. You can further customize the text format (e.g., bold, italic, underline, URL link).
In the gallery settings, you can upload the image for desktop and mobile versions respectively. You can edit the image with Image Cropping, Mask, Image Alt text, and URL link settings.
*Note: It is recommended that the desktop version image width be greater than 2000 px, and the mobile version image width should be greater than 1080 px.
3. Social icon
In the social icon settings, you can insert the title, content, and social media URL link.
Click the icon on the left to drag and adjust the widget order. Click the trash bin icon on the right to delete the widget.
Scroll to the bottom of the settings to edit the widget padding and text alignment.
Click the Save button below to view the newly added widget on the preview panel. Or click the Preview button on the top right to preview it at the storefront.
The setting of the subscription widget on the footer is the same as that on the page. You can customize the title, content, placeholder, and button text.
For more detailed information on this widget, please refer to Subscription Widget | SHOP Builder.
5. Custom liquid
You can add the "Custom liquid" widget to insert customized texts and HTML scripts.
Please refer to Custom Liquid | SHOP Builder for details.
3. Other widgets
There are 4 additional widgets on the new footer editor. You can choose to enable them according to your needs.
- Payment icon
- Anti-fraud notice
- Language selector
- Currency selector
i. Payment icon
Enabling the payment icon to inform customers of the available payment methods.
Switch on the "Payment icon" toggle and select the payment service providers from the drop-down menu.
Choose the alignment of the payment icon.
Click the Save button below to view the newly added payment icon on the preview panel.
ii. Anti-fraud notice
Switch on the "Anti-fraud notice" toggle and enter the content. Click the Save button below to view the newly added anti-fraud notice on the preview panel.
*Note: The anti-fraud notice template is currently unavailable in English. Please make manual adjustments as needed.
Switch on the "Copyright" toggle and enter the content. Click the Save button below to view the newly added copyright notice on the preview panel.
iv. Language selector
Switch on the "Language selector" toggle. Click the Save button below to view the newly added language selector on the preview panel.
- The language selector will display the language supported in the online store.
- The "Hide specific language" settings are the same as the settings on the homepage. Please refer to the Homepage Settings for details.
v. Currency selector
Switch on the "Currency selector" toggle. Click the Save button below to view the newly added currency selector on the preview panel.
Once the settings above are confirmed, click Publish to let the customers view the newly updated footer at the storefront.
*Note: A pop-up notification will appear when publishing for the first time. Check "I understand" and select Publish with footer to replace the existing footer with the new one. The old footer editor will hence be disabled. Select Publish page only to keep using the existing footer.
- Announcement Bar / Header Settings | SHOP Builder
- Text Widget | SHOP Builder
- Gallery Widget | SHOP Builder
- Image with Text Widget | SHOP Builder
- Slider Widget | SHOP Builder
- Product List Widget | SHOP Builder
- Product Slider Widget | SHOP Builder
- SEO Settings | SHOP Builder