Customization Request for Motion Theme - Product Page (Mobile View)

Store Design
, , , , , , ,
1

Hi, I’m using the latest version of the Motion theme and need help customizing the product page image view specifically for mobile views. I want to:

  • Hide product thumbnails
  • Add slider dots
  • Keep videos visible

These customizations should only apply to mobile views. I’ll attach a reference website that shows the desired layout. Could you please assist me in achieving this customization?

Reference website: https://3zc4f7ldmxyjyogu-67925410094.shopifypreview.com

My Website: https://r4mdtvb347tr5fea-67925410094.shopifypreview.com

Thanks in advance

2

In your refference site they mainly modify the product page flickity js call to show doted. can you check your theme has any option for product thum to show pagination. Then they used this bellow CSS to show the video icon , for the position 4.

.product__photos .flickity-page-dots li[aria-label="Page dot 4"] {
    background: transparent !important;
    background-image: url(//site url/shop/t/118/assets/play-button.png?v=155158066558322282441739950074) !important;
    background-size: contain !important;
    background-color: #f5f5f5 !important;
    background-repeat: no-repeat;
    border: 1px solid;
    height: 18px;
    width: 18px;
    vertical-align: unset;
    margin-bottom: -1px;
}
3

### @Arif_Shopidevs , Thanks for the code, please help me to achieve the entire slider for my website, I have code inside the old theme, but I don’t know to transfer it to the new updated theme, please help me, I’m trying for this more than 3 weeks to achieve this.### **Customizations for Mobile View:**1. Hide Thumbnail Images – Remove thumbnail images in mobile view.

  1. Add Slider Dots – Introduce slider dot buttons below the product images, with the active dot appearing in black.

  2. Active Dot Highlighting – Ensure that when product images are slid or scrolled, the corresponding dot is highlighted as active.

  3. Clickable Dots for Navigation – Clicking a dot should display the corresponding product image or video.

  4. Correct Rendering of Media – Ensure that both images and videos are displayed properly without issues.

**Conditions:**1. Desktop View Remains Unchanged – The customization should only apply to mobile view.

  1. Slider Buttons Placement – Position the dot buttons below the product images in mobile view.

  2. Hide Only in Mobile View – Ensure that thumbnail images are hidden exclusively in mobile view.

  3. Ensure Proper Display – Both images and videos should be rendered correctly.

  4. Implementation Guide Required – A step-by-step tutorial should be provided to apply these changes.