Center the buttons on the HomePage Banner

Store Design

Topic summary

A user encountered an issue with homepage banner buttons that shifted from center to left alignment. Two solutions were provided:

Primary Solution (Accepted):

  • Add CSS code to assets/section-image-banner.css file
  • Initial code centered the buttons using margin: auto
  • Follow-up adjustment added padding-top: 15px to create spacing between text and buttons

Alternative Solution:

  • Similar CSS targeting .banner__buttons.banner__buttons--multiple
  • Suggested adding to theme.css, theme.scss, or the same section file

Current Status:

  • Original poster confirmed the solution worked successfully
  • A new participant reported they cannot locate the assets/section-image-banner.css file and requested visual guidance on where the code was added

The discussion remains open with an unanswered question about file location for implementation.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hello,

How can I center the buttons (SHOP AND CLASSES) in the Banner in the Home Page? They changed to be left aligned I don’t know why and I can’t find how to center them.

This is the shop: https://suzanne-raffellini.myshopify.com/

password: suzanne

THANK YOU!!!

2

@MartaSantacana

.banner__buttons.banner__buttons--multiple {
    margin: auto !important;
}

Add this code in theme.scss or theme.css or assets/section-image-banner.css file
thank you.

2 Likes
3

@MartaSantacana

Please add the following code at the bottom of your assets/section-image-banner.css file.

.banner__box>*+.banner__buttons--multiple {
    margin: 0 auto;
}

Thanks!

4

@Zworthkey I just find theme.liquid, I try adding the code there but it doesn’t make any changes :disappointed_face:

1 Like
5

@MartaSantacana assets/section-image-banner.css
Add in this file.

1 Like
6

Thank you @dmwwebartisan !!!

1 Like
7

@MartaSantacana
kindly Accept solution if helpful.

1 Like
8

@MartaSantacana

Thanks! welcome again**.**

9

@dmwwebartisan It worked for centering the buttons but now the text is too close to the buttons, how can I add some space? Thank you!

10 
.banner__buttons.banner__buttons--multiple {
    margin-top: 10px !important;
}

@MartaSantacana Add this code. in section-image-banner.css

2 Likes
11

@MartaSantacana

Remove prevoius cs code and add this code

Please add the following code at the bottom of your assets/section-image-banner.css file.

.banner__box>*+.banner__buttons--multiple {
    margin: 0px auto;
    padding-top: 15px;
}
12

@MartaSantacana
Kindly Like and Accept my solution if helpful.

Thank you.

2 Likes
13

@dmwwebartisan Thank you!!

1 Like
14

This isn’t working for me. There’s no “assets/section-image-banner.css file.” Could you provide an image of exactly where the code was added?