1. Make the Main Image Smaller
Steps:
- Open your Shopify admin panel.
- Go to Online Store > Themes > Actions > Edit Code.
- In the Assets folder, find the file base.css or main-product.css (or the CSS file used for product pages).
- Add the following code to adjust the size of the main product image:
css
/* Adjust the main image size */ .product__media-wrapper { max-width: 60%; /* Adjust percentage as needed */ margin: 0 auto; } @media screen and (max-width: 768px) { .product__media-wrapper { max-width: 80%; /* Smaller image size for mobile */ } }
2. Change Slider Button Color to Blue
Steps:
- In the same base.css or main-product.css file, add the following code to customize the slider buttons:
css
/* Change slider button color */ .product-slider__button { background-color: #007bff; /* Replace with your desired blue color code */ border: none; color: white; } .product-slider__button:hover { background-color: #0056b3; /* Darker blue for hover effect */ }
3. Show Image Gallery as Dots on Mobile
Steps:
- Open the file where you implemented the product slider (likely in product.liquid or main-product.liquid).
- Locate the slider gallery logic and ensure it supports dots. Add this code to enable dots only on mobile:
javascript
/* JavaScript for slider dots on mobile */ document.addEventListener('DOMContentLoaded', function () { const mediaQuery = window.matchMedia('(max-width: 768px)'); if (mediaQuery.matches) { const slider = document.querySelector('.product-gallery-slider'); if (slider) { slider.setAttribute('data-dots', 'true'); } } });
- Add the following CSS to style the dots:
css
/* Style dots for mobile gallery */ .product-gallery-slider[data-dots="true"] .slick-dots { display: flex !important; justify-content: center; gap: 8px; margin-top: 1rem; } .product-gallery-slider[data-dots="true"] .slick-dots li button { width: 10px; height: 10px; border-radius: 50%; background-color: #ccc; border: none; } .product-gallery-slider[data-dots="true"] .slick-dots li.slick-active button { background-color: #007bff; /* Match button color */ }
4. Adjust the Product Page Slider Script
- If you followed the WebSense Pro tutorial, ensure that the slider supports dots. Update the slider initialization script as follows:
javascript
$('.product-gallery-slider').slick({ dots: true, /* Enable dots for gallery navigation */ arrows: true, /* Keep arrows for desktop */ responsive: [ { breakpoint: 768, /* Mobile breakpoint */ settings: { dots: true, arrows: false /* Hide arrows on mobile */ } } ] });
Final Steps:
- Save all changes and preview your product page.
- Test on both desktop and mobile to ensure everything looks correct:
- Main image should now be smaller.
- Slider buttons should be blue.
- Image gallery should use dots on mobile.
Eunoyaa Technology
Empowering Digital Excellence
Email: info@eunoyaa.com
Website: www.eunoyaa.com