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:
- SHOP Builder currently only supports Ultra Chic, Kingsman, Varm, and Philia themes.
- After creating a page using SHOP 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.
Step 2
Click the Widget button.
Step 3
Click the Custom liquid widget under "Extension."
Step 4
Insert customized text in the "Liquid" section. You may insert standard text, HTML scripts, or liquid codes.
If you have experience working with liquid, you may insert the following four types of liquid codes:
Ａ. 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
Input sample (for English and Traditional Chinese): {% if shop.current_locale.code == "en" %}
|
|
{{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.
Or click the Preview button at the top right to view the complete storefront.
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.
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
Comments