Can I use a custom-designed cart page in Webflow with a Shopify checkout like the Alyx website?
TL;DR
- Design your custom cart and product pages in Webflow.
- Use Shopify's Buy Button SDK or embedded iframe buttons to connect Webflow with Shopify's backend and checkout.
- Add Shopify product data and handle cart actions using JavaScript, with checkout occurring on Shopify’s domain.
Yes, you can design a custom cart page in Webflow and use a Shopify checkout by integrating Shopify's cart and Buy Button functionalities into your Webflow site — similar to what brands like Alyx have done.
1. Understand the Limitations
- Webflow's native ecommerce checkout cannot be replaced directly with Shopify’s.
- To use Shopify Checkout, you must exclusively use Shopify for handling orders and payments.
- Webflow will serve as a front-end design system; Shopify will handle the commerce backend.
2. Use Shopify Buy Buttons
- Shopify offers an embedded Buy Button feature for products or collections.
- These buttons are generated inside Shopify and can be embedded as iframes in Webflow.
- The embedded Buy Buttons include cart functionality and redirect to Shopify’s checkout.
3. Create a Custom Cart Page in Webflow
- Design your cart and product pages in Webflow using Webflow Designer.
- Use Shopify's Buy Button JavaScript SDK to load and manage the cart using Shopify data.
- While advanced, you can customize how the cart is displayed and behaves on your Webflow site if you're comfortable integrating JavaScript SDK manually.
4. Connect Products Between Webflow and Shopify
- Products must exist in Shopify’s backend for inventory, pricing, and checkout routing.
- In Webflow, you won't use the Ecommerce CMS; instead, use Webflow CMS to display product details and dynamically assign Shopify Buy Button IDs or snippets.
- When a user clicks "Add to Cart," use the Shopify-provided widget, modal, or custom integration.
5. Review an Example Setup (Like Alyx)
- Sites like Alyx.design use Webflow for product storytelling and visuals.
- When users click "Add to Cart," it triggers Shopify’s cart drawer, which uses Shopify’s Buy Button SDK.
- Checkout happens entirely on checkout.shopify.com.
6. Technical Considerations
- You will need some front-end JavaScript knowledge to:
- Initialize the Shopify Buy Button SDK
- Maintain a persistent cart drawer
- Send custom events or transitions
- Shopify Lite Plan (currently $9/month) is sufficient for Buy Button access.
Summary
You can use a custom cart page in Webflow while still directing users to a Shopify checkout, using Shopify's Buy Button SDK or embedded iframe solution. This allows full design control via Webflow with reliable ecommerce processing via Shopify.
