For Brooklyn and Narrative theme, can you change the 'featured collection' display into a carousel?

SP864
Tourist
6 0 5

Want the featured collections on homepage to display as a carousel/slider in one line rather than tiles. Is it possible? If so, how? Thanks!

KetanKumar
Shopify Partner
15733 1750 5786

@SP864 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes

Dear SP864,

it is not possible within the customizing but you can achieve this with some changes in the theme code. You can find the basic recipe on my blog https://wp-dataanalyst.medium.com/flexslider-and-the-product-page-of-the-shopify-narrative-theme-477....

To make this work on the Brooklyn Theme you might want to create a custom.js in the asset folder and add the following lines

 

$(document).ready(function()
{  $(window).on('load', function() {
          $('.flexslider').flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 210,
            itemMargin: 5
          });
       });
}) 

 

 

Copy the files flexslider.scss.liquid and jquery.flexslider.js which are mentioned in my blog into your asset folder. In flexslider.scss.liquid  set

$color-body-text: {{ settings.color_body_text }};

 

In sections/featured-products.liquid wrap/replace the loop in line 51

{% for product in collections[section.settings.home_featured_products].products %}

 

with

 

 <div class="flexslider">
        <ul class="slides">
        {% for product in collections[section.settings.home_featured_products].products %}
        <li>{% include 'product-grid-item' %}
        {% endfor %}
     </ul>
</div> 

 

 

In my test it did work but it did not look nice yet. You might want to play around with the settings for flexslider, see custom.js. Also you might want to adjust the styling by adding modifying the style sheet classes. Hope this helps.

 

Regards

Thomas

• War meine Antwort hilfreich? Hinterlasse bitte ein Like.
• Hat meine Antwort Dein Problem gelöst? Bitte akzeptiere sie als Lösung.
0 Likes
SP864
Tourist
6 0 5

www.belizzadesires.com

Test123

 

We want the items of collection to display in carousel rather than collage or grid form.

0 Likes
SP864
Tourist
6 0 5

Your solution is for product page.

What I mean is my current home page collection items are displaying in grid form (the other option is collage). What I want to do is make them all in a carousel so it appears in one line for the customers to scroll. 

Capture.PNGAll in one line for scrolling.All in one line for scrolling.

0 Likes

Dear SP864,

FlexSlider can be used on any page. The previous description here is adapted to the home page.

Regards

Thomas

• War meine Antwort hilfreich? Hinterlasse bitte ein Like.
• Hat meine Antwort Dein Problem gelöst? Bitte akzeptiere sie als Lösung.
0 Likes