Align Banner text to the left and make it bigger

Store Design
,

Topic summary

Goal: Left-align the desktop banner text and increase the size of both the main headline and the smaller slogan, with a slight left gap consistent with the collection heading spacing. Mobile is already correctly left-aligned.

Proposed solution 1 (CSS in base.css — the theme stylesheet):

  • Update banner alignment to the left (justify-content and text-align rules).
  • Hide a decorative overlay (:after on .content-container).
  • Remove padding on the banner box.
  • Increase the H1 font size to 50px.
  • Result image shows text left-aligned and larger.

Proposed solution 2 (edit theme.liquid — the main layout file):

  • Instructs adding code above the closing tag. However, the actual code snippet is missing in the post. A result image indicates a left-aligned outcome, but details are unclear.

Notes/Status:

  • The “slight gap from the edge” requirement isn’t explicitly addressed; solution 1 sets banner box padding to 0 (no gap).
  • No confirmation from the original poster about whether either solution fully meets the spacing and sizing needs. Discussion remains open.
Summarized with AI on December 16. AI used: gpt-5.
1

I would like to align my Main image banner text to the left and make the text bigger (both the main text and the smaller, ‘slogan’, text).

Here is what it looks like currently:

Screenshot 2024-10-24 at 11.16.15.png
Screenshot 2024-10-24 at 11.16.15.png1270×699 925 KB

I don’t want the text against the edge of the screen, but with a slight gap from the edge (the spacing can be consistent with the collection heading spacing below my banner). I am happy with the hight, it must just be aligned left.

On mobile the alignment is right (to the left).

Please help.

Thanks in advance.

2

Hi @ProconMarketing ,

To align Banner text to the left and make it bigger .

1.Go to your Shopify admin panel.

2.Navigate to Online Store > Themes.

3.Find your theme and click on Customize.

4.Click Actions > Edit code.

5.In the left sidebar, under the Layout directory, select base.css.

.banner__content.banner__content--middle-center {
        justify-content: left !important;
    }
.banner__box>*+.banner__text {
     
        text-align: left !important;
    }
.content-container:after {
    display:none !important;
}
    .banner__box {
        padding: 0 !important;
    }
.banner__box h1 {
        font-size: 50px !Important;
    }

then save your changes

Result:-

Sweans_0-1729764447353.png
Sweans_0-1729764447353.png1089×600 802 KB

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans

3

Hi @ProconMarketing Please add the below code:

Please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.liquid in the code in left hand side in your theme.
  6. Add the following code in the bottom of the file above tag

Result:

sahilsharma9515_0-1729764564310.png
sahilsharma9515_0-1729764564310.png1444×532 797 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil