Liquid Syntax

What is Liquid syntax?

Liquid syntax is a feature that allows you to publish a website with 100+ pages having a similar format using a single page and referring to properties from a Notion database.
  • With liquid syntax, you can use merge tags and custom HTML to populate multiple pages with real and unique content.
  • You can also use conditional rendering to display select data using pre-defined conditions.
This allows you to produce multiple pages with a similar structure, which helps in use cases like eCommerce, directory sites, listing, etc.

FAQs

  • Where can I use Liquid syntax?
      • Liquid syntax can be utilized to publish multiple pages with a similar format, such as directory websites or e-commerce stores.
  • Is liquid syntax no-code?
      • Yes. You have to just mention your database properties between braces to replace them with the content.

Related Articles

  1. E-commerce and directory sites using Liquid syntax
  1. How we published 150+ pages under 10 hours using liquid syntax

What are merge tags?

Merge tags are used to refer to and populate data into your website from the database. For example, {%description%} will be replaced by the Description property from the database.
With the help of synced blocks from Notion, Merge tags help you dynamically display the data across multiple pages in your website without the need to manually duplicate and build each one from scratch.

Database content as a website element

Primary objective of liquid syntax is to convert the basic database content into beautiful website pages. You get to design and position content for one single page and refer data from a notion database and generate 100’s of similar pages with unique content.
This is how it works: Database → Liquid syntax → Website

How to use Merge Tags

To interpolate database properties as merge tags, use the
  • Lowercase name of the database property and replace spaces with underscores _
  • Surround it with {% %}
  • Enclose it with backquote \\ to mark it as an inline code block.

Examples

Below are examples of how to use Database properties.
  1. Twitter URL = {% twitter_url %}
  1. Data Description = {% data_description %}
  1. URL = {% url %}
  1. URL = {% url %}

Additional Notion Properties

In addition to database properties, you can also use additional Notion properties. Those are
  1. Liquid Syntax
  1. {% page_cover %}
  1. {% page_icon %}

Hiding blocks in Bullet

You can now hide any Notion blocks in the Bullet website (but still keep them visible in Notion). This includes shortcuts, unnecessary pages, and other items that you may wish to hide on your website.
To hide a page,
  1. Create a Toggle Block in Notion.
  1. Move all the elements that you want to hide inside the Toggle Block.
  1. Once all the elements are inside the Toggle Block, change the toggle block heading to bullet:hide
  1. After that, select the text and make it an inline code block.
notion image
« How do merge tags work? Conditionally rendering blocks »

What is conditional rendering?

Using conditional rendering, you can choose whether to display or hide certain blocks based on specific database properties.

How to set up conditional rendering based on database properties?

1.00
To render blocks conditionally, you will have to use toggle blocks. You have to use merge tags with an if condition prefixed in the toggle heading section like this {% if condition %}.
For the if condition to pass, the database property should be non-zero or a non-empty value, and if you are using a checkbox, it should be checked.

Use cases

  1. Render the Buy Now button if the stock is present
  1. Show the discount block if the coupon code exists in the database property.

Hiding toggle blocks in Bullet

You can choose to hide toggle blocks in the Bullet platform using bullet:Hide as the title of the toggle block.
When the title of the toggle block is "bullet:Hide", the entire toggle block will not be rendered on the website. You can use this to hide certain parts of the page that you want to use internally in Notion for managing the site but want to hide it in your live website.

How to Embed HTML inside Notion

You can use Notion code block to write any HTML inside Notion and render them in the webpage. You can use this to display any forms, images, newsletter signups etc.
To embed HTML inside Notion and render it on the webpage, you have to
  1. Create a code block in Notion
  1. Click on Caption
  1. Add caption as "bullet:HTML". Bullet will automatically embed any HTML code inside this section in the specific part of the webpage.
1.00
The above code utilizes a combination of custom HTML embed and merge tags. See how {% page\_cover %} is used inside the HTML img tag so that it renders page\_cover in the body of the website.