Articles in this category

Cart widget customization

Rich Updated by Rich

The cart widget can be customized to streamline the purchase process for your customers. Previously, all the purchase configurations happened at checkout, which confused some of them and overcomplicated the flow, causing a higher abandoned cart rate.


How does it work?

The cart widget will automatically open when your customer clicks on Subscribe, Buy or Add to Cart buttons when navigating through your site. They can choose from the options they would like to proceed with, like pricing plan, survey choices, add a coupon, make it a gift, etc., straight on the page they are on. Once the product is configured, they can keep shopping and return to it or proceed to checkout.

With this setup, checkout will be more streamlined, as customers will only need to authorize, add their shipping address, and the billing method to place the order.


Can I customize the widget?

Yes, you can change the widget view, customize the colors, and styles based on your branding.

Simply navigate to Cart Settings section on Admin.


How to install it on a 3rd party website?

To install initialize the widget, add script tags before the closing </body> tag:

<script src="https://somewhere.subbly.co/cart-widget.js"></script> <script> window.addEventListener('subbly-cart-loaded', () => { SubblyCart.initialize({ apiKey: '{API_KEY}' }) }) </script>

How to call it on cart icon click?

There are 2 ways to open the cart on the button click:

  • Option 1

During initialization, use widget setting to specify element selector that will toggle the cart:

SubblyCart.initialize({ apiKey: '{API_KEY}', settings: { cartToggleEl: '#cartToggle' } })

  • Option 2

Toggle the cart programmatically, by using cart widget instance methods:

SubblyCart.initialize({ apiKey: '{API_KEY}' }).then((subblyCart) => { const cartButton = document.getElementById('cartButton') cartButton.addEventListener('click', () => { // Open the cart subblyCart.open() // or lose the cart subblyCart.close() // or toggle cart between open and close subblyCart.toggle() }) })

Can I customize styles except Subbly default capabilities?

Yes, but you need to add the styles tag on the webpage with the !important tag to overwrite the current styles.

You can find an example below if you were using the dotted styles for the links on your website, and want to change it on the cart widget as well.

  1. Find the element id using dev tools (click on the image below to zoom in)
  2. Copy the id

    class="_CartItemCard__detailsToggle_vgto9_63"
  3. Insert styles tag into header section and specify the css parameter you want to change for this id. Don’t forget to add !important so it overwrites the default styling

    <style> ._CartItemCard__detailsToggle_vgto9_63{ text-decoration-style:dotted !important; } </style>
  4. Voila!

What if I have a custom flow developed using get parameters?

If you pass the complete product setup through get parameters on the buy link, but still want to use the cart widget, you just need to add cart the widget snippet to your webpage, so after completing your custom flow, the cart widget will appear with the fully configured product. Your customers can shop more without being redirected to the checkout, and open the checkout when they’re ready to move forward with the process.

Current behavior won't change if you don’t add the cart snippet to your webpage.

FAQ

Do I have to enable the cart widget if I have a Subbly website?

No. This is Subbly's default purchase flow. Do note that you must add the account element to your site for the widget to work correctly and for your customers to easily navigate in and out the cart.

Can I disable it for my Subbly website?

You can't, but we recommend you leave only one Add to Cart or Buy button per product if you are using the products elements on your website.

Feel free to let us know what do you think of this design.

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free