Different images for mobile than desktop web

Solved
NandoMedina
New Member
2 0 0

Hi , Thanks for the explanation and the code. It worked perfectly for me.

Desktop main bannerDesktop main bannerMobile main bannerMobile main banner

0 Likes

Hello @Ninthony 

I'm trying to implement the lazy loading for the desktop-mobile-banner.liquid code you shared in order to achieve different images for desktop and mobile.

I followed the links you provided in this reply but I'm still not sure what I need to edit in the original code to apply the lazy loading. This resource shares a bunch of code snippets and I'm not sure how or where to use them. 

I have a file called lazysizes.js in my Assets folder that I believe came with my Debut theme, here's the code:

/*! lazysizes - v4.1.8 */
!function (a, b) { var c = function (d) { b(a.lazySizes, d), a.removeEventListener("lazyunveilread", c, !0) }; b = b.bind(null, a, a.document), "object" == typeof module && module.exports ? b(require("lazysizes")) : a.lazySizes ? c() : a.addEventListener("lazyunveilread", c, !0) }(window, function (a, b, c, d) { "use strict"; function e(a) { var b = getComputedStyle(a, null) || {}, c = b.fontFamily || "", d = c.match(j) || "", e = d && c.match(k) || ""; return e && (e = e[1]), { fit: d && d[1] || "", position: n[e] || e || "center" } } function f(a, b) { var d, e, f = c.cfg, g = a.cloneNode(!1), h = g.style, i = function () { var b = a.currentSrc || a.src; b && e !== b && (e = b, h.backgroundImage = "url(" + (m.test(b) ? JSON.stringify(b) : b) + ")", d || (d = !0, c.rC(g, f.loadingClass), c.aC(g, f.loadedClass))) }, j = function () { c.rAF(i) }; a._lazysizesParentFit = b.fit, a.addEventListener("lazyloaded", j, !0), a.addEventListener("load", j, !0), g.addEventListener("load", function () { var a = g.currentSrc || g.src; a && a != l && (g.src=l, g.srcset = "") }), c.rAF(function () { var d = a, e = a.parentNode; "PICTURE" == e.nodeName.toUpperCase() && (d = e, e = e.parentNode), c.rC(g, f.loadedClass), c.rC(g, f.lazyClass), c.aC(g, f.loadingClass), c.aC(g, f.objectFitClass || "lazysizes-display-clone"), g.getAttribute(f.srcsetAttr) && g.setAttribute(f.srcsetAttr, ""), g.getAttribute(f.srcAttr) && g.setAttribute(f.srcAttr, ""), g.src=l, g.srcset = "", h.backgroundRepeat = "no-repeat", h.backgroundPosition = b.position, h.backgroundSize = b.fit, d.style.display = "none", a.setAttribute("data-parent-fit", b.fit), a.setAttribute("data-parent-container", "prev"), e.insertBefore(g, d), a._lazysizesParentFit && delete a._lazysizesParentFit, a.complete && i() }) } var g = b.createElement("a").style, h = "objectFit" in g, i = h && "objectPosition" in g, j = /object-fit["']*\s*:\s*["']*(contain|cover)/, k = /object-position["']*\s*:\s*["']*(.+?)(?=($|,|'|"|;))/, l = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", m = /\(|\)|'/, n = { center: "center", "50% 50%": "center" }; if (!h || !i) { var o = function (a) { if (a.detail.instance == c) { var b = a.target, d = e(b); !d.fit || h && "center" == d.position || f(b, d) } }; a.addEventListener("lazyunveilread", o, !0), d && d.detail && o(d) } });
/*! lazysizes - v4.1.8 */
!function (a, b) { var c = function () { b(a.lazySizes), a.removeEventListener("lazyunveilread", c, !0) }; b = b.bind(null, a, a.document), "object" == typeof module && module.exports ? b(require("lazysizes")) : a.lazySizes ? c() : a.addEventListener("lazyunveilread", c, !0) }(window, function (a, b, c) { "use strict"; function d(b, c) { var d, e, f, g, h = a.getComputedStyle(b); e = b.parentNode, g = { isPicture: !(!e || !m.test(e.nodeName || "")) }, f = function (a, c) { var d = b.getAttribute("data-" + a); if (!d) { var e = h.getPropertyValue("--ls-" + a); e && (d = e.trim()) } if (d) { if ("true" == d) d = !0; else if ("false" == d) d = !1; else if (l.test(d)) d = parseFloat(d); else if ("function" == typeof j[a]) d = j[a](b, d); else if (q.test(d)) try { d = JSON.parse(d) } catch (a) { } g[a] = d } else a in j && "function" != typeof j[a] ? g[a] = j[a] : c && "function" == typeof j[a] && (g[a] = j[a](b, d)) }; for (d in j) f(d); return c.replace(p, function (a, b) { b in g || f(b, !0) }), g } function e(a, b) { var c = [], d = function (a, c) { return k[typeof b[c]] ? b[c] : a }; return c.srcset = [], b.absUrl && (s.setAttribute("href", a), a = s.href), a = ((b.prefix || "") + a + (b.postfix || "")).replace(p, d), b.widths.forEach(function (d) { var e = b.widthmap[d] || d, f = b.aspectratio || b.ratio, g = !b.aspectratio && j.traditionalRatio, h = { u: a.replace(n, e).replace(o, f ? g ? Math.round(d * f) : Math.round(d / f) : ""), w: d }; c.push(h), c.srcset.push(h.c = h.u + " " + d + "w") }), c } function f(a, c, d) { var f = 0, g = 0, h = d; if (a) { if ("container" === c.ratio) { for (f = h.scrollWidth, g = h.scrollHeight; !(f && g || h === b);)h = h.parentNode, f = h.scrollWidth, g = h.scrollHeight; f && g && (c.ratio = g / f) } a = e(a, c), a.isPicture = c.isPicture, u && "IMG" == d.nodeName.toUpperCase() ? d.removeAttribute(i.srcsetAttr) : d.setAttribute(i.srcsetAttr, a.srcset.join(", ")), Object.defineProperty(d, "_lazyrias", { value: a, writable: !0 }) } } function g(a, b) { var e = d(a, b); return j.modifyOptions.call(a, { target: a, details: e, detail: e }), c.fire(a, "lazyriasmodifyoptions", e), e } function h(a) { return a.getAttribute(a.getAttribute("data-srcattr") || j.srcAttr) || a.getAttribute(i.srcsetAttr) || a.getAttribute(i.srcAttr) || a.getAttribute("data-pfsrcset") || "" } var i, j, k = { string: 1, number: 1 }, l = /^\-*\+*\d+\.*\d*$/, m = /^picture$/i, n = /\s*\{\s*width\s*\}\s*/i, o = /\s*\{\s*height\s*\}\s*/i, p = /\s*\{\s*([a-z0-9]+)\s*\}\s*/gi, q = /^\[.*\]|\{.*\}$/, r = /^(?:auto|\d+(px)?)$/, s = b.createElement("a"), t = b.createElement("img"), u = "srcset" in t && !("sizes" in t), v = !!a.HTMLPictureElement && !u; !function () { var b, d = function () { }, e = { prefix: "", postfix: "", srcAttr: "data-src", absUrl: !1, modifyOptions: d, widthmap: {}, ratio: !1, traditionalRatio: !1, aspectratio: !1 }; i = c && c.cfg || a.lazySizesConfig, i || (i = {}, a.lazySizesConfig = i), i.supportsType || (i.supportsType = function (a) { return !a }), i.rias || (i.rias = {}), "widths" in (j = i.rias) || (j.widths = [], function (a) { for (var b, c = 0; !b || b < 3e3;)c += 5, c > 30 && (c += 1), b = 36 * c, a.push(b) }(j.widths)); for (b in e) b in j || (j[b] = e[b]) }(), addEventListener("lazybeforesizes", function (a) { if (a.detail.instance == c) { var b, d, e, k, l, m, o, p, q, s, t, u, x; if (b = a.target, a.detail.dataAttr && !a.defaultPrevented && !j.disabled && (q = b.getAttribute(i.sizesAttr) || b.getAttribute("sizes")) && r.test(q)) { if (d = h(b), e = g(b, d), t = n.test(e.prefix) || n.test(e.postfix), e.isPicture && (k = b.parentNode)) for (l = k.getElementsByTagName("source"), m = 0, o = l.length; m < o; m++)(t || n.test(p = h(l[m]))) && (f(p, e, l[m]), u = !0); t || n.test(d) ? (f(d, e, b), u = !0) : u && (x = [], x.srcset = [], x.isPicture = !0, Object.defineProperty(b, "_lazyrias", { value: x, writable: !0 })), u && (v ? b.removeAttribute(i.srcAttr) : "auto" != q && (s = { width: parseInt(q, 10) }, w({ target: b, detail: s }))) } } }, !0); var w = function () { var d = function (a, b) { return a.w - b.w }, e = function (a) { var b, c, d = a.length, e = a[d - 1], f = 0; for (f; f < d; f++)if (e = a[f], e.d = e.w / a.w, e.d >= a.d) { !e.cached && (b = a[f - 1]) && b.d > a.d - .13 * Math.pow(a.d, 2.2) && (c = Math.pow(b.d - .6, 1.6), b.cached && (b.d += .15 * c), b.d + (e.d - a.d) * c > a.d && (e = b)); break } return e }, f = function (a, b) { var d; return !a._lazyrias && c.pWS && (d = c.pWS(a.getAttribute(i.srcsetAttr || ""))).length && (Object.defineProperty(a, "_lazyrias", { value: d, writable: !0 }), b && a.parentNode && (d.isPicture = "PICTURE" == a.parentNode.nodeName.toUpperCase())), a._lazyrias }, g = function (b) { var d = a.devicePixelRatio || 1, e = c.getX && c.getX(b); return Math.min(e || d, 2.4, d) }, h = function (b, c) { var h, i, j, k, l, m; if (l = b._lazyrias, l.isPicture && a.matchMedia) for (i = 0, h = b.parentNode.getElementsByTagName("source"), j = h.length; i < j; i++)if (f(h[i]) && !h[i].getAttribute("type") && (!(k = h[i].getAttribute("media")) || (matchMedia(k) || {}).matches)) { l = h[i]._lazyrias; break } return (!l.w || l.w < c) && (l.w = c, l.d = g(b), m = e(l.sort(d))), m }, j = function (d) { if (d.detail.instance == c) { var e, g = d.target; if (!u && (a.respimage || a.picturefill || lazySizesConfig.pf)) return void b.removeEventListener("lazybeforesizes", j); ("_lazyrias" in g || d.detail.dataAttr && f(g, !0)) && (e = h(g, d.detail.width)) && e.u && g._lazyrias.cur != e.u && (g._lazyrias.cur = e.u, e.cached = !0, c.rAF(function () { g.setAttribute(i.srcAttr, e.u), g.setAttribute("src", e.u) })) } }; return v ? j = function () { } : addEventListener("lazybeforesizes", j), j }() });
/*! lazysizes - v4.1.8 */
!function (a, b) { var c = b(a, a.document); a.lazySizes = c, "object" == typeof module && module.exports && (module.exports = c) }(window, function (a, b) { "use strict"; if (b.getElementsByClassName) { var c, d, e = b.documentElement, f = a.Date, g = a.HTMLPictureElement, h = "addEventListener", i = "getAttribute", j = a[h], k = a.setTimeout, l = a.requestAnimationFrame || k, m = a.requestIdleCallback, n = /^picture$/i, o = ["load", "error", "lazyincluded", "_lazyloaded"], p = {}, q = Array.prototype.forEach, r = function (a, b) { return p[b] || (p[b] = new RegExp("(\\s|^)" + b + "(\\s|$)")), p[b].test(a[i]("class") || "") && p[b] }, s = function (a, b) { r(a, b) || a.setAttribute("class", (a[i]("class") || "").trim() + " " + b) }, t = function (a, b) { var c; (c = r(a, b)) && a.setAttribute("class", (a[i]("class") || "").replace(c, " ")) }, u = function (a, b, c) { var d = c ? h : "removeEventListener"; c && u(a, b), o.forEach(function (c) { a[d](c, b) }) }, v = function (a, d, e, f, g) { var h = b.createEvent("Event"); return e || (e = {}), e.instance = c, h.initEvent(d, !f, !g), h.detail = e, a.dispatchEvent(h), h }, w = function (b, c) { var e; !g && (e = a.picturefill || d.pf) ? (c && c.src && !b[i]("srcset") && b.setAttribute("srcset", c.src), e({ reevaluate: !0, elements: [b] })) : c && c.src && (b.src=c.src) }, x = function (a, b) { return (getComputedStyle(a, null) || {})[b] }, y = function (a, b, c) { for (c = c || a.offsetWidth; c < d.minSize && b && !a._lazysizesWidth;)c = b.offsetWidth, b = b.parentNode; return c }, z = function () { var a, c, d = [], e = [], f = d, g = function () { var b = f; for (f = d.length ? e : d, a = !0, c = !1; b.length;)b.shift()(); a = !1 }, h = function (d, e) { a && !e ? d.apply(this, arguments) : (f.push(d), c || (c = !0, (b.hidden ? k : l)(g))) }; return h._lsFlush = g, h }(), A = function (a, b) { return b ? function () { z(a) } : function () { var b = this, c = arguments; z(function () { a.apply(b, c) }) } }, B = function (a) { var b, c = 0, e = d.throttleDelay, g = d.ricTimeout, h = function () { b = !1, c = f.now(), a() }, i = m && g > 49 ? function () { m(h, { timeout: g }), g !== d.ricTimeout && (g = d.ricTimeout) } : A(function () { k(h) }, !0); return function (a) { var d; (a = !0 === a) && (g = 33), b || (b = !0, d = e - (f.now() - c), d < 0 && (d = 0), a || d < 9 ? i() : k(i, d)) } }, C = function (a) { var b, c, d = 99, e = function () { b = null, a() }, g = function () { var a = f.now() - c; a < d ? k(g, d - a) : (m || e)(e) }; return function () { c = f.now(), b || (b = k(g, d)) } }; !function () { var b, c = { lazyClass: "lazyload", loadedClass: "lazyloaded", loadingClass: "lazyloading", preloadClass: "lazypreload", errorClass: "lazyerror", autosizesClass: "lazyautosizes", srcAttr: "data-src", srcsetAttr: "data-srcset", sizesAttr: "data-sizes", minSize: 40, customMedia: {}, init: !0, expFactor: 1.5, hFac: .8, loadMode: 2, loadHidden: !0, ricTimeout: 0, throttleDelay: 125 }; d = a.lazySizesConfig || a.lazysizesConfig || {}; for (b in c) b in d || (d[b] = c[b]); a.lazySizesConfig = d, k(function () { d.init && F() }) }(); var D = function () { var g, l, m, o, p, y, D, F, G, H, I, J, K = /^img$/i, L = /^iframe$/i, M = "onscroll" in a && !/(gle|ing)bot/.test(navigator.userAgent), N = 0, O = 0, P = 0, Q = -1, R = function (a) { P-- , (!a || P < 0 || !a.target) && (P = 0) }, S = function (a) { return null == J && (J = "hidden" == x(b.body, "visibility")), J || "hidden" != x(a.parentNode, "visibility") && "hidden" != x(a, "visibility") }, T = function (a, c) { var d, f = a, g = S(a); for (F -= c, I += c, G -= c, H += c; g && (f = f.offsetParent) && f != b.body && f != e;)(g = (x(f, "opacity") || 1) > 0) && "visible" != x(f, "overflow") && (d = f.getBoundingClientRect(), g = H > d.left && G < d.right && I > d.top - 1 && F < d.bottom + 1); return g }, U = function () { var a, f, h, j, k, m, n, p, q, r, s, t, u = c.elements; if ((o = d.loadMode) && P < 8 && (a = u.length)) { for (f = 0, Q++; f < a; f++)if (u[f] && !u[f]._lazyRace) if (!M || c.prematureUnveil && c.prematureUnveil(u[f])) aa(u[f]); else if ((p = u[f][i]("data-expand")) && (m = 1 * p) || (m = O), r || (r = !d.expand || d.expand < 1 ? e.clientHeight > 500 && e.clientWidth > 500 ? 500 : 370 : d.expand, c._defEx = r, s = r * d.expFactor, t = d.hFac, J = null, O < s && P < 1 && Q > 2 && o > 2 && !b.hidden ? (O = s, Q = 0) : O = o > 1 && Q > 1 && P < 6 ? r : N), q !== m && (y = innerWidth + m * t, D = innerHeight + m, n = -1 * m, q = m), h = u[f].getBoundingClientRect(), (I = h.bottom) >= n && (F = h.top) <= D && (H = h.right) >= n * t && (G = h.left) <= y && (I || H || G || F) && (d.loadHidden || S(u[f])) && (l && P < 3 && !p && (o < 3 || Q < 4) || T(u[f], m))) { if (aa(u[f]), k = !0, P > 9) break } else !k && l && !j && P < 4 && Q < 4 && o > 2 && (g[0] || d.preloadAfterLoad) && (g[0] || !p && (I || H || G || F || "auto" != u[f][i](d.sizesAttr))) && (j = g[0] || u[f]); j && !k && aa(j) } }, V = B(U), W = function (a) { var b = a.target; if (b._lazyCache) return void delete b._lazyCache; R(a), s(b, d.loadedClass), t(b, d.loadingClass), u(b, Y), v(b, "lazyloaded") }, X = A(W), Y = function (a) { X({ target: a.target }) }, Z = function (a, b) { try { a.contentWindow.location.replace(b) } catch (c) { a.src=b } }, $ = function (a) { var b, c = a[i](d.srcsetAttr); (b = d.customMedia[a[i]("data-media") || a[i]("media")]) && a.setAttribute("media", b), c && a.setAttribute("srcset", c) }, _ = A(function (a, b, c, e, f) { var g, h, j, l, o, p; (o = v(a, "lazybeforeunveil", b)).defaultPrevented || (e && (c ? s(a, d.autosizesClass) : a.setAttribute("sizes", e)), h = a[i](d.srcsetAttr), g = a[i](d.srcAttr), f && (j = a.parentNode, l = j && n.test(j.nodeName || "")), p = b.firesLoad || "src" in a && (h || g || l), o = { target: a }, s(a, d.loadingClass), p && (clearTimeout(m), m = k(R, 2500), u(a, Y, !0)), l && q.call(j.getElementsByTagName("source"), $), h ? a.setAttribute("srcset", h) : g && !l && (L.test(a.nodeName) ? Z(a, g) : a.src=g), f && (h || l) && w(a, { src: g })), a._lazyRace && delete a._lazyRace, t(a, d.lazyClass), z(function () { var b = a.complete && a.naturalWidth > 1; p && !b || (b && s(a, "ls-is-cached"), W(o), a._lazyCache = !0, k(function () { "_lazyCache" in a && delete a._lazyCache }, 9)), "lazy" == a.loading && P-- }, !0) }), aa = function (a) { if (!a._lazyRace) { var b, c = K.test(a.nodeName), e = c && (a[i](d.sizesAttr) || a[i]("sizes")), f = "auto" == e; (!f && l || !c || !a[i]("src") && !a.srcset || a.complete || r(a, d.errorClass) || !r(a, d.lazyClass)) && (b = v(a, "lazyunveilread").detail, f && E.updateElem(a, !0, a.offsetWidth), a._lazyRace = !0, P++ , _(a, b, f, e, c)) } }, ba = C(function () { d.loadMode = 3, V() }), ca = function () { 3 == d.loadMode && (d.loadMode = 2), ba() }, da = function () { if (!l) { if (f.now() - p < 999) return void k(da, 999); l = !0, d.loadMode = 3, V(), j("scroll", ca, !0) } }; return { _: function () { p = f.now(), c.elements = b.getElementsByClassName(d.lazyClass), g = b.getElementsByClassName(d.lazyClass + " " + d.preloadClass), j("scroll", V, !0), j("resize", V, !0), a.MutationObserver ? new MutationObserver(V).observe(e, { childList: !0, subtree: !0, attributes: !0 }) : (e[h]("DOMNodeInserted", V, !0), e[h]("DOMAttrModified", V, !0), setInterval(V, 999)), j("hashchange", V, !0), ["focus", "mouseover", "click", "load", "transitionend", "animationend", "webkitAnimationEnd"].forEach(function (a) { b[h](a, V, !0) }), /d$|^c/.test(b.readyState) ? da() : (j("load", da), b[h]("DOMContentLoaded", V), k(da, 2e4)), c.elements.length ? (U(), z._lsFlush()) : V() }, checkElems: V, unveil: aa, _aLSL: ca } }(), E = function () { var a, c = A(function (a, b, c, d) { var e, f, g; if (a._lazysizesWidth = d, d += "px", a.setAttribute("sizes", d), n.test(b.nodeName || "")) for (e = b.getElementsByTagName("source"), f = 0, g = e.length; f < g; f++)e[f].setAttribute("sizes", d); c.detail.dataAttr || w(a, c.detail) }), e = function (a, b, d) { var e, f = a.parentNode; f && (d = y(a, f, d), e = v(a, "lazybeforesizes", { width: d, dataAttr: !!b }), e.defaultPrevented || (d = e.detail.width) && d !== a._lazysizesWidth && c(a, f, e, d)) }, f = function () { var b, c = a.length; if (c) for (b = 0; b < c; b++)e(a[b]) }, g = C(f); return { _: function () { a = b.getElementsByClassName(d.autosizesClass), j("resize", g) }, checkElems: g, updateElem: e } }(), F = function () { F.i || (F.i = !0, E._(), D._()) }; return c = { cfg: d, autoSizer: E, loader: D, init: F, uP: w, aC: s, rC: t, hC: r, fire: v, gW: y, rAF: z } } });

/*! lazysizes - v4.1.8 */
!function (a, b) { var c = function () { b(a.lazySizes), a.removeEventListener("lazyunveilread", c, !0) }; b = b.bind(null, a, a.document), "object" == typeof module && module.exports ? b(require("lazysizes")) : a.lazySizes ? c() : a.addEventListener("lazyunveilread", c, !0) }(window, function (a, b, c) { "use strict"; if (a.addEventListener) { var d = /\s+(\d+)(w|h)\s+(\d+)(w|h)/, e = /parent-fit["']*\s*:\s*["']*(contain|cover|width)/, f = /parent-container["']*\s*:\s*["']*(.+?)(?=(\s|$|,|'|"|;))/, g = /^picture$/i, h = function (a) { return getComputedStyle(a, null) || {} }, i = { getParent: function (b, c) { var d = b, e = b.parentNode; return c && "prev" != c || !e || !g.test(e.nodeName || "") || (e = e.parentNode), "self" != c && (d = "prev" == c ? b.previousElementSibling : c && (e.closest || a.jQuery) ? (e.closest ? e.closest(c) : jQuery(e).closest(c)[0]) || e : e), d }, getFit: function (a) { var b, c, d = h(a), g = d.content || d.fontFamily, j = { fit: a._lazysizesParentFit || a.getAttribute("data-parent-fit") }; return !j.fit && g && (b = g.match(e)) && (j.fit = b[1]), j.fit ? (c = a._lazysizesParentContainer || a.getAttribute("data-parent-container"), !c && g && (b = g.match(f)) && (c = b[1]), j.parent = i.getParent(a, c)) : j.fit = d.objectFit, j }, getImageRatio: function (b) { var c, e, f, h, i, j, k, l = b.parentNode, m = l && g.test(l.nodeName || "") ? l.querySelectorAll("source, img") : [b]; for (c = 0; c < m.length; c++)if (b = m[c], e = b.getAttribute(lazySizesConfig.srcsetAttr) || b.getAttribute("srcset") || b.getAttribute("data-pfsrcset") || b.getAttribute("data-risrcset") || "", f = b._lsMedia || b.getAttribute("media"), f = lazySizesConfig.customMedia[b.getAttribute("data-media") || f] || f, e && (!f || (a.matchMedia && matchMedia(f) || {}).matches)) { h = parseFloat(b.getAttribute("data-aspectratio")), h || (i = e.match(d), i ? "w" == i[2] ? (j = i[1], k = i[3]) : (j = i[3], k = i[1]) : (j = b.getAttribute("width"), k = b.getAttribute("height")), h = j / k); break } return h }, calculateSize: function (a, b) { var c, d, e, f, g = this.getFit(a), h = g.fit, i = g.parent; return "width" == h || ("contain" == h || "cover" == h) && (e = this.getImageRatio(a)) ? (i ? b = i.clientWidth : i = a, f = b, "width" == h ? f = b : (d = i.clientHeight) > 40 && (c = b / d) && ("cover" == h && c < e || "contain" == h && c > e) && (f = b * (e / c)), f) : b } }; c.parentFit = i, b.addEventListener("lazybeforesizes", function (a) { if (!a.defaultPrevented && a.detail.instance == c) { var b = a.target; a.detail.width = i.calculateSize(b, a.detail.width) } }) } });
/*! lazysizes - v4.1.8 */
!function (a, b) { var c = function () { b(a.lazySizes), a.removeEventListener("lazyunveilread", c, !0) }; b = b.bind(null, a, a.document), "object" == typeof module && module.exports ? b(require("lazysizes")) : a.lazySizes ? c() : a.addEventListener("lazyunveilread", c, !0) }(window, function (a, b, c) { "use strict"; var d, e = c && c.cfg, f = b.createElement("img"), g = "sizes" in f && "srcset" in f, h = /\s+\d+h/g, i = function () { var a = /\s+(\d+)(w|h)\s+(\d+)(w|h)/, d = Array.prototype.forEach; return function () { var e = b.createElement("img"), f = function (b) { var c, d, e = b.getAttribute(lazySizesConfig.srcsetAttr); e && (d = e.match(a)) && (c = "w" == d[2] ? d[1] / d[3] : d[3] / d[1], c && b.setAttribute("data-aspectratio", c), b.setAttribute(lazySizesConfig.srcsetAttr, e.replace(h, ""))) }, g = function (a) { if (a.detail.instance == c) { var b = a.target.parentNode; b && "PICTURE" == b.nodeName && d.call(b.getElementsByTagName("source"), f), f(a.target) } }, i = function () { e.currentSrc && b.removeEventListener("lazybeforeunveil", g) }; b.addEventListener("lazybeforeunveil", g), e.onload = i, e.onerror = i, e.srcset = "data:,a 1w 1h", e.complete && i() } }(); if (e.supportsType || (e.supportsType = function (a) { return !a }), a.HTMLPictureElement && g) return void (!c.hasHDescriptorFix && b.msElementsFromPoint && (c.hasHDescriptorFix = !0, i())); a.picturefill || e.pf || (e.pf = function (b) { var c, e; if (!a.picturefill) for (c = 0, e = b.elements.length; c < e; c++)d(b.elements[c]) }, d = function () { var f = function (a, b) { return a.w - b.w }, i = /^\s*\d+\.*\d*px\s*$/, j = function (a) { var b, c, d = a.length, e = a[d - 1], f = 0; for (f; f < d; f++)if (e = a[f], e.d = e.w / a.w, e.d >= a.d) { !e.cached && (b = a[f - 1]) && b.d > a.d - .13 * Math.pow(a.d, 2.2) && (c = Math.pow(b.d - .6, 1.6), b.cached && (b.d += .15 * c), b.d + (e.d - a.d) * c > a.d && (e = b)); break } return e }, k = function () { var a, b = /(([^,\s].[^\s]+)\s+(\d+)w)/g, c = /\s/, d = function (b, c, d, e) { a.push({ c: c, u: d, w: 1 * e }) }; return function (e) { return a = [], e = e.trim(), e.replace(h, "").replace(b, d), a.length || !e || c.test(e) || a.push({ c: e, u: e, w: 99 }), a } }(), l = function () { l.init || (l.init = !0, addEventListener("resize", function () { var a, c = b.getElementsByClassName("lazymatchmedia"), e = function () { var a, b; for (a = 0, b = c.length; a < b; a++)d(c[a]) }; return function () { clearTimeout(a), a = setTimeout(e, 66) } }())) }, m = function (b, d) { var f, g = b.getAttribute("srcset") || b.getAttribute(e.srcsetAttr); !g && d && (g = b._lazypolyfill ? b._lazypolyfill._set : b.getAttribute(e.srcAttr) || b.getAttribute("src")), b._lazypolyfill && b._lazypolyfill._set == g || (f = k(g || ""), d && b.parentNode && (f.isPicture = "PICTURE" == b.parentNode.nodeName.toUpperCase(), f.isPicture && a.matchMedia && (c.aC(b, "lazymatchmedia"), l())), f._set = g, Object.defineProperty(b, "_lazypolyfill", { value: f, writable: !0 })) }, n = function (b) { var d = a.devicePixelRatio || 1, e = c.getX && c.getX(b); return Math.min(e || d, 2.5, d) }, o = function (b) { return a.matchMedia ? (o = function (a) { return !a || (matchMedia(a) || {}).matches })(b) : !b }, p = function (a) { var b, d, g, h, k, l, p; if (h = a, m(h, !0), k = h._lazypolyfill, k.isPicture) for (d = 0, b = a.parentNode.getElementsByTagName("source"), g = b.length; d < g; d++)if (e.supportsType(b[d].getAttribute("type"), a) && o(b[d].getAttribute("media"))) { h = b[d], m(h), k = h._lazypolyfill; break } return k.length > 1 ? (p = h.getAttribute("sizes") || "", p = i.test(p) && parseInt(p, 10) || c.gW(a, a.parentNode), k.d = n(a), !k.src || !k.w || k.w < p ? (k.w = p, l = j(k.sort(f)), k.src=l) : l = k.src) : l = k[0], l }, q = function (a) { if (!g || !a.parentNode || "PICTURE" == a.parentNode.nodeName.toUpperCase()) { var b = p(a); b && b.u && a._lazypolyfill.cur != b.u && (a._lazypolyfill.cur = b.u, b.cached = !0, a.setAttribute(e.srcAttr, b.u), a.setAttribute("src", b.u)) } }; return q.parse = k, q }(), e.loadedClass && e.loadingClass && function () { var a = [];['img[sizes$="px"][srcset].', "picture > img:not([srcset])."].forEach(function (b) { a.push(b + e.loadedClass), a.push(b + e.loadingClass) }), e.pf({ elements: b.querySelectorAll(a.join(", ")) }) }()) });
/*! lazysizes - v4.1.8 */
!function (a, b) { var c = function () { b(a.lazySizes), a.removeEventListener("lazyunveilread", c, !0) }; b = b.bind(null, a, a.document), "object" == typeof module && module.exports ? b(require("lazysizes")) : a.lazySizes ? c() : a.addEventListener("lazyunveilread", c, !0) }(window, function (a, b, c) { "use strict"; if (a.addEventListener) { var d = /\s+/g, e = /\s*\|\s+|\s+\|\s*/g, f = /^(.+?)(?:\s+\[\s*(.+?)\s*\])(?:\s+\[\s*(.+?)\s*\])?$/, g = /^\s*\(*\s*type\s*:\s*(.+?)\s*\)*\s*$/, h = /\(|\)|'/, i = { contain: 1, cover: 1 }, j = function (a) { var b = c.gW(a, a.parentNode); return (!a._lazysizesWidth || b > a._lazysizesWidth) && (a._lazysizesWidth = b), a._lazysizesWidth }, k = function (a) { var b; return b = (getComputedStyle(a) || { getPropertyValue: function () { } }).getPropertyValue("background-size"), !i[b] && i[a.style.backgroundSize] && (b = a.style.backgroundSize), b }, l = function (a, b) { if (b) { var c = b.match(g); c && c[1] ? a.setAttribute("type", c[1]) : a.setAttribute("media", lazySizesConfig.customMedia[b] || b) } }, m = function (a, c, g) { var h = b.createElement("picture"), i = c.getAttribute(lazySizesConfig.sizesAttr), j = c.getAttribute("data-ratio"), k = c.getAttribute("data-optimumx"); c._lazybgset && c._lazybgset.parentNode == c && c.removeChild(c._lazybgset), Object.defineProperty(g, "_lazybgset", { value: c, writable: !0 }), Object.defineProperty(c, "_lazybgset", { value: h, writable: !0 }), a = a.replace(d, " ").split(e), h.style.display = "none", g.className = lazySizesConfig.lazyClass, 1 != a.length || i || (i = "auto"), a.forEach(function (a) { var c, d = b.createElement("source"); i && "auto" != i && d.setAttribute("sizes", i), (c = a.match(f)) ? (d.setAttribute(lazySizesConfig.srcsetAttr, c[1]), l(d, c[2]), l(d, c[3])) : d.setAttribute(lazySizesConfig.srcsetAttr, a), h.appendChild(d) }), i && (g.setAttribute(lazySizesConfig.sizesAttr, i), c.removeAttribute(lazySizesConfig.sizesAttr), c.removeAttribute("sizes")), k && g.setAttribute("data-optimumx", k), j && g.setAttribute("data-ratio", j), h.appendChild(g), c.appendChild(h) }, n = function (a) { if (a.target._lazybgset) { var b = a.target, d = b._lazybgset, e = b.currentSrc || b.src; if (e) { var f = c.fire(d, "bgsetproxy", { src: e, useSrc: h.test(e) ? JSON.stringify(e) : e }); f.defaultPrevented || (d.style.backgroundImage = "url(" + f.detail.useSrc + ")") } b._lazybgsetLoading && (c.fire(d, "_lazyloaded", {}, !1, !0), delete b._lazybgsetLoading) } }; addEventListener("lazybeforeunveil", function (a) { var d, e, f; !a.defaultPrevented && (d = a.target.getAttribute("data-bgset")) && (f = a.target, e = b.createElement("img"), e.alt = "", e._lazybgsetLoading = !0, a.detail.firesLoad = !0, m(d, f, e), setTimeout(function () { c.loader.unveil(e), c.rAF(function () { c.fire(e, "_lazyloaded", {}, !0, !0), e.complete && n({ target: e }) }) })) }), b.addEventListener("load", n, !0), a.addEventListener("lazybeforesizes", function (a) { if (a.detail.instance == c && a.target._lazybgset && a.detail.dataAttr) { var b = a.target._lazybgset, d = k(b); i[d] && (a.target._lazysizesParentFit = d, c.rAF(function () { a.target.setAttribute("data-parent-fit", d), a.target._lazysizesParentFit && delete a.target._lazysizesParentFit })) } }, !0), b.documentElement.addEventListener("lazybeforesizes", function (a) { !a.defaultPrevented && a.target._lazybgset && a.detail.instance == c && (a.detail.width = j(a.target._lazybgset)) }) } });

I also have two snippets of code within the <head> in my theme.liquid
- Line 25: <link rel="preload" href="{{ 'lazysizes.js' | asset_url }}" as="script">
- Line 153: <script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>

The code you gave for the desktop-mobile-banner.liquid function has "hidden-mobile" or "hidden-desktop" as shown:

<a href="{{ section.settings.banner_link }}">
<img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
</a>

So I just added "lazyload" to that which looks like this:

<a href="{{ section.settings.banner_link }}">
<img class="hidden-mobile""lazyload" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop""lazyload" src="{{ section.settings.mobile_image | img_url: "master" }}">
</a>

Is this the correct way to implement lazy loading for these images?

Much appreciated!

Brittany Witt
0 Likes
Philippa1
New Member
1 0 0

Hi Ninthony! This all works great for me, thank you so much! Just wondering if there was any way to make these images clickable? Cheers!

0 Likes
Ninthony
Shopify Partner
2175 322 865

On page 6 I posted a version you can add a link to, be sure to use the full path if trying to link outside of the website: https://www.google.com -- not www.google.com as this will take you to www.your-store.myshopify.com/www.google.com -- otherwise you can use relative links if for your website (/products/your-product  or /collections/your-collection/products/your-product).

<style>
.banner-container img{
  width: 100%;
}
.hidden-mobile {
  display: none;
}
.hidden-desktop {
  display: block;
}
@media (min-width: 767px){
  .hidden-mobile {
    display: block;
  }
  .hidden-desktop {
    display: none;
  }
}
</style>
{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
<div class="banner-container">
  <a href="{{ section.settings.banner_link }}">
  <img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
  <img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
  </a>
</div>
{% endif %}

{% schema %}
{
"name": "Desktop Mobile Banner",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "image_picker",
"label": "Desktop Image",
"id": "desktop_image"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "image_picker",
"label": "Mobile Image",
"id": "mobile_image"
},
{
"type": "text",
"label": "Banner Link",
"id": "banner_link"
}
],
"presets": [
{
"name": "Desktop Mobile Banner",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
SarahCarrington
New Member
2 0 0

Hiya @Ninthony 

 

I'm trying to do this on the Testament theme https://themes.shopify.com/themes/testament/styles/genesis

 

Do you think it's possible to do for this theme?

 

I managed to following some of the instructions but I'm not the most code savvy!

 

Many thanks

Sarah

0 Likes
SarahCarrington
New Member
2 0 0

Hiya @Ninthony 

 

I seem to have got a bit further with this, trying to make the slideshow work on mobile but with the below code the desktop image previews above the mobile and I also get an element previewing at the bottom of the page. Are you able to help please?

 

{% render 'custom-content', page: page %}

<section class="index-section slideshow-section" data-section-id="{{ section.id }}" data-section-type="slideshow-section">
{% if section.settings.display_wide %}
{% else %}
<div class="row">
<div class="desktop-12 tablet-6 mobile-3">
{% endif %}

{%- assign slider_speed = section.settings.slider_speed | times: 1000 -%}
{% capture slideshow_config %}{
"wrapAround":true,
"dragThreshold":"15",
"pauseAutoPlayOnHover":false,
"autoPlay": {{ slider_speed }},
"fade": true,
"pageDots":{% if section.settings.pager == 'arrows' %}false{% else %}true{% endif %},
"prevNextButtons":{% if section.settings.pager == 'arrows' %}true{% else %}false{% endif %}
}{% endcapture %}

{% if section.blocks.size > 0 %}
<div class="slideshow flickity__section js-slideshow" id="slideshow--{{ section.id }}" data-flickity='{{ slideshow_config }}'>
{% for block in section.blocks %}
<div id="slide--{{ block.id }}" data-block-id="{{ block.id }}" class="slide--{{ block.id }} slideshow__slide{% if block.settings.image == blank %} slideshow__slide-onboard{% endif %}" data-slider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
{% if block.settings.link != blank and block.settings.button_text == blank %}<a href="{{ block.settings.link }}">{% endif %}
{% if block.settings.image != blank %}
<div class="slideshow__slide-desktop{% if block.settings.overlay %} overlay{% endif %}">
{% render 'basic-responsive-image', type: block.settings.image %}
<noscript>
<img src="{{ block.settings.image | img_url: '1024x' }}" alt="{{ block.settings.image.alt | escape }}" class="slideshow__image slideshow__image--{{ block.id }}">
</noscript>
</div>
{% endif %}
{% if block.settings.link != blank and block.settings.button_text == blank %}</a>{% endif %}
{% if block.settings.image == blank %}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{%- assign placeholder = 'lifestyle-' | append: current -%}
{{ placeholder | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if block.settings.heading == blank and block.settings.subheading == blank and block.settings.button_text == blank and block.settings.second_button_text == blank %}
{% assign hide_caption = true %}
{% endif %}
{% unless hide_caption %}
<div class="slideshow__caption slide-{{ block.id }}">
<div class="slideshow__caption-wrapper">
{% if block.settings.heading != blank %}
<h2 class="slideshow__title">{{ block.settings.heading | escape }}</h2>
{% endif %}
{% if block.settings.subheading != blank %}
{{ block.settings.subheading }}
{% endif %}
{% if block.settings.button_text != blank and block.settings.link != blank %}
<div class="slideshow__btn-wrapper">
<a href="{{ block.settings.link }}">{{ block.settings.button_text | escape }}</a>
</div>
{% endif %}
{% if block.settings.second_button_text != blank and block.settings.second_link != blank %}
<div class="slideshow__btn-wrapper">
<a href="{{ block.settings.second_link }}">{{ block.settings.second_button_text | escape }}</a>
</div>
{% endif %}
</div>
</div>
{% endunless %}
<style>
.slideshow__caption.slide-{{ block.id }} .slideshow__caption-wrapper {
{% assign bg_color = block.settings.caption_background %}
{% assign number = block.settings.caption_background_opacity %}
{% assign caption_background_opacity = number | divided_by: 100.0 %}
{% if block.settings.caption_background == 'rgba(0,0,0,0)' %}
background: transparent;
{% else %}
background: {{ bg_color | color_modify: 'alpha', caption_background_opacity }};
{% endif %}
text-align: {{ block.settings.text_align }};
}
.slideshow__caption.slide-{{ block.id }} h2.slideshow__title,
.slideshow__caption.slide-{{ block.id }} p {
color: {{ block.settings.slide_text_color }};
}
.slideshow__caption.slide-{{ block.id }} .slideshow__btn-wrapper a {
color: {{ block.settings.cta_color }};
background: {{ block.settings.cta_background }};
border: 1px solid {{ block.settings.cta_background }};
}
.slideshow__caption.slide-{{ block.id }} .slideshow__btn-wrapper a:hover {
color: {{ block.settings.cta_background }};
}
.slideshow__caption.slide-{{ block.id }} {
top: {{ block.settings.caption_vertical }}%;
left: {{ block.settings.caption_horizontal }}%;
-webkit-transform: translate(-{{ block.settings.caption_horizontal }}%, -{{ block.settings.caption_vertical }}%);
-ms-transform: translate(-{{ block.settings.caption_horizontal }}%, -{{ block.settings.caption_vertical }}%);
-moz-transform: translate(-{{ block.settings.caption_horizontal }}%, -{{ block.settings.caption_vertical }}%);
-o-transform: translate(-{{ block.settings.caption_horizontal }}%, -{{ block.settings.caption_vertical }}%);
transform: translate(-{{ block.settings.caption_horizontal }}%, -{{ block.settings.caption_vertical }}%);
}
@media screen and (max-width: 740px) {
{%- assign mobile_image = block.settings.mobile_image -%}
{% assign image_box_ratio = mobile_image.height | append: ".0" | times: 1 | divided_by: mobile_image.width | times: 100 | append: "%" %}

{% if mobile_image != blank %}
.slide--{{ block.id }} {
background-image: url('{{ mobile_image | img_url: '600x' }}') !important;
opacity: 1;
{% if block.settings.caption_below %}
padding-bottom: 0 !important;
{% else %}
padding-bottom: {{ image_box_ratio }} !important;
{% endif %}
background-size: contain;
bacground-position: top center;
background-repeat: no-repeat;
}
.slide--{{ block.id }} > a {
display: block;
width: 100%;
padding-bottom: 100%;
position: absolute;
top: 0;
height: 100%;
}
.slide--{{ block.id }} .slideshow__slide-desktop {
display: none;
}
{% else %}
.slide--{{ block.id }} .slideshow__slide-desktop .box-ratio {
padding-bottom: 550px !important;
}
.slide--{{ block.id }} .slideshow__slide-desktop img {
object-fit: cover;
object-position: center;
height: 550px !important;
}
.slide--{{ block.id }} .slideshow__slide-desktop {
display: block;
}
{% endif %}
{% if block.settings.caption_below %}
.slideshow__slide .slideshow__caption.slide-{{ block.id }} {
position: relative;
width: 100%;
{% if mobile_image != blank %}
margin-top: {{ image_box_ratio }};
{% endif %}
top: unset;
left: unset;
transform: translate(0, 0);
}
.slideshow__slide .slideshow__caption.slide-{{ block.id }} .slideshow__caption-wrapper {
width: 100%;
}
{% endif %}
{% if block.settings.hide_caption_background %}
.slideshow__caption.slide-{{ block.id }} .slideshow__caption-wrapper {
background: none;
}
{% endif %}
}
</style>
</div>
{% endfor %}
</div>
{% elsif section.blocks.size == 0 %}
{% render 'no-blocks' %}
{% endif %}

{% unless section.settings.display_wide %}</div></div>{% endunless %}


<style>
#slideshow--{{ section.id }} .slideshow__caption h2.slideshow__title {
font-size: {{ section.settings.slide_heading_size }}px;
}
#slideshow--{{ section.id }} .slideshow__caption p {
font-size: {{ section.settings.subheading_size }}px;
}
#slideshow--{{ section.id }} .slideshow__btn-wrapper a {
font-size: {{ section.settings.cta_size }}px;
}
</style>

</section>
<div class="clear"></div>


{% schema %}
{
"name": "Custom page two",
"max_blocks": 40,
"settings": [
{
"type": "range",
"id": "section_spacing",
"min": 0,
"max": 80,
"step": 5,
"unit": "px",
"label": "Space between each block",
"default": 40
},
{
"type": "range",
"id": "section_heading_size",
"min": 13,
"max": 48,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 20
}
],
"blocks": [
{
"type": "page_title",
"name": "Page Title",
"limit": 1,
"settings": [
{
"type": "select",
"id": "text_align",
"label": "Heading alignment",
"default": "center",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
]
},
{
"type": "range",
"id": "block_padding",
"min": 0,
"max": 80,
"step": 5,
"unit": "px",
"label": "Add padding to the top and bottom of content within this block",
"default": 15
}
]
},
{
"type": "page_content",
"name": "Page Content",
"limit": 1,
"settings": [
{
"type": "select",
"id": "text_align",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
]
},
{
"type": "range",
"id": "max_width",
"min": 50,
"max": 100,
"step": 5,
"unit": "%",
"label": "Content width less than 100% width will center on the page",
"default": 100
},
{
"type": "range",
"id": "block_padding",
"min": 0,
"max": 80,
"step": 5,
"unit": "px",
"label": "Add padding to the top and bottom of content within this block",
"default": 15
}
]
},
{
"type": "page_contact_form",
"name": "Contact Form",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Contact Us"
},
{
"type": "select",
"id": "text_align",
"label": "Heading alignment",
"default": "left",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
]
},
{
"type": "range",
"id": "max_width",
"min": 50,
"max": 100,
"step": 5,
"unit": "%",
"label": "Content width less than 100% width will center on the page",
"default": 100
},
{
"type": "range",
"id": "block_padding",
"min": 0,
"max": 80,
"step": 5,
"unit": "px",
"label": "Add padding to the top and bottom of content within this block",
"default": 15
},
{
"type": "checkbox",
"id": "cf_show_first_name",
"label": "Show first name",
"default": true
},
{
"type": "checkbox",
"id": "cf_show_last_name",
"label": "Show last name",
"default": true
},
{
"type": "checkbox",
"id": "cf_show_company_name",
"label": "Show company name",
"default": true
},
{
"type": "checkbox",
"id": "cf_show_address",
"label": "Show address",
"default": true
},
{
"type": "checkbox",
"id": "cf_show_website_url",
"label": "Show website url",
"default": true
},
{
"type": "checkbox",
"id": "cf_show_phone",
"label": "Show phone number",
"default": true
},
{
"type": "checkbox",
"id": "cf_show_subject",
"label": "Show subject",
"default": true
},
{
"type": "header",
"content": "Custom Field One"
},
{
"type": "checkbox",
"id": "cf_show_custom_field_one",
"label": "Show custom field one",
"default": false
},
{
"type": "text",
"id": "cf_custom_field_one",
"label": "Placeholder",
"default": "Custom Field One"
},
{
"type": "select",
"id": "cf_custom_field_one_type",
"label": "Type",
"default": "input",
"options": [
{
"value": "textarea",
"label": "Multiple line text"
},
{
"value": "input",
"label": "Single line text"
}
]
},
{
"type": "header",
"content": "Custom Field Two"
},
{
"type": "checkbox",
"id": "cf_show_custom_field_two",
"label": "Show custom field two",
"default": false
},
{
"type": "text",
"id": "cf_custom_field_two",
"label": "Placeholder",
"default": "Custom Field Two"
},
{
"type": "select",
"id": "cf_custom_field_two_type",
"label": "Type",
"default": "input",
"options": [
{
"value": "textarea",
"label": "Multiple line text"
},
{
"value": "input",
"label": "Single line text"
}
]
}
]
},
{
"type": "accordion",
"name": "Accordion",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Accordion"
},
{
"type": "select",
"id": "text_align",
"label": "Heading alignment",
"default": "left",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
]
},
{
"type": "range",
"id": "max_width",
"min": 50,
"max": 100,
"step": 5,
"unit": "%",
"label": "Content width less than 100% width will center on the page",
"default": 100
},
{
"type": "range",
"id": "block_padding",
"min": 0,
"max": 80,
"step": 5,
"unit": "px",
"label": "Add padding to the top and bottom of content within this block",
"default": 15
},
{
"type": "checkbox",
"id": "allow_multiple",
"label": "Allow multiple accordions open at one time",
"default": false
},
{
"type": "text",
"id": "ac_heading_1",
"label": "Item 1 Heading",
"default": "Item 1"
},
{
"type": "richtext",
"id": "ac_content_1",
"label": "Item 1 Content",
"default": "<p>Description and content for Item 1.</p>"
},
{
"type": "text",
"id": "ac_heading_2",
"label": "Item 2 Heading",
"default": "Item 2"
},
{
"type": "richtext",
"id": "ac_content_2",
"label": "Item 2 Content",
"default": "<p>Description and content for Item 2.</p>"
},
{
"type": "text",
"id": "ac_heading_3",
"label": "Item 3 Heading",
"default": "Item 3"
},
{
"type": "richtext",
"id": "ac_content_3",
"label": "Item 3 Content",
"default": "<p>Description and content for Item 3.</p>"
},
{
"type": "text",
"id": "ac_heading_4",
"label": "Item 4 Heading",
"default": "Item 4"
},
{
"type": "richtext",
"id": "ac_content_4",
"label": "Item 4 Content",
"default": "<p>Description and content for Item 4.</p>"
},
{
"type": "text",
"id": "ac_heading_5",
"label": "Item 5 Heading",
"default": "Item 5"
},
{
"type": "richtext",
"id": "ac_content_5",
"label": "Item 5 Content",
"default": "<p>Description and content for Item 5.</p>"
},
{
"type": "text",
"id": "ac_heading_6",
"label": "Item 6 Heading",
"default": "Item 6"
},
{
"type": "richtext",
"id": "ac_content_6",
"label": "Item 6 Content",
"default": "<p>Description and content for Item 6.</p>"
},
{
"type": "text",
"id": "ac_heading_7",
"label": "Item 7 Heading",
"default": "Item 7"
},
{
"type": "richtext",
"id": "ac_content_7",
"label": "Item 7 Content",
"default": "<p>Description and content for Item 7.</p>"
},
{
"type": "text",
"id": "ac_heading_8",
"label": "Item 8 Heading",
"default": "Item 8"
},
{
"type": "richtext",
"id": "ac_content_8",
"label": "Item 8 Content",
"default": "<p>Description and content for Item 8.</p>"
},
{
"type": "text",
"id": "ac_heading_9",
"label": "Item 9 Heading",
"default": "Item 9"
},
{
"type": "richtext",
"id": "ac_content_9",
"label": "Item 9 Content",
"default": "<p>Description and content for Item 9.</p>"
},
{
"type": "text",
"id": "ac_heading_10",
"label": "Item 10 Heading",
"default": "Item 10"
},
{
"type": "richtext",
"id": "ac_content_10",
"label": "Item 10 Content",
"default": "<p>Description and content for Item 10.</p>"
}
]
},
{
"type": "rich_text",
"name": "Rich Text",
"settings": [
{
"type": "text",
"id": "rt_heading",
"label": "Heading",
"default": "Welcome"
},
{
"type": "richtext",
"id": "rt_text",
"label": "Text",
"default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
},
{
"type": "select",
"id": "text_align",
"label": "Text alignment",
"default": "center",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
]
},
{
"type": "range",
"id": "max_width",
"min": 50,
"max": 100,
"step": 5,
"unit": "%",
"label": "Content width less than 100% width will center on the page",
"default": 60
}
]
},
{
"type": "slideshow",
"name": "Slideshow",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "This block controls the on page position and controls of a slideshow, slideshow image blocks must be added or this section will remain empty."
},
{
"type": "checkbox",
"id": "full_width",
"label": "Enable full width"
},
{
"type": "range",
"id": "slider_speed",
"min": 3,
"max": 10,
"step": 1,
"label": "Slideshow speed (seconds)",
"default": 5
},
{
"type": "select",
"id": "pager",
"label": "Navigation style",
"options": [
{
"value": "dots",
"label": "Dots"
},
{
"value": "arrows",
"label": "Arrows"
}
]
},
{
"type": "header",
"content": "Slideshow caption text"
},
{
"type": "range",
"id": "slide_heading_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 22
},
{
"type": "range",
"id": "subheading_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Subheading size",
"default": 14
},
{
"type": "range",
"id": "cta_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Button text size",
"default": 14
}
]
},
{
"type": "slideshow_image",
"name": "Slideshow image",
"settings": [
{
"type": "paragraph",
"content": "This block will show images if a Slideshow block has been selected."
},
{
"type": "header",
"content": "Desktop settings"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1800px x 800px recommended"
},
{
"type": "select",
"id": "text_align",
"label": "Text align",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "range",
"id": "caption_horizontal_position",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Caption horizontal position",
"default": 50
},
{
"type": "range",
"id": "caption_vertical_position",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Caption vertical position",
"default": 50
},
{
"type": "header",
"content": "Mobile settings"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile Image",
"info":"800px x 1200px recommended"
},
{
"type": "checkbox",
"id": "hide_caption_background",
"label": "Hide caption background on mobile"
},
{
"type": "checkbox",
"id": "caption_below",
"label": "Position caption below image"
},
{
"type": "header",
"content": "Caption content"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Slide image title"
},
{
"type": "richtext",
"id": "subheading",
"label": "Subheading",
"default": "<p>Slide image subheading</p>"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Add a button",
"info": "Visible only if a link is chosen"
},
{
"type": "header",
"content": "Caption styles"
},
{
"type": "color",
"id": "slide_text_color",
"label": "Heading and subheading",
"default": "#000000"
},
{
"type": "color",
"id": "cta_color",
"label": "Button text",
"default": "#ffffff"
},
{
"type": "color",
"id": "cta_background",
"label": "Button background",
"default": "#000000"
},
{
"type": "color",
"id": "caption_background",
"label": "Caption background",
"default": "transparent"
},
{
"type": "range",
"id": "caption_background_opacity",
"min": 10,
"max": 100,
"step": 10,
"unit": "%",
"label": "Caption background opacity",
"default": 20
}
]
},
{
"type": "image_text_overlay",
"name": "Image w/Text Overlay",
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "Enable full width",
"default":true
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_height",
"min": 300,
"max": 700,
"step": 100,
"label": "Desktop section height",
"default": 400
},
{
"type": "range",
"id": "mobile_image_height",
"min": 200,
"max": 600,
"step": 100,
"label": "Mobile section height",
"default": 400
},
{
"type": "header",
"content": "Overlay Caption"
},
{
"type": "range",
"id": "horizontal_position",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Horizontal position",
"default": 50
},
{
"type": "range",
"id": "vertical_position",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Vertical position",
"default": 50
},
{
"type": "select",
"id": "text_align",
"label": "Text align",
"default":"center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "header",
"content": "Overlay Heading"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Image with text overlay"
},
{
"type": "richtext",
"id": "subheading",
"label": "Text",
"default": "<p>Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.</p>"
},
{
"id": "button_text",
"type": "text",
"label": "Button text",
"default": "Add a button",
"info": "Visible only if a link is chosen"
},
{
"type": "url",
"id": "link",
"label": "Button link"
},
{
"type": "range",
"id": "heading_font_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 26
},
{
"type": "range",
"id": "subheading_font_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Text size",
"default": 16
},
{
"type": "color",
"id": "text_color",
"label": "Text color",
"default": "#000"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button text",
"default": "#fff"
},
{
"type": "color",
"id": "button_color",
"label": "Button background",
"default": "#000"
}
]
},
{
"type": "image_blocks",
"name": "Image gallery",
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "Enable full width"
},
{
"type": "header",
"content": "Image One"
},
{
"type": "image_picker",
"id": "image_1",
"label": "Image"
},
{
"type": "url",
"id": "link_1",
"label": "Link",
"info": "Optional"
},
{
"type": "text",
"id": "heading_1",
"label": "Heading",
"default": "Our collections"
},
{
"type": "text",
"id": "button_1",
"label": "Button text",
"default": "Explore"
},
{
"type": "color",
"id": "heading_color_1",
"label": "Heading color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_color_1",
"label": "Button color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_background_1",
"label": "Button background",
"default": "#000"
},
{
"type": "range",
"id": "size_1",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 24
},
{
"type": "select",
"id": "text_options_1",
"default": "on_image",
"options": [
{
"value": "on_image",
"label": "Over image"
},
{
"value": "below_image",
"label": "Below image"
}
],
"label": "Text position"
},
{
"type": "range",
"id": "vertical_position_1",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image vertical position",
"default": 12
},
{
"type": "range",
"id": "horizontal_position_1",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image horizontal position",
"default": 14
},
{
"type": "select",
"id": "align_text_1",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Centered"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "header",
"content": "Image Two"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image"
},
{
"type": "url",
"id": "link_2",
"label": "Link",
"info": "Optional"
},
{
"type": "text",
"id": "heading_2",
"label": "Heading",
"default": "Our collections"
},
{
"type": "text",
"id": "button_2",
"label": "Button text",
"default": "Explore"
},
{
"type": "color",
"id": "heading_color_2",
"label": "Heading color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_color_2",
"label": "Button color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_background_2",
"label": "Button background",
"default": "#000"
},
{
"type": "range",
"id": "size_2",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 24
},
{
"type": "select",
"id": "text_options_2",
"default": "on_image",
"options": [
{
"value": "on_image",
"label": "Over image"
},
{
"value": "below_image",
"label": "Below image"
}
],
"label": "Text position"
},
{
"type": "range",
"id": "vertical_position_2",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image vertical position",
"default": 12
},
{
"type": "range",
"id": "horizontal_position_2",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image horizontal position",
"default": 14
},
{
"type": "select",
"id": "align_text_2",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Centered"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "header",
"content": "Image Three"
},
{
"type": "image_picker",
"id": "image_3",
"label": "Image"
},
{
"type": "url",
"id": "link_3",
"label": "Link",
"info": "Optional"
},
{
"type": "text",
"id": "heading_3",
"label": "Heading",
"default": "Our collections"
},
{
"type": "text",
"id": "button_3",
"label": "Button text",
"default": "Explore"
},
{
"type": "color",
"id": "heading_color_3",
"label": "Heading color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_color_3",
"label": "Button color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_background_3",
"label": "Button background",
"default": "#000"
},
{
"type": "range",
"id": "size_3",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 24
},
{
"type": "select",
"id": "text_options_3",
"default": "on_image",
"options": [
{
"value": "on_image",
"label": "Over image"
},
{
"value": "below_image",
"label": "Below image"
}
],
"label": "Text position"
},
{
"type": "range",
"id": "vertical_position_3",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image vertical position",
"default": 12
},
{
"type": "range",
"id": "horizontal_position_3",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image horizontal position",
"default": 14
},
{
"type": "select",
"id": "align_text_3",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Centered"
},
{
"value": "right",
"label": "Right"
}
]
}
]
},
{
"type": "featured_collection",
"name": "Featured Collection",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Featured collections"
},
{
"id": "collection",
"type": "collection",
"label": "Collection"
},
{
"id": "carousel",
"type": "checkbox",
"label": "Display in carousel"
},
{
"type": "range",
"id": "grid",
"min": 2,
"max": 5,
"step": 1,
"label": "Product grid",
"default": 4
},
{
"type": "range",
"id": "limit",
"min": 4,
"max": 12,
"step": 1,
"label": "Products shown",
"default": 4
}
]
},
{
"type": "collection_list",
"name": "Collection List",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Featured collections"
},
{
"type": "select",
"id": "text_align",
"label": "Text alignment",
"default": "center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Centered"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "range",
"id": "cl_collections_per_row",
"min": 2,
"max": 4,
"step": 1,
"label": "Collections per row",
"default": 4
},
{
"type": "select",
"id": "cl_title_position",
"label": "Collection title position",
"options": [
{
"value": "below",
"label": "Below image"
},
{
"value": "floating",
"label": "Floating on image"
}
]
},
{
"type": "header",
"content": "Choose Collections"
},
{
"label": "Collection 1",
"id": "cl_collection_1",
"type": "collection"
},
{
"label": "Collection 2",
"id": "cl_collection_2",
"type": "collection"
},
{
"label": "Collection 3",
"id": "cl_collection_3",
"type": "collection"
},
{
"label": "Collection 4",
"id": "cl_collection_4",
"type": "collection"
}
]
},
{
"type": "featured_video",
"name": "Featured Video",
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "Enable full width"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Featured video"
},
{
"type": "select",
"id": "text_align",
"label": "Heading alignment",
"default": "center",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
]
},
{
"type": "video_url",
"id": "video_url",
"label": "YouTube or Vimeo link",
"accept": [
"youtube",
"vimeo"
]
}
]
},
{
"type": "newsletter_subscribe",
"name": "Newsletter Subscribe",
"settings": [
{
"type": "range",
"id": "max_width",
"min": 50,
"max": 100,
"step": 5,
"unit": "%",
"label": "Content width less than 100% width will center on the page",
"default": 100
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Subscribe to our newsletter"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading",
"default": "#000000"
},
{
"type": "richtext",
"id": "subheading",
"label": "Subheading",
"default": "<p>Signup for our newsletter to stay up to date on sales and events.</p>"
},
{
"type": "range",
"id": "subheading_font_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Subheading size",
"default": 16
},
{
"type": "color",
"id": "subheading_color",
"label": "Subheading",
"default": "#000"
},
{
"type": "paragraph",
"content": "Any customers who sign up will have an account created for them in Shopify. [View customers](/admin/customers?query=&accepts_marketing=1)"
}
]
}
],
"default": {
"blocks": [
{
"type": "image_text_overlay"
},
{
"type": "page_title"
},
{
"type": "page_content"
},
{
"type": "featured_collection"
},
{
"type": "rich_text"
},
{
"type": "image_blocks"
}
]
}
}
{% endschema %}

0 Likes
ShopOwner28
Tourist
5 0 5
Click to expand...
Hi there, how would you possibly add a shop all button on the custom desktop image?
0 Likes
6clojas
New Member
1 0 1

Hi Ninthony, 

Please can you give me your email? Desperately need help fixing my code on my website. My email is jayclosel@gmail.com 

 

goldensocksclub
Tourist
5 0 1

Hello, Im trying to get the same thing done on my website. As you said the only thing inside my index.liquid is "{{ content_for_index }}"

 

I added the code to the file but its not working for me

NATURALHEIR
New Member
2 0 1

HI

MY PHOTOS LOOK GOOD IN MOBILE MODE BUT IN DESKTOP THEY LOOK TERRIBLE. PLEASE HELP!