andrewneyer.com

#1. Announcement Bar X icon color

use code to Custom CSS

span.sqs-announcement-bar-close {
    color: black !important;
}

#2. Back to top

First, use this code to Code Injection > Footer

<div class="scroll-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"/></svg>
</div>
<script>
const scrollBtn = document.querySelector('.scroll-top')
window.addEventListener('scroll', () => {
  const scrollHeight = window.pageYOffset
  const viewportHeight = window.innerHeight
  const pageHeight = document.documentElement.scrollHeight
  if (scrollHeight > viewportHeight * 0.25) {
    scrollBtn.classList.add('show')
  } else {
    scrollBtn.classList.remove('show') 
  }
})
scrollBtn.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
})
</script>

Next, use this code to Custom CSS

/* arrow to top */
.scroll-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s;
  z-index: 999;
}
.scroll-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top svg {
  width: 20px;
  height: 20px;
  fill: #000;
}

#3. Add padding under button + remove huge space on top of Footer

Use code to Custom CSS

@media screen and (max-width:767px) {
   div#sqs-cart-root {
    padding-bottom: 40px;
}}
footer.sections section {
    padding-top: 0px !important;
}

#6. You can’t edit Cart Page like as other pages

To rename text, use this code to Code Injection > Footer

<!-- new shopping cart page text -->
<script>
const CONFIG = {
  newText: 'Ain\'t nothing in here. Time to go <a href="https://youtu.be/P1K07dAZ7YA?list=RDP1K07dAZ7YA&t=95" target="_blank" rel="noopener noreferrer" style="text-decoration:underline;color:inherit;">shopping</a>!'
};
if(document.body.id==='cart'){function u(){const e=document.querySelector('.empty-message[data-test="empty-message"]');if(e)e.innerHTML=CONFIG.newText}document.readyState==='loading'?document.addEventListener('DOMContentLoaded',u):u();const o=new MutationObserver(function(){const e=document.querySelector('.empty-message[data-test="empty-message"]');e&&e.textContent.includes('nothing')&&(u(),o.disconnect())});o.observe(document.body,{childList:true,subtree:true})}
</script>

#7. Sticky Sidebar Category Links on Shop Page

Use this code to Custom CSS

div.product-list-nav-and-filters {
    position: sticky !important;
    top: 200px;
}

#8. To align left Filter button, use this to Custom CSS

@media screen and (max-width:767px) {
   .product-list .product-list-filters-drawer-open-button-container {
    position: absolute;
}
.product-list-container {
    padding-top: 40px;
}}

#9. To rename text in Filter button, use this to Custom CSS

button.product-list-filters-drawer-open-button.sqs-button-element--primary {
    font-size: 0 !important;
}
button.product-list-filters-drawer-open-button.sqs-button-element--primary:before {
    content: "Categories";
    font-size: 14px !important;
}

In case you want to turn Filter button to Dropdown format instead or show raw links, similar on Desktop view, let me know, I will check code.