Custom Liquid

Store Design
,

Topic summary

A user is implementing custom liquid code to display different videos on mobile versus desktop for their Shopify Dawn theme homepage. The initial code wasn’t working correctly—both videos were showing on mobile only, with neither appearing on desktop.

The Issue:

  • Two separate custom liquid sections were created (one for mobile, one for desktop)
  • Media queries weren’t properly isolating the videos to their intended screen sizes
  • Code appeared reversed/garbled in some posts, adding confusion

The Solution:
BSSCommerce support provided corrected CSS media queries:

  • Mobile-only video: Uses @media screen and (max-width: 749px) to display, with display: none for larger screens
  • Desktop-only video: Uses @media screen and (min-width: 750px) (or 1204px as adjusted) to display, hidden on mobile by default

Outcome:
The corrected code successfully separated the videos, displaying each on its intended device type. The issue was resolved with proper media query implementation.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

I am using custom liquid for videos on my home page (DAWN)

<style>
@media screen and (max-width: 749px) {
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
}
@media screen and (min-width: 750px) {
  video {
    display: none;
  }
}
</style>
<video muted autoplay playsinline loop>
    <source src="https://cdn.shopify.com/videos/c/o/v/09bdd39e71294b10860e120d81071262.mp4"
                  type="video/mp4">
    <source src="https://cdn.shopify.com/videos/c/o/v/7c45e26bee364a88bc6f432277057be9.mp4"
                  type="video/mp4">
</video>

This is the code for the video. I have only allowed it for mobile but on pc I have made another custom liquid section and I want that only for PC but I dont know why thats not working and thats also showing in Mobile only here is the code for that also

<style>
/* Default to hide the video for mobile */
video {
  display: none;
}

/* Show the video only for desktop screens */
@media only screen and (min-width: 1024px) { /* Adjust the min-width value as needed */
  video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}
</style>

<video muted autoplay playsinline loop>
  <source src="https://cdn.shopify.com/videos/c/o/v/7c45e26bee364a88bc6f432277057be9.mp4" type="video/mp4">
  <source src="https://cdn.shopify.com/videos/c/o/v/7c45e26bee364a88bc6f432277057be9.mp4" type="video/mp4">
</video>
1 Like
2

@NOT1 , Are you using both pieces of code in homepage to display on mobile and desktop? You should change it like this:
3

Yes I am using both pieces of code in homepage to display on mobile and desktop

4

Hi @NOT1 , It is overwritten code. Fix it a bit code like this and it will be ok :heart_eyes:

Hope this can help you,

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

5

It worked for the mobile. I mean on the mobile its not showing now but its also not showing in the desktop : (

1 Like
6

@NOT1 , If you change the code like i’ve commented above it will show 2 videos separately on 2 types of screens

BSSCommerceB2B_0-1726036432977.png
BSSCommerceB2B_0-1726036432977.png1040×732 48.4 KB

7

I think I am getting confused

1 Like
8

Hi @NOT1 , Pls try again with this code:

For hidden mobile - show desktop

For show mobile - hidden desktop

Hope this can help you,

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

9

Thanks this worked perfectly :heart_eyes:

1 Like
10

@NOT1 , No problem. Glad to help you :heart_eyes: