Webflow to shopify
Generic Elements
These elements can be used everywhere in your website, and can be used to power up your website
Sections
Sections are customizable blocks of content that can be added in Shopify. In each section you can add Options to customize the Section content or style.
Description | Element | Name | Value |
---|
Section | Div | section | unique section name |
Option Text | Section > Text | option:text | option name |
Option TextArea | Section > Text | option:textarea | option name |
Option RichText | Section > RichText | option:richtext | option name |
Option HTML | Section > Div | option:html | option name |
Option Image | Section > Image or Div | option:image | option name |
Option Url | Section > Link | option:url | option name |
Option Url to Page | Section > Link | option:page | option name |
Option Checkbox | Section > Link | option:checkbox | option name |
Option Color | Section > text | option:color | option name |
Option Background Color | Section > Any | option:bgcolor | option name |
Dynamic Sections
Dynamic Sections are customizable and rearrangeable blocks of content that can be added only in Home page. In each section you can add Options to customize the Section content or style.
Description | Element | Name | Value |
---|
Section | Div | section dynamic | unique section name true |
Option Text | Section > Text | option:text | option name |
Option TextArea | Section > Text | option:textarea | option name |
Option RichText | Section > RichText | option:richtext | option name |
Option HTML | Section > Div | option:html | option name |
Option Image | Section > Image or Div | option:image | option name |
Option Url | Section > Link | option:url | option name |
Option Url to Page | Section > Link | option:page | option name |
Option Checkbox | Section > Link | option:checkbox | option name |
Option Color | Section > text | option:color | option name |
Option Background Color | Section > Any | option:bgcolor | option name |
Social Share
Description | Element | Name | Value |
---|
Share to Facebook | Link | social | facebook |
Share to Twitter | Link | social | twitter |
Share to Linkedin | Link | social | linkedin |
Conditions
Conditions can be used to show or hide an element based on a specific condition
Description | Element | Name | Value |
---|
Show Elements | Any | show-if | condition |
Hide Elements | Any | hide-if | condition |
Below you will find all conditions for brevity only in the form show-if
, naturally you can use hide-if
with the same conditions
User Conditions
Description | Element | Name | Value |
---|
User is Logged In | Any | show-if | logged-in |
Gift Card Conditions
Description | Element | Name | Value |
---|
Gift card has been used | Any | show-if | gift-card-used |
Gift card is enabled | Any | show-if | gift-card-enabled |
Orders Conditions
Description | Element | Name | Value |
---|
User has Orders | Any | show-if | has-orders |
Current Order is Cancelled | Any | show-if | order-cancelled |
Order Item fulfilled | Any | show-if | order-item-fulfilled |
Order Item has Tracking Url | Any | show-if | order-item-tracking-url |
Cart Conditions
Description | Element | Name | Value |
---|
Cart has items inside | Any | show-if | has-items-in-cart |
Cart is empty | Any | show-if | cart-empty |
Single Product Conditions
Description | Element | Name | Value |
---|
Product has related products | Any | show-if | has-related-products |
Liquid Elements
You can inject liquid code directly inside Webflow with few attributes to enhance your website or add any plugin
Description | Element | Name | Value |
---|
Wrap Element Inside If | Any | liquid:if | expression |
Wrap Element Inside For | Any | liquid:for | expression |
Wrap Element Inside Unless | Any | liquid:unless | expression |
Change Element Text to expression | Any | liquid:object | expression |
Change Element Attribute to expression | Any | liquid:object where | expression html attribute |
Change Element Text to Liquid Tag | Any | liquid:tag | expression |
Social Share
social
facebook
social
twitter
social
linkedin