Motion theme product page product image in mobile view customization

[Sivadarshan]

I'm using the Motion theme and need to customize the product page. Specifically, I want to:

1. Hide the product thumbnails in mobile view.
2. 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?

[mageplaza-cs]

Hi @Sivadarshan ,

Can you give me a new website link? The old website link has expired.

[Sivadarshan]

@mageplaza-cs  Thank you for your prompt response. I would greatly appreciate your assistance in achieving this customization. I'll share the link to my new website, which requires the slider dots feature, as well as the website from which I obtained the code. Additionally, I'll attach the theme file, which contains all the necessary code. Could you please help me locate the relevant code within the file?

New website: https://www.taramajeans.com/

Old website: https://cfv5ic3gqxbpieq6-67925410094.shopifypreview.com(in this link the slider dots are there, I'll attach the theme file for this, where all the codes are there)

please help me to find the codes and share how to paste the code in new theme.

https://drive.google.com/file/d/1zmC4R8eJi5ydQRMZr-kBttJ-Xm3SJF9V/view?usp=sharing (theme file is attached in link)

[mageplaza-cs]

@Sivadarshan 

Please replace the theme.js file in your new website source with the theme.js file from the source code in the drive you provided me. Then, save and check the results.

Please let me know if it works as expected!

Best regards!

[Sivadarshan]

@mageplaza-cs I have tried multiple times but this didn't work

[Sivadarshan]

@thepopson  Thank you for your prompt response. I would greatly appreciate your assistance in achieving this customization. I'll share the link to my new website, which requires the slider dots feature, as well as the website from which I obtained the code. Additionally, I'll attach the theme file, which contains all the necessary code. Could you please help me locate the relevant code within the file?

New website: https://www.taramajeans.com/

Old website: https://cfv5ic3gqxbpieq6-67925410094.shopifypreview.com(in this link the slider dots are there, I'll attach the theme file for this, where all the codes are there)

please help me to find the codes and share how to paste the code in new theme.

https://drive.google.com/file/d/1zmC4R8eJi5ydQRMZr-kBttJ-Xm3SJF9V/view?usp=sharing (theme file is attached in link)