I want to resize and move the button on the banner in Charge theme

Store Design

Topic summary

A user wants to resize and center a button at the bottom of their banner in the Shopify Charge theme. The button currently appears too large and needs to be made smaller and repositioned.

Solution provided:

  • Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
  • Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add custom CSS code targeting .slideshow_content and .slideshow_content button classes
  • The code sets width to 100% and min-width to 0rem (adjustable from default 12rem)

Technical details:

  • The CSS uses !important flags to override existing styles
  • Button size can be customized by changing the 0rem value
  • Changes should be saved after adding the code

Context:
The store (xtooltech.myshopify.com) is currently password-protected and under maintenance. A screenshot was shared showing the current button placement issue.

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

Screen Shot 2023-10-18 at 8.19.44 PM.png
Screen Shot 2023-10-18 at 8.19.44 PM.png3008Ă—1066 311 KB

1 Like
2

Hi @Talal23

Do you like to make it smalle or bigger? And which side you like to move?

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

3

I want to make it smaller and center bottom of the banner. Unfortunately I cant share access to the store :). Thanks!

1 Like
4

Oh, Im not asking for access. Im only asking the website of your store where costumer can see it. Or just a preview if still not yet public.

1 Like
5

Ohh i see my bad! here is the website https://xtooltech.myshopify.com

1 Like
6

It password protected still undermaintenance.

You can see the store password here.

Just click the store password.

Made4uoRibe_0-1697652866238.png
Made4uoRibe_0-1697652866238.png1361Ă—289 108 KB

Made4uoRibe_1-1697652929138.png
Made4uoRibe_1-1697652929138.png659Ă—273 9.14 KB

I hope it help.

7

password is Xtooltech

1 Like
8

Thanks for the info,

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • 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:
.slideshow_content {
    width: 100% !important;
}
.slideshow_content .button {
    min-width: 0rem !important;
}
1 Like