Refresh Theme Slider

Store Design
, , , ,

Topic summary

A user reports that their Refresh Theme slider is not displaying full images and seeks guidance on either determining the correct slider height dimensions or modifying the code to set a fixed height.

Solutions Provided:

  • CSS customization approach: Add custom CSS targeting .slideshow__image and .slider-container classes to set specific heights (e.g., 400px) with object-fit: cover to prevent distortion. Apply via Theme Customizer’s Custom CSS field.

  • Alternative CSS solution: Insert code into theme CSS files (base.css, theme.css, etc.) targeting .slider__slide with a viewport-based height (110vh) for screens wider than 769px.

  • No-code option: Consider using the EasyEdits app for design adjustments without manual coding.

Note: Class names may vary by theme version; users should inspect their site’s HTML to confirm correct selectors.

The discussion remains open with no confirmation yet on which solution resolved the issue.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
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;
}
}