How can I arrange images vertically on a mobile product page?

[Katharina_be]

Hi all,

On mobile the images are currently horizontal so customers swipe from left to right.

I want this to be vertical, so customers swipe from top to bottom.

Does anyone has an idea on how to implement this?

My product page Url: https://www.betanics.de/products/bio-kurkuma

Thanks

Kathie

[dmwwebartisan]

@Katharina_be 

what do you want please share screenshot or reference website .

Thanks!

[Katharina_be]

Hi @dmwwebartisan 

it shall look like this page on mobile: https://snocks.com/products/fusslinge

Thanks

[dmwwebartisan]

@Katharina_be 

i have check your provided URL and this is code customization work Please hire shopify expert .

Thanks! 

[PaulNewton]

For changes like this always consult the themes developers first incase they have an easy solution.

I believe flow uses the swiperjs library , swiperjs is capable of doing if true

https://swiperjs.com/demos#vertical 

Demo with config code https://codesandbox.io/s/7rkhe?file=/index.html:2200-2210 

Caveats:

Make sure you a/b test this, or that this is expected behavior on websites in your industries.

After all, are you making this change for your personal feelings of design, or because of observable provable customer behavior or requests to solve an issue. Further website performance can be increased by turning of features like slideshows improving conversions. Slideshows have a very narrow use case , with only a handful of images scrolling can be preferable.

Untested Always backup themes and files before making code changes.

In flows theme.js find the swiper initialization/constructor for the product page media element ".swiper-container" and change the direction from horizontal to vertical.

Example base config:

  loadSlider() {
    this.mediaSlider = new swiper_esm_bundle(this.$el.querySelector('.swiper-container'), {
      direction: 'horizontal',
      ...

 Becomes:

  loadSlider() {
    this.mediaSlider = new swiper_esm_bundle(this.$el.querySelector('.swiper-container'), {
      direction: 'vertical',
      ...

You may need to consult the api docs for other related configs https://swiperjs.com/swiper-api , and-or implement CSS styles to suit this change.