Add a 'Shop Now' button to my mobile site (editions theme)

[HerbalDimension]

Hi all,

I use editions theme and my website is www.herbaldimensions.com

I would like to add a button on my home page linking to my collections page.  On my desktop site it is possible through the slideshow.  On the mobile site there is no slideshow and so I want a button so people can easily click straight through to collections (I have a menu but want to give an easy visual option).

If i go to add a section there is no option for just a button.  Its either product image, collection images, blog etc.. 

Any suggestions appreciated.

Paul 

[BSS-Commerce]

Hi @HerbalDimension ,

Insert this script into your theme.liquid file;

​
<script>
window.addEventListener('DOMContentLoaded', () => {
  let rich_text = document.querySelector('#shopify-section-template--15677039935742__1645096874a98d814e .rich-text');
if (window.matchMedia('(min-width: 768px)').matches) {
   if(document.querySelector('#shopify-section-template--15677039935742__1645096874a98d814e .rich-text:has(.btn-custom-shop-here)')){
      rich_text.querySelector('.btn-custom-shop-here').remove();
   }
}
else {
   if(!document.querySelector('#shopify-section-template--15677039935742__1645096874a98d814e .rich-text:has(.btn-custom-shop-here)')){
      rich_text.insertAdjacentHTML("afterend", '<a href="https://www.herbaldimensions.com/collections" class="btn-custom-shop-here" >
   Shop here
</a>')
   }
}
})
</script>

Should be inserted here:

 Insert this CSS into your CSS file:

.btn-custom-shop-here {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
  font-family: "New York",Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid 
  Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 16px;
  padding: 1.125rem 2rem;
  line-height: 1.4;
  color: #fff;
  background-color: #494932;
  border: 1px solid #494932;
  pointer-events: none;
}

Hope it helps @HerbalDimension