How can I hide the image on this specific product page in mobile only

Solved
RobMoore007
Explorer
68 1 7
0 Likes
suyash1
Shopify Partner
2718 289 451

@RobMoore007 - shopify shares product templates, hence to make page specific changes, you need unique page id for it which is not available in your page, hence we need to edit theme.liquid file to add id for pages, then only we can do it.

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
RobMoore007
Explorer
68 1 7

This is the page ID: 6559736299706

Regards
Rob Moore - NEWBY!!
0 Likes
suyash1
Shopify Partner
2718 289 451

@RobMoore007 - but it is not seen in code, need to set ids for pages

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
RobMoore007
Explorer
68 1 7

Here it is in the code..

<div class="product-gallery__main slideshow-transition--slide flickity-enabled flickity-resize" data-product-id="6559736299706" data-media-count="1" tabindex="0"> <div class="flickity-viewport" style="height: 355px; touch-action: pan-y;"><div class="flickity-slider" style="left: 0px; transform: translateX(0%);"><div class="product-gallery__image is-selected" data-product-id="6559736299706" data-title="" data-media-type="image" style="position: absolute; left: 0%;"> <a href="//cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_2048x.jpg?v=1615574963" class="product-gallery__link" data-fancybox="6559736299706" title="Callaway Adult Club Rental"> <div class="image__container" style="max-width: 800px"> <span class="zoom-container" style="position: relative; overflow: hidden;"><img id="20397603258554" class="lazyload--fade-in lazyautosizes ls-is-cached lazyloaded" alt="Callaway Adult Club Rental" data-zoom-src="//cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_5000x.jpg?v=1615574963" data-image-id="20397603258554" data-index="0" data-sizes="auto" data-src="//cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_1200x.jpg?v=1615574963" data-srcset=" //cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_200x.jpg?v=1615574963 200w,
                              //cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_400x.jpg?v=1615574963 400w,
                              //cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_600x.jpg?v=1615574963 600w,
                              //cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_800x.jpg?v=1615574963 800w,
                              //cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_1200x.jpg?v=1615574963 1200w,
                              //cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_2000x.jpg?v=1615574963 2000w" data-aspectratio="800/800" height="800" width="800" srcset=" //cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_200x.jpg?v=1615574963 200w,
                              //cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_400x.jpg?v=1615574963 400w,
                              //cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_600x.jpg?v=1615574963 600w,
                              //cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_800x.jpg?v=1615574963 800w,
                              //cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_1200x.jpg?v=1615574963 1200w,
                              //cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_2000x.jpg?v=1615574963 2000w" sizes="355px" src="//cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_1200x.jpg?v=1615574963" style="display: block;"><img role="presentation" alt="" src="//cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_5000x.jpg?v=1615574963" class="zoomImg" style="position: absolute; top: 0px; left: 0px; opacity: 0; width: 800px; height: 800px; border: none; max-width: none; max-height: none;"></span></div> <noscript> <img  src="//cdn.shopify.com/s/files/1/0533/0563/9098/products/callaway-stand-bags_1200x.jpg?v=1615574963"
                      alt="Callaway Adult Club Rental"
                      class="lazyloaded lazyload fallbackImage" /></noscript></a></div></div></div></div>
Regards
Rob Moore - NEWBY!!
0 Likes
suyash1
Shopify Partner
2718 289 451

@RobMoore007 - it is data product id, we can not use it, we need to set for body so each page has unique id and then using it we can hide image on this product only

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
RobMoore007
Explorer
68 1 7

I've used this to hide something else.. and it works !

#template-product #product_form_6559736299706 .items_left { display: none !important; }

 

I just need the full syntax to hide image on mobile

Regards
Rob Moore - NEWBY!!
0 Likes
suyash1
Shopify Partner
2718 289 451

@RobMoore007 - ok, which image do you want to hide?

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
RobMoore007
Explorer
68 1 7

Thanks.. There is only one image on the page

https://auchterlonies-com.myshopify.com/products/callaway-club-rental

Regards
Rob Moore - NEWBY!!
0 Likes
suyash1
Shopify Partner
2718 289 451

This is an accepted solution.

@RobMoore007 - try this css and check , but check other pages too

#shopify-section-product__main .product-6559736299706 .product__images{display:none;}

 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly