# Table of Contents - [Getting Started | Liquiflow](#getting-started-liquiflow) - [Template Structure | Liquiflow](#template-structure-liquiflow) - [Sections | Liquiflow](#sections-liquiflow) - [Blocks | Liquiflow](#blocks-liquiflow) - [Settings | Liquiflow](#settings-liquiflow) - [Theme Blocks | Liquiflow](#theme-blocks-liquiflow) - [Welcome to Liquiflow | Liquiflow](#welcome-to-liquiflow-liquiflow) - [How to Convert Your Theme | Liquiflow](#how-to-convert-your-theme-liquiflow) - [Overview | Liquiflow](#overview-liquiflow) - [App Blocks | Liquiflow](#app-blocks-liquiflow) - [Custom Settings | Liquiflow](#custom-settings-liquiflow) - [Overview | Liquiflow](#overview-liquiflow) - [Iteration (Lists) | Liquiflow](#iteration-lists-liquiflow) - [Conditional | Liquiflow](#conditional-liquiflow) - [Miscellaneous | Liquiflow](#miscellaneous-liquiflow) - [Filters | Liquiflow](#filters-liquiflow) - [Other Liquid Tags | Liquiflow](#other-liquid-tags-liquiflow) - [Static Blocks | Liquiflow](#static-blocks-liquiflow) - [Metafields and Metaobjects | Liquiflow](#metafields-and-metaobjects-liquiflow) - [Objects | Liquiflow](#objects-liquiflow) - [JS Events | Liquiflow](#js-events-liquiflow) - [Snippets | Liquiflow](#snippets-liquiflow) - [Forms | Liquiflow](#forms-liquiflow) - [How it Works | Liquiflow](#how-it-works-liquiflow) - [Liquiflow Starter Templates | Liquiflow](#liquiflow-starter-templates-liquiflow) - [Format Theme (Prettier) | Liquiflow](#format-theme-prettier-liquiflow) - [Webflow and GSAP Animations | Liquiflow](#webflow-and-gsap-animations-liquiflow) - [Bundles | Liquiflow](#bundles-liquiflow) - [Resources | Liquiflow](#resources-liquiflow) - [Product Variant Swatch | Liquiflow](#product-variant-swatch-liquiflow) - [Liquiflow Elements | Liquiflow](#liquiflow-elements-liquiflow) - [SEO | Liquiflow](#seo-liquiflow) - [Shopify 1.0 vs Shopify 2.0 | Liquiflow](#shopify-1-0-vs-shopify-2-0-liquiflow) - [Debugging | Liquiflow](#debugging-liquiflow) - [Mini Cart | Liquiflow](#mini-cart-liquiflow) - [Cheat Sheet | Liquiflow](#cheat-sheet-liquiflow) - [Section Rendering API | Liquiflow](#section-rendering-api-liquiflow) - [Email Protection | Cloudflare](#email-protection-cloudflare) --- # Getting Started | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close circle-exclamation Liquiflow **Starter Theme** We strongly advise beginning with our Liquiflow [Starter Theme](https://docs.liquiflow.app/useful/liquiflow-starter-templates) , 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 Liquiflow project. Get the Theme [here](https://docs.liquiflow.app/useful/liquiflow-starter-templates) . [hashtag](https://docs.liquiflow.app/fundamentals/getting-started#core-principals-1) Core Principals --------------------------------------------------------------------------------------------------------- Liquiflow 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, Liquiflow relies on Shopify's theme framework and includes all essential pages. It is best to begin with the Liquiflow [project starter kit](https://docs.liquiflow.app/useful/liquiflow-starter-templates) . ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FNZOB2NDG50QpMCwh23th%252F653914aa1c03490c66f932a9_liquify_attributes-schlittschuh.png%3Falt%3Dmedia%26token%3D238cd5a6-ae52-4dd4-82bf-bb3c68bd339a&width=768&dpr=3&quality=100&sign=9a9d900a&sv=2) ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FJNJovgWOc2cOsRKqhZf7%252F653915b373f264b8364232de_Bildschirmfoto%25202023-10-25%2520um%252015.18.17.webp%3Falt%3Dmedia%26token%3D488dc364-f5cc-4e5d-96c2-4365287db075&width=768&dpr=3&quality=100&sign=cb6317e1&sv=2) ### [hashtag](https://docs.liquiflow.app/fundamentals/getting-started#what-is-liquid) 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. Liquiflow 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. ### [hashtag](https://docs.liquiflow.app/fundamentals/getting-started#webflow-attributes) 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 Copy li-object = product.title ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FTswB1FH2yfGooEAMizoc%252F65392d3615f0442ce7d290c1_Bildschirmfoto%25202023-10-25%2520um%252016.58.52.png%3Falt%3Dmedia%26token%3D2b5126f3-12d4-4051-b79a-1f8ab6ce19ff&width=768&dpr=3&quality=100&sign=e6d2db94&sv=2) 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 Liquiflow attributes. Your go-to resource is the [Shopify documentationarrow-up-right](https://www.shopify.com/partners/shopify-cheat-sheet) , since you will be working with Shopify Liquid. You can also find solutions in the Shopify forum or documentation and then reconstruct them using Liquiflow 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. [PreviousWelcome to Liquiflowchevron-left](https://docs.liquiflow.app/) [NextTemplate Structurechevron-right](https://docs.liquiflow.app/fundamentals/template-structure) Last updated 7 months ago Was this helpful? This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://www.liquiflow.app/legal/privacy-policy) . close AcceptReject --- # Template Structure | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close The Liquiflow 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 refer to which purpose. These tags are already applied in [our Starting theme.arrow-up-right](https://www.liquify.pro/docu/liquify-starter-template) Webflow Copy li-page = product Here is a List of all available page [templates by Shopifyarrow-up-right](https://shopify.dev/docs/storefronts/themes/architecture/templates) : * 404 * article * blog * cart * collection * account * activate\_account * addresses * login * order * register * reset\_password * gift\_card * index (always the Home page in Webflow) * list-collections * page * password * product * search circle-info Pages without a li-page tag are considered as Shopify pages and are converted as `page.templates`. The name of the page in Webflow will be the name of the template in Shopify. For example, a page called `About Us` will get the template file `page.about_us`. When you do not want a site to be converted, simply add the tag `remove`: Webflow Copy li-page = remove By default, every `li-page` generates its own [layoutarrow-up-right](https://shopify.dev/docs/storefronts/themes/architecture/layouts) file. This leads to a large number of unnecessary files. However, if you are not modifying ``, ``, or anything outside the `li-content-for-layout` element, you can use the `li-layout` attribute directly on the `li-page` element. This tells the converter to skip creating a new layout file for that page. You can simply reference the layout you want to use for this page: Webflow Copy li-layout = theme [hashtag](https://docs.liquiflow.app/fundamentals/template-structure#page-structure) **Page Structure** ------------------------------------------------------------------------------------------------------------ Your page will be saved in two separate files in Shopify: * Layout file: everything outside the `li-content-for-layout` attribute. * Template file: everything inside the `li-content-for-layout` attribute. If you’re using Shopify 2.0, the template will be saved as a .json file instead of an HTML Liquid file. That’s why the `li-content-for-layout` attribute is required on all pages. It’s usually placed on the `
` element of your site. In the Starter theme, you can find it on the `main-wrapper`. ![Webflow Navigator with Liquiflow Theme Structure](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FBZRJeneCbn1xZWwnApcj%252F653989b2f3a01a7ebf14a588_Bildschirmfoto%25202023-10-25%2520um%252023.33.21.webp%3Falt%3Dmedia%26token%3D58e74a08-9f83-4a3b-b0ba-6e247d5e3c96&width=300&dpr=3&quality=100&sign=7b1cce63&sv=2) [hashtag](https://docs.liquiflow.app/fundamentals/template-structure#shopify-2.0) **Shopify 2.0** ------------------------------------------------------------------------------------------------------ To unlock the potential of Shopify 2.0, make sure all your page content is organized into sections (tagged with `li-section` tag, learn more [herearrow-up-right](https://www.liquify.pro/docu/getting-started#settings-sections) ). The page structure should match the image below. Just remember not to change the HTML tag `main` oft the main wrapper. You can always rearrange everything inside `main` in Shopify later on. ![Webflow Navigator with Liquiflow Theme Structure](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FBZRJeneCbn1xZWwnApcj%252F653989b2f3a01a7ebf14a588_Bildschirmfoto%25202023-10-25%2520um%252023.33.21.webp%3Falt%3Dmedia%26token%3D58e74a08-9f83-4a3b-b0ba-6e247d5e3c96&width=300&dpr=3&quality=100&sign=7b1cce63&sv=2) ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FSHZXHGRBiZGbDMwY9Cu3%252F65398aa05ed2be4556aae9cd_Bildschirmfoto%25202023-10-25%2520um%252023.37.02.webp%3Falt%3Dmedia%26token%3D83fee70c-bc5c-47c4-b3ec-3e719d1b8267&width=768&dpr=3&quality=100&sign=7b3ce6b&sv=2) [PreviousGetting Startedchevron-left](https://docs.liquiflow.app/fundamentals/getting-started) [NextHow to Convert Your Themechevron-right](https://docs.liquiflow.app/fundamentals/how-to-convert-your-theme) Last updated 5 months ago Was this helpful? --- # Sections | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close [hashtag](https://docs.liquiflow.app/section-settings/sections#sections) Sections -------------------------------------------------------------------------------------- Each `li-settings` tag needs to be enclosed within a section. For this purpose, use the `li-section` tag, which can be applied to your Webflow sections. You have the flexibility to choose a name for it, with a maximum limit of 30 characters. Webflow Copy li-section = Section Name ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FBZRJeneCbn1xZWwnApcj%252F653989b2f3a01a7ebf14a588_Bildschirmfoto%25202023-10-25%2520um%252023.33.21.webp%3Falt%3Dmedia%26token%3D58e74a08-9f83-4a3b-b0ba-6e247d5e3c96&width=768&dpr=3&quality=100&sign=7b1cce63&sv=2) ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FSHZXHGRBiZGbDMwY9Cu3%252F65398aa05ed2be4556aae9cd_Bildschirmfoto%25202023-10-25%2520um%252023.37.02.webp%3Falt%3Dmedia%26token%3D83fee70c-bc5c-47c4-b3ec-3e719d1b8267&width=768&dpr=3&quality=100&sign=7b3ce6b&sv=2) #### [hashtag](https://docs.liquiflow.app/section-settings/sections#section-categories) Section Categories For a better overview in the Shopify Editor, you can add a section to a category by adding the attribute li-section:category. The value of this attribute will then be the name of the category. Webflow Copy li-section:category = Category Name ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252F2o1ySTOSR7vPokhpVxiF%252Fcategorys.png%3Falt%3Dmedia%26token%3D27676ee3-1c9e-4fb9-bfc7-0264f8facbe3&width=768&dpr=3&quality=100&sign=3c50539e&sv=2) [hashtag](https://docs.liquiflow.app/section-settings/sections#section-groups) **Section Groups** ------------------------------------------------------------------------------------------------------ [Section groupsarrow-up-right](https://shopify.dev/docs/storefronts/themes/architecture/section-groups) are typically used for the header and footer. They are JSON data files that define a list of sections and app blocks along with their settings. Merchants can add, remove, and reorder these sections within the theme editor. Simply add the `li-section-group` attribute to a `
` element and place your sections inside it — for example, the Navigation section. Webflow Copy li-section-group = Section Group Name circle-exclamation * Section groups are not allowed inside the `li-content-for-layout` element * Section groups cannot have the same name as other section * Changes made to the section group will be reflected on all pages where the group is used To define the type of a section group, use the `li-section-group:type` attribute. This helps Shopify determine where the section group is used. Accepted values: * `header` * `footer` * `aside` * A custom type, in the format `custom.`, where `` is a unique identifier for your section group type. Webflow Copy li-section-group:type = header [hashtag](https://docs.liquiflow.app/section-settings/sections#enable-or-disable-sections-in-the-shopify-editor) **Enable or disable Sections in the Shopify Editor** -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- **Enable**: If you want to show certain sections only on specific templates, you can use the tag modifier `li-section:on_templates`. In the value, list all the templates where the section should be shown, separated by commas. To show the section on all templates, just use `*`. See the official [Shopify documentationarrow-up-right](https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema#enabled_on) for more information on this topic. Webflow Copy li-section:on_templates = page, product You can do the same for section groups using the tag modifier. To target all groups, just use `*` in the value. Webflow Copy li-section:on_groups = footer, header **Disable**: If you want to hide certain sections on specific templates, use the tag modifier `li-section:off_templates`. List the templates (comma-separated) where the section should be hidden. To hide the section on all templates, use `*` in the value. See the official [Shopify documentationarrow-up-right](https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema#disabled_on) for more information on this topic. Webflow Copy li-section:off_templates = page, product You can do the same for section groups using the tag modifier. To target all groups, just use `*` in the value. Webflow Copy li-section:off_groups = footer, header [PreviousSettingschevron-left](https://docs.liquiflow.app/section-settings/settings) [NextBlockschevron-right](https://docs.liquiflow.app/section-settings/blocks) Last updated 1 month ago Was this helpful? This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://www.liquiflow.app/legal/privacy-policy) . close AcceptReject --- # Blocks | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close Blocks offer a dynamic method for repeatedly adding a single element, and they can include all the options mentioned earlier. Think of them as elements to infuse 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 in the Shopify Theme Editor will result in a new slide being generated. It is 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 Copy li-block = Block Name ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FyGTaaZhrrDEuVb6GZZNu%252F653a1c61e7bf9cbe2421785f_liquify-block-settings.webp%3Falt%3Dmedia%26token%3D33e0c7aa-028c-45fd-b1c3-22133accc353&width=768&dpr=3&quality=100&sign=2d0c95d6&sv=2) ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FHH7sRjV8a0V3jf8tio92%252F653a1c620fb25bc671c9aa37_liquify-block-sider.webp%3Falt%3Dmedia%26token%3D17b0bd5e-a458-45b7-8cbf-dda4582e0b1f&width=768&dpr=3&quality=100&sign=705fefff&sv=2) [hashtag](https://docs.liquiflow.app/section-settings/blocks#different-blocks-in-the-same-array) Different Blocks in the same Array ---------------------------------------------------------------------------------------------------------------------------------------- `li-content-for-blocks` provides a flexible way to use multiple blocks within a wrapper. Inside `li-content-for-blocks`, you can add multiple `li-block` elements with different functions, like a paragraph, headline, or button. In the Shopify Theme Editor, the number of blocks and their order can be configured. li-content-for-blocks Webflow Copy li-block = Heading Webflow Copy li-block = Paragraph Webflow Copy li-block = Button [PreviousSectionschevron-left](https://docs.liquiflow.app/section-settings/sections) [NextTheme Blockschevron-right](https://docs.liquiflow.app/section-settings/theme-blocks) Last updated 7 months ago Was this helpful? This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://www.liquiflow.app/legal/privacy-policy) . close AcceptReject --- # Settings | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close The following is a list of `li-settings` modifiers available in Liquiflow. Each modifier provides different input types in the Shopify editor. Shopify also offers additional input types. To use those, refer to the [custom settings attribute documentation](https://docs.liquiflow.app/section-settings/custom-settings) . #### [hashtag](https://docs.liquiflow.app/section-settings/settings#text-input) Text Input This attribute creates a simple string input in the Shopify Theme Editor. The text of the element will be used as the default text of the attribute. The value of the attribute will be used as the label of the setting. Webflow Copy li-settings:text = Heading circle-check Shopify ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FXgze8zdZb6FGgGAe0kVG%252Ftext.png%3Falt%3Dmedia%26token%3D15e444b2-a899-4f24-86f4-aa7a762c6eee&width=300&dpr=3&quality=100&sign=70bcfc58&sv=2) #### [hashtag](https://docs.liquiflow.app/section-settings/settings#textarea-input) Textarea Input This attribute creates a simple string input in the Shopify Theme Editor. The content of the element with this attribute will be used as the default value of the setting in the Shopify Theme Editor. The value of the attribute itself will be used as the setting’s label in the editor. Webflow Copy li-settings:textarea = Welcome message circle-check Shopify ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FDpoyAR9zHJzpkyomdbVa%252Ftextarea.png%3Falt%3Dmedia%26token%3D1e68ebe2-9a7b-4621-bb69-ea29cb8c8626&width=300&dpr=3&quality=100&sign=a3c116e8&sv=2) #### [hashtag](https://docs.liquiflow.app/section-settings/settings#richtext-input) Richtext Input This attribute creates a multi-line text field with basic formatting options in the Shopify Theme Editor. The content of the element with this attribute will be used as the default value of the setting. The value of the attribute itself will be used as the setting’s label in the editor. Webflow Copy li-settings:richtext = Heading circle-check Shopify ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FmpUfI0KvryHslpR3Nn6V%252Frichtext.png%3Falt%3Dmedia%26token%3D17063f7a-c0b7-4daa-87d1-cd3905c69ddc&width=300&dpr=3&quality=100&sign=6334abfd&sv=2) #### [hashtag](https://docs.liquiflow.app/section-settings/settings#image-input) Image Input This attribute creates an image picker field that automatically lists available images from the Files section in the Shopify admin, with the option to upload new ones. The value of the attribute will be used as the setting’s label in the editor. Webflow Copy li-settings:image = Image circle-check Shopify ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252Fje6fzbPSe344511PiIbG%252Fimage.png%3Falt%3Dmedia%26token%3D034ba386-8aee-4b9f-ad4e-68b9f4c3b0da&width=300&dpr=3&quality=100&sign=70dba825&sv=2) chevron-rightDetailed Documentation[hashtag](https://docs.liquiflow.app/section-settings/settings#detailed-documentation) For a better understanding of what happens behind the scenes, we’ve prepared detailed documentation. When using the `li-settings:image` attribute (as described above), several changes are made during the conversion process: * The `` tag is replaced with a Shopify object and the filters `| image_url: width: 1000` and `| image_tag`. This ensures the `` tag is rendered on the live site as [Shopify recommendsarrow-up-right](https://shopify.dev/docs/api/liquid/filters/image_tag) . * All attributes from the original `` element (e.g. `class`, `loading`) are passed into the `image_tag` filter, for example: `| image_tag: loading: 'eager', class: 'more_image'`. * The object is wrapped in a condition to check whether an image is applied. By default, if no image is set, the Webflow image is used as a placeholder. Here’s how the theme builder now handles it: Webflow Copy Shopify Copy {% if section.settings.image_image %} {{ section.settings.image_image | image_url: width: 1000 | image_tag: loading: 'eager', class: 'more_image' }} {% else %} {% endif %} **Placeholder Tag** If you don’t want to use the Webflow image as a placeholder, you can override it with the | placeholder: 'detailed-apparel-1' filter, like this: Webflow Copy li-settings:image = Image | placeholder: 'detailed-apparel-1' Shopify Copy {% if section.settings.image_image %} {{ section.settings.image_image | image_url: width: 1000 | image_tag: loading: 'eager', class: 'more_image' }} {% else %} {{ 'detailed-apparel-1' | placeholder_svg_tag: 'more_image' }} {% endif %} This now references the Shopify placeholder library. You can find a list of all available placeholders [herearrow-up-right](https://shopify.dev/docs/api/liquid/filters/placeholder_svg_tag) . **Image size** To control the size of the image loaded from the Shopify server, you can use the `| image_url` filter. Simply specify the desired height or width, and it will override the default `| image_url: width: 1000`. Webflow Copy li-settings:image = Image | image_url: width: 400 Shopify Copy {% if section.settings.image_image %} {{ section.settings.image_image | image_url: width: 400 | image_tag: loading: 'eager', class: 'more_image' }} {% else %} {% endif %} **Adding attributes to the image tag** To add more attributes to the image tag, simply place them on the `` tag as shown above — they’ll be automatically included in the `image_tag`. You can also reference variables or objects inside the `image_tag`. To do this, just add them as filters on your `li-settings:image` element, like this: Webflow Copy li-settings:image = Image | id: product.title Shopify Copy {% if section.settings.image_image %} {{ section.settings.image_image | image_url: width: 400 | image_tag: loading: 'eager', class: 'more_image', id: product.title }} {% else %} {% endif %} #### [hashtag](https://docs.liquiflow.app/section-settings/settings#url-input) url Input This attribute creates a field for entering external URLs or relative paths from your Shopify theme manually. The value of the attribute itself will be used as the setting’s label in the editor. Webflow Copy li-settings:url = Button Link circle-check Shopify ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FNpzNVC89CSat4l6DJOzn%252Furl.png%3Falt%3Dmedia%26token%3D9d93ad14-5302-4538-9f13-11e856712920&width=300&dpr=3&quality=100&sign=19a2cff5&sv=2) #### [hashtag](https://docs.liquiflow.app/section-settings/settings#checkbox) Checkbox The checkbox attribute displays a checkbox input. It’s useful for enabling or disabling features, such as showing an announcement bar. The value of the attribute itself will be used as the setting’s label in the editor. Webflow Copy li-settings:checkbox = Show announcement circle-check Shopify ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252F3zf7nay50AyIKytvIdxj%252Fcheckbox.png%3Falt%3Dmedia%26token%3D78be82f0-4e0c-4218-bf7c-49ba4bc5476a&width=300&dpr=3&quality=100&sign=de0e8f4a&sv=2) #### [hashtag](https://docs.liquiflow.app/section-settings/settings#collection-input) Collection Input A collection setting displays a picker field that automatically lists all available collections in the store. Apply this to a product item to iterate over the collection products. The value of the attribute itself will be used as the setting’s label in the editor. Webflow Copy li-settings:collection = Collection circle-check Shopify ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FmY0Nxa7GO1x1nNdaySAs%252Fcollection.png%3Falt%3Dmedia%26token%3D7602d113-bbb1-407c-8066-74c536052dbd&width=300&dpr=3&quality=100&sign=e9e10b2c&sv=2) #### [hashtag](https://docs.liquiflow.app/section-settings/settings#blog) Blog A blog setting displays a picker field that automatically shows all available blogs in the store. The value of the attribute itself will be used as the setting’s label in the editor. Webflow Copy li-settings:blog = Blog circle-check Shopify ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252Fe4LTuoeF6mnHsWa3VoSz%252Fblog.png%3Falt%3Dmedia%26token%3D512426ff-17f6-45d9-83de-f7bd8a755ced&width=300&dpr=3&quality=100&sign=436dbea1&sv=2) #### [hashtag](https://docs.liquiflow.app/section-settings/settings#article) Article An article setting displays a picker field that automatically lists all available articles in the store. The value of the attribute itself will be used as the setting’s label in the editor. Webflow Copy li-settings:article = Article circle-check Shopify ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FWgC2qT7IheRZ3wcEjIgV%252Farticle.png%3Falt%3Dmedia%26token%3D081413e0-ad5c-4b3b-a07e-ed9f9f91e9f9&width=300&dpr=3&quality=100&sign=95440bab&sv=2) #### [hashtag](https://docs.liquiflow.app/section-settings/settings#product) Product A product setting displays a picker field that automatically lists all available products in the store. The value of the attribute itself will be used as the setting’s label in the editor. Webflow Copy li-settings:product = Product circle-check Shopify ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252Fj5IyJTfWbRK0lKzTGVfN%252Fproduct.png%3Falt%3Dmedia%26token%3D3d727927-598d-481c-a638-df6699154a11&width=300&dpr=3&quality=100&sign=220d1d1b&sv=2) #### [hashtag](https://docs.liquiflow.app/section-settings/settings#html-input) HTML Input An html setting provides a multi-line text field where you can enter HTML markup. The value of the attribute itself will be used as the setting’s label in the editor. Webflow Copy li-settings:html = Video embed circle-check Shopify ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FyN9vjO0WzQEE1OSNQ12N%252Fhtml.png%3Falt%3Dmedia%26token%3Df77e385a-02a9-44ca-8622-52ad84b2ee2a&width=300&dpr=3&quality=100&sign=50587b59&sv=2) circle-info For even more advanced settings use our [custom settings attribute](https://docs.liquiflow.app/section-settings/custom-settings) . [PreviousOverviewchevron-left](https://docs.liquiflow.app/section-settings/overview) [NextSectionschevron-right](https://docs.liquiflow.app/section-settings/sections) Last updated 7 months ago Was this helpful? This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://www.liquiflow.app/legal/privacy-policy) . close AcceptReject --- # Theme Blocks | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close `li-cf-theme-blocks` offers an even more flexible way. It’s based on [Shopify’s new featurearrow-up-right](https://shopify.dev/docs/storefronts/themes/architecture/blocks/theme-blocks/quick-start) that allows blocks to be nested. Instead of using the regular `li-cf-blocks`, you can use `li-cf-theme-blocks`. When using this method, the converter creates an extra blocks folder and turns blocks into reusable components that can be nested inside one another. ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FjPhE11diuN7NDfmKgH7Z%252F67fc1da8eb5960e6bff7ffc1_theme-blocks.webp%3Falt%3Dmedia%26token%3D18920a9b-e721-4450-8376-dd4905d8a46e&width=768&dpr=3&quality=100&sign=3a0449fa&sv=2) li-content-for-theme-blocks Inside this element, you can only add items that have the attribute `li-block="custom-name"`. Within these block elements, you can use all available setting attributes — and you can even nest another `li-cf-theme-blocks` inside. **Limitations to keep in mind:** You can only use **one** `li-cf-theme-blocks` per section (Shopify doesn’t allow more). Webflow Copy li-block = Item * * * Inside the Item Block you can use another `li-block` and another `li-cf-theme-blocks` element Webflow Copy li-block = Item Webflow Copy li-content-for-theme-blocks * * * Inside an `li-cf-theme-blocks` element, you can nest another `li-cf-theme-blocks` or other `li-blocks`. This structure can be repeated up to **8 times** — that is Shopify’s limit. circle-exclamation **Important:** * When using `li-cf-theme-blocks` you are not able to use `li-block` or `li-cf-blocks` in the same section. * You can nest `li-block` inside `li-cf-theme-blocks` * You can not nest `li-cf-blocks` inside `li-cf-theme-blocks` #### [hashtag](https://docs.liquiflow.app/section-settings/theme-blocks#block-categories) Block Categories For a better overview in the Shopify Editor, you can add a block to a category by adding the attribute li-block:category. The value of this attribute will then be the name of the category. Webflow Copy li-block:category = Category Name ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FtE1fQ5e5vwcB17ZhZklp%252FBildschirmfoto%25202026-01-07%2520um%252016.44.02.webp%3Falt%3Dmedia%26token%3D50298ece-fea7-4d96-9941-dd11a6eb3a14&width=768&dpr=3&quality=100&sign=36eca0b3&sv=2) #### [hashtag](https://docs.liquiflow.app/section-settings/theme-blocks#block-tags) Block Tags When using Theme Blocks, Shopify automatically renders an additional wrapper
around each block. Since you already add the li-block to a wrapping element, this results in unnecessary nested
s. Blocks are now rendered without Shopify’s extra wrapper by default. But if you need a specific HTML tag, you can use li-block:tag="div" (for example), which will wrap the li-block element in an tag. Webflow Copy li-block = Text li-block:tag = div Shopify Copy

{{ product.title }}

#### [hashtag](https://docs.liquiflow.app/section-settings/theme-blocks#giving-access-to-all-theme-blocks-in-a-theme) Giving Access to all Theme blocks in a Theme If you want a section to have access to all blocks in a theme, you can add `theme` as the value of the `li-cf-theme-blocks` attribute. Like this: Webflow Copy li-cf-theme-blocks="theme" #### [hashtag](https://docs.liquiflow.app/section-settings/theme-blocks#private-blocks) Private Blocks By adding an underscore (\_) in front of a block name (li-block=”\_Image”), you can make the block private to a specific section. This prevents it from appearing in sections that have access to all theme blocks. This gives you more control over how and where theme blocks can be used and combined. [Learn more here.arrow-up-right](https://shopify.dev/docs/storefronts/themes/architecture/blocks/theme-blocks/targeting#private-blocks) [PreviousBlockschevron-left](https://docs.liquiflow.app/section-settings/blocks) [NextStatic Blockschevron-right](https://docs.liquiflow.app/section-settings/static-blocks) Last updated 1 month ago Was this helpful? This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://www.liquiflow.app/legal/privacy-policy) . close AcceptReject --- # Welcome to Liquiflow | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close ![Page cover](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FqJYGI1uxpPXrpSCdzKTk%252FOpen-Graph-Image.jpg%3Falt%3Dmedia%26token%3Dc31b4154-bd8e-4b87-8e87-cdca69cc3da4&width=1248&dpr=3&quality=100&sign=175673ab&sv=2) circle-check **Welcome to our new Docs:** If you have any feedback, please provide it in our [discord channelarrow-up-right](https://discord.gg/56KwXaUW5X) :) [hashtag](https://docs.liquiflow.app/#overview) Overview ------------------------------------------------------------- We're delighted that you've made it here. In the following sections, we'd like to explain what Liquiflow is, how it works, how it will advance your business, and why we, as an e-commerce agency, are absolutely excited about it. 🎉 We firmly believe that visual programming is the future of frontend development, and Webflow is a perfect fit for this purpose. Additionally, we're thrilled with the extent and functionality of the e-commerce CMS Shopify. Liquiflow brings together the best of both worlds. You can develop your online shops directly in Webflow and equip them with the necessary variables through Liquiflow. We'll take care of the rest. Once connected with Liquiflow, we convert the project into a Shopify theme and keep everything up to date as soon as you publish in Webflow. [hashtag](https://docs.liquiflow.app/#quick-links) Quick links ------------------------------------------------------------------- [](https://docs.liquiflow.app/useful/liquiflow-starter-templates) ![Cover](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FGswNhS0RcTnl9NIw0a2l%252Fstarter-theme.webp%3Falt%3Dmedia%26token%3Db5edc4bb-0797-4d19-8356-0651107144c2&width=490&dpr=3&quality=100&sign=d80f3ef6&sv=2) **Start with Webflow Template** Use a fully working Template as starting point. [](https://docs.liquiflow.app/useful/cheat-sheet) ![Cover](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FLcWZFoKHM3uYw1aeLK8Z%252Fdoku-thumbnail.webp%3Falt%3Dmedia%26token%3D1ffb7d92-a4c7-4dc6-bc68-e6b3d1e17b98&width=490&dpr=3&quality=100&sign=d88d65c8&sv=2) Liquiflow **Cheatsheet** Checkout the Liquiflow Cheat sheet. [](https://discord.gg/56KwXaUW5X) ![Cover](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FuGeM4ZJD6B4VXzkUamkH%252Fdiscord-thumbnail.webp%3Falt%3Dmedia%26token%3Df0156fdc-9f6c-46dd-88cf-e554ee054dfb&width=490&dpr=3&quality=100&sign=1bd3cd4e&sv=2) **Join our Free Discord Group** Join our Discord community to get your questions answered. [hashtag](https://docs.liquiflow.app/#what-is) What is Liquiflow? ---------------------------------------------------------------------- Liquiflow is a converter that connects your Webflow project to Shopify, generating fully-featured e-commerce themes. With the assistance of custom attributes in Webflow, you can design your shop to your liking, and Liquiflow takes care of the rest. We equip your project with complete Liquid code and ensure that you don't lose the advantages of both Webflow and Shopify. [hashtag](https://docs.liquiflow.app/#who-is-for) Who is Liquiflow for? ---------------------------------------------------------------------------- You might be wondering, why do I need Liquiflow? Liquiflow is essential for anyone looking to create a custom Shopify theme with maximum flexibility. It provides unparalleled tools and features that empower you to design a unique and fully functional online store tailored to your needs. Our current clients include: * Shopify Agencies and Freelancer * Webflow Agencies and Freelancer * Shopify Merchants with their own Development or Marketing Team circle-info **Disclaimer:** Liquiflow is a professional tool, as the name suggests ;) To fully leverage its capabilities, it is essential to learn the Shopify Liquid Template Language and Webflow. [NextGetting Startedchevron-right](https://docs.liquiflow.app/fundamentals/getting-started) Last updated 7 months ago Was this helpful? * [Overview](https://docs.liquiflow.app/#overview) * [Quick links](https://docs.liquiflow.app/#quick-links) * [What is ?](https://docs.liquiflow.app/#what-is) * [Who is for?](https://docs.liquiflow.app/#who-is-for) Was this helpful? sun-brightdesktopmoon sun-brightdesktopmoon --- # How to Convert Your Theme | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close Liquiflow provides several methods to manage and maintain your Shopify theme. It is crucial to ensure that your content originates from Shopify, keeping your Webflow project as minimal as possible (e.g., assets should be managed in Shopify, not uploaded to Webflow). The most efficient way to handle your Shopify theme is by using our GitHub integration. By connecting your Liquiflow project to a GitHub repository and linking the repository to Shopify, you significantly streamline your workflow. The following steps will explain these methods in detail. [hashtag](https://docs.liquiflow.app/fundamentals/how-to-convert-your-theme#how-to-connect-to-github) How to Connect to GitHub ----------------------------------------------------------------------------------------------------------------------------------- Follow these steps to connect your Liquiflow project to GitHub and Shopify: 1 Log in to your GitHub account and create a new repository with a “README” file. 2 Log in to your Liquiflow account and create a new project. 3 Open the project and go to the Settings. 4 Click “Connect to GitHub” and follow the steps. 5 Authorize the repository you created earlier (or all, if you prefer). 6 Return to the Liquiflow project and select the repository you want to connect. 7 Select a branch (usually, there will only be one "main" branch if the project is empty). 8 If you haven’t converted your theme yet, please follow the steps outlined in [“Convert Your Theme”arrow-up-right](https://www.liquify.pro/docu/convert-your-theme#convert-your-theme) before connecting your Theme to GitHub. 9 Go to Shopify, open “Online Store” and select “Themes.” Click “Add Theme” and choose “Connect from GitHub.” 10 Connect your GitHub account and follow the steps. Then, choose a repository and branch. 11 You are now ready to convert your theme 🎉. [hashtag](https://docs.liquiflow.app/fundamentals/how-to-convert-your-theme#convert-your-theme) Convert your Theme ----------------------------------------------------------------------------------------------------------------------- Follow these steps to export and convert your Theme: 1 Export the code from Webflow. 2 Upload the ZIP file into your Liquiflow project. Before converting, you can select a branch as described above. 3 Open the pull request to review the results. If you are not using GitHub, download the theme and continue with "[Convert your theme without GitHub](https://docs.liquiflow.app/fundamentals/how-to-convert-your-theme#convert-your-theme-without-github) ". 4 Check the changed files in GitHub to review all the updates. 5 Merge the branch once you are satisfied with the results. After merging, you can delete the merged branch. If the branch has any conflicts, you can resolve them directly in GitHub. 6 Your conversion is now complete. 🎉 You can go to Shopify and check the results. If any bugs occur, follow the steps [herearrow-up-right](https://www.liquify.pro/docu/debugging) . ### [hashtag](https://docs.liquiflow.app/fundamentals/how-to-convert-your-theme#convert-your-theme-without-github) Convert your theme without GitHub Follow these steps to export and convert your theme: 1 Export the code from Webflow. 2 Upload the ZIP file into your Liquiflow project. Before converting, you can select a branch as described above. 3 Download the converted theme 4 Go to Shopify and upload the ZIP in the online shops theme section 5 After uploading, you need to copy the schema files from the current version into the new version to keep the content. 6 Your conversion is now complete. 🎉 You can go to Shopify-Editor and check the results. If any bugs occur, follow the steps [herearrow-up-right](https://www.liquify.pro/docu/debugging) . [PreviousTemplate Structurechevron-left](https://docs.liquiflow.app/fundamentals/template-structure) [NextOverviewchevron-right](https://docs.liquiflow.app/section-settings/overview) Last updated 7 months ago Was this helpful? * [How to Connect to GitHub](https://docs.liquiflow.app/fundamentals/how-to-convert-your-theme#how-to-connect-to-github) * [Convert your Theme](https://docs.liquiflow.app/fundamentals/how-to-convert-your-theme#convert-your-theme) * [Convert your theme without GitHub](https://docs.liquiflow.app/fundamentals/how-to-convert-your-theme#convert-your-theme-without-github) Was this helpful? sun-brightdesktopmoon sun-brightdesktopmoon --- # Overview | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close 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, use the `li-settings` tag. Using a modifier, you can access all of Shopify's provided [Settings Inputsarrow-up-right](https://shopify.dev/docs/themes/architecture/settings/input-settings) . In Webflow, you define the name of the Shopify setting inside the value of the attribute (e.g. Headline). The content inside the element is used as the default placeholder value in the Shopify editor. Webflow Copy li-settings:text = Headline This will be converted into: ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FdPDUCrrYFLRnZcanJpRB%252F653a3e3cad514fe89f3de3f7_liquify-doku-settings%2520%281%29.webp%3Falt%3Dmedia%26token%3Dc14dd0f1-0a75-4156-8fb9-a7883dad6f7a&width=768&dpr=3&quality=100&sign=a550c569&sv=2) [hashtag](https://docs.liquiflow.app/section-settings/overview#section-settings) Section Settings ------------------------------------------------------------------------------------------------------ [Settingschevron-right](https://docs.liquiflow.app/section-settings/settings) [Blockschevron-right](https://docs.liquiflow.app/section-settings/blocks) [Custom Settingschevron-right](https://docs.liquiflow.app/section-settings/custom-settings) [Sectionschevron-right](https://docs.liquiflow.app/section-settings/sections) [Theme Blockschevron-right](https://docs.liquiflow.app/section-settings/theme-blocks) [PreviousHow to Convert Your Themechevron-left](https://docs.liquiflow.app/fundamentals/how-to-convert-your-theme) [NextSettingschevron-right](https://docs.liquiflow.app/section-settings/settings) Last updated 7 months ago Was this helpful? Was this helpful? sun-brightdesktopmoon sun-brightdesktopmoon --- # App Blocks | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close When using `li-content-for-blocks`, or `li-content-for-theme-blocks` you can also include App Blocks. If you have an app installed that supports App Blocks, they will now appear in the Shopify Editor. ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FZfnaCvxpnBKX541uoYcs%252F67260eeed4bb8d71130b8744_liquify-app-blocks.avif%3Falt%3Dmedia%26token%3D5b8463c8-c0cb-450e-81f2-fbb9bf52ca79&width=768&dpr=3&quality=100&sign=dd2eb36a&sv=2) [PreviousStatic Blockschevron-left](https://docs.liquiflow.app/section-settings/static-blocks) [NextCustom Settingschevron-right](https://docs.liquiflow.app/section-settings/custom-settings) Last updated 7 months ago Was this helpful? Was this helpful? sun-brightdesktopmoon sun-brightdesktopmoon --- # Custom Settings | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close You can also use `li-settings:custom` to create other settings which can be adjusted in the Shopfy Theme Editor. Add `li-settings:custom="example-name"` to a Webflow Embed and place the Section-Settings-Schema inside of it. In this example, we are creating a range slider. Webflow Copy { "type": "range", "id": "font_size", "min": 12, "max": 24, "step": 1, "unit": "px", "label": "Font size", "default": 16 } ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FgV7c5uxipOBdsZnBAJMM%252F66968910f994f099c6f26f96_range.png%3Falt%3Dmedia%26token%3D82e692e6-d6ac-4e2d-ad51-b2355b44c627&width=768&dpr=3&quality=100&sign=f632955&sv=2) You can refer to the setting inside your section like this: `style="font-size: {{ section.settings.font_size }}"` The value of the attribute `li-settings:custom` will be used as a header inside the Shopify Theme Editor. This makes it easier to organize and group related settings inside one embed, so everything looks cleaner later on in the Shopify Theme Editor. If you do not want a header to appear, leave the value of `li-settings:custom` empty. To group your settings into one header, turn your settings JSON into an array, like this: Webflow Copy [\ {\ "type": "range",\ "id": "font_size",\ "min": 12,\ "max": 24,\ "step": 1,\ "unit": "px",\ "label": "Font size",\ "default": 16\ },\ {\ "type": "text",\ "id": "headline",\ "label": "Headline",\ "default": "Example Headline"\ }\ ] ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FsFBuWDrgni0EMj6vLdj3%252F67fc2597aeff10eb6fbb7c9f_liquify-settings-custom.jpg%3Falt%3Dmedia%26token%3Df6008c4d-f158-42bf-bf99-359367eff68a&width=768&dpr=3&quality=100&sign=753846c1&sv=2) [PreviousApp Blockschevron-left](https://docs.liquiflow.app/section-settings/app-blocks) [NextOverviewchevron-right](https://docs.liquiflow.app/liquid-attributes/overview) Last updated 7 months ago Was this helpful? Was this helpful? sun-brightdesktopmoon sun-brightdesktopmoon --- # Overview | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close [hashtag](https://docs.liquiflow.app/liquid-attributes/overview#liquid-tags) 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. Learn more about the available options with Shopify objects in the [Objects chapter](https://docs.liquiflow.app/liquid-attributes/objects) . [hashtag](https://docs.liquiflow.app/liquid-attributes/overview#liquid-filters) 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 [herearrow-up-right](https://shopify.dev/docs/api/liquid/filters) or in the Shopify [Cheat sheetarrow-up-right](https://www.shopify.com/partners/shopify-cheat-sheet) . Filters can be applied to a `li-object` value by using a pipe symbol `|` followed by the desired filter. Learn more about all the possibilities with Shopify filters in the [Filters chapter](https://docs.liquiflow.app/liquid-attributes/filters) . [hashtag](https://docs.liquiflow.app/liquid-attributes/overview#liquid-tags-1) 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-if_`, `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. Learn more about all the possibilities with Shopify tags in the [Filters chapter](https://docs.liquiflow.app/liquid-attributes/filters) , [Conditional chapter](https://docs.liquiflow.app/liquid-attributes/conditional) and [Other Liquid Tags](https://docs.liquiflow.app/liquid-attributes/other-liquid-tags) chapter. [PreviousCustom Settingschevron-left](https://docs.liquiflow.app/section-settings/custom-settings) [NextObjectschevron-right](https://docs.liquiflow.app/liquid-attributes/objects) Last updated 7 months ago Was this helpful? * [Liquid Objects](https://docs.liquiflow.app/liquid-attributes/overview#liquid-tags) * [Liquid Filters](https://docs.liquiflow.app/liquid-attributes/overview#liquid-filters) * [Liquid Tags](https://docs.liquiflow.app/liquid-attributes/overview#liquid-tags-1) Was this helpful? sun-brightdesktopmoon sun-brightdesktopmoon --- # Iteration (Lists) | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close [hashtag](https://docs.liquiflow.app/liquid-attributes/iteration-lists#for-loop) For Loop ---------------------------------------------------------------------------------------------- To loop through an array — such as a list of products or product tags — you can use the `li-for` tag. This tag automatically duplicates the associated element for each item in the array. Within the loop, you have direct access to the current object being iterated over. For example, when looping through a list of products, you can access individual product properties using dot notation (e.g. `product.price`). Webflow Copy
Shopify Copy {% for product in collection.products %}
{{ product.price }}
{% endfor %} ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FE9E20O9QU63FJae5zSze%252Fliquify-doku-li-for.png%3Falt%3Dmedia%26token%3De6f7d1f2-f8f5-4537-888c-008c710a364a&width=768&dpr=3&quality=100&sign=98831337&sv=2) For positioning**,** you can use the `:inside` modifier. The converted code will look like this: [PreviousFilterschevron-left](https://docs.liquiflow.app/liquid-attributes/filters) [NextConditionalchevron-right](https://docs.liquiflow.app/liquid-attributes/conditional) Last updated 3 months ago Was this helpful? Was this helpful? sun-brightdesktopmoon Webflow Copy li-for:inside = product in collection.products Shopify Copy
{% for product in collection.products %} {{ product.title }} {% endfor %}
sun-brightdesktopmoon --- # Conditional | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close [hashtag](https://docs.liquiflow.app/liquid-attributes/conditional#if) If ------------------------------------------------------------------------------ Using `li-if`, you can show an element when a specified condition is met. For instance, you can verify the availability of a product. If the condition is `true`, you can display the "Add to Cart" button or a specific tag. Webflow Copy li-if = product.available != true Shopify Copy {% if product.available != true %}
Sold out
{% 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` [hashtag](https://docs.liquiflow.app/liquid-attributes/conditional#unless) Unless -------------------------------------------------------------------------------------- With this tag, you check if the condition is `false`. The functionality is the same as `li-if`. [hashtag](https://docs.liquiflow.app/liquid-attributes/conditional#case) Case ---------------------------------------------------------------------------------- When you want to display an element which should meet different conditions, you can wrap these elements with the `li-case` tag. Inside the wrapper, you put the elements with different `li-when` tags. Within `li-case`, you can only include elements with the `li-when` attribute. The value of this attribute specifies the condition to be met. If you leave the last `li-when` tag empty, it will act as an `else` condition. For Example: [PreviousIteration (Lists)chevron-left](https://docs.liquiflow.app/liquid-attributes/iteration-lists) [NextOther Liquid Tagschevron-right](https://docs.liquiflow.app/liquid-attributes/other-liquid-tags) Last updated 7 months ago Was this helpful? * [If](https://docs.liquiflow.app/liquid-attributes/conditional#if) * [Unless](https://docs.liquiflow.app/liquid-attributes/conditional#unless) * [Case](https://docs.liquiflow.app/liquid-attributes/conditional#case) Was this helpful? sun-brightdesktopmoon Webflow Copy li-unless = product.available == true Shopify Copy {% unless product.available == true %}
Sold out
{% endunless %} Webflow Copy li-case = product.type Webflow Copy li-when = 'T-Shirt' Shopify Copy
//Element where li-case was attached {% case product.type %} {% when 'T-Shirt' %}
T-Shirt
{% when 'sweater' %}
Sweater
{% else %}
Other products
{% endcase %}
sun-brightdesktopmoon --- # Miscellaneous | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close [hashtag](https://docs.liquiflow.app/liquid-attributes/miscellaneous#li-attribute) li-attribute ---------------------------------------------------------------------------------------------------- The `li-attribute` tag allows you to assign reserved HTML attributes — such as `class`, `src`, or `href` — to any element. This is particularly useful in Webflow, where certain attributes are restricted or automatically managed by the designer. Example: Webflow Copy li-attribute:class = {% if product.available %} tex-color-green {% endif %} Shopify Copy
Another example: Webflow Copy li-attribute:id = {{ product.id }} Shopify Copy
[hashtag](https://docs.liquiflow.app/liquid-attributes/miscellaneous#li-liquid) li-liquid ---------------------------------------------------------------------------------------------- When using Liquid code directly in Shopify, Webflow may alter the formatting of certain characters —especially double quotes — within Custom Code elements or [hashtag](https://docs.liquiflow.app/add-ons/liquiflow-elements#js-attributes) JS Attributes ------------------------------------------------------------------------------------------------- ### [hashtag](https://docs.liquiflow.app/add-ons/liquiflow-elements#li-object-vs-li-js-object) li-object vs li-js-object Both tags work similarly by displaying information from the Shopify CMS. The regular [`li-object`](https://docs.liquiflow.app/liquid-attributes/objects) 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 Copy li-object = product.title Shopify Copy

{{ product.title }}

And this is an example for `li-js-object`: Webflow Copy li-js-object = product.title Shopify Copy

Placeholder

### [hashtag](https://docs.liquiflow.app/add-ons/liquiflow-elements#li-js-price) 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. ### [hashtag](https://docs.liquiflow.app/add-ons/liquiflow-elements#li-js-if) 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. ### [hashtag](https://docs.liquiflow.app/add-ons/liquiflow-elements#li-element) 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. [PreviousHow it Workschevron-left](https://docs.liquiflow.app/section-converter/how-it-works) [NextMini Cartchevron-right](https://docs.liquiflow.app/add-ons/liquiflow-elements/mini-cart) Last updated 6 months ago Was this helpful? * [Introduction](https://docs.liquiflow.app/add-ons/liquiflow-elements#introduction) * [Alpine JS](https://docs.liquiflow.app/add-ons/liquiflow-elements#alpine-js) * [JS Attributes](https://docs.liquiflow.app/add-ons/liquiflow-elements#js-attributes) * [li-object vs li-js-object](https://docs.liquiflow.app/add-ons/liquiflow-elements#li-object-vs-li-js-object) * [li-js-price](https://docs.liquiflow.app/add-ons/liquiflow-elements#li-js-price) * [li-js-if](https://docs.liquiflow.app/add-ons/liquiflow-elements#li-js-if) * [li-element](https://docs.liquiflow.app/add-ons/liquiflow-elements#li-element) Was this helpful? sun-brightdesktopmoon Webflow Copy li-js-price = product.price Shopify Copy

Placeholder

Webflow Copy li-js-if = product.price < product.original_price Shopify Copy sun-brightdesktopmoon --- # SEO | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close In general, Liquiflow converts everything you build in Webflow into Shopify. We encourage you to follow best practices for SEO structure and guidelines. On this page, we share some tips we’ve learned over the years, with more to come. [hashtag](https://docs.liquiflow.app/useful/seo#html-lang-attribute) HTML Lang Attribute --------------------------------------------------------------------------------------------- During the conversion process, we replace the default `lang=""` set by Webflow with Shopify’s `request.locale.iso_code` object. This ensures the correct language attribute is applied based on the user’s request and your store’s language settings. [hashtag](https://docs.liquiflow.app/useful/seo#structured-data-schema) Structured Data (Schema) ----------------------------------------------------------------------------------------------------- You can add your structured data directly in the head section of the selected page. Additionally, you can replace JSON strings with Liquid variables, making it adaptable for page templates like product or collection pages. Our default settings can be found in the [Webflow Starter Kit](https://docs.liquiflow.app/useful/liquiflow-starter-templates) . [hashtag](https://docs.liquiflow.app/useful/seo#page-title-and-meta-description) Page Title and Meta Description --------------------------------------------------------------------------------------------------------------------- You can use page objects within Webflow’s page settings. For example, the page title can be accessed with `{{ page_title }}`, and the description with `{{ page_description }}`. These can be edited directly in Shopify. To update SEO information, go to the specific page in Shopify, scroll to the bottom, and edit the search engine listing. [hashtag](https://docs.liquiflow.app/useful/seo#file-size) File Size ------------------------------------------------------------------------- We recommend not implementing assets directly in Webflow. Instead, add them via the Shopify theme editor and CMS. There, you can use the Liquid `image_tag` [filterarrow-up-right](https://shopify.dev/docs/api/liquid/filters/image_tag) to control image size based on its usage. This is particularly useful when content editors upload large files, which can hurt SEO. Shopify will automatically resize the image to the appropriate size using the `image_tag` filter. [PreviousResourceschevron-left](https://docs.liquiflow.app/useful/resources) [NextShopify 1.0 vs Shopify 2.0chevron-right](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0) Last updated 7 months ago Was this helpful? * [HTML Lang Attribute](https://docs.liquiflow.app/useful/seo#html-lang-attribute) * [Structured Data (Schema)](https://docs.liquiflow.app/useful/seo#structured-data-schema) * [Page Title and Meta Description](https://docs.liquiflow.app/useful/seo#page-title-and-meta-description) * [File Size](https://docs.liquiflow.app/useful/seo#file-size) Was this helpful? sun-brightdesktopmoon sun-brightdesktopmoon --- # Shopify 1.0 vs Shopify 2.0 | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close In June 2021, during the Shopify Unite event, Shopify unveiled one of its most significant updates to date: Online Store 2.0, commonly known as Shopify 2.0. This update introduced a fresh approach to Shopify’s theme architecture, profoundly impacting merchants’ operations. Online Store 2.0 offers substantial opportunities for you and your clients. It enables your Merchant to edit the content and structure freely in Shopify. Let’s dive in. [hashtag](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#key-differences-between-shopify-1.0-and-2.0) Key Differences Between Shopify 1.0 and 2.0 -------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### [hashtag](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#speed-and-performance) **Speed and Performance** One of the most notable improvements in Shopify 2.0 is enhanced speed and performance. Shopify 2.0 is faster and more efficient, handling more traffic and transactions without performance issues. ### [hashtag](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#customization) **Customization** Shopify 2.0 significantly expands customization options. Users can now create custom templates and designs without needing development skills, which wasn’t possible with Shopify 1.0. This empowers store owners to design unique, personalized online stores effortlessly. Whether it’s changing your site content or rearranging sections, these tasks are now simple and do not require technical expertise. ### [hashtag](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#marketing-tools) **Marketing Tools** Shopify 2.0 introduces advanced marketing tools, including email campaigns, social media integrations, and SEO optimization. These tools simplify promoting products and reaching a broader audience, enhancing the overall marketing strategy for merchants. ### [hashtag](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#mobile-optimization) **Mobile Optimization** Given the rise of mobile commerce, eCommerce platforms must be optimized for mobile devices. Shopify 2.0 is designed with mobile optimization in mind, ensuring customers have a seamless browsing and purchasing experience on smartphones and tablets. The theme customizer responds natively to mobile views, providing a better perspective on the customer experience. ### [hashtag](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#app-integrations) **App Integrations** Shopify 2.0 offers a broader selection of app integrations compared to Shopify 1.0. This makes it easier for merchants to add new features and functionalities to their online stores without hiring developers. With the enhanced functionalities of Online Store 2.0, the need for multiple apps is reduced, leading to faster load speeds. [hashtag](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#how-those-work-with-shopify-2.0) How Those Liquiflow work with Shopify 2.0? ------------------------------------------------------------------------------------------------------------------------------------------------------- To leverage the full benefits of Shopify 2.0, we highly recommend using our GitHub integration. The primary difference lies in the content storage format: most content is now stored in JSON templates within the template folder. Without GitHub integration, you would need to manually copy all template files to maintain your shop. Our GitHub integration automates this process. After your initial conversion, we ensure that the template folder remains untouched in future conversions. This prevents any overrides to content changes made directly in the Shopify editor. To enable Shopify 2.0, you need to activate it in your Liquiflow Project settings. We strongly advise against attempting this with a Shopify 1.0 project. Therefore, it’s crucial to decide whether to use Shopify 1.0 or 2.0 before starting your project. [hashtag](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#main-benefits-with) Main Benefits with Liquiflow ---------------------------------------------------------------------------------------------------------------------------- ### [hashtag](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#dynamic-sections) **Dynamic Sections** With Shopify 2.0 enabled, all your content must be placed within a section tagged with _li-section_\=_"SECTION NAME"_. Each section should be nested inside a main element with the attribute _li-element_\=_"content-for-layout"_. Any content outside the content-for-layout element will be statically written into the layout file. This setup is particularly useful for elements like the Navbar, Footer, or Announcement Bar. Within Shopify, you now have the flexibility to move, edit, add, or delete sections. This allows merchants to modify the structure and content without affecting the underlying code. ### [hashtag](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#page-templates) **Page Templates** Each necessary page (Product, Collection, Blog, etc.) you create in Webflow must include the attribute _li-page_\=_"PAGENAME"_ on the body tag. This tag informs Shopify about the specific purpose of each page. Content pages do not require a _li-page_ tag, as they will automatically be recognized as static pages by Liquiflow. If you do not want to import a page, simply add _li-page_\=_"remove"_. In Shopify, merchants can edit existing page templates or create new ones based on the existing templates. For instance, if you have a product that requires special features, you can create a new page template and assign it to that product. This functionality allows you to create landing pages, CMS pages (such as Jobs, Team, etc.), or alternative product pages. ### [hashtag](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#dynamic-content) **Dynamic Content** With Shopify 2.0, you can populate section settings with dynamic content. For example, you can create a single Hero design and use it on both the Article and Collection pages by selecting the appropriate dynamic variable for each page. This feature allows you and your merchants to build a scalable infrastructure for your shop. ### [hashtag](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#app-blocks) **App Blocks** With App Blocks in Shopify 2.0, adding apps within your sections is very easy. We are currently working on implementing this feature in Shopify. [hashtag](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#fazit) Fazit ---------------------------------------------------------------------------------------- At Halbstark, we always use Shopify 2.0 for our projects. In our opinion, it is the best way to maintain and develop Shopify themes. If you have any questions, feel free to join our Discord server. [PreviousSEOchevron-left](https://docs.liquiflow.app/useful/seo) [NextLiquiflow Starter Templateschevron-right](https://docs.liquiflow.app/useful/liquiflow-starter-templates) Last updated 7 months ago Was this helpful? * [Key Differences Between Shopify 1.0 and 2.0](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#key-differences-between-shopify-1.0-and-2.0) * [Speed and Performance](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#speed-and-performance) * [Customization](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#customization) * [Marketing Tools](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#marketing-tools) * [Mobile Optimization](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#mobile-optimization) * [App Integrations](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#app-integrations) * [How Those work with Shopify 2.0?](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#how-those-work-with-shopify-2.0) * [Main Benefits with](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#main-benefits-with) * [Dynamic Sections](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#dynamic-sections) * [Page Templates](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#page-templates) * [Dynamic Content](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#dynamic-content) * [App Blocks](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#app-blocks) * [Fazit](https://docs.liquiflow.app/useful/shopify-1.0-vs-shopify-2.0#fazit) Was this helpful? sun-brightdesktopmoon sun-brightdesktopmoon --- # Debugging | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close Sometimes it can happen that you set some attributes wrong in Webflow. During the conversion process, we do not verify attribute values. So be careful with what you write in there. Here are some tips and tricks to help you get your theme up and running. [hashtag](https://docs.liquiflow.app/useful/debugging#automated-support-service) Liquiflow Automated Support Service ------------------------------------------------------------------------------------------------------------------------- When working in Webflow, you can always publish your site and visit the staging domain. After implementing the Liquiflow script from the project settings in the , you will see the Liquiflow Automated Support Service. Press “Run Attribute Check” to view all bugs on the current page. ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FYKVEq8P46Q8UukaR2PP8%252F669a2985ffd0c6497ee99c12_liquify-automated-support-service.webp%3Falt%3Dmedia%26token%3Dd860dd58-abf9-4951-9ab9-9049dc192989&width=768&dpr=3&quality=100&sign=e663b459&sv=2) circle-info With this configuration, a small icon will automatically appear minimized in the top right corner of your Webflow page. To make it automatically visible, remove the _auto_ and _min_ attributes. It will only appear on .webflow URLs. [hashtag](https://docs.liquiflow.app/useful/debugging#shopify-logs) Shopify Logs ------------------------------------------------------------------------------------- When working with GitHub integration, you can always check the logs in Shopify. These logs provide valuable insights into any Liquid errors and their locations. You can switch between commits using the dropdown menu. If Shopify identifies an issue, implement the solution in Webflow and convert again. ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FQ0xKCFqXSEGdSlSonJ1Y%252F669a2999835c44b0a9719636_liquify-github-logs.webp%3Falt%3Dmedia%26token%3Dfe29c8f0-cea4-4170-b7b4-ee425b57d146&width=768&dpr=3&quality=100&sign=296bc3a7&sv=2) [hashtag](https://docs.liquiflow.app/useful/debugging#debugging-in-shopify-without-github) Debugging in Shopify without GitHub ----------------------------------------------------------------------------------------------------------------------------------- When you manually upload the Shopify theme, Shopify won’t import files that contain errors, making debugging a bit challenging. However, you can always open the Shopify Code Editor and search for missing pages. Create the file manually and paste the code into the new file. Shopify will then indicate what is wrong with your file. ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252FY4pc3Fm54hp9ULR7DnH0%252F669a29a8746d8fcbd3f0e29f_liquify-import-code.webp%3Falt%3Dmedia%26token%3Df45a0448-e5f1-440a-9998-9a96ee723043&width=768&dpr=3&quality=100&sign=5d632276&sv=2) [hashtag](https://docs.liquiflow.app/useful/debugging#no-errors-occurred-but-the-page-looks-incorrect) No errors occurred, but the page looks incorrect? ------------------------------------------------------------------------------------------------------------------------------------------------------------- When using the GitHub integration to convert a theme, it might look different from Webflow even if no errors occur. Shopify may need some time to process the new CSS information in the Theme Editor. To see the updated page immediately, check the Page Preview, where the new CSS file will be applied. [hashtag](https://docs.liquiflow.app/useful/debugging#zip-file-is-too-large) ZIP file is too large? -------------------------------------------------------------------------------------------------------- If your ZIP file is too large, it’s usually because you’ve uploaded heavy image files into Webflow. To resolve this issue, delete the images in Webflow and use a placeholder image tagged with `li-settings:image="SETTING NAME"`. This way, you can add the images later in the Shopify editor. [PreviousCheat Sheetchevron-left](https://docs.liquiflow.app/useful/cheat-sheet) [NextWebflow and GSAP Animationschevron-right](https://docs.liquiflow.app/useful/webflow-and-gsap-animations) Last updated 7 months ago Was this helpful? * [Automated Support Service](https://docs.liquiflow.app/useful/debugging#automated-support-service) * [Shopify Logs](https://docs.liquiflow.app/useful/debugging#shopify-logs) * [Debugging in Shopify without GitHub](https://docs.liquiflow.app/useful/debugging#debugging-in-shopify-without-github) * [No errors occurred, but the page looks incorrect?](https://docs.liquiflow.app/useful/debugging#no-errors-occurred-but-the-page-looks-incorrect) * [ZIP file is too large?](https://docs.liquiflow.app/useful/debugging#zip-file-is-too-large) Was this helpful? sun-brightdesktopmoon Copy sun-brightdesktopmoon --- # Mini Cart | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close 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. ![](https://docs.liquiflow.app/~gitbook/image?url=https%3A%2F%2F497333298-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FheMDp56vLoqqIp7IZZ2W%252Fuploads%252F4enbx45s1NeyJeqZfyWE%252F65480e9268fb6e73e3695dda_liquify-mini-cart.webp%3Falt%3Dmedia%26token%3Dda1e67a2-ff82-489e-b8e0-233ea8829166&width=768&dpr=3&quality=100&sign=b64bb8f9&sv=2) Before we explore the component further, here are some versatile elements that can be used throughout your entire Webflow project: #### [hashtag](https://docs.liquiflow.app/add-ons/liquiflow-elements/mini-cart#add-to-cart) 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 Copy li-element = direct-add-to-cart #### [hashtag](https://docs.liquiflow.app/add-ons/liquiflow-elements/mini-cart#mini-cart-toggle) 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 Copy li-element = mini-cart-toggle #### [hashtag](https://docs.liquiflow.app/add-ons/liquiflow-elements/mini-cart#mini-cart-item-count) 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 Copy li-element = mini-cart-item-count #### [hashtag](https://docs.liquiflow.app/add-ons/liquiflow-elements/mini-cart#mini-cart-empty) Mini-Cart Empty This element is displayed when the mini-cart is empty and can be placed anywhere within the theme. Webflow Copy li-element = mini-cart-empty ### [hashtag](https://docs.liquiflow.app/add-ons/liquiflow-elements/mini-cart#mini-cart-component) 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. 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` 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 > 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` mini-cart > mini-cart-container > 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` Within this element, use the [`li-js-object`](https://docs.liquiflow.app/add-ons/liquiflow-elements/mini-cart#li-object-vs-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`](https://docs.liquiflow.app/add-ons/liquiflow-elements/mini-cart#li-js-price) ) mini-cart > mini-cart-container > mini-cart-full > 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` **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` **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` **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` [PreviousLiquiflow Elementschevron-left](https://docs.liquiflow.app/add-ons/liquiflow-elements) [NextProduct Variant Swatchchevron-right](https://docs.liquiflow.app/add-ons/liquiflow-elements/product-variant-swatch) Last updated 6 months ago Was this helpful? Was this helpful? sun-brightdesktopmoon Webflow Copy li-element = mini-cart Webflow Copy li-element = mini-cart-container Webflow Copy li-element = mini-cart-container Webflow Copy li-element = mini-cart-item Webflow Copy li-element = mini-cart-item-increase Webflow Copy li-element = mini-cart-item-decrease Webflow Copy li-element = mini-cart-item-remove Webflow Copy li-element = mini-cart-item-quantity sun-brightdesktopmoon --- # Cheat Sheet | Liquiflow circle-info Liquify Pro is now Liquiflow 🎉 close Here is a list of all the currently available Liquiflow attributes. The “Compatible with” section indicates whether an attribute can be used on the same element alongside others. However, be aware that using multiple attributes on the same element might cause one to override the other. Attribute name Compatible with Description `li-object` `li-attribute`, `li-object` To insert a [Shopify objectarrow-up-right](https://shopify.dev/docs/api/liquid/objects) , use `li-object="product.title"`. This will render as `{{ product.title }}` within the attached element. You can also use a modifier to specify its position, such as `li-object:class="product.title"`, which will render as `class="{{ product.title }}"`. [Learn more.](https://docs.liquiflow.app/liquid-attributes/objects) `li-attribute` `li-object`, `li-attribute` This tag allows us to use reserved attributes like class or src on every element. This is an example on how to use it: `li-attribute:class = "{% if product.available %} tex-color-green {% endif %}"` will be converted into `class = "{% if product.available %} tex-color-green {% endif %}"`. [Learn more](https://docs.liquiflow.app/liquid-attributes/miscellaneous#li-attribute) . `li-js-object` `li-js-object` This attribute generates an [Alpine.jsarrow-up-right](https://alpinejs.dev/start-here) object ([x-bindarrow-up-right](https://alpinejs.dev/directives/bind) or [x-textarrow-up-right](https://alpinejs.dev/directives/text) ) to dynamically display data without requiring a page reload, making it ideal for use in components like the mini cart or variant container. You can use modifiers to describe the position, like `li-object`. [Learn more](https://docs.liquiflow.app/add-ons/liquiflow-elements#li-object-vs-li-js-object) . `li-settings` `li-settings` You can implement [settingsarrow-up-right](https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings) that allow your [Shopify content editorarrow-up-right](https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings) to modify both the content and appearance directly within Shopify. To achieve this, we've introduced the `li-settings` tag. For example, `li-settings:text` to provide a text input. [Learn more](https://docs.liquiflow.app/section-settings/settings) . `li-for` \- When you need to [iterate over an arrayarrow-up-right](https://shopify.dev/docs/api/liquid/tags/for) , 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 example, `li-for="product in collection.products"`. [Learn more](https://docs.liquiflow.app/liquid-attributes/iteration-lists) . `li-paginate` \- When using a forloop with `li-for`, you can manage [paginationarrow-up-right](https://shopify.dev/docs/api/liquid/tags/paginate) using the `li-paginate` tag. Inside the `li-paginate` tag, you’ll have access to the [pagination objectarrow-up-right](https://shopify.dev/docs/api/liquid/objects/paginate) . This is useful, for example, on collection pages. By default, only `50` products are rendered, but with `li-paginate`, you can override this limit. [Learn more.](https://docs.liquiflow.app/liquid-attributes/miscellaneous#li-paginate) `li-if` \- This [tagarrow-up-right](https://shopify.dev/docs/api/liquid/tags/if) toggles the visibility of the attached element based on a specified condition. For example, `li-if="product.available"` generates a conditional wrapping tag: `{% if product.available %}
Product is available
{% endif %}`_._ [Learn more](https://docs.liquiflow.app/liquid-attributes/conditional#if) . `li-unless` \- This [tagarrow-up-right](https://shopify.dev/docs/api/liquid/tags/unless) functions similarly to `li-if` but displays the element when the specified condition is false. [Learn more](https://docs.liquiflow.app/liquid-attributes/conditional#unless) . `li-when` \- When you want to display an element which should meet different conditions, you can wrap these elements with the `li-case` [tagarrow-up-right](https://shopify.dev/docs/api/liquid/tags/case) . Inside the wrapper, you put the elements with different `li-when` [tagsarrow-up-right](https://shopify.dev/docs/api/liquid/tags/case) . [Learn more.](https://docs.liquiflow.app/liquid-attributes/conditional#case) `li-js-if` \- This attribute generates an [Alpine.jsarrow-up-right](https://alpinejs.dev/start-here) `