Webflow sync, pageviews & more.
NEW

Can I use a custom-designed cart page in Webflow with a Shopify checkout like the Alyx website?

TL;DR
  • Build a custom cart page in Webflow and connect it to Shopify using either the Buy Button for simple integration or the Storefront API for full control.
  • Use JavaScript and Shopify’s API to manage cart logic and redirect users to Shopify's hosted checkout, as Webflow doesn’t support native checkout.

You can create a custom-designed cart page in Webflow and then send users to a Shopify checkout, but it requires integrating Shopify's Buy Button or Storefront API — Webflow alone doesn’t support native Shopify checkout.

1. Design the Cart Page in Webflow

  • Build your cart page layout in Webflow using div blocks and custom styling.
  • Add placeholders for product name, quantity, price, and total.
  • Include buttons for updating quantities or removing items if needed — keep in mind this logic must be backed by Shopify, not Webflow alone.

2. Use Shopify Buy Button or Storefront API

  • Buy Button Approach:

  • In Shopify, go to Sales Channels > Buy Button and create product or collection embeds.

  • For full cart and checkout functionality (like the Alyx site), you'll need to embed the whole cart experience, not just product buttons.

  • Shopify handles checkout and cart items. The Buy Button includes a floating cart and redirects to Shopify's checkout.

  • Advanced: Storefront API:

  • Gives full control to build a custom cart system in Webflow.

  • You’ll need to use JavaScript to:

    • Create a Shopify cart session.
    • Add/remove/update line items.
    • Display cart data (products, quantities, pricing).
    • Launch the checkout (Shopify generates a custom checkout URL).

  • This option mimics Alyx’s approach more closely but requires developer-level JS knowledge and Shopify API setup.

3. Redirect to Shopify Checkout

  • Whether using Buy Button or API:
  • The final checkout step goes through Shopify's secure checkout page.
  • You cannot host the actual checkout within Webflow — Shopify mandates using its hosted checkout page.

4. Hosting & Platform Consideration

  • Alyx uses a headless Shopify setup with a completely custom frontend, not just Webflow.
  • Webflow + Shopify API works for smaller stores or prototyping, but for full control like Alyx, you would eventually need a headless CMS approach with custom code.

Summary

You can replicate a custom-designed cart page in Webflow and use Shopify for checkout, using either Buy Button embeds or the Shopify Storefront API (for full control). Alyx uses a headless Shopify setup, which is possible to emulate in Webflow with significant custom code and API integration.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Why does the font change when viewing the published state of my SVG image imported into Webflow? It is supposed to be an image, not an actual font. Any suggestions?
Is there a way to prevent form submissions from using personal email addresses on Webflow to reduce spam, even with Recaptcha?
How can I render a background video correctly in Webflow to avoid cropping?
How can I use the same grid layout for both blog posts and listings in Webflow without encountering the lock icon issue?
How can I hide certain pages in a Webflow template I purchased when publishing, without deleting them?
What are some alternative options to the Soundcloud embed widget for hosting audio tracks on a Webflow site with text and image commentary below?
How can I create a similar effect in Webflow to the one featured on The Marginalian website?
Why do some of the images not show up on screen after being compressed with the Webflow tool, and why do I have to delete them and then replace them in order to fix the issue?
How can I resolve the issue in Webflow where a CMS item in a filtered collection list becomes skinny when there is only one result, while using Jetboost for filtering?
Can I add a span with a class within a h4 tag in the Webflow editor or do I need to edit the code manually?
How can I create a word animation like the one in the hero section where the bottom line of text changes in Webflow? I need tips, tutorials, or videos to help me achieve this. I've searched on the forum but haven't found the right solution yet. Thank you!
How can I achieve better performance for my Webflow website on mobile devices, as it currently has a low score on mobile performance tests compared to desktop performance?
Can Webflow be used to create a web app with user login, information entry, photo or detail uploads, and have that information appear in a template accessible through a unique URL?
How can I use basic math to calculate and display the total time for a recipe page in Webflow CMS?
Can Webflow provide an option in the editor to easily add the "nofollow" tag to external links in blog posts and articles?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?
Is there a way to auto-scroll the page in Webflow after a certain amount of time, without the script automatically scrolling back up if the user has already scrolled past the designated point?
How can I close a dropdown in Webflow when clicking on a link?