Hi everyone,
I’ve developed a custom Hero section for my Shopify store (Dawn theme) using a Custom Liquid block. I’m aiming for a premium feel, but I’m hitting some technical walls regarding performance and responsiveness that I can’t seem to solve.
The Main Issues:
-
Layout Shift & Jumping: When the page loads, the section height jumps and elements “pop” into place. It’s not a smooth experience.
-
Loading Lag: Even though my video files are small (under 2MB) and I use poster images, there is a visible delay/flicker before the video starts and before the custom fonts/styling render.
-
Responsive Scaling: I need to ensure this layout scales perfectly from the smallest iPhone to 4K monitors. Currently, I’m worried about text overlapping or the “glowing sapphire line” looking off on certain screen widths.
What I need help with:
-
How can I eliminate the “jump” during load (CLS)?
-
Is there a better way to preload the poster images/fonts so they are visible instantly?
-
How can I optimize the CSS/Media Queries in my code below to ensure it’s “buttery smooth” and perfectly responsive on all devices?
Here is my current code:
<div class="hero-video-box js-video-container">
<div class="hero-content-inner">
<h1 class="main-hero-title">
להחזיר את החופש<br>
<span class="glow-blue-text">לכל תנועה</span>
</h1>
<div class="cta-wrapper">
<a href="/products/orela-knee-pro" class="pakal-style-button">
לרכישה עכשיו
<span class="arrow-svg">←</span>
</a>
</div>
</div>
<video autoplay muted loop playsinline webkit-playsinline preload="auto"
id="heroVidDesktop"
class="hero-video-obj desktop-video"
poster="https://cdn.shopify.com/s/files/1/0669/1667/9723/files/Home_Page_1.jpg?v=1775259776">
<source src="https://cdn.shopify.com/videos/c/o/v/1f331cd02a5b4666ae15afb3ee97780c.mp4" type="video/mp4">
</video>
<video autoplay muted loop playsinline webkit-playsinline preload="auto"
id="heroVidMobile"
class="hero-video-obj mobile-video"
poster="https://cdn.shopify.com/s/files/1/0669/1667/9723/files/Home_Page.jpg?v=1775259778">
<source src="https://cdn.shopify.com/videos/c/o/v/99db697b57834f349d4c13272dbd0a2b.mp4" type="video/mp4">
</video>
<div class="hero-video-overlay"></div>
</div>
<div class="benefits-luxury-strip">
<div class="benefit-column">
<div class="b-text-wrap">
<span class="b-title-bold">משלוח חינם!</span>
<span class="b-sub-text">עד הבית</span>
</div>
<div class="sapphire-glow-line"></div>
</div>
<div class="benefit-column">
<div class="b-text-wrap">
<span class="b-title-bold">2237+</span>
<span class="b-sub-text">לקוחות מרוצים</span>
</div>
<div class="sapphire-glow-line"></div>
</div>
<div class="benefit-column">
<div class="b-text-wrap">
<span class="b-title-bold">14 ימי נסיון</span>
<span class="b-sub-text">ללא התחייבות</span>
</div>
<div class="sapphire-glow-line"></div>
</div>
</div>
<
/* — התיקון למניעת הגליץ’ והתאמת הבהירות (השינוי כאן) — /
.hero-video-box {
position: relative;
width: 100%;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
background-color: #000*;
background-size: cover;
background-repeat: no-repeat;
z-index: 1; /* הכנה לשכבת הכהות /
}
/ שכבת הכהות עבור פוסטר ה-CSS (מייצר brightness 0.6) /
.hero-video-box::after {
content: ‘’;
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.4); / מכהה ב-40%, משאיר 60% בהירות /
z-index: 0; / מתחת לתוכן, מעל הרקע /
}
/ רקע לדסקטופ /
@media screen and (min-width: 769px) {
.hero-video-box {
background-image: url(‘https://cdn.shopify.com/s/files/1/0669/1667/9723/files/Home_Page_1.jpg?v=1775259776’);
background-position: top center;
}
}
/ רקע למובייל /
@media screen and (max-width: 768px) {
.hero-video-box {
background-image: url(‘https://cdn.shopify.com/s/files/1/0669/1667/9723/files/Home_Page.jpg?v=1775259778’);
background-position: center center;
}
}
/ — העיצוב המקורי שלך ללא שינוי בערכים — */
.orela-full-wrapper, .orela-full-wrapper h1, .orela-full-wrapper span, .orela-full-wrapper a {
font-family: inherit !important;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeSpeed;
}
.orela-full-wrapper {
width: 100%; height: calc(100vh - 120px); position: relative;
background: #000; overflow: hidden; opacity: 1 !important;
}
.orela-complete-section {
width: 100%; height: 100%;
direction: rtl; display: flex; flex-direction: column;
}
.hero-video-obj {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover; filter: brightness(0.6); outline: none; border: none;
z-index: 1; pointer-events: none;
background: transparent;
}
.desktop-video { display: block; object-position: top center; }
.mobile-video { display: none; }
@media screen and (max-width: 768px) {
.desktop-video { display: none; }
.mobile-video { display: block; object-position: center center; }
.orela-full-wrapper { height: calc(100vh - 185px); }
}
.hero-video-overlay {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.7) 100%);
}
.hero-content-inner {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 100%; z-index: 10; text-align: center; color: #fff; padding: 0 20px;
margin: 0; backface-visibility: hidden;
}
.main-hero-title {
font-size: clamp(28px, 4vw, 48px); font-weight: 900; line-height: 1.1;
margin: 0 0 20px 0; letter-spacing: -1px; color: #fff !important;
text-shadow: 0 2px 10px rgba(0,0,0,0.8); display: block; min-height: 2.2em;
}
.glow-blue-text { color: #4ba3f5; }
.pakal-style-button {
display: inline-flex; align-items: center; gap: 10px;
background: #4ba3f5; color: #000 !important;
padding: 14px 45px; border-radius: 100px;
font-size: 18px; font-weight: 800; text-decoration: none;
box-shadow: 0 4px 15px rgba(75, 163, 245, 0.4);
transition: transform 0.2s ease;
}
.benefits-luxury-strip {
background: linear-gradient(180deg, #161a1d 0%, #000000 100%);
display: flex; flex-direction: row; justify-content: space-around;
padding: 15px 5%; border-top: 1px solid #222; flex-shrink: 0; z-index: 11;
}
.benefit-column { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
.b-text-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; gap: 4px; }
.b-title-bold { color: #fff; font-weight: 700; font-size: 19px; white-space: nowrap; line-height: 1; }
.b-sub-text { color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 400; line-height: 1.1; }
.sapphire-glow-line {
width: 60px; height: 2px; background: #ffffff; border-radius: 10px;
box-shadow: 0 0 8px #4ba3f5, 0 0 15px #4ba3f5, 0 2px 10px rgba(75, 163, 245, 0.9);
display: block !important; visibility: visible !important;
}
@media screen and (min-width: 769px) {
.main-hero-title { font-size: 54px; margin-bottom: 30px; }
.pakal-style-button { padding: 18px 55px; font-size: 20px; }
.pakal-style-button:hover { transform: translateY(-2px) scale(1.02); }
.sapphire-glow-line { width: 75px; height: 3px; }
}
@media screen and (max-width: 768px) {
.benefits-luxury-strip { gap: 10px; padding: 15px 2%; }
.pakal-style-button { padding: 12px 35px; font-size: 16px; }
.b-title-bold { font-size: 16px; font-weight: 800; }
.sapphire-glow-line { width: 35px; }
}
Any advice on how to clean this up for professional-grade performance would be greatly appreciated!