Work in Progress. Feel free to ask us anything on discord.

2Liquid Docs

01 Quick Start

First things first. We would like to thank you for trying 2 Liquid!

As this is our first Shopify App and we are currently in Beta we would like to clarify some things first. We are very happy about every single tester and every little feedback we get. Whenever you feel or notice something, it's always appreciated if you write about it in our public discord. We wanted to build 2Liquid to give something back to the Webflow community that helped us grow and also to finally get our Webflow Superpowers into Shopify!

This Documentation is still work in progress - feel free to request any changes. Last updated: 23.10.2024

Quick Start Guide
  1. Install the App in your Shopify Store
  2. In Webflow copy (cmd + c) the Section you want to convert
    1. If you want your Section to be editable give it the attribute tl-edit=""
  3. Open 2Liquid App in Shopify
  4. Click "create new Liquid File"
  5. Select a Theme, give your Shopify Section a Name & paste (cmd + v) your Webflow Section
  6. Go into your Shopify Theme Editor and use the Section there

02 Video Walktrough

03 Compatible Elements

Here is a List of compatible Elements from the Webflow Element Panel (including elements that are created inside of other elements). This is a static List updated on 23.10.24, but we are already planning on a live synced List directly from our dev team.

  • Blockquote
  • Bold Text
  • Button
  • Code
  • Code Embed
  • Custom Element
  • DIV Block
  • Dropdown
  • Grid
  • H Flex
  • Heading
  • Icon
  • Image
  • Italic Text
  • Line Break
  • Link Block
  • List
  • List Item
  • Paragraph
  • Rich Text
  • Section
  • Subscript
  • Superscript
  • Text Block
  • Text Link
  • Text Span
  • V Flex
  • YouTube Video

For specific Element questions feel free to message us on discord.

04 Dynamic Elements

1. In Webflow give the Section you wan't to edit in Shopify the custom attribute

2. In Shopify, every Element that can be edited will be editable just with that one Atrribute

Just select the Section on the left, you'll be able to edit it on the right.

05 Known Limitations

Here is a growing List of things which we currently don't support converting. We'll try to be as transparent as possible. For that, please report anything that you may find in our discord Server. This is a static List updated on 23.10.24

  • State Properties (Hover,Active,Pressed... etc) are not yet support - we're working on that
  • Grid Child Properties are not yet supported - we're working on that
  • Standard Webflow Container Elementes
  • Standard Webflow Navigation Elements (we don't yet encourage building navigational Elements with 2Liquid)
  • Tabs Element
  • Maps Element
  • CMS Content (Webflow does not allow copy-pasting this cross projects)
  • Webflow Search Element

If you'll run into other Issues, please feel free to message us on discord!

06 Best Practices

coming soon

07 Roadmap

coming soon