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

jacauschi23
Explorer
61 9 17

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.

Replies 11 (11)

PaulNewton
Shopify Partner
6274 573 1319

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.

 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


jacauschi23
Explorer
61 9 17

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>
PaulNewton
Shopify Partner
6274 573 1319

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

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


jacauschi23
Explorer
61 9 17

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?

PaulNewton
Shopify Partner
6274 573 1319

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

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


jacauschi23
Explorer
61 9 17

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

PaulNewton
Shopify Partner
6274 573 1319

@jacauschi23 wrote:

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


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

The first method using full html tags(<script>,<link>) 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 <link> tag and there is actually no <stylesheet> tag at all.

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


jacauschi23
Explorer
61 9 17

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

PaulNewton
Shopify Partner
6274 573 1319

@jacauschi23 wrote:

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


And the error is??

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


jacauschi23
Explorer
61 9 17

 


@PaulNewton wrote:

@jacauschi23 wrote:

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


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

The first method using full html tags(<script>,<link>) 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 <link> tag and there is actually no <stylesheet> tag at all.

 

 


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

emmasmith
Visitor
1 0 0

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 🙂