Remove background/container from a slideshow in Ride theme

Store Design
, ,

Topic summary

A user customized their Shopify Ride theme’s slideshow.liquid file to add auto-sliding functionality but encountered an unwanted black box/container around the slideshow text.

Initial Solutions Attempted:

  • Removing “color-background-1” and “gradient” from class lists in the markup
  • Editing slider settings for color scheme options

Working Solution:
Adding CSS code to the base.css file (located in Assets folder) successfully removed the background:

.slideshow__text.banner__box {
  background-color: transparent !important;
}

Follow-up Request:
The user asked about adjusting the gradient/opacity of the background instead of complete removal. A CSS solution using webkit-gradient was provided to create a gradient effect from rgba(50,50,50,0.8) to rgba(80,80,80,0.2).

Status: Resolved - the transparent background solution worked, with additional gradient customization option available.

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

So I’ve created slideshow.liquid at one point, and added a timing section so that the slideshow autoslides.
Now I need to get rid of the black box though (attached).

None of the solutions I found seem to work.
What do I need to add where to make it disappear?

Ref: https://us.nspsurfboards.com

All the best,

Sacha

2

Do you mean the black box surrounding the text?

A normal theme should have that option in the slider settings? It would be like the color scheme or something.

But short of that, if you want to edit the code, find this line in the slideshow.liquid:

and remove “color-background-1” and “gradient” from the class list.

so it should look like:
3

Hello @sachahcas ,

Add this CSS at the bottom of Online Store-> Theme->Edit code->Assets->base.scss.liquid

.slideshow__text.banner__box {
background-color: transparent !important;

}

1 Like
4

Hi Tristram,

As much as I admire your name (it sounds medieval… is it medieval?), I tried the code snippets and I couldn’t find the exact snippet, but it got close enough for me to trust it.

I pasted your suggestion in there to no avail. I appreciate the effort and would like to thank you for your help,

Sacha

5

Nailed it, except the file was called “base.css”.

Thanks everyone!

Sacha

6

@MandasaTech would it be possible to adjust the gradient/opacity of the background instead btw?

7

yes it’s possible

Add this css for this.

.slideshow__text.banner__box {
background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(50,50,50,0.8)), to(rgba(80,80,80,0.2)), color-stop(.5,#333333) );

}

1 Like