Custom Liquid side by side

Aaiza-TheLink
Visitor
1 0 0

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

<style>

video {

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

}

</style>

<video autoplay loop plays inline muted>
<source
src="VIDEO URL HERE">
</video>

THANK YOU

Replies 3 (3)

magecomp
Shopify Partner
262 19 29

Hello @Aaiza-TheLink 

 

Try this,

 

<div class="container">
  <div class="video-column">
    <video autoplay loop playsinline muted>
      <source src="VIDEO URL HERE">
    </video>
  </div>
  <div class="products-column">
    <!-- Add your product section code here -->
  </div>
</div>

<style>
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.video-column {
  width: 50%;
}

.products-column {
  width: 50%;
}
</style>

 

 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.

Helping voluntarily. Please like and accept the solution if it helps. Thanks!
Our Bestseller Shopify Apps    |      Mobile App Builder by MageComp    |      Limit Qty Purchase

Need a developer?  Just visit MageComp website

BSS-Commerce
Shopify Expert
3380 447 499

Hi @Aaiza-TheLink 

You can follow our  example below.

 

<div class="container">
  <div class="video">
    <video autoplay loop playsinline muted>
      <source src="VIDEO URL HERE">
    </video>
  </div>
  <div class="content">
    <!-- Your product -->
  </div>
</div>

<!-- CSS -->
<style>
.container {
  display: flex;
  flex-direction: row;
}

.video {
  width: 30%;
}

.content {
  width: 70%;
}
</style>

 

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

theglowroomva
Excursionist
21 0 7

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