I have Stencil Theme "Meros" in Bigcommerce my store https://figureskatingstore.com/ In mobile version i have problem
- I'd like the product page thumbnail images to scroll (left, right) with a finger swipe.
Currently thumbnail images change by click on dots. enter image description here
- or I'd like to show all thumbnail images as images (not dots).
There are several images for each product, and it is slow to click dots through.
Can you help me fix this problems?
Regards, Iana
I have problem with code below in edit /templates/components/products/product-view.html
<div id="product-photos" class="productView-thumbnails owl-carousel" data-owl='{
"items": 4,
"nav": true,
"margin": 6,
"dots": false,
"slideBy": 4,
"responsive": {
"0": {
"items": 3,
"slideBy": 3
},
"480": {
"items": 4,
"slideBy": 4
},
"600": {
"items": 5,
"slideBy": 5
},
"768": {
"items": 4,
"slideBy": 4
},
"992": {
"items": 3,
"slideBy": 3
},
"1200": {
"items": 4,
"slideBy": 4
}
},
"responsiveRefreshRate": 0
}'>
{{#each product.images}}
<div class="productView-thumbnail">
<a
class="productView-thumbnail-link"
href="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
data-image-gallery-item
data-image-gallery-new-image-url="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
data-image-gallery-zoom-image-url="{{getImage this 'zoom_size' (cdn ../theme_settings.default_image_product)}}">
<img src="{{getImage this 'productview_thumb_size' (cdn ../theme_settings.default_image_product)}}" alt="{{this.alt}}" title="{{this.alt}}">
</a>
</div>
{{/each}}
Hello!
I have Stencil Theme "Meros" in Bigcommerce
my store https://figureskatingstore.com/
In mobile version i have problem
1) I'd like the product page thumbnail images to scroll (left, right) with a finger swipe.
Currently thumbnail images change by click on dots.
[enter image description here](https://i.stack.imgur.com/JaVsD.jpg)
2) or I'd like to show all thumbnail images as images (not dots).
There are several images for each product, and it is slow to click dots through.
Can you help me fix this problems?
Regards, Iana
I have problem with code below in edit /templates/components/products/product-view.html
<div id="product-photos" class="productView-thumbnails owl-carousel" data-owl='{
"items": 4,
"nav": true,
"margin": 6,
"dots": false,
"slideBy": 4,
"responsive": {
"0": {
"items": 3,
"slideBy": 3
},
"480": {
"items": 4,
"slideBy": 4
},
"600": {
"items": 5,
"slideBy": 5
},
"768": {
"items": 4,
"slideBy": 4
},
"992": {
"items": 3,
"slideBy": 3
},
"1200": {
"items": 4,
"slideBy": 4
}
},
"responsiveRefreshRate": 0
}'>
{{#each product.images}}
<div class="productView-thumbnail">
<a
class="productView-thumbnail-link"
href="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
data-image-gallery-item
data-image-gallery-new-image-url="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
data-image-gallery-zoom-image-url="{{getImage this 'zoom_size' (cdn ../theme_settings.default_image_product)}}">
<img src="{{getImage this 'productview_thumb_size' (cdn ../theme_settings.default_image_product)}}" alt="{{this.alt}}" title="{{this.alt}}">
</a>
</div>
{{/each}}
