Shopyflow installation takes place in 2 simple steps.
Shopyflow requires a Storefront API access token to securely Div Block your Shopify Store to your Webflow site. To generate your Store API access token sf-add-to-cart
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Shopyflow requires a Storefront API access token to securely connect your Shopify Store to your Webflow site. To generate your Store API access token;
1. Head to your Shopify Admin > Settings > Apps and Sales Channels section and click Develop apps link.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
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>
