Replace image thumbnails with slideshow dots on the Brooklyn theme

Store Design
1

HI there,

I was wondering if anyone can help me replace product image thumbnails on the Brooklyn theme to a dotted slider like the image below.

This is what my product page currently looks like: https://scribblyinc.com/collections/planners/products/2021-planner-marble

The is what I want it to look like:

file-mhahQ1G416.jpg
file-mhahQ1G416.jpg774×902 437 KB

1 Like
2

Hello, @ASandher

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

  1. Go to Online Store->Theme->Edit code
  2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
.product-single__thumbnails {display: flex;}
.product-single__thumbnails img, .product-single__thumbnails a {
     width: 10px;
    height: 10px;
    background: #cccccc;
    border-radius: 100px;
}
.product-single__thumbnails img {
display: none;
}
.product-single__thumbnail.active-thumb {
    background: #f8a698;
}
1 Like
3

Amazing! Thank you so much for such a quick reply!

Any way to add arrows for sliding next to the image?

Also, making sure the dots are in the center instead of far apart?

Right now it looks like this - https://scribblyinc.com/collections/notebooks/products/colouring-margins-notebook

It would be nice to have them next to each other centred with the image.

4

@ASandher

Thanks for update

yes error possible to customization

dots center code

.product-single__thumbnails {
    display: inline-block;
}
5

Thank you!

That worked, but now these are in 3 rows - https://scribblyinc.com/collections/planners/products/2021-planner-marble

Any way to have them centred but those with many images to still be in one line?

Also still wondering if you can help add arrows next to the image for flipping through like the example I sent before.

6

@ASandher

it can be done more code customization.

7

Any way to add arrows at the bottom like on the mobile site?

1 Like
8

@danieljohnson

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.

9

sefondre.com Password: sefondre

10

@danieljohnson

It can be done by doing some code customization. please send me a personal message and we can discuss what you’d like

11

Hello i have the same issue except im using the debutify theme