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

Description	Element	Name	Value
Collections List Page	Body	`page`	`list-collections`

Collections List Page Elements

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

Description	Element	Name	Value
Collections	Collection List Wrapper	`shop`	`collections`
Description	Collection List Item > Text	`item`	`description`
Title	Collection List Item > Text	`item`	`title`
Products Count	Collection List Item > Text	`item`	`products-count`
Featured Image	Collection List Item > Image Or Div	`item`	`featured-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

Description	Element	Name	Value
Collection Page	Body	`page`	`collection`
Different Template	Body	`page`	`collection-template`

Collection Page Elements

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

Description	Element	Name	Value
Collection Title	Text	`shop`	`collection-title`
Collection Description	Text	`shop`	`collection-description`
Collection Image	Image Or Div	`shop`	`collection-image`
Collection Type	Text	`shop`	`collection-type`
Collection Vendor	Text	`shop`	`collection-vendor`
Tags	Link	`shop`	`tags`
All Tags	Link	`shop`	`all-tags`
Types	Link	`shop`	`types`
Vendors	Link	`shop`	`vendors`
Archive Products	Collection List Wrapper	`shop`	`archive-products`
Title	Collection List Item >Text	`item`	`title`
Featured Image	Collection List Item >Image Or Div	`item`	`featured-image`
Price	Collection List Item >Text	`item`	`price`
Compare Price	Collection List Item >Text	`item`	`compare-price`
Link	Collection List Item >Link	`item`	`link`
Description	Collection List Item >Text	`item`	`description`
Vendor	Collection List Item >Text	`item`	`vendor`
Type	Collection List Item >Text	`item`	`type`
On Sale	Collection List Item >Text	`item`	`on-sale`
Sold-out	Collection List Item >Link	`item`	`collections`
Tags	Collection List Item >Link	`item`	`tags`
Product Image	Image Or Div	`item` `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.

Description	Element	Name	Value
Product Page	Body	`page`	`product`
Different Template	Body	`page`	`product-template`

Product Page Elements

This elements can be used only in the Product Page

Description	Element	Name	Value
Title	Text	`item`	`title`
Featured Image	Image Or Div	`item`	`featured-image`
Price	Text	`item`	`price`
Compare Price	Text	`item`	`compare-price`
Link	Link	`item`	`link`
Description	Text	`item`	`description`
Vendor	Text	`item`	`vendor`
Type	Text	`item`	`type`
On Sale	Text	`item`	`on-sale`
Sold Out	Text	`item`	`sold-out`
Collections	Link	`item`	`collections`
Tags	Link	`item`	`tags`
Product Images	Image Or Div Or Slider Or Lightbox	`item`	`product-images`
Specific Product Image	Image Or Div	`item` `index`	`product-image` `index of the image`
Add To Cart	Add To Cart
Variations Title	Add To Cart > Text	`item`	`option-title`
Variations Option Wrapper	Add To Cart > Div	`item`	`option-wrapper`
Variations Option Type Text	Add To Cart > Label	`item`	`option`
Variations Option Type Color	Add To Cart > Label	`item`	`color`
Recommended	Collection List Wrapper	`shop`	`recommended`
Title	Collection List Item > Text	`item`	`title`
Price	Collection List Item > Text	`item`	`price`
Link	Collection List Item > Link	`item`	`link`
Vendor	Collection List Item > Text	`item`	`vendor`
Type	Collection List Item > Text	`item`	`type`
Featured Image	Collection List Item > Image Or Div	`item`	`featured-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.

Description	Element	Name	Value
Cart Page	Body	`page`	`cart`

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.

Description	Element	Name	Value
Cart	Form Block	`shop`	`cart`
Cart Total	Form Block > Text	`item`	`cart-total`
Cart Discounts	Form Block > Text	`item`	`cart-discounts`
Cart Checkout	Form Block > Submit	`item`	`checkout`
Cart Update	Form Block > Submit	`item`	`update`
Cart Items	Collection List Wrapper
Cart Title	Collection List Item > Text	`item`	`title`
Cart Vendor	Collection List Item > Text	`item`	`vendor`
Cart Price	Collection List Item > Text	`item`	`price`
Cart Total	Collection List Item > Text	`item`	`total`
Cart Properties	Collection List Item > Text	`item`	`properties`
Cart Variant	Collection List Item > Text	`item`	`variant`
Cart Original Price	Collection List Item > Text	`item`	`original-price`
Cart Quantity	Collection List Item > Text	`item`	`quantity`
Cart Link	Collection List Item > Link	`item`	`link`
Cart Remove	Collection List Item > Link	`item`	`remove`
Cart Featured Image	Collection List Item > Image Or Div	`item`	`featured-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.

Description	Element	Name	Value
Gift Card	Body	`page`	`gift-card`

Gift Card Elements

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

Description	Element	Name	Value
Expiration Date	Text	`gift-card`	`expiration-date`
Initial Balance	Text	`gift-card`	`initial-balance`
Code	Text	`gift-card`	`code`
Balance	Text	`gift-card`	`balance`
Qr Code	Text	`gift-card`	`qr-code`
Image	Image Or Div	`gift-card`	`image`

Misc Items

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

Links

Description	Element	Name	Value
Checkout Link	Link	`shop`	`checkout-link`
Cart Link	Link	`shop`	`cart-link`
Collection Link	Link	`collection-link`	`collection handle`
Product Link	Link	`product-link`	`product handle`

Mini Cart

Description	Element	Name	Value
Cart Items Count	Text	`shop`	`carts-count`
Mini Cart	Mini Cart	`shop`	`mini-cart`
Mini Cart Items	Mini Cart > List (not Collection list)	`item`	`products-list`
Title	List Item > Text	`item`	`title`
Vendor	List Item > Text	`item`	`vendor`
Price	List Item > Text	`item`	`price`
Total	List Item > Text	`item`	`total`
Quantity	List Item > Text	`item`	`quantity`
Link	List Item > Text	`item`	`link`
Remove	List Item > Link	`item`	`remove`
Featured Image	List Item > Image Or Div	`item`	`featured-image`

List of Products

Description	Element	Name	Value
Products List	Collection List Wrapper	`shop:products`	`settings name`
Title	Text	`item`	`title`
Featured Image	Image Or Div	`item`	`featured-image`
Price	Text	`item`	`price`
Compare Price	Text	`item`	`compare-price`
Link	Link	`item`	`link`
Description	Text	`item`	`description`
Vendor	Text	`item`	`vendor`
Type	Text	`item`	`type`
On Sale	Text	`item`	`on-sale`
Sold-Out	Text	`item`	`sold-out`
Collections	Link	`item`	`collections`
Tags	Link	`item`	`tags`

Notifications

Notifications can be inserted only once in the project

Description	Element	Name	Value
Notification Success	Div	`shop`	`notification-success`
Notification Message	Notification Success > Text	`item`	`message`
Notification Error	Div	`shop`	`notification-error`
Notification Message	Notification Error > Text	`item`	`message`