This custom code is completely free to use, but please note it does not include 1-on-1 technical support. If you need a bespoke, done-for-you solution to customize your Shopify store, my team is here to help! Head to my channel homepage and use the link in the trailer to reach out.
{% comment %}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{% endcomment %}
{%- liquid
assign onhow_studio_section_id = section.id
assign onhow_studio_core = section.settings.onhow_studio_core_logic
assign onhow_studio_mg_top_desktop = section.settings.onhow_studio_mg_top_desktop | append: 'px'
assign onhow_studio_mg_top_tablet = section.settings.onhow_studio_mg_top_tablet | append: 'px'
assign onhow_studio_mg_top_mobile = section.settings.onhow_studio_mg_top_mobile | append: 'px'
assign onhow_studio_mg_bottom_desktop = section.settings.onhow_studio_mg_bottom_desktop | append: 'px'
assign onhow_studio_mg_bottom_tablet = section.settings.onhow_studio_mg_bottom_tablet | append: 'px'
assign onhow_studio_mg_bottom_mobile = section.settings.onhow_studio_mg_bottom_mobile | append: 'px'
assign onhow_studio_container = section.settings.onhow_studio_container | replace: 'fullwidth', 'full'
if onhow_studio_container == 'container'
assign onhow_studio_container_max_width = '1200px'
elsif onhow_studio_container == '1170'
assign onhow_studio_container_max_width = '1170px'
elsif onhow_studio_container == '1770'
assign onhow_studio_container_max_width = '1770px'
else
assign onhow_studio_container_max_width = '100%'
endif
assign onhow_studio_padding_full_width = section.settings.onhow_studio_padding_full_width | append: 'px'
assign onhow_studio_title = section.settings.onhow_studio_title
assign onhow_studio_title_alignment = section.settings.onhow_studio_title_alignment
assign onhow_studio_enable_border_title = section.settings.onhow_studio_enable_border_title
assign onhow_studio_color_title = section.settings.onhow_studio_color_title
assign onhow_studio_fontsize_title = section.settings.onhow_studio_fontsize_title | append: 'px'
assign onhow_studio_fontsize_title_mb = section.settings.onhow_studio_fontsize_title_mb | append: 'px'
assign onhow_studio_description = section.settings.onhow_studio_description
assign onhow_studio_color_des = section.settings.onhow_studio_color_des
assign onhow_studio_fontsize_des = section.settings.onhow_studio_fontsize_des | append: 'px'
assign onhow_studio_header_spacing_bottom = section.settings.onhow_studio_header_spacing_bottom | append: 'px'
assign onhow_studio_videos_per_row = section.settings.onhow_studio_videos_per_row
assign onhow_studio_grid_gap = section.settings.onhow_studio_grid_gap | append: 'px'
assign onhow_studio_enable_autoplay = section.settings.onhow_studio_enable_autoplay
assign onhow_studio_product_arrows = section.settings.onhow_studio_product_arrows
assign onhow_studio_product_arrows_mb = section.settings.onhow_studio_product_arrows_mb
-%}
<style>
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-section-wrapper-{{ onhow_studio_core }} * { box-sizing: border-box; }
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-section-wrapper-{{ onhow_studio_core }} p,
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-section-wrapper-{{ onhow_studio_core }} h1,
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-section-wrapper-{{ onhow_studio_core }} h2,
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-section-wrapper-{{ onhow_studio_core }} h3,
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-section-wrapper-{{ onhow_studio_core }} ul { margin: 0; padding: 0; }
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-section-wrapper-{{ onhow_studio_core }} {
--onhow-studio-padding-top-desk: {{ onhow_studio_mg_top_desktop }};
--onhow-studio-padding-top-tab: {{ onhow_studio_mg_top_tablet }};
--onhow-studio-padding-top-mob: {{ onhow_studio_mg_top_mobile }};
--onhow-studio-padding-bottom-desk: {{ onhow_studio_mg_bottom_desktop }};
--onhow-studio-padding-bottom-tab: {{ onhow_studio_mg_bottom_tablet }};
--onhow-studio-padding-bottom-mob: {{ onhow_studio_mg_bottom_mobile }};
--onhow-studio-container-max-width: {{ onhow_studio_container_max_width }};
--onhow-studio-container-padding: {% if onhow_studio_container == 'full' %}{{ onhow_studio_padding_full_width }}{% else %}20px{% endif %};
--onhow-studio-title-color: {{ onhow_studio_color_title }};
--onhow-studio-title-size-desk: {{ onhow_studio_fontsize_title }};
--onhow-studio-title-size-mob: {{ onhow_studio_fontsize_title_mb }};
--onhow-studio-desc-color: {{ onhow_studio_color_des }};
--onhow-studio-desc-size: {{ onhow_studio_fontsize_des }};
--onhow-studio-header-spacing: {{ onhow_studio_header_spacing_bottom }};
--onhow-studio-grid-gap: {{ onhow_studio_grid_gap }};
--onhow-studio-videos-per-row-desk: {{ onhow_studio_videos_per_row }};
background-color: var(--onhow-studio-bg);
color: var(--onhow-studio-text);
padding-top: var(--onhow-studio-padding-top-mob);
padding-bottom: var(--onhow-studio-padding-bottom-mob);
overflow: hidden;
}
@media (min-width: 768px) {
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-section-wrapper-{{ onhow_studio_core }} {
padding-top: var(--onhow-studio-padding-top-tab);
padding-bottom: var(--onhow-studio-padding-bottom-tab);
}
}
@media (min-width: 1025px) {
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-section-wrapper-{{ onhow_studio_core }} {
padding-top: var(--onhow-studio-padding-top-desk);
padding-bottom: var(--onhow-studio-padding-bottom-desk);
}
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-container {
max-width: var(--onhow-studio-container-max-width);
margin: 0 auto;
padding-left: var(--onhow-studio-container-padding);
padding-right: var(--onhow-studio-container-padding);
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-section-header {
text-align: {{ onhow_studio_title_alignment }};
margin-bottom: var(--onhow-studio-header-spacing);
display: flex;
flex-direction: column;
{%- if onhow_studio_title_alignment == 'center' -%}
align-items: center;
{%- elsif onhow_studio_title_alignment == 'right' -%}
align-items: flex-end;
{%- else -%}
align-items: flex-start;
{%- endif -%}
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-section-title {
color: var(--onhow-studio-title-color);
font-size: var(--onhow-studio-title-size-mob);
font-weight: 700;
margin: 0 0 10px 0;
line-height: 1.2;
position: relative;
}
{%- if onhow_studio_enable_border_title -%}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-section-title::before {
content: "";
position: absolute;
bottom: -5px;
{%- if onhow_studio_title_alignment == 'center' -%}
left: 50%;
transform: translateX(-50%);
{%- elsif onhow_studio_title_alignment == 'right' -%}
right: 0;
{%- else -%}
left: 0;
{%- endif -%}
width: 50px;
height: 2px;
background-color: var(--onhow-studio-title-color);
}
{%- endif -%}
@media (min-width: 1025px) {
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-section-title {
font-size: var(--onhow-studio-title-size-desk);
}
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-section-desc {
color: var(--onhow-studio-desc-color);
font-size: var(--onhow-studio-desc-size);
margin: 0;
}
#shopify-section-{{ onhow_studio_section_id }} onhow-studio-video-carousel {
display: block;
position: relative;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-carousel-track {
display: flex;
flex-wrap: nowrap;
gap: var(--onhow-studio-grid-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 20px;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-carousel-track::-webkit-scrollbar {
display: none;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-item {
flex: 0 0 auto;
width: calc((100% - (var(--onhow-studio-grid-gap) * (var(--onhow-studio-videos-per-row-desk) - 1))) / var(--onhow-studio-videos-per-row-desk));
min-width: 280px;
scroll-snap-align: center;
position: relative;
display: flex;
flex-direction: column;
}
@media (max-width: 1199px) {
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-item {
width: calc((100% - (var(--onhow-studio-grid-gap) * 2)) / 3);
}
}
@media (max-width: 767px) {
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-item {
width: calc(100% - 40px);
}
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-wrapper {
position: relative;
width: 100%;
aspect-ratio: 0.612;
border-radius: 8px;
overflow: hidden;
background: #000;
cursor: pointer;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-media {
width: 100%;
height: 86%;
object-fit: cover;
transition: height 0.3s ease-in-out;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-item:hover .onhow-studio-video-media,
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-item.is-active .onhow-studio-video-media {
height: 100%;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-controls {
position: absolute;
left: 15px;
right: 15px;
bottom: 15px;
display: flex;
justify-content: space-between;
z-index: 2;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-item:hover .onhow-studio-video-controls,
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-item.is-active .onhow-studio-video-controls {
opacity: 1;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-control-btn {
background: rgba(0,0,0,0.5);
color: #fff;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-control-btn:hover {
background: rgba(0,0,0,0.8);
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-control-btn svg {
width: 16px;
height: 16px;
fill: currentColor;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-item.is-playing .onhow-studio-icon-play { display: none; }
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-item:not(.is-playing) .onhow-studio-icon-pause { display: none; }
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-item.is-muted .onhow-studio-icon-unmute { display: none; }
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-item:not(.is-muted) .onhow-studio-icon-mute { display: none; }
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-product-content {
opacity: 0;
transform: translateY(15px);
transition: all 0.3s ease-in-out;
margin-top: 15px;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-item:hover .onhow-studio-product-content,
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-video-item.is-active .onhow-studio-product-content {
opacity: 1;
transform: translateY(0);
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-product-card {
display: flex;
align-items: center;
gap: 15px;
background: transparent;
text-decoration: none;
color: inherit;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-product-img {
width: 60px;
height: 60px;
border-radius: 6px;
object-fit: cover;
background: #f4f4f4;
flex-shrink: 0;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-product-info {
display: flex;
flex-direction: column;
overflow: hidden;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-product-title {
font-size: 14px;
font-weight: 600;
margin: 0 0 5px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-product-price {
font-size: 14px;
color: #555;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-product-price .onhow-studio-compare-price {
text-decoration: line-through;
color: #999;
margin-right: 5px;
font-size: 13px;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-carousel-arrows {
display: {% if onhow_studio_product_arrows_mb %}flex{% else %}none{% endif %};
justify-content: space-between;
position: absolute;
top: 40%;
left: 0;
width: 100%;
transform: translateY(-50%);
pointer-events: none;
z-index: 10;
}
@media (min-width: 1025px) {
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-carousel-arrows {
display: {% if onhow_studio_product_arrows %}flex{% else %}none{% endif %};
}
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-arrow-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: all 0.2s;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-arrow-btn:hover {
background: #111;
color: #fff;
border-color: #111;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-arrow-btn svg {
width: 14px;
height: 14px;
fill: currentColor;
}
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-arrow-btn.onhow-studio-prev svg { transform: rotate(180deg); }
#shopify-section-{{ onhow_studio_section_id }} .onhow-studio-arrow-btn:disabled {
opacity: 0;
pointer-events: none;
}
</style>
<div class="onhow-studio-section-wrapper-{{ onhow_studio_core }}" style="--onhow-studio-bg: {{ section.settings.onhow_studio_bg_color }}; --onhow-studio-text: {{ section.settings.onhow_studio_text_color }};">
<div class="onhow-studio-container">
{%- if onhow_studio_title != blank or onhow_studio_description != blank -%}
<div class="onhow-studio-section-header">
{%- if onhow_studio_title != blank -%}
<h3 class="onhow-studio-section-title">{{ onhow_studio_title }}</h3>
{%- endif -%}
{%- if onhow_studio_description != blank -%}
<div class="onhow-studio-section-desc">{{ onhow_studio_description }}</div>
{%- endif -%}
</div>
{%- endif -%}
<onhow-studio-video-carousel data-autoplay="{{ onhow_studio_enable_autoplay }}" data-section-id="{{ onhow_studio_section_id }}">
<div class="onhow-studio-carousel-arrows">
<button class="onhow-studio-arrow-btn onhow-studio-prev" aria-label="Previous">
<svg viewBox="0 0 492.004 492.004"><path d="M382.678 226.804L163.73 7.86C158.666 2.792 151.906 0 144.698 0s-13.968 2.792-19.032 7.86l-16.124 16.12c-10.492 10.504-10.492 27.576 0 38.064L293.398 245.9l-183.856 183.856c-5.236 5.236-7.86 12.12-7.86 19.024 0 6.908 2.624 13.788 7.86 19.032l16.124 16.116c5.068 5.068 11.824 7.86 19.032 7.86s13.968-2.792 19.032-7.86l218.946-218.932c5.064-5.072 7.856-11.82 7.856-19.024 0-7.204-2.792-13.96-7.856-19.028z"/></svg>
</button>
<button class="onhow-studio-arrow-btn onhow-studio-next" aria-label="Next">
<svg viewBox="0 0 492.004 492.004"><path d="M382.678 226.804L163.73 7.86C158.666 2.792 151.906 0 144.698 0s-13.968 2.792-19.032 7.86l-16.124 16.12c-10.492 10.504-10.492 27.576 0 38.064L293.398 245.9l-183.856 183.856c-5.236 5.236-7.86 12.12-7.86 19.024 0 6.908 2.624 13.788 7.86 19.032l16.124 16.116c5.068 5.068 11.824 7.86 19.032 7.86s13.968-2.792 19.032-7.86l218.946-218.932c5.064-5.072 7.856-11.82 7.856-19.024 0-7.204-2.792-13.96-7.856-19.028z"/></svg>
</button>
</div>
<div class="onhow-studio-carousel-track">
{%- for block in section.blocks -%}
<div class="onhow-studio-video-item is-muted" data-index="{{ forloop.index }}">
<div class="onhow-studio-video-wrapper">
{%- if block.settings.video != null -%}
<video class="onhow-studio-video-media" loop playsinline preload="metadata" muted>
<source src="{{ block.settings.video.sources[1].url }}" type="video/mp4">
</video>
<div class="onhow-studio-video-controls">
<button class="onhow-studio-control-btn onhow-studio-toggle-play" type="button" aria-label="Play/Pause">
<svg class="onhow-studio-icon-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
<svg class="onhow-studio-icon-pause" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
</button>
<button class="onhow-studio-control-btn onhow-studio-toggle-mute" type="button" aria-label="Mute/Unmute">
<svg class="onhow-studio-icon-mute" viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>
<svg class="onhow-studio-icon-unmute" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
</button>
</div>
{%- else -%}
<div style="width:100%;height:100%;background:#eee;">
{{ 'lifestyle-1' | placeholder_svg_tag: 'onhow-studio-video-media' }}
</div>
{%- endif -%}
</div>
{%- if block.settings.featured_product != blank -%}
{%- assign onhow_studio_product = block.settings.featured_product -%}
<div class="onhow-studio-product-content">
<a href="{{ onhow_studio_product.url }}" class="onhow-studio-product-card">
{{ onhow_studio_product.featured_image | image_url: width: 120 | image_tag: class: 'onhow-studio-product-img', loading: 'lazy', alt: onhow_studio_product.title }}
<div class="onhow-studio-product-info">
<span class="onhow-studio-product-title">{{ onhow_studio_product.title }}</span>
<div class="onhow-studio-product-price">
{%- if onhow_studio_product.compare_at_price > onhow_studio_product.price -%}
<span class="onhow-studio-compare-price">{{ onhow_studio_product.compare_at_price | money }}</span>
{%- endif -%}
<span class="onhow-studio-price">{{ onhow_studio_product.price | money }}</span>
</div>
</div>
</a>
</div>
{%- endif -%}
</div>
{%- endfor -%}
</div>
</onhow-studio-video-carousel>
</div>
</div>
<script>
const onhowStudioCredit = atob("RGVzaWduZWQgYnkgT05IT1cgU3R1ZGlvIC0gU3Vic2NyaWJlIQ==");
console.log(`%c ${onhowStudioCredit}`, 'background: #222; color: #00ff00; padding: 4px; border-radius: 4px;');
if (!customElements.get('onhow-studio-video-carousel')) {
class OnhowStudioVideoCarousel extends HTMLElement {
constructor() {
super();
this.track = this.querySelector('.onhow-studio-carousel-track');
this.items = this.querySelectorAll('.onhow-studio-video-item');
this.nextBtn = this.querySelector('.onhow-studio-arrow-btn.onhow-studio-next');
this.prevBtn = this.querySelector('.onhow-studio-arrow-btn.onhow-studio-prev');
this.autoplayEnabled = this.dataset.autoplay === 'true';
this.initSlider();
this.initVideos();
this.initObserver();
}
initSlider() {
if (this.nextBtn && this.prevBtn) {
this.nextBtn.addEventListener('click', () => {
const width = this.items[0].clientWidth;
this.track.scrollBy({ left: width, behavior: 'smooth' });
});
this.prevBtn.addEventListener('click', () => {
const width = this.items[0].clientWidth;
this.track.scrollBy({ left: -width, behavior: 'smooth' });
});
this.track.addEventListener('scroll', () => this.updateArrows(), { passive: true });
setTimeout(() => this.updateArrows(), 100);
}
}
updateArrows() {
const maxScrollLeft = this.track.scrollWidth - this.track.clientWidth;
const scrollLeft = Math.round(this.track.scrollLeft);
this.prevBtn.disabled = scrollLeft <= 0;
this.nextBtn.disabled = scrollLeft >= maxScrollLeft - 5;
}
initVideos() {
this.items.forEach(item => {
const video = item.querySelector('video');
const btnPlay = item.querySelector('.onhow-studio-toggle-play');
const btnMute = item.querySelector('.onhow-studio-toggle-mute');
if (!video) return;
if (btnPlay) {
btnPlay.addEventListener('click', (e) => {
e.preventDefault();
if (video.paused) {
video.play();
} else {
video.pause();
}
});
}
if (btnMute) {
btnMute.addEventListener('click', (e) => {
e.preventDefault();
video.muted = !video.muted;
item.classList.toggle('is-muted', video.muted);
});
}
video.addEventListener('play', () => item.classList.add('is-playing'));
video.addEventListener('pause', () => item.classList.remove('is-playing'));
const wrapper = item.querySelector('.onhow-studio-video-wrapper');
wrapper.addEventListener('click', (e) => {
if (!e.target.closest('.onhow-studio-control-btn')) {
video.paused ? video.play() : video.pause();
}
});
});
}
initObserver() {
const options = {
root: this.track,
threshold: 0.6
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const item = entry.target;
const video = item.querySelector('video');
if (entry.isIntersecting) {
item.classList.add('is-active');
if (video && this.autoplayEnabled && video.paused) {
video.play().catch(e => console.warn('Autoplay blocked:', e));
}
} else {
item.classList.remove('is-active');
if (video && !video.paused) {
video.pause();
}
}
});
}, options);
this.items.forEach(item => observer.observe(item));
}
}
customElements.define('onhow-studio-video-carousel', OnhowStudioVideoCarousel);
}
</script>
{% schema %}
{
"name": "Video Carousel",
"settings": [
{
"type": "header",
"content": "✨ Built by ONHOW Studio"
},
{
"type": "paragraph",
"content": "Get free sections & tutorials at youtube.com/@ONHOWStudio"
},
{
"type": "text",
"id": "onhow_studio_core_logic",
"label": "Section Architecture (Do Not Edit)",
"default": "built-by-onhow-studio",
"info": "Modifying this will break the section's CSS layout."
},
{
"type": "header",
"content": "― Core Settings ―"
},
{
"type": "color",
"id": "onhow_studio_bg_color",
"label": "Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "onhow_studio_text_color",
"label": "Text Color",
"default": "#000000"
},
{
"type": "header",
"content": "Container Settings"
},
{
"type": "select",
"id": "onhow_studio_container",
"label": "Container Width",
"default": "fullwidth",
"options": [
{ "value": "container", "label": "Standard Window (1200px)" },
{ "value": "1170", "label": "Narrow Window (1170px)" },
{ "value": "1770", "label": "Wide Window (1770px)" },
{ "value": "fullwidth", "label": "Fullwidth Edge-to-Edge" }
]
},
{
"type": "range",
"id": "onhow_studio_padding_full_width",
"label": "Fullwidth Edge Padding",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 0
},
{
"type": "select",
"id": "onhow_studio_videos_per_row",
"label": "Videos Per Row (Desktop)",
"options": [
{ "value": "3", "label": "3" },
{ "value": "4", "label": "4" },
{ "value": "5", "label": "5" },
{ "value": "6", "label": "6" }
],
"default": "5"
},
{
"type": "range",
"id": "onhow_studio_grid_gap",
"label": "Space between videos",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"default": 24
},
{
"type": "checkbox",
"id": "onhow_studio_enable_autoplay",
"label": "Auto-play visible videos",
"default": true
},
{
"type": "checkbox",
"id": "onhow_studio_product_arrows",
"label": "Enable Arrows (Desktop)",
"default": true
},
{
"type": "checkbox",
"id": "onhow_studio_product_arrows_mb",
"label": "Enable Arrows (Mobile)",
"default": false
},
{
"type": "header",
"content": "Section Header Content"
},
{
"type": "text",
"id": "onhow_studio_title",
"label": "Heading",
"default": "Trending Now"
},
{
"type": "checkbox",
"id": "onhow_studio_enable_border_title",
"label": "Show short underline below title",
"default": true
},
{
"type": "color",
"id": "onhow_studio_color_title",
"label": "Heading Color",
"default": "#202020"
},
{
"type": "range",
"id": "onhow_studio_fontsize_title",
"label": "Heading Size (Desktop)",
"min": 10,
"max": 100,
"step": 1,
"unit": "px",
"default": 32
},
{
"type": "range",
"id": "onhow_studio_fontsize_title_mb",
"label": "Heading Size (Mobile)",
"min": 10,
"max": 50,
"step": 1,
"unit": "px",
"default": 24
},
{
"type": "textarea",
"id": "onhow_studio_description",
"label": "Description",
"default": "Watch our latest product highlights."
},
{
"type": "color",
"id": "onhow_studio_color_des",
"label": "Description Color",
"default": "#555555"
},
{
"type": "range",
"id": "onhow_studio_fontsize_des",
"label": "Description Size",
"min": 10,
"max": 50,
"step": 1,
"unit": "px",
"default": 16
},
{
"type": "select",
"id": "onhow_studio_title_alignment",
"label": "Text Alignment",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
],
"default": "center"
},
{
"type": "range",
"id": "onhow_studio_header_spacing_bottom",
"label": "Space below header",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"default": 40
},
{
"type": "header",
"content": "Desktop Paddings"
},
{
"type": "range",
"id": "onhow_studio_mg_top_desktop",
"label": "Padding Top",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 50
},
{
"type": "range",
"id": "onhow_studio_mg_bottom_desktop",
"label": "Padding Bottom",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 50
},
{
"type": "header",
"content": "Tablet Paddings"
},
{
"type": "range",
"id": "onhow_studio_mg_top_tablet",
"label": "Padding Top",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 40
},
{
"type": "range",
"id": "onhow_studio_mg_bottom_tablet",
"label": "Padding Bottom",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 40
},
{
"type": "header",
"content": "Mobile Paddings"
},
{
"type": "range",
"id": "onhow_studio_mg_top_mobile",
"label": "Padding Top",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 30
},
{
"type": "range",
"id": "onhow_studio_mg_bottom_mobile",
"label": "Padding Bottom",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 30
}
],
"blocks": [
{
"type": "video",
"name": "Video Card",
"settings": [
{
"type": "video",
"id": "video",
"label": "Upload MP4 Video file"
},
{
"type": "product",
"id": "featured_product",
"label": "Attached Product",
"info": "This product will show natively beneath the video."
}
]
}
],
"presets": [
{
"name": "Portable Video Carousel (By ONHOW Studio)",
"blocks": [
{ "type": "video" },
{ "type": "video" },
{ "type": "video" },
{ "type": "video" },
{ "type": "video" }
]
}
]
}
{% endschema %}
{% comment %}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{% endcomment %}