Refresh Theme Slider

Store Design
, , , ,
1

my slider’s on my Refresh Theme, do not show whole image. How do I find out the slider height allowed for the images (so I can remake the images to the correct height) or where do I change the code to set a set height for the images? my site is: www.paradisesoon.com

2

To set a custom height for the slider in your Refresh theme, you can use the following CSS code:

  1. Add This CSS to Adjust the Slider Height:
.slideshow__image {
    height: 400px; /* Adjust to your desired height */
    object-fit: cover; /* Ensures the image fits without distortion */
}

.slider-container {
    max-height: 400px; /* Sets a maximum height for the slider */
    overflow: hidden; /* Prevents content from spilling out of the container */
}​
  1. Steps to Apply:
    • Go to Online Store > Themes > Customize.
    • Open the “Custom CSS” or “Additional CSS” field in the Theme Settings.
    • Paste the above code and click Save.

Note: The class names .slideshow__image and .slider-container may vary depending on your theme’s setup. If this doesn’t work, you can use the browser’s inspect tool to identify the correct class names.

Streamline Your Edits with EasyEdits

If you’d prefer to make adjustments without dealing with CSS, consider using EasyEdits. As the developer of the app, I designed it to help Shopify merchants handle design tweaks like resizing sliders quickly and easily, all without writing any code.

Hope this works out! Let me know how it goes or if you need further assistance.

3

Hi @jmcwright ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media (min-width: 769px){
.slider.slider--everywhere .slider__slide {
    height: 110vh !important;
}
}