Brooklyn theme mobile, how can I remove the arrows and decrease height image to dots?

Solved
JustJinn
Excursionist
20 0 6

1. How can I remove the arrows entirely from product pages?

2. How can I reduce the space between the dots and also height between image and dots?

dmwwebartisan
Shopify Partner
5372 1238 1585

@JustJinn 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
KetanKumar
Shopify Partner
16065 1769 5934

@JustJinn 

Welcome to the Shopify community!
and Thanks for your 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
JustJinn
Excursionist
20 0 6

Shop: Dupahdecor.com

 

0 Likes
KetanKumar
Shopify Partner
16065 1769 5934

@JustJinn 

Thanks 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product-single__media-group-wrapper .slick__controls {    margin-top: 5px;}
.product-single__media-group-wrapper .slick__arrow {display: none !important;}
.product-single__meta {padding-top: 5px;}

 

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
PeanutButter
Shopify Partner
368 67 151

This is an accepted solution.

hi @JustJinn 

You can add all the following code in Assets/theme.scss.liquid

1. To remove the arrows:

.product-single .slick__arrow {
    display: none !important;
}

 

2. To reduce the spacing between the dots:

Yo can change the 1rem to a smaller value if desired.  You can use decimals, line 0.8rem.

.slick-dots li,
.slick-dots button, 
.slick-dots a {
    width: 1rem;
}

 

3. To reduce the spacing between the dots and the image:

You can change the 15px value if desired to make the space bugger or smaller. Use whole numbers here.  The original margin was 25px

.product-single__media-group-wrapper .slick__controls {
    margin-top: 15px;
}

 

Please Like and Accept my answer if it fixed your issue

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
JustJinn
Excursionist
20 0 6

Super fast and super precise. Solved my issue,  but I have another smaller question. Is it possible to reduce the size of the dots as well?

0 Likes
PeanutButter
Shopify Partner
368 67 151

This is an accepted solution.

Sure thing. You can reduce the size of the dots with the following.  Same as before, adjust the 7px value to the desired value

.product-single__media-group-wrapper .slick-dots li.slick-active a:before,
.product-single__media-group-wrapper .slick-dots li a:before {
    width: 7px;
    height: 7px;
}

If you also want to make the dots border thinner (I think that with smaller dots it looks better with a thinner border), instead of the above code use this:

.product-single__media-group-wrapper .slick-dots li.slick-active a:before,
.product-single__media-group-wrapper .slick-dots li a:before {
    width: 7px;
    height: 7px;
    border-width: 1px;
}

 

Please like my answer if you are happy with it 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
JustJinn
Excursionist
20 0 6

You not only answered my question, but also made it better. The 2nd solution looks clean and works like a charm.

esrakaya
New Member
2 0 0

I would like to remove arrows and dots in the slideshow just for mobile phone. But still the customer should go on sliding the pictures by touching. I want it because the stick controls stands in front of the important words in the pictures of the slideshow.

0 Likes