Skip to main content



Since the introduction of the Shopify Online Store 2.0, styling the Sesami button needs to be done using the theme customizer: Refer to Setting up Sesami for the Shopify Online Store 2.0

The rest of this article applies to the legacy Shopify themes or when using non-app-embed integration on the OS 2.0 themes or any headless implementation.

The Sesami button is a regular button element that can be styled just like any other element using CSS.

It is given this class name: sesami__button

Which you can use as a CSS selector to add or override a style.

background: #24d2dc;
height: 50px;
line-height: 48px;
padding: 0 30px;
border: none;
border-radius: 4px;
color: #000;
font-size: 24px;
margin: 8px 0;

Which will result in the following:


Each theme might use a different name, structure or technology to process CSS files; some themes have a custom.css or override.css file that is used for any custom styling. Please ask your theme developer about where you should add this code if you are unsure.