Move additional product info to under product description

@MoonMama

Are all your products going to have an accordion on them? If so then see my June 5 post earlier in this thread. That code will move the accordion up into the product detail area. From there you'd need some CSS if you want to move the accordion around within the product details.

18 minutes ago, creedon said:

@MoonMama

Are all your products going to have an accordion on them? If so then see my June 5 post earlier in this thread. That code will move the accordion up into the product detail area. From there you'd need some CSS if you want to move the accordion around within the product details.

Hi @creedon

I followed your instructions and when I got to the part   "Add code from file move product detail additional info first n blocks to end of product details.html to Store Settings > Advanced > Page Header Code Injection for the store page."

I got this message when trying to save and it won't let me save:

21 minutes ago, MoonMama said:

I got this message when trying to save and it won't let me save:

I'd try again in intervals. I've seen this error on occasion. It appears to be an error in the SS backend saving properly.

Be sure to cancel and try again. It also wouldn't hurt to reload the page.

If the problem persists for more than several hours contact SS customer support.

Let us know how it goes.

8 minutes ago, creedon said:

I'd try again in intervals. I've seen this error on occasion. It appears to be an error in the SS backend saving properly.

Be sure to cancel and try again. It also wouldn't hurt to reload the page.

If the problem persists for more than several hours contact SS customer support.

Let us know how it goes.

Hi @creedon 

I had to remove code and reload the page as you said and it saved. Now, is there some css I need to make this thing happen? I checked a product and it's not under the add to cart button but under the thumbnails

https://www.tribeandsol.com/shop/p/halo-earrings

55 minutes ago, MoonMama said:

I checked a product and it's not under the add to cart button but under the thumbnails

It appears you've not installed the move product detail additional info first n blocks to end of product details code per the instructions.

On 11/13/2020 at 11:47 PM, charlottelaila said:

Hello, I'm looking to add this to my website as well, I have added the above code into the Header but my code is below the share buttons and below the add to cart button, how can I change this?


UPDATE: I changed ".ProductItem-details-share" to ".ProductItem-details-excerpt" And that seemed to work, thank you. 

You tell me how to add previous/next button please

I have updated the code cited in my June 5th 2021 post. Added a guard processor which allows you to write code to decide when the effect will be applied.

I am trying to do something similar where I want to move my "Additional Info" on my product page to just below the image, and next to the check out info. How can I move it up? All the codes previously offered haven't worked. I am using 7.0. Any help is appreciated. 

@MJKing

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

7 hours ago, creedon said:

@MJKing

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

http://mjkingart.com is my url

On 1/18/2022 at 8:55 AM, MJKing said:

http://mjkingart.com is my url

 

Can you share link to product in screenshot?

Hi!

This code is working for my site, but not exactly in the way I'd like. I would like the order to be as shown in the attached image, but currently the accordion is in the wrong place and my last block of text is displaying in the product detail section instead of in the additional info section.

My site url: https://www.glassworkpixie.com/shop/p/fused-glass-ice-cream-statement-earrings

I'm using the below store page header code injection:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
        $('section.ProductItem-additional').insertAfter('.ProductItem-details-excerpt');
    });
</script>
<style>
  section.ProductItem-summary {
    align-items: flex-start !important;
}
  section.ProductItem-additional {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}
</style>

Anyone able to help me get my site to match the image as closely as possible?

Thanks!

2 hours ago, GlassworkPixie said:

Anyone able to help me get my site to match the image as closely as possible?

Please see the following post.

The current code you are using is moving the entire additional info section up into the details area. There are two downsides to this method. You could get unexpected rendering issues. Also you wouldn't be able to use the additional info area as SS intended.

My cited code is more selective in that it is moving blocks instead of the whole additional info area.

@creedon that worked perfectly, thank you very much for your quick and helpful response!

On 8/31/2020 at 4:14 AM, Alan-Squareflair said:

Yes, you can do this using jQuery. 

Add this to your PAGE HEADER CODE INJECTION— in the settings on your main product page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, function(){  
  $('section.ProductItem-additional').appendTo('.ProductItem-details-share');
});
</script>

 

http://share.sqr.fr/SopdM2x+/Screen+Shot+2020-08-30+at+10.12.16+PM.png 

