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 |