Documentation is under construction
Our documentation is currently under construction. We're working diligently to provide you with comprehensive and helpful resources, but it may take a little more time to complete.

Getting started

Liquify Starter Theme
We strongly advise beginning with the Liquify Starter Theme, which comes equipped with essential Shopify pages (such as Cart, User Account, Search, etc.). If you're already working on a project, it's advisable to copy these pages and sections into your new Liquify project. Get the Theme here.

Core Principals

Liquify uses Webflow's Custom Attributes as its foundation. Through the instructions contained in the Attributes, we understand which Liquid variables you want to use, where and how. In doing so, Liquify relies on Shopify's theme framework and includes all essential pages. It's best to begin with the Liquify project starter kit.

What is liquid?

Shopify Liquid is a template language used by the Shopify e-commerce platform to customize and render dynamic content for online stores. It's a lightweight, easy-to-learn language that allows developers and store owners to control how data is displayed and organized on their Shopify store's pages. Liquify gives you access to all Shopify Liquid functionalities, enabling you to visually write Liquid code using custom attributes.

Shopify Liquid templates consist of a combination of tags, objects, and filters. Tags are used to control the logic and structure of the template, while objects represent data like products, collections, and customers. Filters are used to modify and format data before it's displayed.

Using Liquid, you can create custom storefronts, build unique product pages, design custom themes, and tailor the user experience to meet your specific needs on the Shopify platform. It's a flexible and powerful tool for customizing the appearance and functionality of an online store.

Webflow custom attributes

You can access custom attributes through the settings panel of the selected element. A custom attribute always requires a name, with values being optional. Within the name, you specify the type of data you wish to display (e.g. li-object, li-settings, li-if, li-for, etc.). Within the value, you define the content of the element (e.g. product.title, collection.description, cart.items, etc.). In the subsequent steps, you will discover the various types of li- tags you can employ.

Webflow
Name
li-object
 
=
Value
product.title

Important to Keep in mind

Here are some important tips.
  1. Consider Webflow as the blueprint for your store. Work with placeholders and add content later in Shopify. Your goal is to maintain a small, high-performing Shopify theme.
  2. You don't need to dive deeply into Liquify attributes. Your go-to resource is the Shopify documentation, since you'll be working with Shopify Liquid. You can also find solutions in the Shopify forum or documentation and then reconstruct them using Liquify tags directly in Webflow.
  3. All elements must be inside within li-sections. Failing to do so can cause errors and prevent proper functioning of Shopify 2.0.
  4. At times, it's beneficial to debug directly within Shopify before implementing it in Webflow. For instance, when searching for the correct metafield output, this approach allows you to instantly verify the results in real-time without waiting for the conversion process.
  5. When labeling settings, use names that your customers can easily understand and that clearly describe what the setting controls. You can also reuse these names in other sections. For instance, consistently labeling a headline as "Headline."

Template Structure

The Liquify starter Template comes with a pre-defined structure for your Template. All the pages shopify needs for a working theme are already setup and working. The pages are tagged with a li-page tag which defines which pages refers to which purpose. These tags are already applied in our Starting theme.

Webflow
li-page
=
product

Pages without a li-page tag are considered as Shopify pages and are converted as page.templates. When you don't want a site to be converted, simply add the tag remove :

Webflow
li-page
=
remove

