How to remove or change the color of Crave theme slideshow border?

Store Design
, ,

Topic summary

A user working with Shopify’s Crave theme needed to remove or change the black border on the homepage slideshow container.

Solution Provided:
Multiple developers offered similar CSS-based solutions:

  • Navigate to Online Store → Themes → Actions → Edit code
  • Locate the base.css file in the Assets folder
  • Add CSS code targeting .slideshow__text.banner__box with border: unset !important; or border: none !important;
  • Paste the code at the bottom of the file before the closing </body> tag (or in some cases, the theme.liquid file)

Outcome:
The issue was successfully resolved. The user confirmed that one of the provided solutions worked, removing the unwanted border from the slideshow.

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

I am using the crave theme and would like to get rid of the black border on the slideshow container in the homepage. Either get rid of or just change the color to white. Any help?

https://eolian.shop/

IMG_3933.jpeg
IMG_3933.jpeg2360×1554 369 KB

1 Like
2

Hi @HelloEolian ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Beae_Anthony_0-1697179745059.png
Beae_Anthony_0-1697179745059.png1209×424 584 KB

Best regards,

Anthony

1 Like
3

Hello @HelloEolian
Its Artzen Technologies! We will be happy to help you today.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → theme.liquid file.

Add the following code in the bottom of the file above tag

Let me know if need further assistance
Regards,
Artzen Technologies

1 Like
4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.slideshow__text.banner__box {
border: unset;
}

ZestardTech_0-1697180304497.png
ZestardTech_0-1697180304497.png1911×710 305 KB

1 Like
5

Hi @HelloEolian

You can do that by adding this code to Custom CSS of that section

.slideshow__text.banner__box { border: none !important; }

Screenshot 2023-10-13 at 13.58.42.png
Screenshot 2023-10-13 at 13.58.42.png1114×603 679 KB

1 Like
6

Hi @HelloEolian

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.slideshow__text {

border: unset !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like
7

This worked! Thank you so much