Created
August 23, 2026 21:30
-
-
Save dpw1/3a0a8e7a78f6aa660246bb6c609e24dd to your computer and use it in GitHub Desktop.
Shopify stories slider section. Copy and paste into any theme. No app. EZFY Code.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% comment %}[[code_version:1.0.0]]{% endcomment %} | |
| {% comment %} Image variables for dummy content {% endcomment %} | |
| {% assign image_1 = '//section.store/cdn/shop/files/2149435652.jpg?v=1742550988&width=500' %} | |
| {% assign image_2 = '//section.store/cdn/shop/files/28222652.jpg?v=1742554503&width=500' %} | |
| {% assign image_3 = '//section.store/cdn/shop/files/2148368733.jpg?v=1742550817&width=500' %} | |
| {% assign image_4 = '//section.store/cdn/shop/files/no-revisions-Pu0sndkokuA-unsplash.jpg?v=1735570057&width=500' %} | |
| {% assign image_5 = '//section.store/cdn/shop/files/taylor-heery-AwUKOPsK0yc-unsplash.jpg?v=1723131156&width=500' %} | |
| {% assign image_6 = '//section.store/cdn/shop/files/no-revisions-OAW0OCLn52I-unsplash.jpg?v=1735570365&width=500' %} | |
| {% assign image_7 = '//section.store/cdn/shop/files/blush-pink-and-wicker-stationary-organizer.jpg?v=1723905912&width=500' %} | |
| {% assign image_8 = '//section.store/cdn/shop/files/content-pixie-NvZvtjn6Wrg-unsplash.jpg?v=1723130998&width=500' %} | |
| {% comment %} Text width variables {% endcomment %} | |
| {% assign text_width_mobile = 80 %} | |
| {% assign text_width_desktop = 120 %} | |
| <style> | |
| {% if section.settings.use_custom_font %} | |
| [id*="{{ section.id }}"] .sj-story__circle-text { | |
| font-family: {{ section.settings.font_family.family }}, {{ section.settings.font_family.fallback_families }}; | |
| font-weight: {{ section.settings.font_family.weight }}; | |
| font-style: {{ section.settings.font_family.style }}; | |
| } | |
| {% endif %} | |
| [id*='{{ section.id }}']{ | |
| overflow-x: hidden; | |
| --slide-spacing: {{ section.settings.space_between_mobile | default: 10 }}px; | |
| {% if section.settings.slides_mobile == 'auto' %} | |
| --slide-size: auto; | |
| {% else %} | |
| --slide-size: calc(100% / {{ section.settings.slides_mobile | default: 2 }}); | |
| {% endif %} | |
| margin-top: {{ section.settings.margin_top_mobile | default: 0 }}px; | |
| margin-bottom: {{ section.settings.margin_bottom_mobile | default: 0 }}px; | |
| } | |
| @media (min-width: 1024px) { | |
| [id*='{{ section.id }}']{ | |
| --slide-spacing: {{ section.settings.space_between_desktop | default: 16 }}px; | |
| {% if section.settings.slides_desktop == 'auto' %} | |
| --slide-size: auto; | |
| {% else %} | |
| --slide-size: calc(100% / {{ section.settings.slides_desktop | default: 4 }}); | |
| {% endif %} | |
| margin-top: {{ section.settings.margin_top_desktop | default: 0 }}px; | |
| margin-bottom: {{ section.settings.margin_bottom_desktop | default: 0 }}px; | |
| } | |
| } | |
| .sj-story__html { | |
| --font-body-family:Montserrat, sans-serif; | |
| --font-body-style:normal; | |
| --font-body-weight: 400; | |
| --font-body-scale: 1.0; | |
| --color-base-text: 0, 0, 0; | |
| --color-shadow: 0, 0, 0; | |
| --color-base-background-1: 255, 255, 255; | |
| --color-base-solid-button-labels: 255, 255, 255; | |
| --color-base-outline-button-labels: 18, 18, 17; | |
| --color-base-accent-1: 18, 18, 18; | |
| --gradient-base-background-1: #ffffff; | |
| --popup-shadow-opacity: 0.0; | |
| --popup-shadow-horizontal-offset: 0px; | |
| --popup-shadow-vertical-offset: 4px; | |
| --popup-shadow-blur-radius: 5px; | |
| --inputs-radius: 10px; | |
| --inputs-border-width: 1px; | |
| --gradient-color-1: #ffc400; | |
| --gradient-color-2: #f09433; | |
| --gradient-color-3: #dc2743; | |
| --gradient-color-4: #bc1888; | |
| box-sizing:border-box; | |
| font-size:calc(var(--font-body-scale)*62.5%); | |
| height: 100% | |
| } | |
| *,::after,::before { | |
| box-sizing:inherit | |
| } | |
| .sj-story__body { | |
| display:grid; | |
| grid-template-rows:auto auto 1fr auto; | |
| grid-template-columns: 100%; | |
| min-height: 100%; | |
| margin: 0; | |
| font-size: 1.5rem; | |
| letter-spacing: .06rem; | |
| line-height:calc(1 + .8/var(--font-body-scale)); | |
| font-family:var(--font-body-family); | |
| font-style:var(--font-body-style); | |
| font-weight:var(--font-body-weight) | |
| } | |
| @media screen and (min-width: 750px) { | |
| .sj-story__body { | |
| font-size: 1.6rem | |
| } | |
| } | |
| .sj-story__section-ab1 { | |
| border-top:solid #121212 0; | |
| border-bottom:solid #121212 0; | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| overflow:visible; | |
| } | |
| [id*='{{section.id }}'] .embla__viewport{ | |
| overflow: visible !important;} | |
| .sj-story__embla-container{ | |
| padding: 10px 0;} | |
| .sj-story__section-ab2 { | |
| margin: 0 auto; | |
| } | |
| .sj-story__circle-slider-wrapper-1 { | |
| padding: 50px 0; | |
| margin: 0 auto; | |
| max-width:fit-content | |
| } | |
| .sj-story__circle-slider-1 { | |
| margin: 0 auto; | |
| width: 100%!important; | |
| max-width:fit-content!important; | |
| overflow:visible!important; | |
| } | |
| .sj-story__circle-item-2 { | |
| width: 100%; | |
| text-decoration:none; | |
| {% if section.settings.slides_mobile == 'auto' %} | |
| max-width: {{ section.settings.image_width_auto_mobile | default: 65 }}px; | |
| {% else %} | |
| max-width: 66px; | |
| {% endif %} | |
| transform:scale(1)!important; | |
| transition:all .25s ease 0s; | |
| position: relative; | |
| } | |
| .sj-story__circle-item-2:last-child { | |
| margin-right: 0!important | |
| } | |
| .sj-story__circle-item-2 a { | |
| text-decoration: none; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .sj-story__circle-icon-1 { | |
| margin: 0 auto; | |
| display:block; | |
| {% if section.settings.slides_mobile == 'auto' %} | |
| width: {{ section.settings.image_width_auto_mobile | default: 65 }}px; | |
| height: {{ section.settings.image_width_auto_mobile | default: 65 }}px; | |
| {% else %} | |
| width: 100%; | |
| height: auto; | |
| {% endif %} | |
| border-radius: 50%; | |
| background: linear-gradient( | |
| 45deg, | |
| var(--gradient-color-1), | |
| var(--gradient-color-2), | |
| var(--gradient-color-3), | |
| var(--gradient-color-4) | |
| ); | |
| padding: 3px; | |
| transition: transform 0.2s ease; | |
| overflow:visible | |
| } | |
| .sj-story__circle-icon-inner { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| background-color: white; | |
| padding: 1px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .sj-story__circle-icon-1 img { | |
| display:block; | |
| width: 100%; | |
| height: 100%; | |
| object-fit:cover; | |
| border-radius: 50%; | |
| border: none | |
| } | |
| .sj-story__circle-text { | |
| color: {{ section.settings.text_color | default: '#000000' }}; | |
| font-size: {{ section.settings.text_size_mobile | default: 14 }}px; | |
| font-weight: 400; | |
| text-align: center; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| width: {{ text_width_mobile }}px; | |
| letter-spacing: {{ section.settings.letter_spacing | default: 0 }}px; | |
| } | |
| .sj-story__circle-item-2 { | |
| box-sizing:border-box!important | |
| } | |
| @media screen and (min-width: 1024px) { | |
| .sj-story__section-ab1 { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| .sj-story__section-ab2 { | |
| } | |
| .sj-story__circle-item-2 { | |
| {% if section.settings.slides_desktop == 'auto' %} | |
| max-width: {{ section.settings.image_width_auto | default: 110 }}px; | |
| {% else %} | |
| max-width: 110px | |
| {% endif %} | |
| } | |
| .sj-story__circle-icon-1 { | |
| {% if section.settings.slides_desktop == 'auto' %} | |
| width: {{ section.settings.image_width_auto | default: 110 }}px; | |
| height: {{ section.settings.image_width_auto | default: 110 }}px; | |
| {% else %} | |
| width: 100%; | |
| height: auto; | |
| {% endif %} | |
| } | |
| .sj-story__circle-icon-1 img { | |
| } | |
| .sj-story__circle-slider-wrapper-1 { | |
| width: 100% | |
| } | |
| .sj-story__circle-text { | |
| font-size: {{ section.settings.text_size_desktop | default: 16 }}px; | |
| width: {{ text_width_desktop }}px; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .sj-story__circle-t { | |
| display:block | |
| } | |
| } | |
| .sj-story__circle-item-2:hover .sj-story__circle-icon-1 { | |
| transform:scale(1.05); | |
| transition:transform 0.2s ease | |
| } | |
| .sj-story__circle-icon-1,.sj-story__circle-icon-1 img { | |
| border-radius: 50% | |
| } | |
| .sj-story__circle-slider-1.sj-story__preview .sj-story__swiper-wrapper { | |
| display:flex; | |
| align-items:top; | |
| justify-content:space-between | |
| } | |
| .sj-story__circle-slider-1.sj-story__preview .sj-story__circle-item-2 { | |
| width: 40% | |
| } | |
| .sj-story__circle-slider-1.sj-story__preview .sj-story__circle-item-2:not(:first-child) { | |
| } | |
| @media (min-width: 1024px) { | |
| .sj-story__circle-slider-1.sj-story__preview .sj-story__circle-item-2:not(:first-child) { | |
| } | |
| .sj-story__circle-slider-1 { | |
| overflow:hidden | |
| } | |
| .sj-story__circle-slider-1.sj-story__preview .sj-story__circle-item-2 { | |
| width: 15% | |
| } | |
| } | |
| .sj-story__html { | |
| --color-foreground:var(--color-base-text); | |
| --color-background:var(--color-base-background-1); | |
| --gradient-background:var(--gradient-base-background-1); | |
| --color-link:var(--color-base-outline-button-labels); | |
| --color-button:var(--color-base-accent-1); | |
| --color-button-text:var(--color-base-solid-button-labels); | |
| --color-badge-background:var(--color-background); | |
| --color-badge-border:var(--color-foreground); | |
| --color-card-hover:var(--color-base-text); | |
| --color-icon:rgb(var(--color-base-text)) | |
| } | |
| .sj-story__body { | |
| color:rgba(var(--color-foreground),.75); | |
| background-color:rgb(var(--color-background)) | |
| } | |
| ::selection { | |
| background-color:rgba(var(--color-foreground),.2) | |
| } | |
| .sj-story__html :focus { | |
| outline: 0; | |
| box-shadow:none | |
| } | |
| .sj-story__html :focus-visible { | |
| outline: .2rem solid rgba(var(--color-foreground),.5); | |
| outline-offset: .3rem; | |
| box-shadow: 0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3) | |
| } | |
| .sj-story__no-js :focus { | |
| outline: .2rem solid rgba(var(--color-foreground),.5); | |
| outline-offset: .3rem; | |
| box-shadow: 0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3) | |
| } | |
| .sj-story__no-js .focus-inset:focus:not(:focus-visible),.sj-story__no-js .focus-offset:focus:not(:focus-visible),.sj-story__no-js :focus:not(:focus-visible) { | |
| outline: 0; | |
| box-shadow:none | |
| } | |
| .sj-story__focus-none { | |
| box-shadow:none!important; | |
| outline: 0!important | |
| } | |
| .sj-story__gradient { | |
| background:rgb(var(--color-background)); | |
| background:var(--gradient-background); | |
| background-attachment:fixed | |
| } | |
| :host { | |
| position:relative; | |
| display:block; | |
| margin-left:auto; | |
| margin-right:auto; | |
| z-index: 1 | |
| } | |
| .sj-story__swiper { | |
| margin-left:auto; | |
| margin-right:auto; | |
| position:relative; | |
| overflow:hidden; | |
| list-style:none; | |
| padding: 0; | |
| z-index: 1; | |
| display:block | |
| } | |
| .embla { | |
| overflow: hidden; | |
| } | |
| .embla__viewport { | |
| overflow: hidden; | |
| } | |
| .embla__container { | |
| display: flex; | |
| touch-action: pan-y pinch-zoom; | |
| margin-left: calc(var(--slide-spacing) * -1); | |
| } | |
| /* Prevent layout shift on load by pre-applying Embla positioning */ | |
| .sj-story__embla-container { | |
| margin-left: calc(var(--slide-spacing) * -1); | |
| } | |
| .embla__slide { | |
| flex: 0 0 var(--slide-size); | |
| min-width: 0; | |
| {% if section.settings.slides_mobile == 'auto' %} | |
| max-width: none; | |
| width: auto; | |
| {% else %} | |
| max-width: var(--slide-size); | |
| width: 100%; | |
| {% endif %} | |
| padding-left: var(--slide-spacing); | |
| transform: translate3d(0, 0, 0); | |
| } | |
| @media (min-width: 1024px) { | |
| .embla__slide { | |
| {% if section.settings.slides_desktop == 'auto' %} | |
| max-width: none; | |
| width: auto; | |
| {% else %} | |
| max-width: var(--slide-size); | |
| width: 100%; | |
| {% endif %} | |
| } | |
| } | |
| .sj-story__embla-slide,.sj-story__embla-container { | |
| width: 100%; | |
| height: 100%; | |
| position:relative; | |
| } | |
| .sj-story__embla-container { | |
| z-index: 1; | |
| display:flex; | |
| box-sizing:content-box; | |
| } | |
| .sj-story__embla-slide { | |
| flex: 0 0 var(--slide-size); | |
| min-width: 0; | |
| {% if section.settings.slides_mobile == 'auto' %} | |
| max-width: none; | |
| width: auto !important; | |
| {% else %} | |
| max-width: var(--slide-size); | |
| width: 100%; | |
| {% endif %} | |
| display:block; | |
| } | |
| @media (min-width: 1024px) { | |
| .sj-story__embla-slide { | |
| {% if section.settings.slides_desktop == 'auto' %} | |
| max-width: none; | |
| width: auto !important; | |
| {% else %} | |
| max-width: var(--slide-size); | |
| width: 100%; | |
| {% endif %} | |
| } | |
| } | |
| .sj-story__section-ab1.sj-story__circle-t { | |
| background-color: #fff | |
| } | |
| </style> | |
| <div | |
| data-section-id="{{ section.id }}" | |
| data-slides-desktop="{{ section.settings.slides_desktop | default: 4 }}" | |
| data-space-between-desktop="{{ section.settings.space_between_desktop | default: 16 }}" | |
| data-slides-mobile="{{ section.settings.slides_mobile | default: 2 }}" | |
| data-space-between-mobile="{{ section.settings.space_between_mobile | default: 10 }}" | |
| class="sj-story__html sj-story__no-js" lang="en"> | |
| <div class="sj-story__body sj-story__gradient"> | |
| <div class="sj-story__main sj-story__content-for-layout sj-story__focus-none sj-story__MainContent" role="main" tabindex="-1"> | |
| <section class="sj-story__shopify-section sj-story__ab3"> | |
| <div class="sj-story__section-ab1 sj-story__circle-t"> | |
| <div class="sj-story__section-ab2"> | |
| <div class="sj-story__circle-slider-wrapper-1"> | |
| <div class="sj-story__embla sj-story__circle-slider-1 sj-story__preview embla"> | |
| <div class="embla__viewport"> | |
| <div class="sj-story__embla-container embla__container"> | |
| {% for block in section.blocks %} | |
| {% if block.settings.image != blank %} | |
| <div class="sj-story__circle-item-2 sj-story__embla-slide embla__slide" {{ block.shopify_attributes }}> | |
| <a href="{{ block.settings.link | default: '#' }}"> | |
| <div class="sj-story__circle-icon-1"> | |
| <div class="sj-story__circle-icon-inner"> | |
| {% if section.settings.slides_mobile == 'auto' %} | |
| {% assign image_width = section.settings.image_width_auto_mobile | default: 65 %} | |
| {% else %} | |
| {% assign image_width = 66 %} | |
| {% endif %} | |
| {% if section.settings.slides_desktop == 'auto' %} | |
| {% assign desktop_image_width = section.settings.image_width_auto | default: 110 %} | |
| {% else %} | |
| {% assign desktop_image_width = 110 %} | |
| {% endif %} | |
| <img | |
| src="{{ block.settings.image | image_url: width: image_width }}" | |
| srcset=" | |
| {{ block.settings.image | image_url: width: image_width }} {{ image_width }}w, | |
| {{ block.settings.image | image_url: width: desktop_image_width }} {{ desktop_image_width }}w | |
| " | |
| sizes=" | |
| (min-width: 1024px) {{ desktop_image_width }}px, | |
| {{ image_width }}px | |
| " | |
| alt="{{ block.settings.image.alt | escape }}" | |
| width="{{ image_width }}" | |
| height="{{ image_width }}" | |
| loading="lazy" | |
| > | |
| </div> | |
| </div> | |
| <div class="sj-story__circle-text">{{ block.settings.text | default: 'Story' }}</div> | |
| </a> | |
| </div> | |
| {% else %} | |
| {% comment %} Fallback to dummy images when no block image is set {% endcomment %} | |
| {% assign dummy_images = image_1 | append: ',' | append: image_2 | append: ',' | append: image_3 | append: ',' | append: image_4 | split: ',' %} | |
| {% assign image_index = forloop.index0 | modulo: 4 %} | |
| <div class="sj-story__circle-item-2 sj-story__embla-slide embla__slide" {{ block.shopify_attributes }}> | |
| <a href="#"> | |
| <div class="sj-story__circle-icon-1"> | |
| <div class="sj-story__circle-icon-inner"> | |
| {% if section.settings.slides_mobile == 'auto' %} | |
| {% assign image_width = section.settings.image_width_auto_mobile | default: 65 %} | |
| {% else %} | |
| {% assign image_width = 66 %} | |
| {% endif %} | |
| {% if section.settings.slides_desktop == 'auto' %} | |
| {% assign desktop_image_width = section.settings.image_width_auto | default: 110 %} | |
| {% else %} | |
| {% assign desktop_image_width = 110 %} | |
| {% endif %} | |
| <img | |
| src="{{ dummy_images[image_index] }}" | |
| alt="Story {{ forloop.index }}" | |
| width="{{ image_width }}" | |
| height="{{ image_width }}" | |
| loading="lazy" | |
| > | |
| </div> | |
| </div> | |
| <div class="sj-story__circle-text">{{ block.settings.text | default: 'Story' }}</div> | |
| </a> | |
| </div> | |
| {% endif %} | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </div> | |
| <script data-section-id="{{ section.id }}"> | |
| var sectionID = `{{ section.id }}` | |
| window[sectionID] = window[sectionID] || {}; | |
| window[sectionID] = (function () { | |
| const id = document.currentScript.dataset.sectionId; | |
| function getOptions() { | |
| const sectionElement = document.querySelector(`[data-section-id="${id}"]`); | |
| if (!sectionElement) return {}; | |
| return { | |
| slidesDesktop: parseInt(sectionElement.dataset.slidesDesktop) || 4, | |
| spaceBetweenDesktop: parseInt(sectionElement.dataset.spaceBetweenDesktop) || 16, | |
| slidesMobile: parseInt(sectionElement.dataset.slidesMobile) || 2, | |
| spaceBetweenMobile: parseInt(sectionElement.dataset.spaceBetweenMobile) || 10 | |
| }; | |
| } | |
| function waitForElement(selector, delay = 50, tries = 100) { | |
| const element = document.querySelector(selector); | |
| if (!window[`__${selector}`]) { | |
| window[`__${selector}`] = 0; | |
| window[`__${selector}__delay`] = delay; | |
| window[`__${selector}__tries`] = tries; | |
| } | |
| function _search() { | |
| return new Promise((resolve) => { | |
| window[`__${selector}`]++; | |
| setTimeout(resolve, window[`__${selector}__delay`]); | |
| }); | |
| } | |
| if (element === null) { | |
| if (window[`__${selector}`] >= window[`__${selector}__tries`]) { | |
| window[`__${selector}`] = 0; | |
| return Promise.resolve(null); | |
| } | |
| return _search().then(() => waitForElement(selector)); | |
| } else { | |
| return Promise.resolve(element); | |
| } | |
| } | |
| function _loadScript(src) { | |
| return new Promise(function (resolve, reject) { | |
| var s; | |
| s = document.createElement("script"); | |
| s.src = src; | |
| s.onload = resolve; | |
| s.onerror = reject; | |
| document.head.appendChild(s); | |
| }); | |
| } | |
| function loadEmbla() { | |
| return new Promise((resolve, reject) => { | |
| // Check if Embla is already loaded | |
| if (window.EmblaCarousel) { | |
| resolve(window.EmblaCarousel); | |
| return; | |
| } | |
| // Load Embla Carousel from CDN | |
| _loadScript('https://unpkg.com/embla-carousel/embla-carousel.umd.js') | |
| .then(() => { | |
| // Wait a bit for Embla to be available on window | |
| setTimeout(() => { | |
| if (window.EmblaCarousel) { | |
| resolve(window.EmblaCarousel); | |
| } else { | |
| reject(new Error('Embla Carousel failed to load')); | |
| } | |
| }, 100); | |
| }) | |
| .catch(reject); | |
| }); | |
| } | |
| function initEmbla() { | |
| loadEmbla().then((EmblaCarousel) => { | |
| console.log('Embla Carousel loaded successfully'); | |
| }).catch((error) => { | |
| console.error('Failed to load Embla Carousel:', error); | |
| }); | |
| } | |
| function initSlider() { | |
| return new Promise((resolve, reject) => { | |
| // Find the embla viewport within this section | |
| const selector = `[data-section-id="${id}"] .embla__viewport` | |
| const emblaContainer = document.querySelector(selector); | |
| if (!emblaContainer) { | |
| reject(new Error('Embla container element not found')); | |
| return; | |
| } | |
| // Check if Embla is available | |
| if (!window.EmblaCarousel) { | |
| reject(new Error('Embla Carousel is not loaded')); | |
| return; | |
| } | |
| // Get options from data attributes | |
| const options = getOptions(); | |
| {% comment %} debugger; {% endcomment %} | |
| // Initialize Embla Carousel | |
| const embla = EmblaCarousel(emblaContainer, { | |
| dragFree: true, | |
| containScroll: 'trimSnaps', | |
| slidesToScroll: 'auto' | |
| }); | |
| resolve(embla); | |
| }); | |
| } | |
| return { | |
| init: function () { | |
| document.addEventListener("DOMContentLoaded", async function () { | |
| try { | |
| await loadEmbla(); | |
| await initSlider(); | |
| console.log('Embla Carousel initialized successfully'); | |
| } catch (error) { | |
| console.error('Failed to initialize Embla Carousel:', error); | |
| } | |
| }); | |
| window.addEventListener("resize", function () {}); | |
| window.addEventListener("load", function () {}); | |
| window.addEventListener("scroll", function () {}); | |
| document.addEventListener("shopify:section:unload", async function(e) { | |
| }); | |
| document.addEventListener("shopify:section:reorder", async function() { | |
| }); | |
| document.addEventListener("shopify:section:select", async function(e) { | |
| }); | |
| document.addEventListener("shopify:section:deselect", async function(e) { | |
| }); | |
| }, | |
| }; | |
| })(); | |
| window[sectionID].init(); | |
| </script> | |
| {% schema %} | |
| { | |
| "name": "SJ Stories Slider", | |
| "tag": "section", | |
| "class": "section", | |
| "settings": [ | |
| { | |
| "type": "header", | |
| "content": "Section Settings" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "heading", | |
| "label": "Heading", | |
| "default": "Stories" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Desktop Settings" | |
| }, | |
| { | |
| "type": "select", | |
| "id": "slides_desktop", | |
| "label": "Images Visible on Desktop", | |
| "options": [ | |
| { | |
| "value": "auto", | |
| "label": "Auto (use image width)" | |
| }, | |
| { | |
| "value": "1", | |
| "label": "1 image" | |
| }, | |
| { | |
| "value": "2", | |
| "label": "2 images" | |
| }, | |
| { | |
| "value": "3", | |
| "label": "3 images" | |
| }, | |
| { | |
| "value": "4", | |
| "label": "4 images" | |
| }, | |
| { | |
| "value": "5", | |
| "label": "5 images" | |
| }, | |
| { | |
| "value": "6", | |
| "label": "6 images" | |
| }, | |
| { | |
| "value": "7", | |
| "label": "7 images" | |
| }, | |
| { | |
| "value": "8", | |
| "label": "8 images" | |
| }, | |
| { | |
| "value": "9", | |
| "label": "9 images" | |
| }, | |
| { | |
| "value": "10", | |
| "label": "10 images" | |
| } | |
| ], | |
| "default": "4" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "space_between_desktop", | |
| "label": "Space Between Items (Desktop)", | |
| "min": 0, | |
| "max": 50, | |
| "step": 1, | |
| "unit": "px", | |
| "default": 16 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "image_width_auto", | |
| "label": "Image Width (when Auto is selected)", | |
| "min": 50, | |
| "max": 400, | |
| "step": 5, | |
| "unit": "px", | |
| "default": 110 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "margin_top_desktop", | |
| "label": "Margin Top (Desktop)", | |
| "min": 0, | |
| "max": 100, | |
| "step": 5, | |
| "unit": "px", | |
| "default": 0 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "margin_bottom_desktop", | |
| "label": "Margin Bottom (Desktop)", | |
| "min": 0, | |
| "max": 100, | |
| "step": 5, | |
| "unit": "px", | |
| "default": 0 | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Mobile Settings" | |
| }, | |
| { | |
| "type": "select", | |
| "id": "slides_mobile", | |
| "label": "Images Visible on Mobile", | |
| "options": [ | |
| { | |
| "value": "auto", | |
| "label": "Auto (use image width)" | |
| }, | |
| { | |
| "value": "1", | |
| "label": "1 image" | |
| }, | |
| { | |
| "value": "2", | |
| "label": "2 images" | |
| }, | |
| { | |
| "value": "3", | |
| "label": "3 images" | |
| }, | |
| { | |
| "value": "4", | |
| "label": "4 images" | |
| }, | |
| { | |
| "value": "5", | |
| "label": "5 images" | |
| } | |
| ], | |
| "default": "2" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "space_between_mobile", | |
| "label": "Space Between Items (Mobile)", | |
| "min": 0, | |
| "max": 30, | |
| "step": 1, | |
| "unit": "px", | |
| "default": 10 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "image_width_auto_mobile", | |
| "label": "Image Width Mobile (when Auto is selected)", | |
| "min": 50, | |
| "max": 400, | |
| "step": 5, | |
| "unit": "px", | |
| "default": 65 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "margin_top_mobile", | |
| "label": "Margin Top (Mobile)", | |
| "min": 0, | |
| "max": 100, | |
| "step": 5, | |
| "unit": "px", | |
| "default": 0 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "margin_bottom_mobile", | |
| "label": "Margin Bottom (Mobile)", | |
| "min": 0, | |
| "max": 100, | |
| "step": 5, | |
| "unit": "px", | |
| "default": 0 | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Text Settings" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "use_custom_font", | |
| "label": "Use custom font?", | |
| "info": "If unchecked, the section will use the website's current font. Enable this and pick a font below if you want a custom font.", | |
| "default": false | |
| }, | |
| { | |
| "type": "font_picker", | |
| "id": "font_family", | |
| "label": "Font family", | |
| "default": "helvetica_n4" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "text_color", | |
| "label": "Text Color", | |
| "default": "#000000" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "letter_spacing", | |
| "label": "Letter Spacing", | |
| "min": -2, | |
| "max": 5, | |
| "step": 0.1, | |
| "unit": "px", | |
| "default": 0 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "text_size_desktop", | |
| "label": "Text Size (Desktop)", | |
| "min": 8, | |
| "max": 26, | |
| "step": 1, | |
| "unit": "px", | |
| "default": 16 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "text_size_mobile", | |
| "label": "Text Size (Mobile)", | |
| "min": 8, | |
| "max": 26, | |
| "step": 1, | |
| "unit": "px", | |
| "default": 14 | |
| } | |
| ], | |
| "blocks": [ | |
| { | |
| "type": "story", | |
| "name": "Story", | |
| "settings": [ | |
| { | |
| "type": "image_picker", | |
| "id": "image", | |
| "label": "Story Image" | |
| }, | |
| { | |
| "type": "url", | |
| "id": "link", | |
| "label": "Story Link" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "text", | |
| "label": "Story Text", | |
| "default": "Story" | |
| } | |
| ] | |
| } | |
| ], | |
| "presets": [ | |
| { | |
| "name": "SJ Stories Slider", | |
| "settings": { | |
| "slides_desktop": "auto", | |
| "slides_mobile": "auto" | |
| }, | |
| "blocks": [ | |
| { | |
| "type": "story" | |
| }, | |
| { | |
| "type": "story" | |
| }, | |
| { | |
| "type": "story" | |
| }, | |
| { | |
| "type": "story" | |
| }, | |
| { | |
| "type": "story" | |
| }, | |
| { | |
| "type": "story" | |
| }, | |
| { | |
| "type": "story" | |
| }, | |
| { | |
| "type": "story" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| {% endschema %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment