MOVE RELATED PRODUCTS SECTION BELOW SOCIAL SHARE ICONS

PW: 1mageproblem

Hi, I'd like to move the related products section which currently shows at the bottom of the product page  to undernearth the social share buttons in the left hand column. Please can anyone help? I've tried but can't seem to nail down the reviews section selector. Any ideas much appreciated.

thanks

9 minutes ago, Nikitaly said:

PW: 1mageproblem

Hi, I'd like to move the related products section which currently shows at the bottom of the product page  to undernearth the social share buttons in the left hand column. Please can anyone help? I've tried but can't seem to nail down the reviews section selector. Any ideas much appreciated.

thanks

 

..sorry have to use live site because reviews don't show on the copy site. See following instead.

Link: https://www.rebelrebel.co.uk/order-online/our-lips-are-sealed

On 2/1/2023 at 4:58 PM, Nikitaly said:

..sorry have to use live site because reviews don't show on the copy site. See following instead.

Link: https://www.rebelrebel.co.uk/order-online/our-lips-are-sealed

Hi,

Move to this?

Hi Tuanphan, Thanks for getting back to me. Been tied up.

No. I don't want ot move the reviews.  I want to put the Related Products section under the social share buttons (left hand column) please.

On 2/9/2023 at 5:15 PM, Nikitaly said:

Hi Tuanphan, Thanks for getting back to me. Been tied up.

No. I don't want ot move the reviews.  I want to put the Related Products section under the social share buttons (left hand column) please.

 

You mean move this?

Yes please! Is it possible?

On 2/15/2023 at 3:07 PM, Nikitaly said:

Yes please! Is it possible?

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('section.ProductItem-relatedProducts').insertAfter('.ProductItem-details-share');
	});
</script>
<style>
  section.ProductItem-relatedProducts {
    order: 11;
}
</style>

1 hour ago, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('section.ProductItem-relatedProducts').insertAfter('.ProductItem-details-share');
	});
</script>
<style>
  section.ProductItem-relatedProducts {
    order: 11;
}
</style>

 

Thank you! This works great except that the text 'Perhaps you might also like' has not moved with it. Also I need to set related products to 2 products/columns wide for it to be readable but when I do this only one item shows.  Setting it to 3 columns doesn't help.  Any suggestions?

Thank you for the help.

Brilliant! hank you so much.

Niki

Oh sorry.... I need this for desktop only.... could you possibly help one more time?

thanks

On 2/21/2023 at 7:38 PM, Nikitaly said:

Oh sorry.... I need this for desktop only.... could you possibly help one more time?

thanks

Use this new coe

<script>
  $(document).ready(function() { 
    if ($(window).width() > 901) {
		$('section.ProductItem-summary.clear~*').insertAfter('.ProductItem-details-share');
    }
	});
</script>
<style>
  section.ProductItem-relatedProducts, h2.ProductItem-related-label {
    order: 11;
}
  .ProductItem-relatedProducts-item {
    width: calc(50% - 50px) !important;
}
</style>

Hi @tuanphan

Thank you for staying with this.  The above doesn't work.  It's not moving the 'related products' section into the left hand column.  They're displaying full screen at the bottom of the page.  This leaves a big gap if the all store reviews are displayed. 

Can you help again please? Thanks a million.

On 2/27/2023 at 11:24 PM, Nikitaly said:

Hi @tuanphan

Thank you for staying with this.  The above doesn't work.  It's not moving the 'related products' section into the left hand column.  They're displaying full screen at the bottom of the page.  This leaves a big gap if the all store reviews are displayed. 

Can you help again please? Thanks a million.

It works to me. Which exact code did you add to Code Injection?

Hi @tuanphan, Thanks. Erm I used the following in code injection footer: It does now appear to work on Desktop but on mobile phones the 'also like' products are now appearing in a single column after the reviews. (so I've taken the code out again)

I tried adding a media query for the columns but then everything went haywire on mobiles.  Sorry if I sound confused.  I'm trying to get mobiles to display in the same sequence, ie, 'You may also like' under the 'social share' icons but in single column. Then reviews under that.

Please can I ask your help on this one more time?

<script>
  $(document).ready(function() { 
    if ($(window).width() > 901) {
		$('section.ProductItem-summary.clear~*').insertAfter('.ProductItem-details-share');
    }
	});
</script>
<style>
  section.ProductItem-relatedProducts, h2.ProductItem-related-label {
    order: 11;
}
  .ProductItem-relatedProducts-item {
    width: calc(50% - 50px) !important;
}
</style>

On 3/6/2023 at 11:40 PM, Nikitaly said:

Hi @tuanphan, Thanks. Erm I used the following in code injection footer: It does now appear to work on Desktop but on mobile phones the 'also like' products are now appearing in a single column after the reviews. (so I've taken the code out again)

I tried adding a media query for the columns but then everything went haywire on mobiles.  Sorry if I sound confused.  I'm trying to get mobiles to display in the same sequence, ie, 'You may also like' under the 'social share' icons but in single column. Then reviews under that.

Please can I ask your help on this one more time?

<script>
  $(document).ready(function() { 
    if ($(window).width() > 901) {
		$('section.ProductItem-summary.clear~*').insertAfter('.ProductItem-details-share');
    }
	});
</script>
<style>
  section.ProductItem-relatedProducts, h2.ProductItem-related-label {
    order: 11;
}
  .ProductItem-relatedProducts-item {
    width: calc(50% - 50px) !important;
}
</style>

It make error on Real Mobile or Squarespace Mobile Preview Mode? 

Hi @tuanphan

Its on real mobile (android). The reviews come before the 'you may also like' and these products list in single column half width instead of full width single column.

Any ideas gratefully received! Thanks