Can I change "Previous & Next" into arrows in Brooklyn theme on Shopify?

Grace_01
Shopify Partner
84 3 10

Hello Community,

I have brooklyn theme and in below image I have enabled slider on product page it's working perfect but how to change "Previous & Next" into arrow. Any help would appreciated.

https://ou9swffuy6vh1mmb-33737375879.shopifypreview.com/products_preview?preview_key=42587b8467d4fde...

 

Replies 3 (3)

Ajay-app-dev
Shopify Partner
178 16 14

Hi @Grace_01 

The Best way i found to do that is this. You can remove my HTML and place yours there.

Here's an example:

$('.home-banner-slider').slick({
    dots: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 300,
    slidesToScroll: 1,
    arrows: true,
    prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
    nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>'
});

 

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com
Grace_01
Shopify Partner
84 3 10

@Ajay-app-dev Thanks for the reply.. could you please explain in detail.. I have added below code in theme.js document.ready but nothing changes 

$('.product-single__photos').slick({
    dots: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 300,
    slidesToScroll: 1,
    arrows: true,
    prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
    nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>'
});

 

Ajay-app-dev
Shopify Partner
178 16 14

@Grace_01  Replace this slick slider code with your existing slick slider code. 

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com