Debut Theme how delete/hide slideshow buttons

Tourist
13 0 2

Hey there! I followed your instructions and it worked for desktop version only, but then it shows there is an html error :( what could be the problem? please advice!

Thank you

0 Likes
Shopify Staff
Shopify Staff
730 68 144

Hey there, @Catalina 

 

That tutorial is specific to an unedited version of the Debut theme from December, it may have been updated since. We cannot guarantee results for themes that have been modified with custom coding and/or apps. Could you please send me on a link to your store and a screenshot of your code, please? 

 

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

0 Likes
New Member
4 0 0

Hi Bo,

 

How would I do this with the Venture theme? Lines 105-127 are different for Venture.

Thanks!

0 Likes
Excursionist
12 0 0

Is there maybe an updated version? These codes are not working for my debut theme.

0 Likes
Shopify Staff
Shopify Staff
730 68 144

 

Hey there, @JackieKim 

 

I just took a look at this and tried it out on a new version of the theme.

  • Go to Online Store > Actions > Edit Code. 
  • Open the Sections Folder > slideshow.liquid.
  • Look for <div class="slideshow__controls"> and add {% comment %} to the start of the line so it will look like:
 {% comment %}     <div class="slideshow__controls">

 

  • You are then going to need to close this comment, on the unedited code you will need to add {% endcomment %} to line 125, after </div>. It looks like this:
    {% include 'icon-play' %}
                <span class="icon__fallback-text">{{ 'sections.slideshow.rotate_slideshow' | t }}</span>
              </span>
            </button>
          {%- endif -%}
        {%- endif -%}
      </div> {% endcomment %} 
  • The finished code, in the end, will look like this: 
{% comment %}     <div class="slideshow__controls">
        {%- if section.blocks.size > 1 -%}
          {%- assign arrows_width = section.blocks.size | times: 18 | plus: 115 -%}
          <div class="slideshow__arrows"
               style="width: {{- arrows_width -}}px">
            <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>
          {%- if section.settings.autorotate -%}
            <button type="button" class="slideshow__pause" data-id="{{ section.id }}" aria-live="polite" aria-pressed="false">
              <span class="slideshow__pause-stop">
                {% include 'icon-pause' %}
                <span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
              </span>
              <span class="slideshow__pause-rotate">
                {% include 'icon-play' %}
                <span class="icon__fallback-text">{{ 'sections.slideshow.rotate_slideshow' | t }}</span>
              </span>
            </button>
          {%- endif -%}
        {%- endif -%}
      </div> {% endcomment %} 

Let me know how this goes and if there is anything else I can assist 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

1 Like
Excursionist
12 0 0

Hey Bo! 

 

Thank you so much for all your help. I'm afraid I already tried this method. I deleted my previous % comment attempt and re-inserted straight from your text, and it doesn't seem to work either. Thank you so much for your kindness to answer my question though!

0 Likes
Shopify Staff
Shopify Staff
730 68 144

 

Oh, that is strange! Your code must differ in some way. If you would like, I could email you to authenticate you as the owner of the account. Once you respond to the email I will be able to escalate this to our themes team to customize for you. 

 

Let me know if you would like to proceed with this,

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

0 Likes
Highlighted
New Member
2 0 0

Hi Bo,

 

I'm very thankful for your solution regarding on how to delete or hide slideshow buttons on both mobile and desktop versions. It really worked for me!...

However, one last thing is how to overlay the heading and buttons of my slideshow on the MOBILE version only... it works fine on the desktop version but my problem is on the mobile... I want to overlay them on the center of my slideshow in order to look fantastic. Is there any way of coding? Thanks in advance..

0 Likes
New Member
2 0 0

By the way, here is my example... https://www.screencast.com/t/SPNrI2hmP

Just really need your help... Thanks again..

0 Likes
New Member
2 0 1

Hello Bo! Thank you for your great tutorial. One thing I noticed though was that the auto-rotate function stopped working when commenting away the <div class = slideshow_controls>. Is there a way to keep the auto-rotate but not the buttons? 

 

Thanks in advance!

0 Likes