To unlock the potential of Shopify 2.0 (available upon our app's approval), make sure all your page content is organized into sections (tagged with li-section tag, learn more here). The page structure should match the image below. Just remember not to change the class of the utility element, .main-wrapper. You can always rearrange everything inside ".main-wrapper" in Shopify later on.

Liquid Objects

The CMS content of your shop can be accessed using objects such as product, collection, or cart. You can place these objects in Webflow using the li-object tag. So a custom attribute for the product Title would look like the following:

Webflow
li-object
=
product.title

This will be converted into:

Shopify
<p>{{ product.title }}</p>

In this example, the product is the object, and you can access detailed information using dot notation (for instance product.title or product.selected_variant.price). You can explore all the available Shopify objects here. Additionally, don't forget to check out the Shopify Cheat sheet for a more condensed reference.

Positioning

With an additional modifier, you can also determine the object's positioning. For example, on a product link:

Webflow
li-object:href
=
product.url

This will be converted into:

Shopify
<a href="{{ product.featured-image }}"><a>

For the positioning you can use all the HTML attributes which are available or create your own data-attributes. Here are some common HTML Attributes:

  • src (for images)
  • class
  • value
  • placeholder (for forms)
  • alt (for images)
  • width
  • height
  • text (It's not an HTML attribute; however, both li-object and li-object:text yield the same results)
  • style (for this attribute it makes more sense to use li-attribute)
  • name

Tipp:
You can also place multiple objects with different modifiers on a single element, such as a src and alt attribute.

Liquid Tags

Liquid tags, in the context of the Shopify Liquid template language, are special markers enclosed in curly braces and percentage signs, like {% ... %}. These tags are used to perform various control and logic operations within the template. Liquid tags are responsible for executing specific actions, such as loops, conditionals, and more, to dynamically generate content or perform operations on the data.

To use this functionality in Webflow, we have prepared the following tags. These tags will always wrap the div they are attached on.

You can't apply multiple liquid tags (li-for, li-fd, li-unless) to one element. If you need that, you should use the :inside modifier to display the tag inside the div it's applied.

Lists (iteration)

When you need to iterate over an array, such as a list of products or product tags, you can employ the li-for tag. This tag will duplicate the attached element. Within a loop, you have access to the object you're iterating through.

For instance, when looping through a list of products, you can retrieve all the product information using dot notation (e.g. product.price).

Webflow
li-for
=
product in collection.products

This will be converted into:

Shopify
{% for product in collection.products %}
   <div>{{ product.price }}<div>
{% endfor %}

For the positioning you can use the :inside modifier. Then the converted code will look like this:

Webflow
li-for:inside
=
product in collection.products

This will be converted into:

Shopify
<div>
   {% for product in collection.products %}
      {{ product.title }}
   {% endfor %}
</div>

If and unless (Conditional)

li-if: Using this tag, you can show an element when a specified condition is met. For instance, you can verify the availability of a product, and if the condition is true, you can display the "Add to Cart" button or a specific tag.

Webflow
li-if
=
product.available != true

This will be converted into:

Shopify
{% if product.available != true %}
   <div class="product_tag">Sold out</div>
{% endif %}

Therefore, Shopify gives you a bunch of operators you can use to check if data is true or contains something. Here is a list of all the operators:

  • ==
  • !=
  • >
  • <
  • <=
  • >=
  • or
  • and
  • contains

li-unless: With this tag, you check if the condition is false. The functionality is the same as li-if.

Webflow
li-unless
=
product.available == true

This will be converted into:

Shopify
{% unless product.available == true %}
   <div class="product_tag">Sold out</div>
{% undunless %}

If else

When you want to display an element which should meet different conditions, you can wrap these elements with the li-if:wrapper tag. Inside the wrapper, you put the elements with the different li-if tags. When the last div inside the wrapper has no li-if tag, then it will be considered as else.

Webflow
Coming soon
li-if:wrapper
=
 

This will be converted into:

Shopify
<div> (Element where the li-if:wrapper was attached)
   {% if product.price < 50 %}
      <div>Cheap Product</div>
   {% else if product.price == 50 %}
      <div>expensive Product</div>
   {% else %}
      <div>Very expensive product</div>
   {% endif %}
</div>

Liquid Filters

With liquid filters, you can modify the output of your content. You can calculate values, format a string (text) and so much more. You can find a list of all filters here or in the Shopify Cheat sheet.

Filters can be applied to a li-object value by using a pipe symbol | followed by the desired filter. Here's an example of how to show the product price in the store's currency.

Webflow
li-object:text
=
product.price | money

This will be converted into:

Shopify
<p>$100.00</p>

Most common filters

Below, you'll find some of the most frequently used filters by us, giving you an idea of the possibilities.

  • | money
  • | date: '%B %d, %Y'
  • | plus: 15
  • | img_url: master

Filters may seem overwhelming initially, but you can find clear documentation for all their functionalities in the Shopify Docs.

Tipp:
You can also place multiple filters on one object. For example, li-object = product.price | money | plus: 15

Liquid Settings

In addition to Shopify objects, you can implement settings that allow your Shopify content editor to modify both the content and appearance directly within Shopify. To achieve this, we've introduced the li-settings tag. Using a modifier, you can access all of Shopify's provided Settings Inputs.

In Webflow, we use the content in the element as a pre-filled placeholder. The custom attribute's value corresponds to the settings' name in the Shopify editor for easy identification. So you can define it however you want.

Webflow
li-settings:text
=
Headline

This will be converted into:

a shopify store theme screen with a diagram of a hockey game

Setting Elements

This is a list of li-settings modifier you can use. Each modifier gives you different input options in the Shopify Editor.

  • li-settings:text
  • li-settings:textarea (creates a bigger input area)
  • li-settings:richtext (creates a bigger input area with formatting options)
  • li-settings:image (this will automatically add an alt tag)
  • li-settings:url
  • li-settings:checkbox (can hide the element which it's applied to)
  • li-settings:collection (apply it to a product item to display a category)
  • li-settings:blog (coming soon)
  • li-settings:article (coming soon)
  • li-settings:product (coming soon)
  • li-settings:product_list (coming soon)
  • li-settings:color (coming soon)
  • li-settings:number (coming soon)
  • li-settings:range (coming soon)
  • li-settings:html (coming soon)

Sections

Each li-settings tag needs to be enclosed within a section. For sections, we've introduced the li-section tag, which you can apply to your Webflow sections. You have the flexibility to choose a name for it, with a maximum limit of 30 characters.

Webflow
li-section
=
Section Name

Block

Blocks offer a dynamic method for repeatedly adding a single element, and they can include all the options mentioned earlier. Think of them as a means to infuse genuine dynamic functionality into some of your elements. For instance, you can use blocks to construct a dynamic slider by adding the block to a single slide of the slider.

In doing so, each block created by your customers will result in a new slide being generated. It's important to note that, similar to sections, options can be added within blocks, but not directly to the block itself. To create a block, simply add the attribute:

Webflow
li-block
=
Block Name
Blocks in the Shopify Theme Editora shopify store screen of a website with a picture of a man playing hockey

Forms

Shopify offers a range of forms tailored for various purposes, including login, signup, cart, address, newsletters, and many more. To create forms in Webflow, use the li-form tag, which should be applied to the corresponding form element. In the value field of the custom attribute, specify the form type.

Additionally, to direct users to a specific page after form submission, you can include another attribute with the modifier :return_to.

Webflow
li-form
=
contact
li-form:return_to
=
/pages/thank-you

This will be converted into:

Shopify
{% form 'customer', return_to: '/pages/newsletter-danke', class: 'footer_form' %}
      // your form content
{% endform %}

In this example, you'll also notice that a class is passed to this element. We retrieve the class from the element to which the form tag is applied.

Within the form, you can incorporate input elements tailored to the specific form you wish to create. These inputs require unique names, which you can reference in the Shopify documentation and soon in our own documentation.

Most forms are already included in the Starter Template, making it convenient for you to reference them whenever needed.

Snippets

To make your Shopify theme code even cleaner we implemented the tag li-snippet. You can think about it as symbols in Webflow. The Snippet will get its own file in the theme directory and can be pleaced multiple times all over your theme. This makes sense, for example for the product item or the global styles element. Just make a symbol out of the element you want to use somewhere else. Than add the li-snippet tag with value you can choose (Character limit 15)

Webflow
li-snippet
=
product_item

When using li-object within a snippet, it's essential to pass the corresponding object into that snippet. Just add another custom Attribute to the Element. For instance, you can use our modifier to pass the product into the snippet. Here's an example of how to do it:

Webflow
li-snippet
=
product_item
li-snippet:product
=
product

This will be converted into the follwing. The Content of the snippet will be placed in a snippet file inside of the snippet folder in your theme.

Shopify
{% render 'product_item', product: product %}

Disclaimer:
While not mandatory, following this step enhances the structure of your theme and makes it more reader-friendly for other Shopify developers.

a screen shot of a web pagea screen shot of a computer screen with a text description. its shopify

Miscellaneous

During the development, we got some ideas how to enhance the capability oft the process. Therefor, we implemented a view tags. The first one we want to present is li-attribute. This tag alowse us to use reserved attributes like class or src on every element. This is a example on how to use it:

Webflow
li-attribute:class
=
{% if product.available %}tex-color-green{% endif %}
Webflow
li-attribute:id
=
{% if product.available %}available{% endif %}

Disclaimer:
At this time, combining li-object and li-attribute is not possible. If you require this functionality, simply enclose the element within a div and apply the li-attribute to that div instead.

Next

Liquify Elements

Use Liquify elements to enhance the user experience for your customers.

Attribute Copied!