video
Page: Product Pages (Optimized for Conversions)
Snippet Code
<style>
.section7 {
padding-top: 40px;
padding-bottom: 40px;
}
.container7 {
max-width: 1312px;
padding-left: 40px;
padding-right: 40px;
}
.w-layout-blockcontainer7 {
margin-left: auto;
margin-right: auto;
display: block;
}
.w-container7:before {
content: " ";
display: table;
}
.section7-heading-wrapper {
z-index: 1;
grid-column-gap: 20px;
grid-row-gap: 20px;
text-align: center;
justify-content: flex-start;
align-items: center;
margin-bottom: 48px;
position: relative;
}
.w-layout-vflex {
flex-direction: column;
display: flex;
}
.section7-heading {
grid-column-gap: 8px;
grid-row-gap: 8px;
text-align: center;
flex-flow: column;
justify-content: flex-start;
align-items: center;
max-width: 576px;
display: flex;
}
.section7-subtitle {
grid-column-gap: 4px;
grid-row-gap: 4px;
border: 1px solid #d9d6fe;
background-color: #f4f3ff;
color: #5925dc;
border-radius: 999px;
justify-content: center;
align-items: center;
padding: 2px 10px 2px 8px;
font-size: 14px;
display: flex;
}
.subtitle-icon {
width: 12px;
height: 12px;
}
img {
vertical-align: middle;
max-width: 100%;
display: inline-block;
}
.texth2 {
font-family: "Satoshi Variable", Arial, sans-serif;
font-variation-settings: "wght" 700;
letter-spacing: -0.96px;
margin-top: 0;
margin-bottom: 0;
font-size: 42px;
line-height: 1.15;
font-weight: bold;
}
p.text-color-secondary {
font-size: 18px;
}
.text-color-secondary {
color: #71717a;
}
.features-grid {
z-index: 1;
grid-column-gap: 24px;
grid-row-gap: 24px;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
position: relative;
}
.w-layout-grid {
grid-auto-columns: 1fr;
display: grid;
}
.feature-grid-item7 {
grid-column-gap: 24px;
grid-row-gap: 24px;
text-align: center;
flex-flow: column;
justify-content: flex-start;
align-items: center;
display: flex;
}
.feature-video7-wrapper7 {
aspect-ratio: 16 / 10;
border-radius: 16px;
justify-content: center;
align-items: center;
width: 100%;
overflow: hidden;
}
.feature-video7 {
width: 100%;
height: 100%;
}
.w-background-video {
color: #fff;
position: relative;
overflow: hidden;
}
.w-background-video>video {
object-fit: cover;
z-index: -100;
background-position: 50%;
background-size: cover;
width: 100%;
height: 100%;
margin: auto;
position: absolute;
inset: -100%;
}
video {
vertical-align: baseline;
display: inline-block;
}
.feature-video7-play-button {
opacity: 0;
transition: opacity .2s;
inset: 0;
}
.w-background-video--control {
background-color: #0000;
padding: 0;
position: absolute;
}
button,
[type="button"] {
cursor: pointer;
border: 0;
}
button {
text-transform: none;
overflow: visible;
}
.feature-video7-play-button:hover {
opacity: 1;
}
.w-background-video--control>[hidden] {
display: none !important;
}
.feature-text-wrapper.is-left-aligned {
text-align: left;
justify-content: flex-start;
align-items: flex-start;
}
.feature-text-wrapper {
grid-column-gap: 8px;
grid-row-gap: 8px;
}
.heading-xsmall {
font-variation-settings: "wght" 600;
letter-spacing: 0;
font-size: 18px;
line-height: 1.2;
font-family: "Satoshi Variable", Arial, sans-serif;
margin-top: 0;
margin-bottom: 0;
font-weight: bold;
}
.text-color-secondary {
color: #71717a;
}
.text-size-small {
font-size: 14px;
}
.w-container7:after {
clear: both;
content: " ";
display: table;
}
@media screen and (max-width: 479px) {
.container7 {
padding-left: 16px;
padding-right: 16px;
}
.section7-heading-wrapper {
grid-column-gap: 12px;
grid-row-gap: 12px;
}
.texth2 {
font-size: 28px;
}
}
@media screen and (max-width: 767px) {
.section7 {
padding-top: 32px;
padding-bottom: 32px;
}
.features-grid {
grid-row-gap: 28px;
grid-template-columns: 1fr;
}
.feature-grid-item7 {
grid-column-gap: 16px;
grid-row-gap: 16px;
}
}
@media screen and (max-width: 991px) {
.section7-heading-wrapper {
margin-bottom: 32px;
}
.features-grid {
grid-column-gap: 16px;
}
.feature-video7-play-button {
opacity: 1;
}
.feature-text-wrapper {
grid-column-gap: 6px;
grid-row-gap: 6px;
}
}
</style>
<section class="section7">
<div class="w-layout-blockcontainer7 container7 w-container7">
<div class="w-layout-vflex section7-heading-wrapper">
<div class="section7-heading">
<div class="section7-subtitle"><img loading="lazy"
src="https://cdn.prod.website-files.com/667d55e119b55f80a09eb400/6872277d8a440e377b126f64_Rapid%20AI%20Generation.svg"
alt="" class="subtitle-icon">
<div>Get Rapid Results</div>
</div>
<h2 class="texth2">Produce Scroll-Stopping Ads in Minutes, Not Hours</h2>
<p class="text-color-secondary">We’ve made it so easy - even a toddler could do it...</p>
</div>
</div>
<div class="w-layout-grid features-grid">
<div class="feature-grid-item7">
<div class="w-layout-vflex feature-video7-wrapper7">
<div data-poster-url="https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c557520dd578d830f39b_Step%201%20Final-poster-00001.jpg"
data-video-urls="https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c557520dd578d830f39b_Step%201%20Final-transcode.mp4,https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c557520dd578d830f39b_Step%201%20Final-transcode.webm"
data-autoplay="false" data-loop="false" data-wf-ignore="true"
class="feature-video7 w-background-video w-background-video-atom"><video
id="86f9f7ab-f685-e72a-123e-e8f8d84adeb5-video"
style="background-image:url("https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c557520dd578d830f39b_Step%201%20Final-poster-00001.jpg")"
muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
<source src="https://cdn.shopify.com/videos/c/o/v/a33d7de7de3e43bb931d22ef965fa514.mp4"
data-wf-ignore="true">
<source src="https://cdn.shopify.com/videos/c/o/v/a33d7de7de3e43bb931d22ef965fa514.mp4"
data-wf-ignore="true">
</video><noscript>
<img data-wf-bgvideo-fallback-img="true"
src="https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c557520dd578d830f39b_Step%201%20Final-poster-00001.jpg"
alt="" />
</noscript>
<div aria-live="polite"><button type="button" data-w-bg-video-control="true"
aria-controls="86f9f7ab-f685-e72a-123e-e8f8d84adeb5-video"
class="w-backgroundvideo-backgroundvideoplaypausebutton feature-video7-play-button w-background-video--control"><span
hidden=""><img style="width: 48px !important;" loading="lazy" alt="Pause video"
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/6890ca1e0f68da0ff7e8ec40_pause.avif?v=1758102579"></span><span><img
style="width: 48px !important;" loading="lazy" alt="Play video"
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/6890ca1e25ded153f2741dba_play.avif?v=1758102579"></span></button>
</div>
</div>
</div>
<div class="w-layout-vflex feature-text-wrapper is-left-aligned">
<h3 class="heading-xsmall">Choose a Proven Template</h3>
<p class="text-size-small text-color-secondary">Pick from 1500+ templates built from ads that
actually performed.</p>
</div>
</div>
<div class="feature-grid-item7">
<div class="w-layout-vflex feature-video7-wrapper7">
<div data-poster-url="https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c7637266ac24a61da777_Step%202%20final-poster-00001.jpg"
data-video-urls="https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c7637266ac24a61da777_Step%202%20final-transcode.mp4,https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c7637266ac24a61da777_Step%202%20final-transcode.webm"
data-autoplay="false" data-loop="false" data-wf-ignore="true"
class="feature-video7 w-background-video w-background-video-atom"><video
id="78416205-6d05-0cf6-2494-54ddca37e1ae-video"
style="background-image:url("https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c7637266ac24a61da777_Step%202%20final-poster-00001.jpg")"
muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
<source src="https://cdn.shopify.com/videos/c/o/v/a33d7de7de3e43bb931d22ef965fa514.mp4"
data-wf-ignore="true">
<source src="https://cdn.shopify.com/videos/c/o/v/a33d7de7de3e43bb931d22ef965fa514.mp4"
data-wf-ignore="true">
</video><noscript>
<img data-wf-bgvideo-fallback-img="true"
src="https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c7637266ac24a61da777_Step%202%20final-poster-00001.jpg"
alt="" />
</noscript>
<div aria-live="polite"><button type="button" data-w-bg-video-control="true"
aria-controls="78416205-6d05-0cf6-2494-54ddca37e1ae-video"
class="w-backgroundvideo-backgroundvideoplaypausebutton feature-video7-play-button w-background-video--control"><span
hidden=""><img style="width: 48px !important;" loading="lazy" alt="Pause video"
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/6890ca1e0f68da0ff7e8ec40_pause.avif?v=1758102579"></span><span><img
style="width: 48px !important;" loading="lazy" alt="Play video"
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/6890ca1e25ded153f2741dba_play.avif?v=1758102579"></span></button>
</div>
</div>
</div>
<div class="w-layout-vflex feature-text-wrapper is-left-aligned">
<h3 class="heading-xsmall">Customize in Canva</h3>
<p class="text-size-small text-color-secondary">Swap product images, add your copy, and brand it
instantly.</p>
</div>
</div>
<div class="feature-grid-item7">
<div class="w-layout-vflex feature-video7-wrapper7">
<div data-poster-url="https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c76a7151b1f219191470_Step%203%20Final-poster-00001.jpg"
data-video-urls="https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c76a7151b1f219191470_Step%203%20Final-transcode.mp4,https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c76a7151b1f219191470_Step%203%20Final-transcode.webm"
data-autoplay="false" data-loop="false" data-wf-ignore="true"
class="feature-video7 w-background-video w-background-video-atom"><video
id="72808f07-bdf4-1ed2-7a14-b18573149132-video"
style="background-image:url("https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c76a7151b1f219191470_Step%203%20Final-poster-00001.jpg")"
muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
<source src="https://cdn.shopify.com/videos/c/o/v/a33d7de7de3e43bb931d22ef965fa514.mp4"
data-wf-ignore="true">
<source src="https://cdn.shopify.com/videos/c/o/v/a33d7de7de3e43bb931d22ef965fa514.mp4"
data-wf-ignore="true">
</video><noscript>
<img data-wf-bgvideo-fallback-img="true"
src="https://cdn.prod.website-files.com/667d55e119b55f80a09eb400%2F6890c76a7151b1f219191470_Step%203%20Final-poster-00001.jpg"
alt="" />
</noscript>
<div aria-live="polite"><button type="button" data-w-bg-video-control="true"
aria-controls="72808f07-bdf4-1ed2-7a14-b18573149132-video"
class="w-backgroundvideo-backgroundvideoplaypausebutton feature-video7-play-button w-background-video--control"><span
hidden=""><img style="width: 48px !important;" loading="lazy" alt="Pause video"
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/6890ca1e0f68da0ff7e8ec40_pause.avif?v=1758102579"></span><span><img
style="width: 48px !important;" loading="lazy" alt="Play video"
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/6890ca1e25ded153f2741dba_play.avif?v=1758102579"></span></button>
</div>
</div>
</div>
<div class="w-layout-vflex feature-text-wrapper is-left-aligned">
<h3 class="heading-xsmall">Launch & Test</h3>
<p class="text-size-small text-color-secondary">Export in one click, upload to Ads Manager, and
start scaling.</p>
</div>
</div>
</div>
</div>
</section>
<script>
function playVideo(videoId, btn) {
const video = document.getElementById(videoId);
video.play();
video.setAttribute("controls", "true");
btn.style.display = "none";
// Show button back when paused or ended
video.addEventListener("pause", () => {
btn.style.display = "flex";
});
video.addEventListener("ended", () => {
btn.style.display = "flex";
});
}
</script>Instructions
Heyy Guys 
Watch the video below to learn how to Import these Codes into your Shopify Ecommerce Store!