FROM CACHE - en_header

Clickable Slideshow in Simple Theme

AS_Kits
Excursionist
18 1 1

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?

Replies 29 (29)
Lilith
Shopify Staff
Shopify Staff
603 72 173

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.

 

alt

 

 

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:

 

alt

 

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.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

AS_Kits
Excursionist
18 1 1

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...

 

Capture1.JPG

 

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
Trailblazer
147 1 67

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
Tourist
3 0 3

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.

 

ShopifyCommunityPic1.jpg

MyKitchen
Tourist
3 0 3

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
Tourist
3 0 3

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
Shopify Partner
7 0 7

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.1.PNG

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.

Senior Software Engineer
kyleboyd1992
New Member
1 0 0

Simple and worked perfectly, cheers for this!

Eyang
Tourist
6 0 0

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!

Rafayel
Shopify Partner
7 0 7
This solution specifically only works for the simple theme.
I will look at the debut theme tomorrow and give you a solution.
Senior Software Engineer
Eyang
Tourist
6 0 0

Thank you so much! I've researching this for probably hours by now. Again, thank you so much for your time and help!

TAGSAngel
Trailblazer
147 1 67

It would also be great if the slideshow auto reduced in size for mobile view.  I currently have design all my slide shows to have any important info in the center so it's not lost when viewed on mobile and it makes it look quite silly on desktop.   Why is the slideshow not mobile responsive automatically resizing?  Please help.

Eyang
Tourist
6 0 0

I'm not an expert at this but I think it might be because of your theme.

Rafayel
Shopify Partner
7 0 7

@TAGSAngel which theme are you using?  Slideshows should automatically resize to mobile.  Can you describe your issue in more detail please?

 

@Eyang here is the fix.  This fix is a little bit more advanced than the Simple theme fix (which I will update shortly with a more sophisticated solution).

This fix will automatically identify weather you have a button or not.  If you just have a link but no button, the whole slide will be clickable.  However if you do chose to add a button to a slide, only the button will be clickable.  - this fix will allow you to control that very variable, which Shopify for whatever reason has decided to not be controllable.

 

FIX FOR DEBUT THEME:

 

1.) Navigate to "Edit Code" for the Debut theme and find slideshow.liquid

2.) Add the following code as seen in the screenshot below at the location pictured:

{%- if block.settings.button_link != blank and block.settings.button_label == blank -%}
<a href="{{ block.settings.button_link }}">
{%- endif -%}

fix1.PNG

 

3.) Add the following code as seen in the screenshot below at the location pictured:

{%- if block.settings.button_link != blank and block.settings.button_label == blank -%}
</a>
{% endif %}

fix2.PNG

 

DONE.

Slides with a link but no buttons should now be entirely clickable for the DEBUT THEME.

Senior Software Engineer
Eyang
Tourist
6 0 0

Thank you so much Rafayel! It absolutely works all thanks to you! 

Rafayel
Shopify Partner
7 0 7

I'm glad it's working for you and good luck with your future Shopify endeavors!

Senior Software Engineer
robinkarlsson
New Member
5 0 0

So I tried this and it did work, but it also messed up somethings. The pause button for the slide show is now below and to the left, instead of to the right, and it caused a sort of line break in the next section (see screenshots).

Skärmavbild 2020-06-25 kl. 14.33.51.pngSkärmavbild 2020-06-25 kl. 14.33.23.png

Any idea how to fix this?

Eyang
Tourist
6 0 0

Could you have maybe changed some of the gallery sizing in the code? 

robinkarlsson
New Member
5 0 0

No I just copied and pasted the bit of code where he said it should go. Double checked it too.