Remove Button Background

Store Design

Topic summary

A user seeks help removing a white background box from a “Shop All” button on their banner and repositioning it to the bottom.

Initial Request:

  • The button appears centered with a large white box background
  • Goal: Remove background and move button to bottom of banner
  • Store URL: www.peakclo.com (password: LaunchVIP)

Solution Provided:
Multiple helpers requested store access. EstherBui provided CSS code modifications:

  1. First fix - Add to base.css:

    • Align content to bottom using align-items: end
    • Remove background with background: transparent

  2. Desktop refinement - Add to section-image-banner.css:

    • Additional alignment code for proper bottom positioning

  3. Mobile fix - Update base.css code:

    • Add position: absolute to resolve mobile display issue

Outcome:
The desktop version was successfully fixed. A mobile display issue emerged but was addressed with additional CSS adjustments. The discussion appears resolved.

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

peakclo_0-1737270535498.png
peakclo_0-1737270535498.png2208Ă—1322 101 KB

www.peakclo.com

How can I remive the large white box around the shop all button on my banner and reposition the button to the bottom of the banner?

2 Likes
2

Hi @peakclo ,

Can you share what the password is to view the store page? Also is this a custom page or something built-in from your theme?

3

Hello @peakclo

Please share with me store password.

devcoders_0-1737277059457.png
devcoders_0-1737277059457.png1186Ă—543 9.04 KB

4

Hi, please share password

5

Hi @peakclo

Please, share your store password. Thanks!

6

LaunchVIP

7

LaunchVIP

8

Hi Peakclo

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file base.css and add this code at the end of the file
.banner__content.banner__content--middle-center.page-width {
  align-items: end !important;
}

.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient {
    background: transparent !important;
}

Result:

EstherBui_0-1737355800677.png
EstherBui_0-1737355800677.png1291Ă—826 32.7 KB

Best,
Esther

9

peakclo_0-1737356155143.png
peakclo_0-1737356155143.png2208Ă—1322 126 KB

For me it is still in centre and not bottom centre

10

Hi
Find file section-image-banner.css and add this code at the end of the file

.banner__content.banner__content--middle-center.page-width {
    align-items: end !important;
}
11

This works for desktop thanks, for mobile it now looks like this

.banner__content.banner__content–middle-center.page-width { align-items: end !important; }

12

You edit that code in base.css file

.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient {
    background: transparent !important;
    position: absolute;
}
13

Hi @peakclo Happy to see your problem is solve