Aligning embedded 3D visual under Product image

New Member
6 0 0

Hi all,

 

This is one of our website's product page in question. I am trying to make it so when certain products have the embedded 3D visualiser, it is directly under the product image, and the product's description is directly under the payment options - so visually the product page is a lot neater.

 

Does anyone know the specific code required for specific pages to achieve this? Ideally the entire theme doesn't need to change as not all products have the visualiser.

 

Thank you,

Alex

0 Likes
Shopify Expert
2490 417 525

Hi @fairline 

If you wan t to add your 3D image under product image then you have to follow this:

1. Open Section->product-template.liquid file and find 'product-single' class and add your 3D image code just next to this <div>

But if you have added 3D image in product description then you have to separate it from description by code because you want to show 3D image and description on different place. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
6 0 0

Hi,

 

That's understood. I don't want to edit the product-template.liquid as the 3D visualiser won't be shown on every product page.

 

This is to be unique for products requiring the 3D viewers, therefore wants to be coded within the description.

 

Are there fields which can be added within the description that will overwrite what is in the product-template.liquid?

 

If there aren't a solution for this, centering the entire description is the last resort.

 

Thanks

0 Likes
Shopify Expert
2490 417 525

You can center description by this as i describe you

1. Open Section->product-template.liquid file and find  bellow code:

<div class="rte product-single__description" itemprop="description">
     {{ product.description }}
 </div>

Now cut it and find 'product-single' class and paste it next to this end of <div>

 

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
6 0 0

Hmm looks awful like that. I may've inserted incorrectly because there are so many 'product-single' classes. The description goes between the reel of images for the hero image, and when the cursor goes over the 3D visualiser, the hero image takes priority and continues to zoom.

 

I'll have to stick with what I've got.. There isn't an in between here

 

Thanks

0 Likes
Shopify Expert
2490 417 525

you have to find bellow div

  <div class="grid product-single">

if you cant then add me as staff(jasoliyabrijesh123@gmail) i will do.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
6 0 0

hmm its there now, however still doesn't look great.

 

I'm wondering whether the way this will work is to duplicate the code for the description so I have two descriptions - they will need to be horizontally side by side.

 

This will allow me to input one for the 3D visualiser, and one for the text description. Is this something worth implementing to the product-template.liquid?

 

It will solve the issue for parts which don't require a 3D viewer as I wouldn't need to input data into one of the description boxes.

 

Many thanks,

0 Likes
Shopify Expert
2490 417 525

As i mentioned if you have added 3D image in description then we have to do customization to separate on two part. because we have not direct any want to show some part under image and some of part right side. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
6 0 0

no idea what you're on about.

 

I've done it now anyway. Just description text needs lowering and indenting to the right a tad.

 

:)

0 Likes