Getting Started

Starter Theme

We strongly advise beginning with our Starter Theme, which comes equipped with essential Shopify pages such as Cart, User Account, Search and more. If you are already working on a project, it is advisable to copy these pages and sections into your new project. Get the Theme here.

Core Principals

Liquify Pro 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 Pro relies on Shopify's theme framework and includes all essential pages. It is best to begin with the Liquify Pro 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 is 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 Pro 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 is 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 is a flexible and powerful tool for customizing the appearance and functionality of an online store.

Webflow 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

li-object = product.title

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 do not need to dive deeply into Liquify Pro attributes. Your go-to resource is the Shopify documentation, since you will be working with Shopify Liquid. You can also find solutions in the Shopify forum or documentation and then reconstruct them using Liquify Pro tags directly in Webflow.

3

All elements must be contained within a wrapper element that has the li-section attribute. 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 clear and descriptive labels that store owners can easily understand. You can also reuse the same label names across sections. For instance, consistently labeling a setting as Headline helps maintain clarity.