FROM CACHE - en_header

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
203 43 78

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
dmwwebartisan
Shopify Partner
11024 2381 3408

@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 | Click here GemPages The most powerful Shopify page builder.
jdn7d
Excursionist
23 0 2

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

dmwwebartisan
Shopify Partner
11024 2381 3408

@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 | Click here GemPages The most powerful Shopify page builder.
jdn7d
Excursionist
23 0 2

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

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_Agents
Shopify Partner
77 14 36

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.

If you find my reply helpful, please hit Like and Mark as Solution
Get connected: Website | Youtube | Community | Partners | Help Center