Moving thumbnail image to left of main product image

jdn7d
Excursionist
23 0 2

I've seen another post about this, but I'm having trouble adding the code to my site. I want to move the product thumbnail to the left side, but this site also used gempages so I'm not sure how to do this. This is my site: https://bricksandwood.us/products/j-scott-forever-in-our-hearts-l-s-tee-white

jdn7d_1-1620344415616.jpeg

 

Replies 7 (7)

iDoThemes
Trailblazer
207 43 91

Easy enough to do in the inspector:

iDoThemes_0-1620349666148.png

 

Though it looks like you might be using an app for the carousel here (I see some references to gf v4), which could make it tricky to implement in actual code. Essentially you'd need to move the thumbnail carousel element above the image element in code. The set some kind of 20%/80% split of width between those two elements, and change the display properties of a few elements to make them flex properly.

Developer of Liquify Chrome Extension -- Enhance the Shopify Theme Code Editor
.




Theme Developer -- Drop me a line
jdn7d
Excursionist
23 0 2

Okay thank you! For some reason I can't figure it out in inspector. The carousel just goes about the image but isn't vertical or on the left side. 

GemPages
Shopify Partner
5588 1261 1203

Hi @jdn7d ,

From the comment of @dmwwebartisan, I would like to make a screen recording that explains the steps to solve this issue: https://drive.google.com/file/d/1jsBkAKT8-kNu-L6yrG3DYG5tba7PGWqD/view.

Step 1: We should enable the inspector, this guide will help you open it: https://developer.chrome.com/docs/devtools/open/

Step 2: Find & Select class name is "owl-item" then edit CSS style on right hand side of inspector. Add the code CSS: "float: unset!important"

GemPages_Agents_1-1620442374274.png

Step 3: Find & Select classname is "gf_product_image" then edit CSS style like this:

GemPages_Agents_0-1620442300036.png

Also, you could try put this code below into the Liquid Element on your template then Save & Preview to see how it goes.

 

@media (min-width: 1200px){
	[data-label='Product'] #m-1618858827335 .gf_product-image{
		width: 80%!important;
		float: right;
	}
	 [data-label='Product'] .owl-carousel .owl-item{
		float: unset!important;
	}
}

 

For further assistance, please don't hesitate to let us know via email support@gempages.help

Thank you so much.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

dmwwebartisan
Shopify Partner
12280 2546 3694

@jdn7d 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media (min-width: 1200px){
#m-1618858827335 .gf_product-image { width: 80%!important;float: right;}
.template-product .owl-carousel .owl-item {float: unset !important;}
}

Hope this works.

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
jdn7d
Excursionist
23 0 2

Thank you! Should I also be changing anything in the product.liquid file? 

dmwwebartisan
Shopify Partner
12280 2546 3694

@jdn7d 

No, you don't need to change in product.liquid file.

 

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
jdn7d
Excursionist
23 0 2

Thank you. But when I add that code to the css file, the whole thumbnail carousel disappears.