Webflow to shopify

Generic Elements

These elements can be used everywhere in your website, and can be used to power up your website

Forms

You can insert only one Form per page. Don't forget that all fields name must be in lowercase

Description	Element	Name	Value
Generic Form	Form Block	`shopify`	`form`

Menus

Note that every menu you want to use must be created also in Shopify with the same Handle

Description	Element	Name	Value
Menu	Link	`menu`	`menu-handle`

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`

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`