Changing Layout of Product Page - Additional Items column width 50% with Suggested Products next to it

I am hoping someone can help me with some code for my new site.

I would like to have my "Additional Information" on my product page to sit on the right side and my "Related Products" next to this showing 2 products in the left column. 

Thanks!

Password: BrandAlchemists2024

Hi,

What is site url?

@tuanphan the site url is https://helicon-triceratops-4sdg.squarespace.com/shop/p/cosmic-creator-instagram-post-templates

thank you!

On 3/17/2024 at 11:53 AM, TheBrandAlchemists said:

@tuanphan the site url is https://helicon-triceratops-4sdg.squarespace.com/shop/p/cosmic-creator-instagram-post-templates

thank you!

You mean move related products to left of Additional Info

and make sure related products = 50% width, Additional Info = 50% width?

@tuanphan yes please .. the related products on the left and the "additional info" section on the right as per your image 🙂

On 3/21/2024 at 7:29 AM, TheBrandAlchemists said:

@tuanphan yes please .. the related products on the left and the "additional info" section on the right as per your image 🙂

Try this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
   jQuery(document).ready(function($){
  $('section.ProductItem-additional+section').insertBefore('.ProductItem-additional>.sqs-layout');
})
</script>
<style>
  .ProductItem .ProductItem-additional {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px 5px;
}
  .ProductItem .ProductItem-related-label {
    margin-top: 0px;
}
</style>