Make button smaller/change color on section page

Shopify Discussion
, , , ,

Topic summary

A Shopify store owner needs help customizing a button on a Section app page, requesting specific typography (Jost font), colors (#f5f5f5 background with #1114AE text), hover effects (#1114AE background with white text), and a smaller button size.

Initial Issue Resolved:

  • A community member identified missing # symbols in the color codes, which the original poster corrected successfully.

Remaining Customizations:
Two solutions were provided for the outstanding requirements:

  1. CSS Method: Add custom CSS to the theme’s stylesheet (base.css/style.css) targeting the specific button class, including:

    • Background and text colors
    • Hover state styling
    • Padding adjustments for size (13px 25px)

  2. Additional Styling: To complete the customization:

    • Adjust font-size property to make button smaller
    • Add font-family: Jost, 'fallback-font' for typography

The discussion remains open as the original poster has not confirmed whether all requirements have been successfully implemented.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I need some urgent help with customizing a section page I purchased for the Section app.

Specifically, I’d like to:

  1. Change the button typography to ‘Jost’, which I’m currently using for my store.

  2. Set the button’s main background color to #f5f5f5 and the text color to #1114AE.

  3. On hover, I’d like the button background to switch to #1114AE and the text color to #ffffff.

  4. Lastly, I’d like to make the button slightly smaller in size.

Thanks in advance for your support!

Website url: https://andresatelier.dk/

Kode is: aapre

Best regards,
Mark

1 Like
2

It is coded all right with just a few simple mistake.

Shadab_dev_0-1745955045648.png

You see how there is a warning sign, all it needs is a #before the color code so instead of f5f5f5 it should be #f5f5f5.

You can change these yourself in the code of that section you downloaded.

3

Hi @Markbsh

Do you mean this button?

Made4uoRibe_0-1745955218598.png
Made4uoRibe_0-1745955218598.png459×302 134 KB

4

Yes

5

Just did it and it worked. But how do I change the font and make the button smaller

6

Thanks for the info. To change the text on the button, you need to locate the button in here:

Made4uoRibe_0-1745956901443.png
Made4uoRibe_0-1745956901443.png230×111 5.5 KB

To change the background/color check the code below.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.ab-banner-button-wrapper-template--22387209929036__ss_video_banner_KgF4kg a {
    background: #f5f5f5;
    color: #1114AE;
    padding: 13px 25px !important;
}
.ab-banner-button-wrapper-template--22387209929036__ss_video_banner_KgF4kg a:hover {
    background: #1114AE;
    color: #ffffff;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

For making the button smaller you can decrease the font size of it like this inside the same css block

font-size: whetever-number px;

For font you can do this

font-family: your-font-name, ‘fallback-font’;