Move additional product info to under product description

@creedon Thank you so much for taking the time to help, really appreciate it! I was finally able to find the code you mentioned. Thank you again!
 

13 hours ago, Cyperpunk-girl-333 said:

Does anyone know how to add a SVG code block to the product description?

Use my cited code in my October 16th post.

1 hour ago, creedon said:

Use my cited code in my October 16th post.

Hi Creedon, are you able to link me please? I  can't find your thread

2 hours ago, Cyperpunk-girl-333 said:

are you able to link me please?

3 hours ago, creedon said:

 

Hi Creedon, I tried adding all that code to my header code injector and nothing happened when i refreshed my site? any idea why it wouldn't be working. I don't want to move all the information i just want to add the SVG image

I've decided to add it as a image file instead. 

and used the tag payment

.tag-payment .ProductItem-details-excerpt:after {
  display: block;
  content: "";
  height: 3000px;
  margin-top: 34px;
  background: url('https://static1.squarespace.com/static/61a99d0ed18ce1094b9135ba/t/6369e67b96504043286f0985/1667884668560/Green+Purple+Modern+Alien+Esports+Gaming+Logo+%2819%29.png');
  background-size: contain;
  background-repeat: no-repeat;
}
 

however there's huge spaces between the product descript and (buy now button) any idea how to amend or fix that so its tidy and neat without so much negative space

this is the url i am working on 

https://www.spacept.com.au/sqaurespace-websites/p/32g3zcipummrllgffz4114v6b5ptcr-lgpam-bbp8n

15 hours ago, Cyperpunk-girl-333 said:

I tried adding all that code to my header code injector and nothing happened when i refreshed my site? any idea why it wouldn't be working.

I wouldn't be able to tell unless I could see the code in action. The usual cause is an improper installation.

Quote

I've decided to add it as a image file instead.

however there's huge spaces between the product descript and (buy now button) any idea how to amend or fix that so its tidy and neat without so much negative space

It's hard to say as I can't examine the code in action. Do you need the height to be 3000px. That seems like it might be a lot.

I don't but when I display it with 200px it's so tiny and hard to read 🥵 I have tried making the image file larger but it hasn't helped

.tag-our-design .ProductItem-details-excerpt:after {
  display: flex;
  content: "";
  height: 500px;
  margin-top: 2px;

  background: url('https://static1.squarespace.com/static/61a99d0ed18ce1094b9135ba/t/636a128b448e6e7001cf35d3/1667895947960/Green+Purple+Modern+Alien+Esports+Gaming+Logo+%2825%29.png');
  background-size: contain;
  background-repeat: no-repeat;
}

I've changed it to 500 but there's still a huge gap, I'm not sure what the solution is

@Cyperpunk-girl-333

Ah ha! You need to edit the image and crop out all the dead space around the logos.

Let us know how it goes.

41 minutes ago, Cyperpunk-girl-333 said:

Is there a way to change the margins on all shop images on the simple design so that the image stretches down to fill in negative space.

I'm thinking that if you could, you would end up having to do some serious cropping of the image to fit into the space indicated. Cropping in this sense is parts of the image would be cut off, not editing the image. Kind of a square peg in a round hole kind of situation.

2 hours ago, creedon said:

I'm thinking that if you could, you would end up having to do some serious cropping of the image to fit into the space indicated. Cropping in this sense is parts of the image would be cut off, not editing the image. Kind of a square peg in a round hole kind of situation.

I've just added the payment image to the footer of the page 🙂  

I'm going to start a new thread to ask about the image padding, I'm sure there's away to change it I'm not too bothered if the image gets cropped I just want it to align a bit nicer there's too much negative space on desktop view.  Is there a nicer way i can display my shop information?

On 10/13/2022 at 7:49 PM, creedon said:

You can use window.matchMedia for check in the code. Something like...

window.matchMedia ( '( max-width : 768px )' ).matches;

 

Hi, I'm back to struggling with this.  Can you tell me how to add the above for the following please?

<script>
window.Squarespace.onInitialize(Y, function(){  
  $('section.ProductItem-additional').appendTo('.ProductItem-gallery-thumbnails');
});
</script>

I've tried but without success.  I'd be eternally grateful!

thanks

On 1/5/2023 at 4:21 PM, Nikitaly said:

Hi, I'm back to struggling with this.  Can you tell me how to add the above for the following please?

<script>
window.Squarespace.onInitialize(Y, function(){  
  $('section.ProductItem-additional').appendTo('.ProductItem-gallery-thumbnails');
});
</script>

I've tried but without success.  I'd be eternally grateful!

thanks

OK. It does work as follows:

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

