Help Center

Help Center

Search our help center for quick answers.

How do I set up my Storefront Space in Webflow?

2 minute read

Here’s a step by step guide to embedding your Storefront Space as a modal or cart into your Webflow site if you have access to your custom code available on Webflow’s Starter Plan with Basic Hosting. If you haven’t already, check out our Cloneable and Responsive Webflow Template.

  1. In Plasso, create a Storefront Space and add your products and/or plans.
  2. In Webflow, go to the Project Settings Dashboard or the Page Settings of the page that you want to embed your Storefront space on. Scroll to the bottom and insert your Embed Code for either the modal or the cart (located on your Storefront ‘Setup’ page) into the Body </body> tag box:
    1. Modal:
      <script src="https://plasso.com/embed/storefront.1.0.js"></script>
    2. Cart:
      <script src="https://plasso.com/embed/storefront.1.0.js"></script>
      <script>Plasso.Cart.setup({ spaceId: "Your_Space_ID" });</script>
  3. Next, create a button(s) on your Webflow site.
    1. To link to a Plan, insert your Space URL, then Plan, with your Plan ID on the end. (i.e. https://plasso.com/s/S5Wop03JAR/plan/learn_to_paint)
    2. To link to a Product insert your Space URL, then Product, with your Product ID on the end. (i.e. https://plasso.com/s/S5Wop03JAR/product/spray_paint)
      screen-shot-2018-03-22-at-6-35-24-am screen-shot-2018-03-22-at-6-36-51-am

For Modal users, that’s it! 🎊 You can publish your page and test out your embed.

For Cart users, you may want to add a Cart Toggle button on your page before you’re finished:

  1. Drag a <div> element in the location that you want your button.
  2. Give that element a custom attribute of:
    data-pl-cart-button
  3. Next, give that attribute a Value of “1”. Webflow requires that the Value field be filled in so any character would work. This attribute will give you a prebuilt button with a live item total. You can also make any element a toggle to open and close the Cart. For more options, check out our Help Center article.
    screen-shot-2018-03-22-at-7-03-34-am

Now, you are all set! 🎉 You can publish your page and test out adding items to your cart.

Was this article helpful?

7 found this helpful.

Can't find your answer?

We want to answer all of your questions. Get in touch and we’ll get back to you as soon as we can. Email us.

Policy questions?

Take a look at our Terms of Service and review our Privacy Policy.