Help Center

Help Center

Search our help center for quick answers.

Can I Customize the Storefront Cart?

2 minute read

Yep! There are several options for customizing the cart to make it a great expereience in different scenarios.

Overlay Color

Adjusting the accent color from the Space Setup Dashboard will change your Cart’s navigation bar in the Storefront Cart and will change the color of the Storefront Cart Button on your hosted pages.

screen-shot-2018-03-23-at-11-10-31-am

You can also change the overlay color that fades in when the Cart opens! Just add overlayColor to your setup script. You can add a HEX, RGB or RGBA color value. Example:

<script src="https://plasso.com/embed/storefront.1.0.js"></script>
<script>
  Plasso.Cart.setup({
    spaceId: "space_id_here",
    overlayColor: "rgba(0, 0, 0, 0.3)"
  });
</script>

Keep it hidden

You can keep the Cart from appearing when adding a product or subscription by adding the data-pl-hide-cart attribute to your “Add to Cart” button(s). Example button:

<a href="https://plasso.com/s/abc123/product/my_product" data-pl-hide-cart>Add to Cart</a>

 

Hide Controls

You can manually hide the different tabs that normally show up in the Cart’s top navigation bar. You can hide these controls by adding them as an array in the Cart setup function. The controls you can hide are: “login” and “account”

<script src="https://plasso.com/embed/storefront.1.0.js"></script>
<script>
  Plasso.Cart.setup({
    spaceId: "space_id_here",
    hideControls: ["login", "account"]
  });
</script>

Mode

Aside from the default ‘cart’ mode, you can have the Cart appear in ‘signup’ mode. This will remove the ‘Cart’ tab from the Cart’s header navigation bar, and will remove the cart section completely. In it’s place will be a sign up form. Using the cart in this mode is great if you only have Plans in your Space and you only want to give your customers the option to sign up for one of those plans and manage their account.

<script src="https://plasso.com/embed/storefront.1.0.js"></script>
<script>
  Plasso.Cart.setup({
    spaceId: "space_id_here",
    mode: "signup"
  });
</script>

Was this article helpful?

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