Taxi.js Integration
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
Taxi.js adds smooth page transitions to your website by swapping page content without a full reload. Because the browser never reloads, Storesynk needs to know when a navigation has finished so it can initialize the products, buy buttons and other components on the new page.
Reinitializing after navigation
Storesynk v2.2.0 and later ships a reinit method for exactly this. It only processes elements that were not initialized before, so it is safe to call on every navigation. Add the code snippet below to your Taxi.js setup code:
taxi.on('NAVIGATE_END', () => { window.Shopyflow.reinit();});For best results keep your navbar and cart outside the Taxi.js transition container so they persist across navigations.
Reach out to us if you want to integrate Storesynk with another page transition library!
Webflow app usage
Webflow app settings
Inner components
Module contents
Available methods
Integration
contents
State management
Related Utilities
