How to change the corner radius and background transparency of slideshow container?

[atmos-art]

Hi,

I have tried several solutions on the forum but none seem to work for me.

I want to add 6.4px border radius to all corners on the slideshow container found on my home page. I also want to set the opacity to 50%.

Any help is greatly appreciated.

[Dan-From-Ryviu]

Please share the link to your store URL

[goldi07]

Hello @atmos-art

To change the corner radius and background opacity of the slideshow container on your Shopify homepage, you’ll need to:

1. Target the correct container element in your theme’s CSS or SCSS file.

2. Apply the border-radius and background opacity.

Assuming you’re using a standard Shopify theme like Dawn, follow these steps:

Steps to Add Border Radius and Opacity to Slideshow Container

1. Identify the Slideshow Section
   In most themes, the slideshow container is a section. For Dawn or similar themes, it is usually in:

bash..

/sections/slideshow.liquid

2. Find or Add a Custom Class (optional but cleaner)
   To avoid affecting other slideshow instances, wrap or target the container like this in slideshow.liquid:

3. Add Custom CSS
   In your theme’s CSS file (e.g., base.css, theme.css, or component-slideshow.css):

Go to:

bash…

/assets/base.css

And add at the bottom:

/* Custom styles for homepage slideshow */
.slideshow-custom-wrapper {
  border-radius: 6.4px;
  background-color: rgba(255, 255, 255, 0.5); /* white with 50% opacity */
  overflow: hidden; /* ensures children respect border radius */
}

Tip: You can adjust the rgba values to match your desired background color (e.g., rgba(0,0,0,0.5) for black at 50%).

4. Save and Preview
   Make sure you:

. Save the changes

. Clear your browser cache or use incognito mode to see the changes reflected

Optional: Using Shopify’s theme editor
If your theme supports custom CSS sections in the Theme Editor, you can paste the CSS directly there for testing.

If it still doesn’t work, I can help :

. Inspect your live store if you share the store URL.

. Check which class exactly wraps your slideshow if you provide a screenshot of the full HTML structure from your browser’s DevTools.

Thank you

[dhimansangeeta]

hello @atmos-art

Online Store > Themes>.Actions > Edit code> Assets>base.css

add the code bottom of the file

.slideshow, .slideshow-component, .banner__media {
  border-radius: 6.4px !important;
  opacity: 0.5 !important;
}
@media screen and (max-width: 749px) {
  .slideshow, .slideshow-component, .banner__media {
    border-radius: 6.4px !important;
    opacity: 0.5 !important;
  }
}

Thanks you

Thanks

[atmos-art]

Hi it is https://www.atmos.art/

[atmos-art]

Hi this didn’t work for me. Can the following code just be placed at the end of the slideshow.liquid file? That is how I tried to implement it.

My website url is www.atmos.art

[atmos-art]

Hi, this doesn’t work in the way I hoped. It doesn’t make the container corners rounded. It makes the whole section transparent rather than just the container too.