Styling

info

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.

custom.css

.sesami__button{
    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:

note

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.