Moving thumbnail image to left of main product image

jdn7d
Tourist
13 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

 

iDoThemes
Explorer
72 15 31

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
7402 1754 2353

@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 | Bag is a cart drawer that maximizes your sales. View app →
jdn7d
Tourist
13 0 2

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

dmwwebartisan
Shopify Partner
7402 1754 2353

@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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
jdn7d
Tourist
13 0 2

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

0 Likes
jdn7d
Tourist
13 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. 

0 Likes
GemPages_Agents
Shopify Partner
43 9 32

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
Join the waitlist to enjoy exclusive offers once we're back on Shopify at https://gmpg.link/reborn
Get connected: Website | Youtube | Community | Partners | Help Center