Help Center

Help Center

Search our help center for quick answers.

How do I embed my Storefront Space into my Website?

4 minute read

To make Plasso even more flexible, we’ve built a fully functioning Cart and Pop-Up Modal that works directly in your own website. Adding the cart or modal to your website is fast and simple. If you are using a CMS site builder, check out our Help Center article for specific instructions.

Otherwise, here’s how to do it:

  1. Create a Storefront Space and add some products and/or plans to it.
  2. Add ‘Buy Now’ buttons on your website that point to your Storefront products/plans. The URL for those buttons will look something like:
    https://plasso.com/s/space_id_here/product/product_id_here
    https://plasso.com/s/space_id_here/plan/plan_id_here
    The full HTML should look something like:
    <a href="https://plasso.com/s/abc123/product/premium-tshirt">Buy Now</a>
    <a href="https://plasso.com/s/abc123/plan/gold-plan">Buy Now</a>
  3. Next, copy the embed code snippet for your Storefront Space from the Space’s setup page inyour Plasso dashboard. screen-shot-2018-06-12-at-11-20-47-am
  4. Paste the code snippet it into your CMS, website builder, or HTML file. Ideally it should go just before the closing </body> tag, or in the <head> tag, or wherever you’re able to put it.

For the Storefront Cart

From the Embed section in the Storefront setup dashboard, click the “Include Cart Code” tab and copy the code snippet displayed below the tab. Then paste the code snippet it into your CMS, website builder, or HTML file. Ideally it should go just before the closing </body> tag, or in the <head> tag, or wherever you’re able to put it.
Notice: The Cart code snippet should replace the code snippet mentioned above. You should only have one code snippet in your website.

screen-shot-2018-05-15-at-2-41-57-pm

Pro Tip: You’ll need to make sure the Storefront setup JS code runs after the content on your page has loaded.

All-At-Once

Instead of adding items to the cart, you can simply display all of your Products and/or Plans in your Space by setting up your buttons to link directly to the Space’s root URL (as opposed to linking to a specific Product or Plan). The URL for those buttons will look something like:
https://plasso.com/s/space_id_here

screen-shot-2018-03-29-at-9-18-49-pm

Sign Up Mode

If you’d like to have the cart work specifically for sign-ups and log-ins, you can put it in ‘signup’ mode. Doing this will remove the ‘Cart’ option form the Cart’s header and instead the header will have two options: ‘Sign Up’ and “Log In’. Additionally, the ‘Sign Up’ tab will display a signup form, skipping the need for the customer to ‘add’ anything to the cart. You’ll need to setup your sign up and log in buttons to link directly to the Space’s root URL. The URL for those buttons will look something like:
https://plasso.com/s/space_id_here

You’ll also need to add a mode parameter with the value of signup to the Plasso.cart.setup() code snippet. It will end up looking something like:

<script>
  Plasso.Cart.setup({ 
    spaceId: "abc123",
    mode: "signup"
  });
</script>

Coupon code pass-through

You can pass a coupon code through to the checkout flow by setting a coupon param in the Plasso setup code snippet. Passing a coupon code will auto-fill it into the ‘Coupon Code’ field in the checkout flow.

For the Cart:

<script>
  Plasso.Cart.setup({ 
    spaceId: "abc123",
    coupon: 'coolcode25'
  });
</script>

For the Pop-Up Modal:

<script>
  Plasso.Space.coupon = 'coolcode25';
</script>

Customize the appearance

For additional information on how to customize your Storefront cart, read our customization article.


Cart button

We’ve made a handy pre-built Cart button you can easily drop into your website to show/hide the Cart. Check it out here.


Adding custom Metadata

If you need to pass custom data along with a customer’s purchase/account you can use Plasso’s Metadata feature.
Learn more here


For the Pop-Up Modal

  1. Add ‘Buy Now’ buttons on your website that point to your Plasso products/plans. The URL for those buttons will look something like:
    https://plasso.com/s/space_id_here/product/product_id_here
    https://plasso.com/s/space_id_here/plan/plan_id_here
    The full HTML should look something like:
    <a href="https://plasso.com/s/abc123/product/premium-tshirt">Buy Now</a>
    <a href="https://plasso.com/s/abc123/plan/gold-plan">Buy Now</a>
  2. From the Embed section in the Storefront setup dashboard, click the “Default” tab and copy the code snippet displayed below the tab. Then paste the snippet of code into your website at the bottom of your HTML page just before your closing </body> tag.

screen-shot-2018-05-15-at-2-43-40-pm

Pro Tip: You’ll need to make sure the Storefront setup JS code runs after the content on your page has loaded.

When it’s not working

Some CMS platforms and website builders do not allow (or work well with) 3rd party Javascript code. Squarespace and Tilda are two examples of website builders that don’t work well with 3rd party Javascript. They block click events on their buttons.
Luckily, we’ve built a way to get around these issues. You can add forceCleanButtons to the Plasso setup javascript code snippet to tell Plasso to remove all other click handlers on the buttons you’re trying to use with Plasso. (Note: this will only affect buttons you’re trying to use with Plasso, we won’t touch anything else on the page).

For the Cart:

<script>
  Plasso.Cart.setup({ 
    spaceId: "abc123",
    forceCleanButtons: true
  });
</script>

For the Pop-Up Modal:

<script>
  Plasso.Space.setup({ 
    forceCleanButtons: true
  });
</script>

Was this article helpful?

8 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.