Clickable Slideshow in Simple Theme

[AS_Kits]

I would like to add a slide show to my home page with images that link to different parts of the website. How can I achieve this?

[Lilith]

Hey, @AS_Kits!

My name is Lilith, I'm on the Social Care team at Shopify. I have a solution for you!

If you haven't altered the code too much in the Simple theme, a slideshow with linking capacity is already built-in. I've gone ahead below and created an animation on how to do this. You'll want to access your Theme Editor by going to Online Store > Themes and clicking on Customize beside your Simple theme.

You can add any images to the slideshow and you can name your button anything you'd like. In the example of the animation, I used the free Burst images that are available to all merchants at no cost. If you don't have an image you can use those for free.

Additionally, you can link the button to any page in your site or an external link as well. There are a couple of settings that can customize this slideshow even further:

By default, there's a maximum of 6 slides that you can add to the slideshow and the button is necessary to make the slide clickable and linked. If you want to modify these limitations you can definitely do that. If you're not too comfortable with CSS/HTML/Liquid, I highly recommend hiring one of our awesome partners to help you with this. You can find them in the Experts Marketplace or by following this guide here.

Let me know how you do with the information above! I'm happy to answer any questions you think of as you work on your business.

[AS_Kits]

The issue I had with this is that I want the overlay opacity to be "0" and I would create my own graphics to represent the button. However when I set the button opacity to zero with no text overlay, the button function becomes inactive. I would like to hide the button label as shown below...

The other issue is, is that the entire image isnt clickable, only the area with the text. I would like the whole image act as a button.

[TAGSAngel]

I have the same issue  Have you found a way to make the whole image clickable?  Or at least move the button to the bottom right (or wherever) I can leave a space for the button on my slide graphics if need be but the optimum value would be to have the entire image clickable

[MyKitchen]

Based on the Shopify training that I'm undergoing right now, the functionality existed to configure a clickable link anywhere on the entire slide on every slide in a slideshow. Why would you want to add a static button covering content on your slide? What makes things worse is that the button is on a fixed horizontal position (left, center or right) and not maneuverable. I've spent so much time on my Shopify store to now be 100% demotivated to continue based on this type of huge limitation. Instead of me spending days trying to decipher the underlying code and halting my progress with my new store, isn't there anyone with the technical background in the support portal who could just give us what template changes we would need to make with our liquid files to do the needful? This is entirely disappointing at this stage of the game. Can anyone help? Please see below attached screenshot with the functionality actually taught to use as an exceptional tool that is not available now.

[MyKitchen]

Ok fellow Shopify'ers, I figured out a temporary work-around bypassing the limitation of not being able to configure a picture on a slide to navigate or link to a product page. If you need to navigate to some other kind of link, there's enough direction below to figure out the subtle difference to get the job done.

1. From the main Shopify admin screen, click on All products
2. Click on the product you want the slideshow picture to link to
3. Click on Edit website SEO at the bottom of the page and copy everything after "/products/"
4. In a text editor (i.e. Notepad), type the following and paste the text from the previous step immediately after /products/ and close that tag with a >
   1. <a href=”/products/this-is-the-name-of-your-product-you-want-linked-to”>

1. Navigate to Online Store > Themes > Customize
2. At the bottom of the left panel, click Theme Actions drop down, then click on Edit code
3. Open the slider.liquid file from the Templates category (This is the liquid file for the Minimal Theme. Maybe be slightly different in other themes but you get the gist)
4. Search for index-section slideshow-section from within the liquid file
5. Prepend <a href=”/products/this-is-the-name-of-your-product-you-want-linked-to”> before the <div class= index-section slideshow-section” line of html
6. Locate the corresponding closing </div> tag and append a closing </a>
7. Save the file
8. Load your theme editor session and you should now see your slide pic navigate to your product page after you click anywhere on the picture
9. Keep in mind that this is a hard-coded band-aid and there really should be a Shopify application developer update the Themes Editor user interface code to provide this functionality out of the box. But these steps should at least get everyone in the general direction of what needs to be done as a work-around. Good luck!

[MyKitchen]

Ok fellow Shopify'ers, I figured out a temporary work-around bypassing the limitation of not being able to configure a picture on a slide to navigate or link to a product page. If you need to navigate to some other kind of link, there's enough direction below to figure out the subtle difference to get the job done.

1. From the main Shopify admin screen, click on All products
2. Click on the product you want the slideshow picture to link to
3. Click on Edit website SEO at the bottom of the page and copy everything after "/products/"
4. In a text editor (i.e. Notepad), type the following and paste the text from the previous step immediately after /products/ and close that tag with a >
   1. <a href=”/products/this-is-the-name-of-your-product-you-want-linked-to”>

1. Navigate to Online Store > Themes > Customize
2. At the bottom of the left panel, click Theme Actions drop down, then click on Edit code
3. Open the slider.liquid file from the Templates category (This is the liquid file for the Minimal Theme. Maybe be slightly different in other themes but you get the gist)
4. Search for index-section slideshow-section from within the liquid file
5. Prepend <a href=”/products/this-is-the-name-of-your-product-you-want-linked-to”> before the <div class= index-section slideshow-section” line of html
6. Locate the corresponding closing </div> tag and append a closing </a>
7. Save the file
8. Load your theme editor session and you should now see your slide pic navigate to your product page after you click anywhere on the picture
9. Keep in mind that this is a hard-coded band-aid and there really should be a Shopify application developer update the Themes Editor user interface code to provide this functionality out of the box. But these steps should at least get everyone in the general direction of what needs to be done as a work-around. Good luck!

[Rafayel]

Here is a permanent solution to this horrible design:

1) Go to your slideshow.liquid

2)Add this following code <a href="{{ block.settings.button_link }}" style="position: relative;"> after the <li> tag seen in the screenshot below.

3) Don't forget to close the a tag that you just added with </a> immediately before the </li>.

Now you can click anywhere on the entire slide without a button and it will link you to the url that you have assigned to that slide.

[kyleboyd1992]

Simple and worked perfectly, cheers for this!

[Eyang]

I have a debut theme and I inserted that code by deleting <li> and by adding it after <li>. However, after pasting the code into line 90, nothing happened when I went back to editing my store. A reply would be greatly appreciated!