I’m using the Motion theme and need to customize the product page. Specifically, I want to:
- Hide the product thumbnails in mobile view.
- Replace the slider dots with a media play button on the video slider dots.
I pasted this code in theme.css - it hides the product image thumbnail, but the slider dots and media play button not showing.
/* PRODUCT CUSTOM CSS */
.color_value_list{margin:15px 0}
/* Left margin is added extra */
.color_value_list .color_value_option{background: #0c100f;width: 18px;height: 18px;border: 2px solid transparent;padding: 5px;display: block;border-radius: 50%;margin-right:15px;margin-left:3px;outline: 1px solid transparent;}
.color_value_list .color_value_heading_main{margin-right:15px;}
.color_value_list .color_value{color:#000;}
.color_value_list .color_value_value{display:flex;}
.color_value_list .color_value_value .color_value_option_active{border: 2px solid white;outline: 1px solid #000;}
.color_value_list .color_value_heading{display:flex;align-items: center;}
.product__photos .flickity-page-dots{display:none;}
@media screen and (max-width:768px){
.product__thumbs{display:none;}
.product__photos .flickity-page-dots{display:block;}
.product__photos .flickity-page-dots .dot {
border-radius: 50%;
opacity: 0.25;
cursor: pointer;
z-index:999;
width: 12px;
height: 12px;
margin:0 7px;
}
.product__photos .flickity-page-dots .dot.is-selected {background:#000;color:#000;}
}
html{
height:-webkit-fill-available;
}
.template-collection .color_value_list{display:none; }
In this website https://tgabgbcce8z0ijkj-67925410094.shopifypreview.com please check the product page in mobile view there will be slider dots and media play button on video slider dots. I want exactly like this
This is the website we need to work https://zybaltaprxo9iio0-67925410094.shopifypreview.com . I just to replicate the above feature in this new theme. Here is the reference image.
I’ll share the reference website and the code I’ve tried so far. However, the code doesn’t seem to work with the new theme. Could you please help me resolve this issue?