Can I put the "additional info" section and the "related products" section in the same row?

Hello all,

I am trying to accomplish two things at once and have only been able to solve the first of two so far. I wanted to create an accordion menu that replaces the "additional info" section on all product pages. I was able to do this with the following code placed in the footer code:

<script>
  $(document).ready(function(){
    $('footer.sections section:nth-child(2)').insertBefore('section.ProductItem');
});
</script>

<style>
  section.ProductItem+section {
    display: block !important;
}
</style>

However, I feel that it would be a better use of space to have the "additional info" section and the "related products" section in the same row, instead of in a column on top of each other. I have messed around with the code for a few hours with no luck. I'm not sure if it's not possible because of the accordion footer code, or if I just don't know what I'm doing, haha. Anyway, I'm attaching a Photoshopped image of what I'm trying to do and here is a link to one product on the site so you can see where I've implemented the code. https://www.lewisrossignolart.com/original-artwork/p/core-7gmsa-edaxs-ye6yk

I'd also like those two sections to be above the reviews. I have some code that was working for that, but I removed it while trying to figure out all the rest of what I'm trying to do.

Hi,

Make accordion - related side by side

or make accordion/shipping description - related side by side?

18 hours ago, tuanphan said:

Hi,

Make accordion - related side by side

or make accordion/shipping description - related side by side?

 

Make the accordion (which contains the shipping info) and related side by side.

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('[data-section-id="65828fe997eb256ec9ff76f3"]').insertBefore('div.ProductItem-relatedProducts');
});
</script>
<style>
  @media screen and (min-width:992px) {
  [data-section-id="65828fe997eb256ec9ff76f3"] {
    float: left !important;
    width: 50%;
}
  }
</style>

You can consider using Classic Editor Section for black accordion, we can adjust width with code easier

4 hours ago, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('[data-section-id="65828fe997eb256ec9ff76f3"]').insertBefore('div.ProductItem-relatedProducts');
});
</script>
<style>
  @media screen and (min-width:992px) {
  [data-section-id="65828fe997eb256ec9ff76f3"] {
    float: left !important;
    width: 50%;
}
  }
</style>

You can consider using Classic Editor Section for black accordion, we can adjust width with code easier

Thank you very much. If what I'm asking for next is easier with classic mode, I'm happy to try and switch to that. So your code was great. I had to make a few tweaks, but I imagine that had to do with the "classic editor" situation.

The only issue I'm having now is that the related products are not taking the full amount of the space. I have edited the code to only show two related products in order for them to display at a larger size. If you see the attached image, I'd like to increase the size of the two related products to fill up the entire space. Thanks again for your help.

Because related items set to 3 items/row, space is item 3, you can change settings

or use this code to Website Tools > Custom CSS to change to 2 items only

/* related products */
.ProductItem-relatedProducts .list-grid {
    grid-template-columns: repeat(2,1fr) !important;
}

On 12/26/2023 at 4:00 AM, tuanphan said:

Because related items set to 3 items/row, space is item 3, you can change settings

or use this code to Website Tools > Custom CSS to change to 2 items only

/* related products */
.ProductItem-relatedProducts .list-grid {
    grid-template-columns: repeat(2,1fr) !important;
}

Thank you so much. I had some old code that was causing a conflict. I only had to delete that code and that seemed to fix my problem. I have one last small issue if you think that you're able to assist. The desktop version is now perfect. But the code, when applied to mobile, isn't working as I need it to. For mobile, the accordion menu should come after the "related products". I'm sure it's just a little bit of tweaking required, but I can't seem to fix the code without impacting the desktop version.

This is the code that I'm using to put the accordion menu where I want it to be:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('footer.sections section:nth-child(2)').insertAfter('section.ProductItem');
});
</script>
<style>
  section.ProductItem+section {
    display: block !important;
}
</style>

<script>
  $(document).ready(function(){
    $('[data-section-id="6587e7821c4ad2328f2cb31c"]').insertBefore('div.ProductItem-relatedProducts');
});
</script>
<style>
  @media screen and (min-width:992px) {
  [data-section-id="6587e7821c4ad2328f2cb31c"] {
    float: right !important;
    width: 50%;
}
  }
</style>

And this is the CSS I'm using to properly order the sections/elements on desktop:

/*Squareskills product page reorder*/
#pdp .collection-content-wrapper  {
  display: flex;
  flex-direction: column;
}
.collection-content-wrapper .ProductItem-additional {
  order: 1;
}
.collection-content-wrapper .reviewsSection {
  order: 3;
}
.collection-content-wrapper .productItem {
  order: 2;
}