Go to Udesly

Webflow to shopify

Shop

These are all the pages and elements you can use to customize your powerfull shop in Shopify. There are 5 pages and several elements you can use everywhere in your website.

Collections List Page

This page will show all the collections avaiable in your Shopify store

DescriptionElementNameValue
Collections List PageBodypagelist-collections

Collections List Page Elements

These are all the elements that you can use in the Collections List Page

DescriptionElementNameValue
CollectionsCollection List Wrappershopcollections
DescriptionCollection List Item
> Text
itemdescription
TitleCollection List Item
> Text
itemtitle
Products CountCollection List Item
> Text
itemproducts-count
Featured ImageCollection List Item
> Image Or Div
itemfeatured-image

Collection Page

Collection page shows all the products of the collection. By default the page Product Category of Webflow is converted as Collection Page

DescriptionElementNameValue
Collection PageBodypagecollection
Different TemplateBodypagecollection-template

Collection Page Elements

These are all the elements that you can use in the Collection Page

DescriptionElementNameValue
Collection TitleTextshopcollection-title
Collection DescriptionTextshopcollection-description
Collection ImageImage Or Divshopcollection-image
Collection TypeTextshopcollection-type
Collection VendorTextshopcollection-vendor
TagsLinkshoptags
All TagsLinkshopall-tags
TypesLinkshoptypes
VendorsLinkshopvendors
Archive ProductsCollection List Wrappershoparchive-products
TitleCollection List Item
>Text
itemtitle
Featured ImageCollection List Item
>Image Or Div
itemfeatured-image
PriceCollection List Item
>Text
itemprice
Compare PriceCollection List Item
>Text
itemcompare-price
LinkCollection List Item
>Link
itemlink
DescriptionCollection List Item
>Text
itemdescription
VendorCollection List Item
>Text
itemvendor
TypeCollection List Item
>Text
itemtype
On SaleCollection List Item
>Text
itemon-sale
Sold-out Collection List Item
>Link
itemcollections
TagsCollection List Item
>Link
itemtags
Product ImageImage Or Divitem
index
product-image
index of the image

Product Page

This page shows a single product of your shop. By default the page Product Template of Webflow is converted automatically as Product Page.

DescriptionElementNameValue
Product PageBodypageproduct
Different TemplateBodypageproduct-template

Product Page Elements

This elements can be used only in the Product Page

DescriptionElementNameValue
TitleTextitemtitle
Featured ImageImage Or Divitemfeatured-image
PriceTextitemprice
Compare PriceTextitemcompare-price
LinkLinkitemlink
DescriptionTextitemdescription
VendorTextitemvendor
TypeTextitemtype
On SaleTextitemon-sale
Sold OutTextitemsold-out
CollectionsLinkitemcollections
TagsLinkitemtags
Product ImagesImage Or Div Or Slider Or Lightboxitemproduct-images
Specific Product ImageImage Or Divitem
index
product-image
index of the image
Add To CartAdd To Cart
Variations TitleAdd To Cart
> Text
itemoption-title
Variations Option WrapperAdd To Cart
> Div
itemoption-wrapper
Variations Option Type TextAdd To Cart
> Label
itemoption
Variations Option Type ColorAdd To Cart
> Label
itemcolor
RecommendedCollection List Wrappershoprecommended
TitleCollection List Item
> Text
itemtitle
PriceCollection List Item
> Text
itemprice
LinkCollection List Item
> Link
itemlink
VendorCollection List Item
> Text
itemvendor
TypeCollection List Item
> Text
itemtype
Featured ImageCollection List Item
> Image Or Div
itemfeatured-image

Cart Page

The cart page shows a summary of all of the products that a customer has added to the cart including all the necessary info.

DescriptionElementNameValue
Cart PageBodypagecart

Cart Page elements

The cart page shows a summary of all of the products that a customer has added to the cart including all the necessary info.

DescriptionElementNameValue
CartForm Blockshopcart
Cart TotalForm Block
> Text
itemcart-total
Cart DiscountsForm Block
> Text
itemcart-discounts
Cart CheckoutForm Block
> Submit
itemcheckout
Cart UpdateForm Block
> Submit
itemupdate
Cart ItemsCollection List Wrapper
Cart TitleCollection List Item
> Text
itemtitle
Cart VendorCollection List Item
> Text
itemvendor
Cart PriceCollection List Item
> Text
itemprice
Cart TotalCollection List Item
> Text
itemtotal
Cart PropertiesCollection List Item
> Text
itemproperties
Cart VariantCollection List Item
> Text
itemvariant
Cart Original PriceCollection List Item
> Text
itemoriginal-price
Cart QuantityCollection List Item
> Text
itemquantity
Cart LinkCollection List Item
> Link
itemlink
Cart RemoveCollection List Item
> Link
itemremove
Cart Featured ImageCollection List Item
> Image Or Div
itemfeatured-image

Gift Card

A gift card is a special type of product. Its value can be used as payment toward future orders from your online store. Follow this guide to design this page in Webflow and convert it to Shopify.

DescriptionElementNameValue
Gift CardBodypagegift-card

Gift Card Elements

These are all the elements you can use in the Gift Card page

DescriptionElementNameValue
Expiration DateTextgift-cardexpiration-date
Initial BalanceTextgift-cardinitial-balance
CodeTextgift-cardcode
BalanceTextgift-cardbalance
Qr CodeTextgift-cardqr-code
ImageImage Or Divgift-cardimage

Misc Items

These elements can be added on all pages of your Website.

Links

DescriptionElementNameValue
Checkout LinkLinkshopcheckout-link
Cart LinkLinkshopcart-link
Collection LinkLinkcollection-linkcollection handle
Product LinkLinkproduct-linkproduct handle

Mini Cart

DescriptionElementNameValue
Cart Items CountTextshopcarts-count
Mini CartMini Cartshopmini-cart
Mini Cart ItemsMini Cart
> List (not Collection list)
itemproducts-list
TitleList Item
> Text
itemtitle
VendorList Item
> Text
itemvendor
PriceList Item
> Text
itemprice
TotalList Item
> Text
itemtotal
QuantityList Item
> Text
itemquantity
LinkList Item
> Text
itemlink
RemoveList Item
> Link
itemremove
Featured ImageList Item
> Image Or Div
itemfeatured-image

List of Products

DescriptionElementNameValue
Products ListCollection List Wrappershop:productssettings name
TitleTextitemtitle
Featured ImageImage Or Divitemfeatured-image
PriceTextitemprice
Compare PriceTextitemcompare-price
LinkLinkitemlink
DescriptionTextitemdescription
VendorTextitemvendor
TypeTextitemtype
On SaleTextitemon-sale
Sold-OutTextitemsold-out
CollectionsLinkitemcollections
TagsLinkitemtags

Notifications

Notifications can be inserted only once in the project

DescriptionElementNameValue
Notification SuccessDivshopnotification-success
Notification MessageNotification Success
> Text
itemmessage
Notification ErrorDivshopnotification-error
Notification MessageNotification Error
> Text
itemmessage
Copied to Clipboard!