Footer Setting | SHOP Builder

4. EC + SC (EN).png

Use the new footer builder in SHOP Builder to show store-related content and make your online store more aesthetically pleasing.
This article will introduce the following:

⚠️ 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.

Step 1

Proceed to SHOPLINE Admin > [Online Store Design] > [Pages] and click the [Advanced Page/Edit] button to open the Advanced Page setup.Screen_Shot_2022-06-30_at_11.06.19_AM.png


Step 2

Click the Footer button.Screen_Shot_2022-07-04_at_1.19.24_PM.png

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.Screen_Shot_2022-07-04_at_3.03.25_PM.png

Click the Widget button to add more widgets.
*Note: Currently supports adding up to 4 widgetsScreen_Shot_2022-07-04_at_2.32.06_PM.png

There are three types of widgets available:

  1. Text
  2. Gallery
  3. Social icon
  4. Subscription
  5. Custom liquid



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).Screen_Shot_2022-07-04_at_2.36.34_PM.png


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. Screen_Shot_2022-07-04_at_2.37.41_PM.png


3. Social icon

In the social icon settings, you can insert the title, content, and social media URL link.Screen_Shot_2022-07-04_at_2.38.42_PM.png

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.Screen_Shot_2022-07-04_at_2.42.08_PM.png

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 | SHOP BuilderEN_NPB_subscription.png


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.custom_liquid_EN.png


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
  • Copyright
  • 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.Screen_Shot_2022-07-04_at_2.46.46_PM.png

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.

截圖 2023-09-11 下午6.00.48.png


iii. Copyright

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.Screen_Shot_2022-07-04_at_2.53.06_PM.png


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.Screen_Shot_2022-07-04_at_2.57.25_PM.png


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.Screen_Shot_2022-07-04_at_4.48.52_PM.png


Read more






Have more questions? Submit a request