Solved

Prestige Theme: Moving product images from the bottom to the side of the image display section.

emjayp
Tourist
12 0 5

Hello.

 

I am currently using the Prestige Theme. 

 

By default, on the product page, the set of product images is placed under the main display if you decide not to stack images on desktop.  Example:

 

example image.png

 

I want to place the product images on the left side of the display like the following examples:

 

https://mnml.la/products/mnml-denim-b118-work-denim-m2021-d146-blk

 

https://www.rockstaroriginal.com/products/rsm-btm-jns-4840-bruce-biker-patch-jean-black-red

 

(I'm pretty sure these two brands are also using the Prestige Theme)

 

my site is: www.guapstar.com (pw entry is upper right hand; its hard to see)

password: gstar00

 

 

Any response will be deeply appreciated, Thank you very much.

Accepted Solution (1)

AvadaCommerce
Shopify Partner
3879 839 951

This is an accepted solution.

Hi @emjayp ,

 

To change you follow the instruction:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file:

@media (min-width: 1140px) {
    .Product__Gallery {
        display: flex !important;
        flex-direction: row-reverse !important;
    }
    .Product__Gallery .Product__SlideshowNav--thumbnails {
        max-width: 100px !important;
    }
    .Product__Gallery .Product__Slideshow {
        width: calc(100% - 100px) !important;
        flex: 1 !important;
    }
}

I hope it would help you.

banned

View solution in original post

Replies 4 (4)

ZestardTech
Shopify Expert
5393 970 1291

Hello there,
Please check it this one article
Link

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

AvadaCommerce
Shopify Partner
3879 839 951

This is an accepted solution.

Hi @emjayp ,

 

To change you follow the instruction:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file:

@media (min-width: 1140px) {
    .Product__Gallery {
        display: flex !important;
        flex-direction: row-reverse !important;
    }
    .Product__Gallery .Product__SlideshowNav--thumbnails {
        max-width: 100px !important;
    }
    .Product__Gallery .Product__Slideshow {
        width: calc(100% - 100px) !important;
        flex: 1 !important;
    }
}

I hope it would help you.

banned
emjayp
Tourist
12 0 5

thank you!

Zoubidou75
Excursionist
48 0 4

Hey everyone, in the same way how to display product like this please : 

CleanShot 2022-05-23 at 17.27.33.jpg


 EG : https://www.beaybl.com/products/camo-seamless-leggings-blue

Thanks a lot dear !