Subbly Docs

Styling SubblyCart.js widget

In addition to the flexible styles customization available on the Storefront Settingsopen in new window page in Subbly Admin, it is possible to adjust cart widget styles directly on the page.

Using custom fonts

You may want to use your custom font to make cart widget experience as familiar as possible for your customers. This can be achieved by overwriting widget's configuration with a CSS variable.

Add this snippet to your CSS or as a separate <style> block on your page


<style>
  #subbly-cart-widget {
    --font-primary: "My font", Source Sans Pro !important;
  }
</style>

Make sure replace "My font" with your font name and to add "Source Sans Pro" or another font as a fallback.

Overwriting cart settings

To overwrite the Storefront Settingsopen in new window use the setSettings widget method. The changes will be applied immediately. See all available CartSettings.


<script>
  window.addEventListener('subbly-cart-initialized', () => {
    subblyCart.setSettings({
      accentColor: '#701eff',
      fontColorPrimary: '#1b1b1b'
    })
  })
</script>