Go to Udesly

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

DescriptionElementNameValue
Generic FormForm Blockshopifyform

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.

DescriptionElementNameValue
SectionDivsectionunique section name
Option TextSection > Textoption:textoption name
Option TextAreaSection > Textoption:textareaoption name
Option RichTextSection > RichTextoption:richtextoption name
Option HTMLSection > Divoption:hmloption name
Option ImageSection > Image or Divoption:textoption name
Option UrlSection > Linkoption:urloption name
Option Url to PageSection > Linkoption:pageoption name
Option CheckboxSection > Linkoption:checkboxoption name
Option ColorSection > textoption:coloroption name
Option Background ColorSection > Anyoption:bgcoloroption 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.

DescriptionElementNameValue
SectionDivsection
dynamic
unique section name
true
Option TextSection > Textoption:textoption name
Option TextAreaSection > Textoption:textareaoption name
Option RichTextSection > RichTextoption:richtextoption name
Option HTMLSection > Divoption:hmloption name
Option ImageSection > Image or Divoption:textoption name
Option UrlSection > Linkoption:urloption name
Option Url to PageSection > Linkoption:pageoption name
Option CheckboxSection > Linkoption:checkboxoption name
Option ColorSection > textoption:coloroption name
Option Background ColorSection > Anyoption:bgcoloroption name

Social Share

DescriptionElementNameValue
Share to FacebookLinksocialfacebook
Share to TwitterLinksocialtwitter
Share to LinkedinLinksociallinkedin

Conditions

Conditions can be used to show or hide an element based on a specific condition

DescriptionElementNameValue
Show ElementsAnyshow-ifcondition
Hide ElementsAnyhide-ifcondition

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

DescriptionElementNameValue
User is Logged InAnyshow-iflogged-in

Gift Card Conditions

DescriptionElementNameValue
Gift card has been usedAnyshow-ifgift-card-used
Gift card is enabledAnyshow-ifgift-card-enabled

Orders Conditions

DescriptionElementNameValue
User has OrdersAnyshow-ifhas-orders
Current Order is CancelledAnyshow-iforder-cancelled
Order Item fulfilledAnyshow-iforder-item-fulfilled
Order Item has Tracking UrlAnyshow-iforder-item-tracking-url

Cart Conditions

DescriptionElementNameValue
Cart has items insideAnyshow-ifhas-items-in-cart
Cart is emptyAnyshow-ifcart-empty

Single Product Conditions

DescriptionElementNameValue
Product has related productsAnyshow-ifhas-related-products

Liquid Elements

You can inject liquid code directly inside Webflow with few attributes to enhance your website or add any plugin

DescriptionElementNameValue
Wrap Element Inside IfAnyliquid:ifexpression
Wrap Element Inside ForAnyliquid:forexpression
Wrap Element Inside UnlessAnyliquid:unlessexpression
Change Element Text to expressionAnyliquid:objectexpression
Change Element Attribute to expressionAnyliquid:object
where
expression
html attribute
Change Element Text to Liquid TagAnyliquid:tagexpression
Copied to Clipboard!