Solved

Back to Top Button For Debut Theme

Song
Visitor
3 0 0
I want to add a "Back to Top" button to my shop, so I followed the tutorial step by step in this link: https://shopify.dev/tutorials/customize-theme-add-back-to-top -button In the previous version of DEBUT themes, the Back to Top button works perfectly, but when I update to the latest DEBUT (VERSION 17.5.0), the button cannot be displayed on the front page. In fact, when I use the same settings in the latest Brookly theme, the button works perfectly. I feel very confused. I don't know what has changed in the latest DEBUT (VERSION 17.5.0) theme, causing the button to not work properly. Can anyone help me? Maybe you don't use the method provided in the link above. If you can tell me a new way to add a "Back to Top" button to the store, that would be better.
Accepted Solutions (2)

Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

Hi @Song 

Follow this:

add this code in theme.liquid file just before </body>

 

<a href="#" id="scroll" style="display: none;"><span></span></a>

 

 

Add this css in Asset->theme.scss file at bottom:

 

#scroll { position:fixed; right:10px; bottom:10px; cursor:pointer; width:50px; height:50px; background-color:#3498db; text-indent:-9999px; display:none; -webkit-border-radius:60px; -moz-border-radius:60px; border-radius:60px }
#scroll span { position:absolute; top:50%; left:50%; margin-left:-8px; margin-top:-12px; height:0; width:0; border:8px solid transparent; border-bottom-color:#ffffff; }
#scroll:hover { background-color:#e74c3c; opacity:1;filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; }

 

 

Add this Js code in Asset->theme.js file at bottom:

 

$(document).ready(function(){ 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 
});

 

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

May be doc removed by that's why. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 10 (10)

Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

Hi @Song 

Follow this:

add this code in theme.liquid file just before </body>

 

<a href="#" id="scroll" style="display: none;"><span></span></a>

 

 

Add this css in Asset->theme.scss file at bottom:

 

#scroll { position:fixed; right:10px; bottom:10px; cursor:pointer; width:50px; height:50px; background-color:#3498db; text-indent:-9999px; display:none; -webkit-border-radius:60px; -moz-border-radius:60px; border-radius:60px }
#scroll span { position:absolute; top:50%; left:50%; margin-left:-8px; margin-top:-12px; height:0; width:0; border:8px solid transparent; border-bottom-color:#ffffff; }
#scroll:hover { background-color:#e74c3c; opacity:1;filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; }

 

 

Add this Js code in Asset->theme.js file at bottom:

 

$(document).ready(function(){ 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 
});

 

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Song
Visitor
3 0 0

Thank you very much for your reply, but why does the link method not work? Where is the problem?

https://shopify.dev/tutorials/customize-theme-add-back-to-top-button 

Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

May be doc removed by that's why. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Song
Visitor
3 0 0

OK, Your method works perfectly, thanks

kub
Pathfinder
118 2 43

Hi all.

I have the same problem like @Song . I updated to 17.7 and several things don't work anymore like this.

So i added

 

 {% render 'back-to-the-top' %}

 

before the 

</body>

in theme.liquid

and the code

 

 {% comment %} 
    Reduce below value if you need the back to the top button to appear higher up on the page. 
    That value is in pixels.
    {% endcomment %}
    {% assign vertical_offset_for_trigger = 300 %}
    {% comment %} 
    Vertical offset from bottom of browser for the position of the button.
    {% endcomment %}
    {% assign position_from_bottom = '4em' %}
    <a href="#" title="inizio pagina" class="back-to-top">
    <i class="fa fa-arrow-circle-o-up fa-2x"></i> 
    </a>
    {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
    <style>
    .fa {
    color: #fff;
    }
    .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #fff;
    background-color: #4d1717;
    font-size: 16px;
    padding: 0.3em;
    display: none;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
    }
    .back-to-top i {
    vertical-align: middle;
    }
    .back-to-top span {
    padding-left: 0.5em;
    }
    .back-to-top i + span {
    padding-left: 0;
    }
    .back-to-top:hover {
    text-decoration: none;
    color: #555;
    }
    </style>
    <script>
    window.onload = function() {
    jQuery(function($) {
    var offset = {{ vertical_offset_for_trigger }};
    var duration = 500;
    $(window).scroll(function() {
        if ($(this).scrollTop() > offset) {
        $('.back-to-top').fadeIn(duration);
        } 
        else {
        $('.back-to-top').fadeOut(duration);
        }
    });
    $('.back-to-top').unbind('click.smoothscroll').bind('click', function(e) {
        e.preventDefault();
        $('html, body').animate( { scrollTop: 0 }, duration);
        return false;
    })
    });
    }
    </script>

 

 in snippet 

back-to-the-top.liquid

No way

 

Somebody can help?

Thanks in advance

Maybe also if somebody knows about the tabs in product description do not work anymore propperly (was working fine until V17.7DEBUT) https://community.shopify.com/c/Shopify-Design/Adding-tabs-on-product-page-simple-entry/td-p/430363/...

 

Priss22
Tourist
6 0 2

Can you please show the "back to product" code for the Studio theme?

Christie_c01
Visitor
2 0 0

 I have done everything, as you have said, but it doesn't on my Shopify site.

Jasoliya
Shopify Expert
4808 621 1217

Send your store url 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Christie_c01
Visitor
2 0 0

It's resolved, thanks!

TheBurpBoss
Explorer
54 0 12

Hi. I added these codes to each file but don't seem to gain a back to top button in footer. I'm working in a Copy of Debut Theme to make sure I don't mess anything up. When it says just before </body> does this mean the inserted code should be left of and on the same line as </body> or should I insert the code onto the line above </body> ?

 

Thanks for anyone's help!