Notes:
1. this assumes you're not running jQuery on the site; if you are, you can just use the second script.

2. The template I'm using is MOJAVE in the Brine Family (7.0), although this should work for most 7.0 templates. 

3. You have to make sure that SOCIAL SHARING is turned on in the Design Styling area— as that's the container I'm using to hold the additional content. It's a little hacky, but it was the easiest way to make it happen.

http://share.sqr.fr/7CAmcyI+/Screen+Shot+2020-08-31+at+9.55.42+AM.png

 

Hi,

I have successfully moved additional info under the image thumbnails using the following jscript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, function(){  
  $('section.ProductItem-additional').appendTo('.ProductItem-gallery-thumbnails');
});
</script>

1<style>
  main {
  padding-bottom: 4vw;
  }
.page-title {
     text-align: left;
  }
.page-description {
     text-align: left;
  }
</style>

BUT obviously this does not work well on mobiles.  Can anyone help me add media queries to this please?

Also the additional info text tries to squeeze itself into one line and so overwrites itself.

Any help would be very very much appreciated.

https://walrus-springtail-ljhd.squarespace.com/

pw: 1mageproblem

thanks

Niki

23 hours ago, Nikitaly said:

Hi,

I have successfully moved additional info under the image thumbnails using the following jscript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, function(){  
  $('section.ProductItem-additional').appendTo('.ProductItem-gallery-thumbnails');
});
</script>

1<style>
  main {
  padding-bottom: 4vw;
  }
.page-title {
     text-align: left;
  }
.page-description {
     text-align: left;
  }
</style>

BUT obviously this does not work well on mobiles.  Can anyone help me add media queries to this please?

Also the additional info text tries to squeeze itself into one line and so overwrites itself.

Any help would be very very much appreciated.

https://walrus-springtail-ljhd.squarespace.com/

pw: 1mageproblem

thanks

Niki

 

Can you share link to a product? We can check easier

https://walrus-springtail-ljhd.squarespace.com/?noredirect

Apologies for not sending it before.  Thanks for taking a look, much appreicated.

https://walrus-springtail-ljhd.squarespace.com/bouquets-online/gimme-gimme-gimme-swdt8?p

21 hours ago, Nikitaly said:

Apologies for not sending it before.  Thanks for taking a look, much appreicated.

https://walrus-springtail-ljhd.squarespace.com/bouquets-online/gimme-gimme-gimme-swdt8?p

#1. Did you solve it?

#2. With text overlap together, use this code

@media screen and (max-width:640px) {
.ProductItem-gallery-thumbnails p {
    line-height: 20px;
}
}

No, I haven't solved the media query for placement of the additional info but thanks for the overlapping text solution.

Any ideas on #1 very much welcomed!  I'm no javascript wiz.

thanks

On 7/23/2022 at 3:54 PM, Nikitaly said:

No, I haven't solved the media query for placement of the additional info but thanks for the overlapping text solution.

Any ideas on #1 very much welcomed!  I'm no javascript wiz.

thanks

Sorry for delay. I'm sick.

You want to move Delivery Details section under "with the change of each"... on mobile?

https://walrus-springtail-ljhd.squarespace.com/bouquets-online/gimme-gimme-gimme-swdt8?noredirect

pw: 1mageproblem

Sorry you're not well.  Hope it goes away soon.

Yup, I'd like to move Delivery Details secion under the description just before Add to Cart button.

Niki

19 hours ago, Nikitaly said:

Sorry you're not well.  Hope it goes away soon.

Yup, I'd like to move Delivery Details secion under the description just before Add to Cart button.

Niki

Try adding this code to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('section.ProductItem-details.ProductItem-details--mobile+figure .ProductItem-additional').insertAfter('section.ProductItem-details.ProductItem-details--mobile~section .ProductItem-details-excerpt');
	});
</script>
<style>
  @media screen and (max-width:640px) {
  .ProductItem-additional {
    order: 4;
    padding-top: 0;
}
  }
</style>

Hi Tuanphan,

Nope, doesn't appear to work.  Have left code in place but delivery details are still coming up under the product thumbnails. Any more ideas much appreciated.  Have been trying with multiple media queries in javascript without much success so far.

thanks

... it might not be working because I am already using order: 4 for the cart button in custom css to rearrange the elements.... but I'm not sure how to fix this.