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.

Liquify Elements

Introduction

Our provided tags (li-object, li-for, li-if etc.) offer the capability to construct nearly any desired Shopify logic. However, for more intricate components such as the Mini-Cart or Variant swatches, we've introduced li-element, li-js-object and li-js-if tags. These tags simplify the process, allowing you to create complex components more easily. They harness real-time data from Shopify APIs, enabling seamless data updates without requiring the site to reload. This significantly enhances the overall e-commerce experience. In the following steps, we furnish the initial Liquify building blocks to craft exceptional e-commerce experiences.

Alpine JS

Alpine is a robust, minimal tool designed for crafting behavior directly within your markup, serving as a modern equivalent to jQuery. Simply insert a script tag (Already inside the starter Template), and you're ready to begin. We leverage Alpine JS to offer you the foundational elements for creating AJAX behavior within your cart or variant selector.

Moreover, Alpine JS extends its assistance to other JavaScript functionalities as well. To explore the full range of features that Alpine JS offers, we recommend referring to the documentation and installing the Alpine JS Chrome extension. This extension allows you to inspect the data provided by the Shopify API and its associated objects, facilitating a comprehensive understanding of their structure and content.

Webflow
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

li-object vs li-js-object

Both tags work similarly by displaying information from the Shopify CMS. The regular li-object is used for Liquify functionality, while the li-js-object accesses Shopify's API responses via Alpine JS. We currently use the li-js-object in various components and plan to implement more in the future. Here is an example on how the two tags get converted:

Webflow
li-object
=
product.title

This will be converted into:

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

And this is an example for li-js-object:

Webflow
li-js-object
=
product.title

This will be converted into:

Shopify
<p x-text="product.title"> Placeholder </p>

li-js-price

As we can't apply Liquify filters in our Alpine JS Data, we have to come up with alternative methods. This special object Tag will display a number in the store's currency.

Webflow
li-js-price
=
product.price

Coming Soon: You can also use the same position modifier like :class, :name, :src etc. For more information, please check out the li-object documentation.

li-js-if

If you want to hide things based on certain rules, you can use li-js-if with Shopify's Date API. For example, the original price when a discount is applied.

Webflow
li-js-if
=
product.price < product.original_price

This will be converted into:

Shopify
<template x-if="product.price < product.original_price"> Placeholder </template>

li-element

Sometimes, we use the li-element in Webflow for special purposes to make things easier. We've established predefined functionalities for these tags, with plans for further expansion in the future. For instance, the "Add-to-cart" element is given a special tag called li-element="add-to-cart". In the next sections, we'll explain how these are commonly used.

Mini Cart

The Mini-Cart is a widely used component in the E-Commerce realm. It pops up when a product is added to the cart and usually slides in from the right side. We avoid using the Webflow-Ecommerce Elements in Webflow due to its excessive and unnecessary JavaScript load we don't need in Shopify. Instead, in Our Starter Theme, you'll discover a header containing all the necessary elements. The is-open class triggers the element to open. You can style the transition the way you want.

Before we explore the component further, here are some versatile elements that can be used throughout your entire Webflow project:

Add-to-Cart

Place this element within a product item. It adds the current variant to the cart and triggers the Mini-Cart to open upon clicking.

Webflow
li-element
=
direct-add-to-cart

Mini-Cart Toggle

This element toggles the mini-cart's visibility upon clicking and can be positioned anywhere within the theme. Typically, it's used as a cart icon in the navbar for easy access.

Webflow
li-element
=
mini-cart-toggle

Mini-Cart Item Count

This element displays the current number of items in the cart and can be positioned anywhere within the theme. It's commonly used to show the item count in the navbar.

Webflow
li-element
=
mini-cart-item-count

Mini-Cart Empty

This element is displayed when the mini-cart is empty and can be placed anywhere within the theme.

Webflow
li-element
=
mini-cart-empty

Mini-Cart Component

Discover all the essential elements required for and usable within the mini cart here. The grey outlines show how the elements should be nested within one another.

mini-cart: This element holds and shows the component. Every following element should go inside this one.