I just hadn't realised.  The SS view as mobile does not refresh the page so you can't see it working. The script only runs on loading the page.

Now my mission is to move the Add to Cart button to below the additional info. Again, any help truly appreciated.

thanks

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

p: 1mageproblem

On 1/9/2023 at 9:34 PM, Nikitaly said:

OK. It does work as follows:

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

I just hadn't realised.  The SS view as mobile does not refresh the page so you can't see it working. The script only runs on loading the page.

Now my mission is to move the Add to Cart button to below the additional info. Again, any help truly appreciated.

thanks

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

p: 1mageproblem

 

I see you figured it out?

Hello again,

Having go 'additional info' in the right place on desktop and mobile I have created a problem for reviews. Can anyone help me get review below the rest of the product info, full width? Right now it is squeezing them into the right hand column under 'additional info' leaving a massive gap in the left hand column.

The reviews section does not include the column details like the additional info section does. I'm really stuck. Can anyone please help?

https://rebelrebel.squarespace.com/bouquets-online/the-colourful-one?p?category=wedding+essentials&p

thanks

Is it possible to target a specific bit of information in the "Additional Products" section and bring it up to live under the "Add to Cart" button?

https://www.estudiopersona.com/products/nido-sofa-alnad

I'd like to bring up the three links at the bottom (Show More, Tear Sheet, + Inquire) to sit below the "ADD TO CART" button. I'd like the images that currently sit above the three links to remain where they are. 

Thank you in advance!

The template is Brine 7.0.

4 hours ago, skalison said:

Is it possible to target a specific bit of information in the "Additional Products" section and bring it up to live under the "Add to Cart" button?

Please see the following.

Please note this code does not preserve any particular layout from Additional Info. Product details was not designed with layouts in mind.

Let us know how it goes.

On 2/7/2023 at 1:07 PM, creedon said:

Please see the following.

Please note this code does not preserve any particular layout from Additional Info. Product details was not designed with layouts in mind.

Let us know how it goes.

@creedon It was definitely a step in the right direction, although we need the layout to remain in tact so unfortunately this doesn't solve our problem completely. I appreciate you you sharing this though.

Hello - hoping for some additional help here - I've followed the advice earlier posted from @creedon but without success, wanting to simply move the additional product copy-based content to the right-hand column (desktop) nestled underneath the main product price/add to cart buttons. 

using SS 7.1 and the fluid layout 

link to (live) site is here 

I've tried using the previous suggested CSS injections in this thread, though they don't appear to have any effect, and I get a syntax error on line 1 every time I add a code.

Apologies for the potentially silly question - though am unsure where I am going wrong... 

Will be very appreciative of any assistance - thanks in advance 

2 hours ago, bjohansson said:

link to (live) site is here

Link is broken.

Quote

I've tried using the previous suggested CSS injections in this thread, though they don't appear to have any effect,

CSS alone won't get the job done. You need JavaScript, which my code provides, and perhaps some CSS. My code does not meet all people's needs, design wise, as mentioned previously in thread.

6 minutes ago, creedon said:

Link is broken.

New link here 

@creedon was this the code / link from your previous post you were referring to? (Thanks for your assistance!)  

14 minutes ago, bjohansson said:

was this the code / link from your previous post you were referring to?

Yes. That is the code.

I would like the "Want it Faster?" button to go under the Purchase button, but the rest of the product descriptions to still be down below. 

I would REALLY love for it to be a buy with Prime button, but not sure if that's possible. 

https://nextleapskincare.com/store/p/nextleap-cold-sore-care

Code for Buy With Prime button: 

<!-- Beginning of Buy With Prime Widget -->
<script async fetchpriority='high' src='https://code.buywithprime.amazon.com/bwp.v1.js'></script>
<div
    id="amzn-buy-now"
    data-site-id="kj12haweel"
    data-widget-id="w-nnWYqNByPe15XQ9nvvfSD2"
    data-sku="{{product.sku}}"
></div>
<!-- End of Buy With Prime Widget -->

3 hours ago, MKrause18 said:

I would like the "Want it Faster?" button to go under the Purchase button

Did you try my Move Product Detail Additional Info First N Blocks to End of Product Details code from my June 5, 2021 post earlier in this thread?

It solves one piece of the effect you want.

Let us know how it goes.

18 hours ago, creedon said:

Did you try my Move Product Detail Additional Info First N Blocks to End of Product Details code from my June 5, 2021 post earlier in this thread?

I put the twcsl and the code into the Page Header Code Injection, but I am unsure what to put in the undefined part. I only want the one button, not everything I have in the additional info. I used some of the code from this thread, but it either replaced the purchase button or put the purchase button above the quantity and the want it faster button below with all the other additional info.