How can I add a simple image slideshow within a product's description section?

Technical Q&A
1

I need to some quick assistance on how I can insert a simple image slideshow within the description area on a product page.

The majority of products are movies. Usually product images are 1 vertical movie case artwork and a few horizontal stills from scenes in the movie. The horizontal stills just don’t work with the product image dimensions since the main image is vertical. The horizontal stills end up being to small. So, I would rather put them in the description section as a clickable slideshow (no autoplay).

Right now the product images are on the left, price/qty/order on the right, and then below those is the product description area.

2

It’s very dependent on which theme you have but look for the slideshow used by the home page, or within the product page for the main image gallery.

In your product description you will need to manually add html that follows that structure and conventions for images and of the homepage slideshow.

Also you will probably have to find the related javascript to initialize it and the css to style it for product pages.

3

I think I’m going to opt for an online slideshow generator where it gives me the code to place and is exactly what I need. However I’m running into a small issue.

It gives me HTML to insert into Head, HTML to paste to Body, and CSS to save as my-slider.css.

So, I created a new .css Asset as my-slider.css and pasted that code in. Then I paste the HTML into the product description and linked to the necessary image files. Now, I’m not sure where to put the “HTML to insert into Head” which is:

<link rel="stylesheet" href="ism/css/my-slider.css"/>
<script src="ism/js/ism-2.2.min.js"></script>
4

in theme.liquid and you’ll want to use the asset_url filter to get the correct url to the assets you added to your theme

5

Thanks, so just put this in theme.liquid?

    <link rel="stylesheet" href="{{ 'my-slider.css' | asset_url }}"/>
<script src="ism/js/ism-2.2.min.js"></script>

Or do I have to alter the script as well?

6

all assets that are part of your theme.

Your current script tag is using a relative url which will not exist as there is no “/ism/js/” folder that’s part of shopify:

<script src="ism/js/ism-2.2.min.js"></script>

Either use the asset_url filter or the full url to the resource online

7

Ok, I have added the javascript asset as ism-2.2.min.js

Would this be the correct code now?

<link rel="stylesheet" href="{{ 'my-slider.css' | asset_url }}"/>
<script src="{{ 'ism-2.2.min.js' | asset_url }}"></script>

or would this be correct?

{{ 'my-slider.css' | asset_url | stylesheet_tag }}
{{ 'ism-2.2.min.js' | asset_url | script_tag }}

Sorry, not very familiar with this stuff

8

It’s okay you got it either way as both work.

The first method using full html tags(,) lets you exercise more control over the html tags attributes if you need that.

It’s easier to spot the file types in themes when scanning.

The second method using the filters (stylesheet_tag,script_tag) take the full url returned by the asset_url filter and put in the right type of html tag.

And lets the template renderer worry about the syntax of the html tags, because seriously who ever remembers that CSS files use the tag and there is actually no tag at all.

9

It’s giving me an error when trying to save either of those. Do you mind providing me the correct code to insert?

10

[quote=“PaulNewton”]

It’s okay you got it either way as both work.

The first method using full html tags(

It’s giving me an error when trying to save either of those. Do you mind providing me the correct code to insert?

11

And the error is??

12

This thread is super helpful. Thank you everyone! I am a content writer by profession and I had a query similar to this which I was able to solve with your aid. Special thanks to the one who asked this question :slightly_smiling_face: