d
Topic
Posts:
10
13 days ago

Convert product images to carousel/slider (Minimal theme)

This question is repeated COUNTLESS times in this forum, but none with a solid answer (I've been looking for 5 hours...).

The Minimal these is incredibly messy on mobile - all product images are bulked up together requiring the user to scrooooooll before reaching the page's content (this applies to both right-hand alignment, as well as under image). How can I convert these images to a carousel/slider?

I've read about many JS tools to make this possible. However, most of these appear to be obsolete.

What is the solution?

Thanks in advance! For such a simple featuer, I'm pullin' my hair out here! :)

i
Replies
Jason Shopify Expert freakdesign.com.au
Posts:
7547
13 days ago

What are the obselete JS tools you're talking about? Knowing what you've looked at might help the forum members give advice on if they actually are obselete or not.

Do note that any change to how the images show is going to require a level of HTML, CSS and JavaScript edits. Are you comfortable making these changes in the first place?

If not - and this is an important thing to resolve - you'd have a couple of options:

  • hire someone to help modify your theme code
  • use a different theme that might show the images in a way closer to your needs

It's not going to be a simple one step process to change so it's unlikely someone on the forums will be able to guide you through the process.

If you have enough knowledge to make the html / css / js edits than perhaps the forum members can help nudge you in the right direction. 

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Posts:
30
13 days ago

What Jason says, this is going to require some basic knowledge of html, css and javascript. If you have that, it's not that hard. 

I would say, just let js check if you're on mobile screen size or not. If yes, run a carousel plugin on it – like slick.js.

Freelance developer – http://tomkeysers.be
Posts:
10
13 days ago

@Jason: Thanks for your feedback. I have HTML, CSS, and JS experience (as well as an expert sitting beside me. ;) Editing the theme seems like the best approach.

@Tom Keysers: Slick looks great - thanks for pointing me here. "Multiple Items" is what I'm looking for - for both desktop and mobile devices.

I'm using a default Shopify theme (Minimal), so am not familiar with its interface/implementation to upload/reference HTML, CSS and JS files.

Addiitonally, we noticed Slick uses JQuery; is that something Shopify can leverage?

Not sure if it helps, but here's the site: edenandheirloom.com

Thanks for your help! 

Posts:
30
13 days ago

You're welcome, Elizabeth. All Shopify themes work basically the same, you can add any asset (css, js, ...) you want and load it in your theme. Shopify's documentation should cover it all!

It indeed uses jQuery, but that's no problem for Shopify – and as a matter of fact I see your store theme already loads it :)

Freelance developer – http://tomkeysers.be
Posts:
10
10 days ago

Thanks for confirming, @Tom. :)

This is my first time using jQuery, and my friend's first time using Shopify. Hopefully, we can put our heads together to figure this out.

If there's any direction you can give us, let me know. Otherwise, we'll start perusing Shopify's documentation more in-depth.

Posts:
10
10 days ago

I've perused Shopify's/Slick's documentation, as well as a few other forums.

I'm very, very wary making changes to my live site, particularly since I have live advertising directing traffic here.

Could you please provide more specific instruction so I can avoid a catastrophe? :)

Posts:
30
10 days ago

Definitely a legit question. You should make a copy of your theme and make your edits here first; you can preview the theme edits via the eye icon next the duplicate theme in your themes page.

After the edits have been finalised in this 'development' theme, you can copy the edits to your live theme or make this development theme the new live theme. This is how I have been doing it for a long time :)

Freelance developer – http://tomkeysers.be
Posts:
10
9 days ago

Thanks Tom. I'll definitely implement that technique when modifying the code. :)

However, I'm still having trouble determining what that code is. There seem to be a plethora of support threads for the Brooklyn theme detailing how, specifically, to accomplish this. I've yet to find anything helpful for Minimal though.

If there's anything specific you can suggest to guide me, I'd really appreciate it!