Shopify Storefront data and cart logic is bound to your Webflow elements through Shopyflow attributes. Connecting your Webflow site to Shopify is done by adding custom attributes to your Webflow elements.
Yet, you are not required to type or edit attributes manually. Shopyflow provides you with the pre-configured components needed to create your store, as copyable Webflow elements right in Webflow designer.
All the copyable Shopyflow Components are native editable Webflow elements. There is no layout or styling limitation on any element.
In the below image hover your mouse on the hotspots to see all the required Shopyflow attributes to build a product page like this in Webflow
Shopyflow offers a number of events that you can hook up to and use to execute your custom logic. Available in Shopyflow version 1.0.6 and above.
Rest of the Shopyflow event listeners must be placed inside the ShopyflowReady event listener.
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
window.addEventListener('ShopyflowReady', (event) => {
// Run your code here
});
</script>
All product containers will trigger this event once they are processed by Shopyflow.
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {HTMLElement} el - product container element
* @param {Product} product - the product associated with the Buy Module
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('buyModuleReady', ({ el, product }) => {
console.log('Product container:', el);
console.log('Product:', product);
// Run your code here
})
});
</script>
Customer actions that will trigger a cart update event:
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {Cart} cart - Shopify cart
* @param {string} type - update event type
* @param {any} rest - rest of the objects that are returned
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('cartUpdate', ({ cart, type, ...rest }) => {
console.log('Event type:', type);
console.log('Cart:', cart);
console.log('Rest of the event objects:', rest);
// Run your code here
})
});
</script>
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {Cart} cart - Shopify cart
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('cartLoad', ({ cart }) => {
console.log('Cart:', cart);
// Run your code here
})
});
</script>
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {HTMLElement} el - product container element
* @param {ProductVariant} variant - the product variant that's selected
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('optionChange', ({ el, variant }) => {
console.log('Product container:', el);
console.log('Variant:', variant);
// Run your code here
})
});
</script>
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {HTMLElement} el - product container element
* @param {Number} quantity - the current product quantity
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('quantityChange', ({ el, quantity }) => {
console.log('Product container:', el);
console.log('Quantity:', quantity);
// Run your code here
})
});
</script>
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {HTMLElement} el - main image element element
* @param {string} src - image url
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('galleryImageChange', ({ el, src }) => {
console.log('Image element:', el);
console.log('Image URL:', src);
// Run your code here
})
});
</script>
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {HTMLElement} el - Cart element
* @param {Cart} cart - Shopify cart
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('cartOpen', ({ el, cart }) => {
console.log('Cart element:', el);
console.log('Cart:', cart);
// Run your code here
})
});
</script>
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {string} id - customer ID
* @param {string} email - customer email
* @param {string[]} tags - customer tags
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('customerLogin', ({ id, email, tags }) => {
console.log('Customer ID:', id);
console.log('Customer email:', email);
console.log('Customer tags:', tags);
// Run your code here
})
});
</script>
All collection instances will trigger this event once they are processed by Shopyflow.
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {HTMLElement} el - collection wrapper element
* @param {ShopyflowCollection} collection - the collection object associated with the Collection Module
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('collectionModuleReady', ({ el, collection }) => {
console.log('Collection wrapper:', el);
console.log('Collection:', collection);
// Run your code here
})
});
</script>
Rest of the Shopyflow event listeners must be placed inside the ShopyflowReady event listener.
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
window.addEventListener('ShopyflowReady', (event) => {
// Run your code here
});
</script>
All product containers will trigger this event once they are processed by Shopyflow.
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {HTMLElement} el - product container element
* @param {Product} product - the product associated with the Buy Module
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('buyModuleReady', ({ el, product }) => {
console.log('Product container:', el);
console.log('Product:', product);
// Run your code here
})
});
</script>
Customer actions that will trigger a cart update event:
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {Cart} cart - Shopify cart
* @param {string} type - update event type
* @param {any} rest - rest of the objects that are returned
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('cartUpdate', ({ cart, type, ...rest }) => {
console.log('Event type:', type);
console.log('Cart:', cart);
console.log('Rest of the event objects:', rest);
// Run your code here
})
});
</script>
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {Cart} cart - Shopify cart
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('cartLoad', ({ cart }) => {
console.log('Cart:', cart);
// Run your code here
})
});
</script>
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {HTMLElement} el - product container element
* @param {ProductVariant} variant - the product variant that's selected
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('optionChange', ({ el, variant }) => {
console.log('Product container:', el);
console.log('Variant:', variant);
// Run your code here
})
});
</script>
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {HTMLElement} el - product container element
* @param {Number} quantity - the current product quantity
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('quantityChange', ({ el, quantity }) => {
console.log('Product container:', el);
console.log('Quantity:', quantity);
// Run your code here
})
});
</script>
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {HTMLElement} el - main image element element
* @param {string} src - image url
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('galleryImageChange', ({ el, src }) => {
console.log('Image element:', el);
console.log('Image URL:', src);
// Run your code here
})
});
</script>
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {HTMLElement} el - Cart element
* @param {Cart} cart - Shopify cart
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('cartOpen', ({ el, cart }) => {
console.log('Cart element:', el);
console.log('Cart:', cart);
// Run your code here
})
});
</script>
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {string} id - customer ID
* @param {string} email - customer email
* @param {string[]} tags - customer tags
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('customerLogin', ({ id, email, tags }) => {
console.log('Customer ID:', id);
console.log('Customer email:', email);
console.log('Customer tags:', tags);
// Run your code here
})
});
</script>
All collection instances will trigger this event once they are processed by Shopyflow.
You can add this code to the page settings inside the <head> tag to listen to this event and to execute your custom code as follows:
<script>
/**
* @param {HTMLElement} el - collection wrapper element
* @param {ShopyflowCollection} collection - the collection object associated with the Collection Module
*
* You can use the provided Shopyflow objects to implement custom logic.
*/
window.addEventListener('ShopyflowReady', (event) => {
Shopyflow.on('collectionModuleReady', ({ el, collection }) => {
console.log('Collection wrapper:', el);
console.log('Collection:', collection);
// Run your code here
})
});
</script>
