How can I re-position 'Additional Info' to sit within product description?

Site URL: https://yeahlaser.squarespace.com/shop/p/wood-swatch-bundle

On this page: https://yeahlaser.squarespace.com/shop/p/wood-swatch-bundle I have added a looping video via 'Additional Info' (currently at the bottom of the page). How can I move it to sit within the product details section on the right (above 'Quantity')?.

Thanks.

Please see the following.

You would probably  want to use some CSS to tweak the spacing. Here is some starter CSS. Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .ProductItem-details .ProductItem-details-checkout .sqs-block-video {
  
    padding-top : 0;
    
    }
    
.ProductItem-details .ProductItem-details-checkout .video-player .plyr video {
  
    width : unset;
    
    }
    
@media screen and ( max-width : 767px ) {

  .ProductItem-details .ProductItem-details-checkout .sqs-block-video {
  
    order : 4;
    
    }
    
  }
  
  </style>

Let us know how it goes.

Hi @creedon Thanks so much for getting back to me. I'm not particularly knowledgable of this kind of code and am trying to make sense of it, in terms of whether I need to add anything to it? I tried the entire the Elements Manipulate code, and the shorter code above, but neither took effect. Can you advise me? Sorry if I'm being dumb.

The plan is to have a single looping video on all product pages, and I was hoping this could be achieved using a single piece of code - but in reality am I going to have to add code per video?

Thanks again.

I see no sign of my code being installed. All the code would need to be installed to get anything to work.

I assume there will be a different video on each page? The settings could be adjusted to move the first video block of Additional Info instead of a specific block id. My code uses standard CSS selectors so any source or destination that can be express in a selector will work.

I suggest getting my example going and then once that works. Use more generalized selectors.

@creedon I've just re-added all code to the Header injection - if you wouldn't mind taking another look?

Yes, a different video per product. As you say, a code that moves all first video blocks as opposed to a specific one would be perfect!

Thanks 🙂

I still do no see any evidence that my Elements Manipulate code has been installed. I have pointed to the code in a previous post of mine.

@creedon Sorry, I didn't see the CSS that needed to be added. I think I've now added what you have suggested, but let me know. I've included some screenshots so you can see (at least part of) what I have in my Header Injection and CSS.

The other thing I'm confused about is whether I need to fill in the sections which has brackets for "selectorDestination", "selectorParentDestination", "SourceCopy" and "CallBack"? If so, what needs to be there?

Thanks.

Quote

The other thing I'm confused about is whether I need to fill in the sections which has brackets for "selectorDestination", "selectorParentDestination", "SourceCopy" and "CallBack"? If so, what needs to be there?

Those fields were already filled out in the <script type="application/vnd.twc.em"> I pointed you to.

I still do not see the elements manipulate code installed in the site. No need to post screenshots as I can examine the code of the site when I load it.

@creedon Sorry, I just checked again and realised I needed to add some additional code to the footer. The video is now in position.

In terms of adjustments, would you be able to assist with the following?:

1. Making the video the full width of the description section?

2. Adding equal padding above and below the video?

3. Placing the video in correct position (above Quantity) on mob?

Thanks!

Quote

3. Placing the video in correct position (above Quantity) on mob?

I can help with 3. I have updated my starter CSS to take mobile into account.

Also when you move on from just one video to many you'll want to update the <script type="application/vnd.twc.em"> code I provided. You can find a variation of it in the Elements Manipulate code thread I've pointed to previously.

Thanks @creedon I would really appreciate your help with 3.

Quote

I would really appreciate your help with 3.

I have already helped as I mentioned in my previous post.