Hi, in this article, we will show you step by step on how to add your own custom styling when you integrate our drop-in checkout component into your website or application. 

Assuming that you have already finished embedding the checkout component in your website, we will jump right into how you could apply your own styling to match your website's styling.

Getting Started:

  1. Create an SCSS or CSS file in your project and name it ServiceBotCheckout.css
  2. Link the newly created stylesheet in your website.<link href="./project/CSS/ServiceBotCheckout.css" rel="stylesheet"/>
  3. Copy an empty SCSS or CSS structured for the Checkout component HTML, or you can use one of our styling examples to make it even quicker to start.

CodePen Checkout Style Empty SCSS
CodePen Checkout Style Example 1 SCSS
CodePen Checkout Style Example 1 CSS

  1. Paste it into your newly created stylesheet.
  2. You can now start developing your own custom style in the SCSS or CSS structure in your own project.


The easiest way to start styling your own Checkout component embed is to Fork the example Pen and edit away.

Once you've achieved an acceptable style in your forked Pen, you can then copy and paste the SCSS or CSS into your website's stylesheet.

If you do not use SCSS on your website, and want an easy way to convert the Pen into CSS to use on your site, you can use this SCSS online tool. 

Did this answer your question?