CSS issue on product page slider

CSS issue on product page slider

Lalvikas
Shopify Partner
21 0 3

This is my store link - 
https://nexorxtreme.com/products/egypt-custom-football-jersey?variant=45297279041588#looxReviewsFram...

I used the below link to create product page image slider - 

https://websensepro.com/blog/how-to-add-product-slider-in-product-page-of-shopify-dawn-theme/

 

Is there any possibility I can adjust the codes to make main image looks a little bit smaller like my reference below - Also, on mobile I want the image gallery area to be shown as a dot. Please assist - 

Reference - https://thejerseynation.com/products/mexico-custom-baseball-jersey

What I need help on - 
1. Make the main image smaller, it's too big compared to my reference site.
2. I want the slider button to be blue like my reference
3. Image gallery should be shown as dot.

Reply 1 (1)

Eunoyaa
Shopify Partner
2 0 0

1. Make the Main Image Smaller

Steps:

  1. Open your Shopify admin panel.
  2. Go to Online Store > Themes > Actions > Edit Code.
  3. In the Assets folder, find the file base.css or main-product.css (or the CSS file used for product pages).
  4. 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:

  1. 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:

  1. Open the file where you implemented the product slider (likely in product.liquid or main-product.liquid).
  2. 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'); } } });
  1. 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

  1. 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:

  1. Save all changes and preview your product page.
  2. 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