Supply Theme - Shop Now button overlay on Slider

Highlighted
New Member
14 0 0

Hey David! Thanks for your effort.. but unfortunately its not working on my side..

I got some errors in the slideshow.liquid.. something with id label is not valid.. sorry i closed this already..

Im totally freaking out with that :D

Any way to help me ? I put this code maybe in the wrong schema . Any way to go on my side?

Really appreciate your help

Regards,

0 Likes
Highlighted
Shopify Partner
1445 195 524

I dont know why everything has to be so complicated. Here's how you can do this without editing a schema or anything.

open slideshow.liquid. Add this style to the very top of the page above the <hr> tag.

<style>
  .shop-now{
    position: absolute;
    padding: 10px 40px 10px 40px;
    background-color: #5888b9;
    color: white;
    left: 50%;
    top: 50%;
    z-index: 100;
    border-radius: 5px;
    transform: translateX(-50%)translateY(-50%);
  }
    .shop-now:hover{
cursor:pointer;
  }
</style>

 

Directly underneath the first div that says "<div class="flex-slider">" paste this code

  <div class="shop-now">
    SHOP NOW
  </div>

Now you have a shop button in front of your slideshow. Style it however you want. You may want to add that <style> section to your actual theme.scss file at the bottom of the page, but if it doesnt bother you having it in the slideshow just leave it. 

David's solution is better because you can edit the button in your customize section and from what I can tell it will let the button be different for every slide in the slideshow. If you just want to throw a button on top of the slideshow though, this solution works.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
14 0 0

Thanks but i want to have a button with different links for each slide =)

0 Likes
Highlighted
Tourist
7 0 1

Hello I'm having the same issue with DEBUT THEME, can you please help me to add a "shop now" proper button on the slideshow.

On the configuration left side panel I only have Title and subtitles options but no links or buttons creation options... I guess I need to change some code but not sure how and where. Thank you CAPTURE.jpeg

0 Likes
Highlighted
New Member
2 0 0

Hey, thanks a lot for this. I applied it to the minimal theme and I now have a shop now button. Can you tell me how to direct the button to a certain page on my site. Currently, the button leads to nowhere.

0 Likes
Highlighted
New Member
1 0 0

Hi, Thank you.  I added the code, however I would like each slideshow image to go to each individual page with a subset of collections.  Right now it goes to /collections/all.  May I have the coding to be able to do this? 

 

Thank you

0 Likes
Highlighted
New Member
1 0 0

Hey David. Thanks for that input, it works just fine! I was wondering if it's possible to add overlay text over the button, just like in the Debut Theme. Thank you!!

0 Likes