I have added 3 slides in slideshow section but from yesterday morning only 2 slides are visible

Topic summary

Main issue: A Shopify slideshow with 3 slides began showing only 2 on the storefront. A preview link and a screenshot were provided.

Key details and troubleshooting:

  • Settings check advised: ensure the third slide is enabled, not removed, and its image isn’t oversized/corrupted; try re-uploading.
  • Theme code review suggested to ensure no condition limits slides (e.g., loops capped at 2–3) and to inspect the slideshow section file.
  • The merchant had added custom code to support separate mobile images. The problem appeared only when “Auto-rotate slides” was enabled; swapping slide positions changed which slide disappeared.

Proposed workarounds:

  • Remove the custom code changes to test.
  • Alternative: use two slideshow sections (one for mobile, one for desktop) and hide each with CSS media queries.

Collaboration attempt:

  • Access was requested and granted, but the helper couldn’t identify the cause and suspected custom CSS.

Outcome:

  • The merchant later confirmed they resolved the slideshow and it now works correctly. The exact fix/root cause wasn’t shared. The thread is resolved.
Summarized with AI on December 17. AI used: gpt-5.

Problem: I have added 3 slides in slideshow section but from yesterday morning only 2 slides are visible at front end can you please help me?

Pfb S.S. of error and preview link for the same.

Preview link: https://derays8qv36vdfet-43407245474.shopifypreview.com

Hi @TheLivingCo ,

Issue with the third slide in the slideshow not being properly loaded or displayed on the frontend.

Follow these steps:

  1. Online Store > Themes > Customize

  2. Find the Slideshow section and verify that all 3 slides are enabled and properly configured.

  3. Sometimes slides might be disabled or removed from the settings, so make sure the third one is not missing or deactivated.

Inspect the Image Files:

1. Make sure the image file for the third slide is uploaded correctly.

2. Sometimes if an image is too large or corrupted, it may not load properly.

3. Try re-uploading the third slide image.

Review Theme Code (Slideshow Section):

  • If the issue persists, there could be a problem in the theme’s code related to the slideshow.
  • Go to Online Store > Themes > Actions > Edit Code.
  • Find the file that handles the slideshow (typically in sections/slideshow.liquid or similar).
  • Look for any issues or conditions that might be preventing the third slide from showing.
  • You should have code that looks like this:
{% for block in section.blocks %}
    {% if forloop.index <= 3 %}
        
    {% endif %}
{% endfor %}
​
  • Make sure there is no condition limiting the number of visible slides to 2.

Hi @TheLivingCo

Have you added some customized code or edited the code of the slideshow?liquid file? Please try to remove them to check if it can solve this issue.

Hi, I added below code to add separate mobile image in slideshow section and it worked fine for 2 days but from yesterday morning I’m facing this issue. Also when i interchange the position of slides from 1st to 2nd than 1st slide is visible and 2nd is not.


          {%- if block.settings.image-mob -%}
            {%- liquid
              assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round
              if section.settings.image_behavior == 'ambient'
                assign sizes = '120vw'
                assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
              else
                assign sizes = '100vw'
                assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
              endif
            -%}
            {{
              block.settings.image-mob
              | image_url: width: 3840
              | image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths
            }}
          {%- else -%}
            {%- assign placeholder_slide = forloop.index | modulo: 2 -%}
            {%- if placeholder_slide == 1 -%}
              {{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- else -%}
              {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}
          {%- endif -%}
        

So the problem is when i choose “Auto-rotate slides” option this issue occurs when i uncheck it problem solved. Please help

If you dont mind, could I sent a collab request to access your theme so I can check?

yes please

I need a collab request code. Or you can solve it yourself by following my solution,

Remove the customized code you added, and create two separate slideshow sections; one will add images for mobile, and one for desktop.

In Custom CSS of the mobile’s slideshow section, add this code

@media (min-width: 750px) {
slideshow-component { display: none; }
}

Add this code to Custom CSS of desktop’s slideshow section

@media (max-width: 749px) {
slideshow-component { display: none; }
}

Hi, Collab Code: 9428

Request sent!

Theme name: The Living Co. V15.2.0

Please wait for a while

Hi is it done?

1 Like

Its not done yet.

How much time will it take?

1 Like

I have tried but cannot find the issue. I guess some customized CSS code caused this issue.

Ok no issue let it be, I’m removing access now. Thank you

1 Like

Very welcome!

Hi Dan,

I sorted the slideshow issue. Now its working fine as it should.

1 Like

Awesome. Thank for updating