Wanting to add button on top of picture in slideshow in mobile version- cascade theme

Store Design
, ,

Topic summary

A Cascade theme user needs slideshow buttons to appear on top of images in mobile view, rather than below them as currently displayed. Desktop version works correctly.

Solution Provided:

  • Add custom CSS to theme.liquid file before the tag
  • Code targets .slide .slide__arrows with absolute positioning and width/height properties
  • Note: The provided code snippet appears corrupted/reversed in the original post

Current Status:

  • User successfully repositioned buttons using custom CSS
  • Now seeking help to reduce button size specifically on mobile devices
  • Discussion remains open with the sizing request unresolved
Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

When using the cascade theme slideshow, the button appears on top of each slide on desktop and under the slides in the mobile version. I need them on the slides even in the mobile version and not under the image.

Screenshot 2024-05-07 at 12.29.31 AM.png
Screenshot 2024-05-07 at 12.29.31 AM.png836×1330 121 KB

Screenshot 2024-05-07 at 12.29.47 AM.png
Screenshot 2024-05-07 at 12.29.47 AM.png2018×1204 196 KB

https://houseoftanvi.com/

2

Hi @houseoftanvi

Please follow the instructions below:

  1. Online store → Themes → Edit code

  2. You can make the slide button lay on the slide by add this code before close tag in your theme.liquid file:

% style %}
      {% if template.name == 'index' %}
        .splide .splide__arrows {
          position: absolute !important;
          min-width: 100% !important;
          height: 100% !important;
          justify-content: space-between !important;
        }
      {% endif %}
    {% endstyle %}

Hope this will help you

3

Wanted to take the shop buttons up, which I’ve managed to do myself with some custom css. Now I want to reduce the size of the shop buttons just on mobile. Would be lovely if you could help me with that.