Re: images on product page mobile

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

Katharina_be
Excursionist
49 0 7

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

Replies 4 (4)

dmwwebartisan
Shopify Partner
12321 2551 3715

@Katharina_be 

what do you want please share screenshot or reference website .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Katharina_be
Excursionist
49 0 7

Hi @dmwwebartisan 

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

 

Thanks

dmwwebartisan
Shopify Partner
12321 2551 3715

@Katharina_be 

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

Thanks! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

PaulNewton
Shopify Partner
6350 582 1355

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.

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org