Need help creating a carousel product slider for homepage

Highlighted
New Member
4 0 0
Hi,
It’s https://lasourcebeer.be/ and the password is : wohbri
0 Likes
Highlighted

Looks like your site is missing some files 

 

Failed to load resource: the server responded with a status of 404 ()
slick.css:1

Failed to load resource: the server responded with a status of 404 ()
flickity.pkgd.min.js:1

 Uncaught SyntaxError: Unexpected identifier
flickity.pkgd.min.js:1

Failed to load resource: the server responded with a status of 404 ()
slick.css:1

Failed to load resource: the server responded with a status of 404 ()

Basically, slick has to be uploaded to settings --> files

remove flikity if not using it in your code

then there is a solution that uses SLICK for slides and carousels

you can try this yourself - https://www.youtube.com/watch?v=7DqtFl2KaSg

but you said you tried this already correct?  the only way to dig into it is to get access to your store and look at the code. 

PM me if you want me to take a look and to continue discussion  - it is 2:43am here in San Diego, USA so I am going to bed.

James Byrne, Owner, Information Architect (USMC VET)
After Dark Grafx - Since 1992
"We Work After Dark, So You Don't Have To!"
https://www.afterdarkgrafx.com

Services: Website Design, Mobile App Development (iOS, Android, Windows), Ecommerce, Magento, Shopify, Miva, BigCommerce, Search Engine Optimization, Wordpress, Hosting, Graphic Design, Merchant Accounts, Consulting and all things web related!

Certified Partner/Developer/Affiliates: Shopify, Google Integrator, Wordpress, Zoho, AuthorizeNet, Geotrust and a Member of the San Diego Regional Chamber of Commerce, Veteran Owned Businesses, Veteran's In Business Network.

I also build custom apps for Shopify!
0 Likes
Highlighted
New Member
2 0 1

Hi Aaron, 

 

Can you update me on the current themes that offer the carousel feature for products?

1 Like
Highlighted
New Member
4 0 0

HI, I would also like to know which of the current free themes offer the carousel feature for products too? Thanks

0 Likes
Highlighted

@Gtn33 if the free theme has a banner slider it more than likely has the carousel feature for the products. The only issue is that it does not have a product carousel by default. Hence, the reason to add the custom code to the themes.   

Slick is typically the slider script installed on most themes.

TO TEST:

In Google Chrome, on your free theme, on the front end - scroll down to where you have a featured collection showing 3 or more products...right click and select INSPECT.

You are looking for the <ul>  tag for the featured collection.  In this instance, I am using DEBUT as an example.

Look for this: <ul class="grid grid--uniform grid--view-items">

To test to see if slick is working on this theme, you will have to double click on that code in the inspector and add an additional class:       collection-slider      so it will look like this

<ul class="grid grid--uniform grid--view-items collection-slider">

Once you have this class added select enter so it adds the class to this inspector window.

You will see the word CONSOLE to the right of ELEMENTS in the inspector. Click CONSOLE

then type the following and hit enter:

$('.collection-slider').slick();

If it works then you will see 1 product under you <ul> tag now and not the 3 or 4 that you had there before.

This tells you that slick is installed and you can use it as your carousel script.  Performing the actions in this post DOES NOT ADD IT TO YOUR THEME. It is only testing if you are able to implement this.

The youtube link or my post link posted previously in this thread cover how to complete this for the Debut Theme. 

Each theme is different, so you can hire an expert, or waste your time trying to find the answer and not implementing it correctly in the long run.

If you then type this into the console and hit enter - you will now see all your products in a row again.

$('.collection-slider').slick('unslick');

 

James Byrne, Owner, Information Architect (USMC VET)
After Dark Grafx - Since 1992
"We Work After Dark, So You Don't Have To!"
https://www.afterdarkgrafx.com

Services: Website Design, Mobile App Development (iOS, Android, Windows), Ecommerce, Magento, Shopify, Miva, BigCommerce, Search Engine Optimization, Wordpress, Hosting, Graphic Design, Merchant Accounts, Consulting and all things web related!

Certified Partner/Developer/Affiliates: Shopify, Google Integrator, Wordpress, Zoho, AuthorizeNet, Geotrust and a Member of the San Diego Regional Chamber of Commerce, Veteran Owned Businesses, Veteran's In Business Network.

I also build custom apps for Shopify!
0 Likes