Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Button Configs


Written by Annie

Last updated


On this page

The setting will apply to all the sections that have the Button style, Button color or Button size options in the settings.

Example: Featured Collection section.


You can go to Admin tools -> Go to configs page -> Sections Sidebar -> Button Configs and configure it.

1. Button Config

  • You can adjust Font family, Font weight, Border radius, Other corner radius.

  • Hover button effect: Set the effect for the button on hover. It's only shown here to preview, not set for all site buttons. This effect only works with the button style default, outline.


2. Custom Color

The Button config section only supports 2 custom color blocks. From here, you can customize the button color as you want.

Step 1: Go to Button configs > click Custom color 1 to config the color.

There are some options for Primary color, Secondary color, Primary color hover and Secondary color hover.


Step 2: From the section you are using > choose 'Button color: Custom color 1'. Example:


3. Button size

Button size block is available on Unsen and Gecko theme. Not for Kalles.

We provide Three button size blocks as:

  • Button size #1

  • Button size #2

  • Button size #3

With each block you can adjust many options like: Font family, Border width, Font size, Font weight, Letter spacing, Min height, Padding left/right.

Step 1: Go to Button configs > click Button size #1 to config the color.


Step 2: From the section you are using > choose 'Button color: Custom size #1'. Example:


[Private Offer] EComposer Partner Plan

Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Cheers, The4.

We highly recommend Shopify apps from our partners.

We uses cookies to ensure you get the best experience on our website.