How to make a mobile variant image selector into a carousel?

Shopify Discussion
1

Hi Experts,

This is the product page in concern: https://swished.com.au/products/mates-bundles

The main issue is with the variant image selector. On desktop, it looks perfect. However, on mobile it looks like this:

EdgarPateno_0-1658405742054.png
EdgarPateno_0-1658405742054.png256×523 37.2 KB

If you noticed, the other variants are cut/not visible. Originally, that item has 6 variants, but it’s only showing 3 on mobile.

Is there a way we can make it a carousel? Please see the code below:


{% liquid
  for variant in product.variants
  if variant.metafields.global.color_hex and variant.metafields.global.color_hex != blank
  assign has_color = true
  break
  endif
  endfor
%}
{%- assign current_variant = product.selected_or_first_available_variant -%}

        
           
 
        {% render 'mates-bundles-description' %}

Thanks for all your help and time.

Stay safe and take care,

Edgar

2

Hi @EdgarPateno

Paste below CSS in custom.css

@media screen and (max-width: 600px){
#pdp-variant-color-selector .color-swatchers {
	width: 60px !important;
	height: 60px !important;
}
#pdp-variant-color-selector .color-swatchers #wrapper {
	border-radius: unset !important;
	width: 60px !important;
	height: 60px !important;
}
#pdp-variant-color-selector .color-swatchers .pdp-colors {
	width: 50px !important;
	height: 50px !important;
	background-size: 50px 50px !important;
}
}
3

Hi @Sheesh_b ,

Thank you so much for that. It’s not a carousel/slider, but it looks OK.

4

Hi @EdgarPateno

I could provide you with a slider solution as well but that could slow your website speed so, I think this is a good workaround for now.

However, if you think there will be more options, surely we need to change the approach and I can help you with that when you need that.

Kindly, accept the solution if it solves your issue.

Thanks

5

OR

you could wrap all the options inside a div with overflow-x scroll