How to display a looping video and products side by side using Custom Liquid?

Store Design
1

Hello,

I am trying to add two sections on my store side by side. One side is a video playing on loop. The video is playing but I cannot figure out how to push it on the left sided and add products from the video on the right.

My code for the video part is as follows

video { display: block; margin:1% auto; width: 80%; height: 100%; }

THANK YOU

2

Hello @Aaiza-TheLink

Try this,

This code creates a container with two columns, each taking up 50% of the container’s width. The video-column is set to take up the left half of the container, while the products-column takes up the right half. You can add your product section code to the products-column div.

Adjust the width values of the columns to your desired size and tweak the CSS styles as needed to achieve your desired layout.

3

Hi @Aaiza-TheLink

You can follow our example below.

You can change the width of the video tag by changing the width value in the CSS style section.

If you need further assistance, please contact us.

Hope this helps you.

BSS Commerce - Shopify Apps & Development Services Provider - Shopify Expert

Level up your Shopify store with our B2B & B2C apps

4

@BSS-Commerce , could you show me how to alter the code to have just a video and image instead of video and product?