[Coming Soon] Footer Setting | Page Builder (New)

Plan_EC%2BSC.png

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 themes.
  • After creating a page using the new page builder, the page can still be displayed even if you switch to other themes, 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 toSHOPLINE 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.
Screen_Shot_2022-07-04_at_1.18.31_PM.png

 

Select Enable to confirm using the new footer editor.

*Note:

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

Screen_Shot_2022-07-04_at_1.18.42_PM.png

 

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 widgets

Screen_Shot_2022-07-04_at_2.32.06_PM.png

 

There are three types of widgets available:

  1. Text
  2. Gallery
  3. Social icon

Screen_Shot_2022-07-04_at_2.34.39_PM.png

 

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.

Screen_Shot_2022-07-04_at_5.24.17_PM.png

 

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.

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

Screen_Shot_2022-07-04_at_2.46.46_PM.png

 

Choose the alignment of the payment icon.

Screen_Shot_2022-07-04_at_2.48.16_PM.png

 

Click the Save button below to view the newly added payment icon on the preview panel.

Screen_Shot_2022-07-04_at_2.49.48_PM.png

 

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.

Screen_Shot_2022-07-04_at_2.53.06_PM.png

 

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.

*Note:

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

Screen_Shot_2022-07-04_at_2.57.25_PM.png

 

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.

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

Comments