Webflow
li-element
=
mini-cart
mini-cart

mini-cart-container: This element is the actual Mini-Cart and appears animated when the is-open class is applied. You can only position this element once on a page. It needs to be inside the mini-cart

Webflow
li-element
=
mini-cart-container

Within this element, use the li-js-object to showcase the cart information. Here's an example of the objects available for use:

  • total.price
  • total.discount
  • total.original_total_price
mini-cart-container

mini-cart-full: This element should be placed within the mini-cart-container element and will be shown when the cart has items inside. It needs to be inside the mini-cart-container

Webflow
li-element
=
mini-cart-full
mini-cart-full

mini-cart-item: This element should be placed within the mini-cart-full element and represents an individual item within the Cart. It needs to be inside the mini-cart-full

Webflow
li-element
=
mini-cart-item

Within this element, use the li-js-object to showcase product information. Here's an example of available objects for use:

  • product.title
  • product.featured_image
  • product.vendor
  • product.price (name: li-js-price)
mini-cart-item

mini-cart-item-increase: This element should be nested inside the mini-cart-item and can be added to a div to increment the product quantity in the cart. Change the Cursor to pointer for a better usability. It needs to be inside the mini-cart-item

Webflow
li-element
=
mini-cart-item-increase

mini-cart-item-decrease: This element should be nested inside the mini-cart-item and can be added to a div to decrease the product quantity in the cart. Change the Cursor to pointer for a better usability. It needs to be inside the mini-cart-item

Webflow
li-element
=
mini-cart-item-decrease

mini-cart-item-remove: This element should be nested inside the mini-cart-item and can be added to a div to remove the product from the cart. Change the Cursor to pointer for a better usability. It needs to be inside the mini-cart-item

Webflow
li-element
=
mini-cart-item-remove

mini-cart-item-quantity: This element should be placed within the mini-cart-item and connected to a div. The div will be replaced by an input field, allowing the customer to adjust the quantity of the item. It needs to be inside the mini-cart-item

Webflow
li-element
=
mini-cart-item-quantity

Product Variant Swatch

We've developed a specialized component for both the Product Page and Product Item to enhance usability. The Product Variant Component enables you to generate a variant swatch, allowing variant selection without page reloading. It shows you what variant you're looking at and lets you change details when you choose a different one. Below, you'll find all the elements you can use.

Product Variant Component

Here you can find all the Elements which are needed and can be used inside the Product Variant Component. The grey outlines show how the elements should be nested within one another.

product-variant-container: This Element wraps and renders the component. All the following Element need to be inside this Element.

Webflow
li-element
=
product-variant-container
product-variant-container

add-to-cart: This element enables the "add-to-cart" function. Whenever someone clicks on it, the currently selected variant will be added to the cart. It needs to be inside the product-variant-container

Webflow
li-element
=
add-to-cart

add-to-cart-quantity: This Attribute should be added to an input field. It allows your customers to adjust the quantity before adding the variant to the cart. It needs to be inside the product-variant-container

Webflow
li-element
=
add-to-cart-quantity

product-options-loop: This Element generates a list containing all the options created for that specific product (e.g., Size, Color, etc.). It needs to be inside the product-variant-container

Webflow
li-element
=
product-options-loop
product-options-loop

product-options-name: This Element shows the name of the option, such as "Color." It needs to be inside the product-options-loop

Webflow
li-element
=
product-options-name

product-option-loop: This element generates a list of all option values inside the option (e.g., Red, Green, etc.). It needs to be inside the product-options-loop

Webflow
li-element
=
product-option-loop
product-option-loop

product-option-input: This Element represents a single option value, for example, "red," "blue," etc. When the Option Value is not available, the class is-not-available will be added. It needs to be inside the product-option-loop

Webflow
li-element
=
product-option-input

product-option-name: This Element needs to bin inside the product-option-input and displays the name of the current option value ("red", "blue" etc.). It needs to be inside the product-option-input

Webflow
li-element
=
product-option-name
Next

Convert Your Theme

Learn how to convert your Webflow project into a Shopify Theme using Liquify.

Attribute Copied!