How to turn Image with Text into a slideshow? Ride Theme

Technical Q&A
,

Topic summary

Goal: make Shopify Ride’s “Image with Text” section behave like a slideshow where image and matching text auto-rotate.

Key constraint:

  • The default “Image with Text” supports a single static block, not multiple slides.

Proposed solutions:

  • Create a custom slideshow-style section that preserves the Image-with-Text layout and supports multiple blocks per slide (Image, Heading, Text, optional Button), with autoplay via theme JS or a lightweight slider (e.g., Swiper/Flickity).
  • Alternatively, restyle the existing Slideshow section with Custom CSS to achieve a 50/50 image-text layout; uncheck the “Container” for text content. Additional CSS (nth-child rules) can alternate image/text sides across slides. Further CSS tuning may be needed.

Notes:

  • Code snippets and a screenshot are central to implementation.
  • Terms: CSS (Cascading Style Sheets), JS (JavaScript), blocks (content units within a section).

Outcome:

  • The requester confirmed the approach works perfectly.

Status: resolved; no outstanding questions.

Summarized with AI on November 25. AI used: gpt-5.
1

Hi everyone,
I’m trying to achieve something specific with the Image with Text section in the Shopify theme (Ride).

I would like this section to work more like a slideshow:

  • the image changes automatically

  • the text also changes along with the image

  • similar to a standard slideshow, but with the layout and style of “Image with Text”

image
image1771×689 120 KB

Is there a way to modify the existing “Image with Text” section to support multiple slides, or do I need to create a custom section?

Thanks in advance!

1 Like
2

Hi @KBOTRBNT ,
You can definitely achieve this, but the default “Image with Text” section in the Ride theme does not support multiple slides it’s designed for a single static block. To make it behave like a slideshow (auto-changing image + matching text).

Create a Custom Slideshow-Style Section

This is the recommended approach.

You would create a new section (e.g., slideshow-image-with-text.liquid) that:

  • Allows adding multiple blocks, each block containing:
    • An image
    • Heading
    • Text
    • Button (optional)
  • Wraps the blocks inside a simple slider (e.g., using the theme’s existing slideshow JS or a lightweight slider like Flickity/Swiper).
  • Automatically rotates slides using JavaScript.

This gives you the slideshow feel while maintaining the “Image with Text” layout.

1 Like
3

However, you can modify the “Slideshow” section to resemble “image with text” layout.
Add this to “Custom CSS” setting of this “Slideshow” section and uncheck “Container” for text content:

@media (min-width:750px) {
  .slideshow__media {
    width: 50%;

  }
  
  .slideshow__text-wrapper {
    width: 50%;
    margin: 0 0 0 auto;
  }
}

Screenshot 2025-11-22 at 6.42.06 PM
Screenshot 2025-11-22 at 6.42.06 PM912×561 63.5 KB

Of course, further tuning with CSS is possible.

Say, this code will change sides even/odd:

@media (min-width:750px) {
  .slideshow__slide:nth-child(4n) .slideshow__media {
    width: 50%;
  }
  
 .slideshow__slide:nth-child(4n) .slideshow__text-wrapper {
    width: 50%;
    margin: 0 0 0 auto;
  }

  .slideshow__slide:nth-child(4n+2) .slideshow__media {
    width: 50%;
    left:auto;
    right:0;
  }
  
 .slideshow__slide:nth-child(4n+2) .slideshow__text-wrapper {
    width: 50%;
    margin: 0 auto 0 0;
  }
}
1 Like
4

Hi @KBOTRBNT

Yes, this is possible, but the default Image with Text section in the Ride theme multiple slides. You will need to create a custom section or modify the current one with custom code to add multiple blocks, autoplay, and slide transitions.

If you want, I can create this custom slideshow-style “Image with Text” section for you.

Best regards,
Devcoder :laptop:

1 Like
5

Thank you so much. It works perfectly !

1 Like