Buttoning things up: How this premium Shopify theme's button customization works

Like with any conversion minded website, call to action buttons and links are an integral part of any Shopify theme design — and the Flex Shopify theme is packed with features that give you plenty of options for buttons while also keeping things manageable and consistent.

Customizable Shopify theme buttons

Flex also adds flexible options for controlling the buttons and links on your Shopify store, including a standalone option for perhaps the most important one — the “add to cart” button.

In Flex, you can control the size of the buttons as well as the background, text and border color — as well as a separate color settings for the hover state.

The add to cart button can also include an icon of your choice on either the left or right side.

A bag or cart icon, for example, can be a good choice to help drive home the purpose of the button — or something more generic such as an arrow, caret or plus sign can also be good picks to indicate that the button is an action step.

Keep in mind that, by default, the add to cart button briefly changes to a checkmark after the customer adds an item to the cart — so it may be good to avoid that option.

Other easy to customize buttons

In addition to the add to cart button, Flex also has separate configurations for link, primary and secondary buttons — and in most sections with buttons you can select which one option to use.

These settings are are “linked” so that if you change, for example, the secondary button color or size, it will update on every section that uses the secondary button option.

In other words, when you configure your buttons under Customize > Theme settings > Buttons, you’re essentially creating the “template” that all instances of that button style will use. However, you still have the freedom to pick from primary, secondary or link styles in each section you add.

How to use customizable Shopify theme buttons

When selecting button settings, consider these points:

• In most cases, you’ll want to select colors from your brand’s color palette — such as your logo. If your logo isn’t very colorful, look to your products for inspiration.
• It’s also a good strategy to establish a “hierarchy” of colors if you want to use a different look for your primary, secondary and add to cart buttons. In general, brighter and bolder colors that stand out are a good pick for the add to cart one. Then, pick two eye-catching but slightly subtler ones for the primary and secondary buttons.
• Button size is another way to establish visual hierarchy. Larger buttons obviously take up more room, but the overall visual “weight” can vary greatly based on factors such as the background color, font and more.
• Border color is another way to add more visual interest, dimension and hierarchy to your buttons. Even a thin, single pixel or so border in a slightly different shade can create subtle but sophisticated look — or use a contrasting color and thicker option to make your button stand out even more.
• You can also create “ghost” or “outline” button styles by setting the border and text color to a bold color while the background color is the same as your page content background — or transparent.
• Also pay attention to your button settings in the hover state — which is when the user’s mouse is placed on the button. Changing the colors or other design elements on hover is a very effective way to help, from a visual standpoint, emphasize that the button can (and should) be interacted with.
• Resist the urge to go overboard with your buttons — especially the add to cart one. Although it’s important that your buttons stand out, it’s also equally as important to maintain a polished, professional look that isn’t garish or overdone. These two factors can be huge conversion killers that often outweigh any advantage you might get from grabbing attention.
• Finally, it’s worth noting that the “link style” button isn’t really a button per se — but it’s essentially an additional look to your call to action links and can be a good way to communicate that text is clickable without adding too many buttons to a single page.

It’s also important to keep in mind that “unbranded” dynamic checkout buttons are controllable within theme settings, but branded ones are not.

It’s typically a good idea to leave these buttons alone since they use colors and logos customers are familiar with — but it’s also a good idea to test and check that your custom button design looks good next branded ones you have enabled.

Adding rounded corners to Shopify buttons

All of the button options, except the link style, also have the option for border radius, which is a fancy way of saying rounded corners.

• You can designate the border radius, in pixels, under the buttons theme settings. The larger the pixel value you pick, the more rounded the corners will be.
• Smaller values are ideal for creating “app like” buttons that mirror the now ubiquitous look found on a myriad of devices.
• Larger values, meanwhile, will create what’s sometimes referred to as a “pill” button — one that has completely rounded sides but a horizontal top and bottom.
• If your border radius is set to zero pixels, your button will have the default 90-degree “squared off” corners.

Combined, all of these options are designed to give store owners and Shopify developers an enormous amount of flexibility with button design — but also make it easy to create a consistent and professional look throughout your store.