--- title: Advanced button customization shortDescription: Style your Primary and Secondary buttons independently with full control over colors, typography, and sizing. articleType: Tutorial primaryTopic: button-styling categories: - Store Design tags: - button-styling - primary-button - secondary-button - site-designer - theme-customization - button-colors - button-typography - button-sizing - corner-radius - button-fill tasks: - Customize primary button colors and fill - Customize secondary button colors and fill - Change button font and text capitalization - Adjust button height width and corner radius - Set button outline color and thickness - Style primary and secondary buttons independently terms: - primary button - secondary button - button customization - button colors - base font - heading font - corner radius - button shape - button fill - button outline - button font size - text capitalization - button height - button width - site designer buttons labels: - store-design - button-styling - site-designer contextString: Available on all plans. Requires access to the site designer. breadcrumbPath: "Getting started > Design my storefront > Advanced button customization" relatedModules: - name: theme-settings-general route: /admin/dashboard/store-design/general/ - name: theme-editor-layout-home route: /admin/dashboard/store-design/layout/index - name: theme-editor-layout-checkout route: /admin/dashboard/store-design/layout/checkout path: getting-started/design-my-storefront/advanced-button-customization last_updated: '2026-04-22' --- # Advanced button customization Advanced Button Customization lets you style your **Primary** and **Secondary** buttons independently in the Fourthwall site designer. You can control colors, shape, fill, outline, typography, and sizing for each button type separately. ## Primary vs. Secondary buttons Fourthwall shops use two button types across all pages: - **Primary buttons** are the main calls to action, such as "Add to Cart" or "Shop Now." These are the buttons that should stand out most. - **Secondary buttons** are supporting actions, such as "View Details" or "Learn More." They complement Primary buttons without competing for attention. Each button type is configured independently. Primary buttons can have a bold, filled look while Secondary buttons use an outline style, or any combination you choose. ## How to access button styling settings Button customization settings are in the site designer under [**Site Design > Style**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?redirect). 1. Go to [**Site Design > Style**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?redirect) in your dashboard. 2. Scroll to the **Buttons** section. 3. Select the **Primary** or **Secondary** tab for the button type you want to customize. [Image: Buttons section in Site Design Style settings showing Primary button and Secondary button tabs with Colors, Shape and fill, and Typography dropdowns] Each tab contains the same set of controls, so you can style both button types using a consistent workflow. ## How to customize button colors Under each button tab, a color dropdown controls the button's color scheme. The options are: - **Use primary color.** Uses your site's primary accent color. Recommended for Primary buttons to create a strong call to action. - **Use text color.** Uses your site's text color. Produces a more subtle look, suited to Secondary buttons. The fill and text colors are applied as a coordinated pair based on this selection. The available colors come from your site-wide color palette set in [**Site Design > Style > Colors**](/getting-started/design-my-storefront/customize-your-site-colors-and-product-appearance). [Image: Colors dropdown set to Use text color under the Primary button tab] ## How to set button shape and fill The shape and fill settings control whether buttons appear solid or outlined. - **Filled rectangle.** Solid background. Best for Primary actions that need a strong visual presence. - **Outlined rectangle.** Transparent background with a border. The outline color is derived from your button color selection. Best for Secondary actions. - **Outline thickness.** Controls how thick the outline border appears. [Image: Shape and fill dropdown set to Outlined rectangle with Outline color and thickness controls below] ## How to adjust button typography Each button type has independent typography controls so you can match button text to your brand. - **Font.** Choose between your site's **Base Font** (body text) or **Heading Font** (titles and section headers). - **Font size.** Increase or decrease the size of button label text. - **Text capitalization.** Toggle whether button text appears in all uppercase or uses its default casing. Using a bold or decorative Heading Font on Primary buttons makes them stand out. Using the Base Font on Secondary buttons gives a cleaner, more understated look. [Image: Typography dropdown set to Heading font for the Primary button] ## How to control button sizing Sizing settings let you fine-tune the physical dimensions and corner shape of each button type. - **Height.** Adjusts how tall the button appears. - **Width.** Controls the horizontal size of the button. Wider buttons make calls to action more prominent. - **Rounded corners.** Sets how rounded or square the button corners are, with per-corner control ranging from 0 to 120px. A value of 0 gives sharp corners; higher values create a pill-shaped look. The per-button corner radius setting replaces the global **Button corner radius** in the older border radius settings. If you previously set a button corner radius under **Style > Border Radius**, the new per-button setting takes priority. [Image: Advanced sizing controls showing Rounded corners, Button height, Button width, Button text size sliders and a Capitalize text checkbox] ## How to preview and save button changes After adjusting button settings, the live preview on the right side of the site designer updates in real time. 1. Make your adjustments in the **Primary** or **Secondary** tab. 2. Check the preview to confirm the buttons look the way you want. 3. Click **Save** to apply your changes across your entire shop. Updated button styles apply site-wide to all pages, including product pages, collection pages, and the checkout flow. ## Frequently asked questions ### Can I style Primary and Secondary buttons differently? Yes. Each button type has its own tab with independent controls. Changes to Primary buttons don't affect Secondary buttons, and vice versa. ### Do these settings override my existing button corner radius? Yes. If you previously set a global button corner radius under **Style > Border Radius**, the per-button corner radius in Advanced Button Customization takes priority. ### What fonts are available for buttons? You can choose between your site's **Base Font** and **Heading Font**. These are the same fonts configured under **Site Design > Style > Fonts**. To change which fonts are available, update your font selections in the [Fonts settings](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=Fonts&redirect). ### Will these changes affect the mobile version of my shop? Yes. Button styling applies across all devices. Preview your changes on both desktop and mobile views in the site designer before saving.