Solved

Removing thumbnails in mobile view only

technase
Shopify Partner
90 0 23


I am trying to remove the thumbnails slider and arrows from the mobile view of the product page (as shown below).

Also, is it possible to move the product title to the top (in mobile view only), above the main image on the product page? Currently, it is positioned below the main image.
page link: https://testingstoresandthemes.myshopify.com/products/customise-fridgy-600ml-tumbler-grip-range?vari...
Theme name: Flex
storefront password: test

Any help is greatly appreciated 
WhatsApp Image 2024-02-14 at 10.53.38 AM.jpeg

technase
Accepted Solution (1)

ZestardTech
Shopify Expert
5400 971 1293

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > style.css and paste this at the bottom of the file:

 

@media (max-width:767px){
.product-gallery__thumbnails.product-gallery__thumbnails--bottom-thumbnails.js-gallery-carousel.is-slide-nav--true.flickity-enabled.is-draggable.flickity-resize {
    display: none;
}
.product-gallery .product-gallery__main .flickity-prev-next-button.next {
    display: none;
}
.product-gallery .product-gallery__main .flickity-prev-next-button.previous {
    display: none;
}
}

 

ZestardTech_0-1707891002100.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 6 (6)

ZestardTech
Shopify Expert
5400 971 1293

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > style.css and paste this at the bottom of the file:

 

@media (max-width:767px){
.product-gallery__thumbnails.product-gallery__thumbnails--bottom-thumbnails.js-gallery-carousel.is-slide-nav--true.flickity-enabled.is-draggable.flickity-resize {
    display: none;
}
.product-gallery .product-gallery__main .flickity-prev-next-button.next {
    display: none;
}
.product-gallery .product-gallery__main .flickity-prev-next-button.previous {
    display: none;
}
}

 

ZestardTech_0-1707891002100.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
technase
Shopify Partner
90 0 23

Thank you so much. 
Can we move the product title to the top of the page, above the main product image? It's currently below the main image.

technase
ZestardTech
Shopify Expert
5400 971 1293

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > style.css and paste this at the bottom of the file:

 

@media (max-width:767px){
.product-template .section.is-width-standard {
position: relative;
}
.product-template .product_name.title {
position: absolute;
top: -36px;
}
}

 

ZestardTech_0-1707891560593.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
technase
Shopify Partner
90 0 23

Really appreciate all your help.. 
Any chance you can help me reduce the spacing here, to half of what it is right now ?
WhatsApp Image 2024-02-14 at 11.23.32 AM.jpeg

technase
ZestardTech
Shopify Expert
5400 971 1293

Hello There,

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > style.css and paste this at the bottom of the file:

 

@media (max-width:767px){
.product__images {
margin-bottom: 25px;
}
}

 

ZestardTech_0-1707892200011.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

ZestardTech
Shopify Expert
5400 971 1293

Hello @technase 

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing