Footer Setting | Page Builder (New)


Use the Footer design in the new page editor to show store-related content and make your online store more aesthetically pleasing.
This article will introduce the following:

⚠️ Before you begin:

  • The new page builder currently only supports Ultra Chic, Kingsman and Varm theme templates.
  • After creating a page using the new page 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.

Step 1

Proceed to SHOPLINE Admin > [Online Store Design] > [Pages] and click the [Advanced Page/Edit] button to open the Advanced Page setup.



Step 2

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:

  1. Text
  2. Gallery
  3. Social icon
  4. subscription



1. Text

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



2. Gallery

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.



4. Subscription

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 | Page Builder (New)EN_NPB_subscription.png


3. Other widgets

There are 4 additional widgets on the new footer editor. You can choose to enable them according to your needs.

  1. Payment icon
  2. Copyright
  3. Language selector
  4. Currency selector


1. Payment icon

Enabling the payment icon to inform customers of the available payment methods.

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



2. Copyright

Turn on the "Copyright" toggle and enter the content. Click the Save button below to view the newly added copyright notice on the preview panel.



3. Language selector

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



4. Currency selector

Turn on the "Currency selector" toggle. Click the Save button below to view the newly added currency selector on the preview panel.



4. Publish

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.




Read more






Have more questions? Submit a request