Supply Theme - Shop Now button overlay on Slider

[Dan_Fischer]

I'm looking to insert a shopnow button with some text that will overlay each of my slider images and can be used to direct customers to various products. I had previously done it by adding the button graphic onto the image itself and then linking the whole image to a collection page but it's not optimal.

Any guidance would be greatly appreciated.

Thanks

Dan

[dav-mcg]

Hey Dan,

David here, Shopify Guru!

Good thinking on that workaround although I do agree that it is not ideal. There would be no way to set this up through the theme editor but it would be possible within the theme's code. As you are using Shopify's free Supply Theme you would be entitled to 1 hour free design time with our Theme Support, as per our Design Policy. So if you email support@shopify.com with a clear outline of your request they could take a look at this for you.

If you are looking to add a generic Call to Action button such as a "Shop Now" over the slideshow you could try this yourself by adding some code. Just to note that if you are making any coding changes it is a good idea to duplicate your theme rather than working on the published theme!

Once you have done this you can select Edit HTML/CSS and open the sections/slideshow.liquid file then add this code snippet to line 15:

<div class="cta_text">
    <a href="/collections/all" class="btn">Shop Now</a>
</div>

so that it looks like:

Next open the snippet/slider.liquid file and add this code snippet to line 14:

<div class="cta_text">
    <a href="{{ settings[slide_link] }}" class="btn">Shop Now</a>
</div>

so that it looks like:

Finally open the assets/theme.scss.liquid file. This is where the styling for the button is done so you can tweak this if you'd like to change the position and look off the Call to Action button. Here is the code that you should enter at the very bottom of the file:

.cta_text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index:1;
text-align:center;
}
.cta_text:before {
content: ' ';
display: inline-block;
height: 100%;
vertical-align: middle;
}

When all this is done you will have a Call to Action button on your Supply theme slider like this:

Hope that helps, feel free to drop us a line at support@shopify.com if you have any other questions :)

David Mc | Shopify Guru

[Hassan_Khalid]

Hi David Mc, 
I cant find "slider.liquid in my supply them.. is there another way of doing what you showed up there without the slider.liquid
thank you

[Arati_Devasher]

This is handy... any way to customise the text for each image in the slideshow? or to make the button go left or right?

[Tran_Thi_Phuong]

me too. cant find snippet/slider.liquid in Supplu theme. Anyone?

[Better_Choice]

In the section enabled themes, the code for sections/slideshow.liquid has to be changed to the following if you want to use your specific link destination:

<div class="cta_text">
    <a href="{{ block.settings.link }}" class="btn">Shop Now</a>
</div>

[Angela_Palanza]

Was anyone able to figure this out?

I am also using Supply theme, which doesn't show a slider.liquid file in the coding section

I even tried creating my own by typing out the code above, but no luck!

[Imad_Mghari]

If you can't find Slider, then look for slideshow.liquid

[Sid9]

Did anyone find a solution to this? Would really appreciate if someone could help out here.

[dav-mcg]

Hey folks!

Just an update on how to set this up for sectioned Supply. You will know if you are using the secitoned Supply theme if there are files in the Sections folder.

Open slideshow.liquid and add the following code to the image block in the schema at the bottom of the page. Be sure to include the comma too:

,
          {
            "type": "text",
            "id": "cta",
            "label": "Button label"
          }

It should look like this when it is added:

Next add the following code just after the image div:

    {% if block.settings.cta != blank and block.settings.link %}
              <div class="cta_text">  
                <a href="{{ block.settings.link }}" class="btn">{{ block.settings.cta | escape }}</a>
              </div>
              {% endif %}

Find both instance of {% if block.settings.link %} and replace it with {% if block.settings.link and block.settings.cta == blank %}

The HTML in the slideshow.liquid file should look like this when you are done:

Finally, add the following CSS to the bottom of the theme.scss.liquid file:

.cta_text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:1;
  text-align:center;
}
.cta_text:before {
    content: ' ';
    display: inline-block;
    height: 100%;
    vertical-align: middle;    
}

Save both files and you are good to go! Here is how it will look when you are finished:

Hope that helps, feel free to drop us a line at support@shopify.com if you have any other questions :)

David Mc