PWinter

I'm interested in this too - ideally I want to force the mobile site to show on a tablet when portrait, instead of the desktop version, however after looking into it it doesn't appear there is an easy fix.

Is it a case of adding custom code per page, or do you need to do per item? If per page, it might be doable, too complex if more than that for me. Unfortunately on the site I'm currently working on I can't share the link due to confidentiality but would be good to understand how it might work.

Thanks in advance.

On 9/17/2023 at 4:11 AM, tuanphan said:

You mean replace back to top arrow icon in the code with your custom image?

Yes that's correct. Thank you.

Hi I know this is an old post, but this is exactly what I am trying to do so I hope you can help me.
The code I have used from this thread and included in the code-injection is as follows:
Everything placement wise, size etc is perfect, just changing it to the PNG is hurting my head :S

Anything you can help with would be amazing.

<style>
    #myBtn {
       width: 50px;
       height: 50px;
       display: none;
       position: fixed;
       bottom: 20px;
       right: 30px;
       z-index: 99;
       border: #ff2e00;
       outline: #aeaeae;
       font-size: 25px !important;
       color: #ff2e00;
       cursor: pointer;
       padding: 10px 10px 10px 11px;
       border-radius: 50%;
       box-shadow: 0px 0px 0px #000;
       background-color: none;
    }

  
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous"></script>
<button onclick="topFunction()" id="myBtn" title="Go to top">
    <i class="fas fa-angle-up"></i>
</button>
<script>
   window.onscroll = function() {scrollFunction()};

   function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
         document.getElementById("myBtn").style.display = "block";
      } else {
         document.getElementById("myBtn").style.display = "none";
      }
   }

   function topFunction() {
      $('html,body').animate({ scrollTop: 0 }, 1000);
   }
</script>

And the link I used to change the button is below https://static1.squarespace.com/static/643d1f745d3d3e36eeeb21a4/t/6502f57070c57d17c0564302/1694692720913/Arrow+button+-+Up.png  

Can you let me know how I need to amend the code above to make this the 'back to top' button?

Thanks!

P

7 hours ago, tuanphan said:

Add this code under to remove gradient

body.homepage a.list-item-content__button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary {
    background-image: none !important;
}

 

Thank you so much for the speedy response. 

7 minutes ago, tuanphan said:

Can you share link to this page? We can check easier

Sure, here you go: https://socreative-portfolio.squarespace.com/
Login is all lowercase, password

Thanks for the speedy reply 🙂

Hi there, Using the code that's been pasted on this topic has helped me do what I need so thanks for that. However, as the buttons are styled with a gradient, already using custom css, it shows up a gradient box (I've only added 2 buttons for now). Is there anyway to include in this code that it needs to use the tertiary style button? If so it'd be hugely appreciated. Thanks!

li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.list-item-content__button-container {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}