Debut Theme how delete/hide slideshow buttons

Highlighted
New Member
2 0 3

Hi there,

I am having some issues with my slideshow on the Debut theme, as the pictures are set to automaticly slide every 5 seconds.
Their is no need for the arrows and pause button to show up there.
I would like to hide/delete these buttons because it is in the way of my images, specialy on mobile.
I looked this up several times & only found answers about other themes, looked up the code as showed but can't seem to find a solution.
Is there someone who can help me with this?

Greatly appreciated, thank you.

1 Like
Highlighted
Shopify Staff
Shopify Staff
1066 102 249

Hey there, Mellededans.

Bo here from Shopify Support :)

That is a brilliant question and I totally see where you are coming from, while these buttons can be super useful for some stores they can inhibit others. The good news is that I was able to figure out how to hide these buttons! 

  • Go to Online Store > Actions > Edit Code.
  • Using the search on the left-hand side, search for "slideshow".
  • Once in the slideshow file, you will need to scroll down to line 105. From here you will type in {% comment %} at the beginning of the line, just before <div.
  • Scroll down to line 127 and enter {% endcomment %} right after </div>
  • The end result will look like the following:

If at any point you change your mind and would like to have these slideshow control back you can bring them back by removing the comment brackets you added or you can roll back the slideshow.liquid file as this help doc outlines. This help doc can be found in our help center the home of all our help docs!

Let me know how this goes and if there is anything else I can help you with, I'm happy to help!

All the Best,
Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

10 Likes
Highlighted
New Member
2 0 3

BO Thank you so much for the quick & helpfull response ! 
This worked perfectly, great support!

Highly appreciated!

2 Likes
Highlighted
New Member
2 0 1

It worked but then a message appeared: 

"HTML error found
Broken HTML has been detected in your theme’s slideshow.liquid file...."

 

I have checked that the code was entered correctly and nothing seems wrong?

1 Like
Highlighted
Tourist
8 0 1

I have follow your instructions, with the {% comment %} on line 105 and {% endcomment %} on line 127. 

 

two things:

 

1. on line 127, the closing div is for something larger, so i put the end tag on line 126. 

2. neither of the outcomes had the controls removed on mobile view. 

 

Any more advice?

1 Like
Highlighted

To remove slider controls on mobile you need also comment from 129 to 134 lines:

 

 {% if section.blocks.size > 1 %}
<div class="slideshow__arrows slideshow__arrows--mobile">
<button class="slideshow__arrow slideshow__arrow-left" aria-label="{{ 'sections.slideshow.previous_slide' | t }}">{% include 'icon-chevron-left' %}</button>
<button class="slideshow__arrow slideshow__arrow-right" aria-label="{{ 'sections.slideshow.next_slide' | t }}">{% include 'icon-chevron-right' %}</button>
</div>
{% endif %}

 

3 Likes
Highlighted
New Member
1 0 0

Hi! Will this work on the Brooklyn theme, too?

0 Likes
Highlighted
New Member
2 0 0

@el_dombrovan  Thanks for posting the fix for removing the controls on mobile as well! I followed your instructions for adding comment and end comment for the lines you posted but had an issue with the code. The code editor tells me there is an error and won't allow to place the end comment code after the end div tag on line 134.  I'm by far not an expert at .liquid files. I tried placing the end comment code in various places (after end div tags) but it only seemed to get rid of the slide controls for mobile on line 168, however, this also removes the ability to have text overlay on mobile. Do you know why I would be getting a code error on line 134? Thanks for your help!

0 Likes
Highlighted
New Member
2 0 0

@el_dombrovan I added the end comment to line 135 after "end if" and that seemed to work fine. Looks like the text overlay is meant to go away if the viewfinder is small. 

0 Likes
Highlighted
Excursionist
13 0 4

Hey, Im having this same problem, I copy pasted the correct code in lines 104 and 126 (dont really know why my debut code lines are slightly different but they seem to be the correct ones). And now im getting the same error message. Any idea what to do?

 

Thank you

0 Likes