Styling Fast Buttons

Button Style Variants

In order to keep Fast buttons looking and feeling like "Fast", we need to be consistent about how our buttons look. We have both size and style variants to choose from.

Official Fast Button Style Variants

We have 2 different size style variants for how our official Fast buttons should look. One for "light mode" and the other for "dark mode".

Light Mode

Use these colors if the button will sit on a light background color.

Dark Mode

Use these colors if the button will sit on a dark background color.

Official Fast Button Size Styles

heads up

All buttons can be either 100% width of their parent container or just respect their x axis padding. The minimum width for our button is 150px. See the "Sample Parent Container Code" section below for code that can help.

We have 3 different size style variants for how our official Fast buttons should look.

They are:

  1. Compact
  2. Default
  3. Large

Compact Button Styles

Default Button Styles

Large Button Styles

Sample Fast Button Parent Container Code

This code will make sure that the minimum size of the Fast button is 150px.

Copy
Copied to Clipboard
<div style="display:inline-block; min-width:150px">
  <fast-checkout-button></fast-checkout-button>
</div>

Fixing Button Styles

Sometimes our default button styles are overwritten by page styles and needs to be updated.

  1. On the page in your online store that you want to edit, right click or control click the Fast button and click Inspect.

inspecting element on the Fast button on a product page

  1. In the code that appears, click <div class="fast-wrapper"> or one of the lines below that line.

  2. Then, in the styling box below, make adjustments to the width or font size or anything else you need to change in order to make the button look more like our supported button style variants.

    Keep adjusting until the Fast button and the other elements around it appear exactly how they need to.

html and css in the browser

  1. Once you know that you like the Fast button to have a certain styling feature like a certain width or font size, go to the theme file that that button lives in and apply that change there.
  2. Click Save File, or Save & apply file, depending on the page text.