Custom Liquid | Page Builder (New)

_____35.png

You can add the "Custom liquid" widget when editing an advanced page to insert customized texts. You can insert the HTML scripts by yourself or refer to the liquid codes provided by SHOPLINE. 

This article will cover:

⚠️ 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. Add Custom Liquid Widget

Step 1

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

11.png

Step 2

Click the Widget button.

Screen_Shot_2022-08-01_at_4.47.14_PM.png

 

Step 3

Click the Custom liquid widget under "Extension."

Screen_Shot_2022-08-08_at_5.24.52_PM.png

Step 4

Insert customized text in the "Liquid" section. You may insert standard text, HTML scripts, or liquid codes.

Screen_Shot_2022-08-08_at_6.15.52_PM.png

 

If you have experience working with liquid, you may insert the following four types of liquid codes:

A. Shop

Liquid Code

Description

{{shop.currency}}

Shop's currency (Abbreviated as example: USD).

{{shop.domain}}

Primary domain of the shop.

{{shop.email}}

Shop email

{{shop.name}}

Shop name

{{shop.permanent_domain}}

Shop's domain. This will be your .shoplineapp.com domain. This code will not be applicable if you have a custom domain.

{{shop.url}}

Shop URL

{{shop.secure_url}}

The encrypted website URL according to HTTPS protocol.

{{shop.current_locale.code}}

Shop's current locale setting. Below are the value and input samples for each language.

Value for each language:

English / en
中文 / zh-hant
简中/ zh-cn
ไทย / th
Tiếng Việt / vn
日本 / jp
Melayu / my
bahasa Indonesia / id
Deutsch / de
Français / fr

 

Input sample (for English and Traditional Chinese):

{% if shop.current_locale.code == "en" %}
Content 1
{% elsif shop.current_locale.code == "zh-hant" %}
Content 2
{% else %}
Content 3(languages other than English and Chinese)
{% endif %}

{{shop.enabled_payment_types}}

Shop accepted credit cards. For example visa, master, amex, PayPal, prizm, tw_711_pay, tw_fm_pay, allpay, linepay, ecpay, esun, taishin, or sinopac.

{{shop.money_with_currency_format}}

Shop's price and currency. For example HK$.

{{shop.supported_locales}}

The format of locale settings currently supported by the shop (excluding the current locale setting) is the same as {{shop.current_locale}}.

{{shop.logo}}

Shop logo URL

{{shop.messages_enabled}}

Shop messages feature, if enabled, will execute liquid code.

{{shop.multicurrency_enabled}}

Shop's multi-currency feature, if enabled, will execute liquid code.

{{shop.supported_currencies}}

Currencies supported by the shop, including currency name, symbol, and abbreviation.

{{shop.features}}

Shop features

{{shop.custom_footer}}

Shop footer's HTML.

 

B. Page

Liquid Code

Description

{{page.url}}

Page URL

{{page.identifier}}

Identify the page where customers are located.

{{page.is_checkout_page}}

Checkout page. Liquid code will be enabled when customers are on the checkout page.

{{page.query_params}}

Query parameters

 

C. Theme

Liquid Code

Description

{{theme.key}}

Shop theme

{{theme.settings}}

Shop theme settings

 

Step 5

When setting up, you can click the Save button on the bottom, and a preview screen of the added custom liquid widget will display on the right. You can also preview it in the mobile version. 

Screen_Shot_2022-08-08_at_6.04.02_PM.png
Screen_Shot_2022-08-08_at_6.05.25_PM.png

 

Or click the Preview button at the top right to view the complete storefront.

Screen_Shot_2022-08-08_at_6.06.40_PM.png

 

Step 6

Once the above is completed, click the Publish button, and customers will be able to see the added content on this page at the storefront.

Screen_Shot_2022-08-08_at_6.07.20_PM.png

2. Notes

  • The system will filter or block certain liquids to prevent affecting parts of the HTML that may cause security or online store architecture issues.
  • It is recommended to have a professional customize the liquid in order to avoid any unexpected problems.
  • SHOPLINE does not provide liquid-related guidelines and advice.

Note before editing:

Since SHOPLINE is an online platform that requires regular updates for the system and design, we will not be responsible for any problems that occur with your custom liquid due to the website update. SHOPLINE recommends that you check the page frequently to ensure that your online store is functioning properly.

 

 

Read more



Have more questions? Submit a request

Comments