Snippet Add a Digital Product Rooms Snippet to your Home page Start by clicking on three-dot menu and select ‘edit code’ After click on the ‘Snippet’ and select ‘+Add a new snippet’ Add a file name ‘dpr-slider’ and click ‘done’ Now, when the snippet is created, simply ‘copy’ the code below Code [elementor-template id=”562″] var scriptExecuted = false; document.addEventListener("DOMContentLoaded", async function () { if (!document.body.classList.contains("dpr-loaded")) { document.body.classList.add("dpr-loaded") } else { return; } if (!scriptExecuted) { let newModal; function getEndPointBaseUrl() { const shop = window?.Shopify?.shop; let baseUrl = "https://dpr-live.digitalproductrooms.com"; if (shop.includes("olga-dev")) { baseUrl = `https://shopify-plugin-dev.vo-style.com`; } if (shop.includes("hassan-styleroom-store")) { baseUrl = `https://shopify-plugin-staging.vo-style.com`; } return baseUrl; } async function addDesignRoom(designRoom) { if($("#designRoom").length == 0){ const spanElement = $(``); spanElement.attr("data-designRoom", JSON.stringify(designRoom)) $("body").append(spanElement); } } function getDesignRoom() { return $("#designRoom").data("designroom"); } function loadStyles(link) { const styles = document.createElement("link"); styles.rel = "stylesheet"; styles.type = "text/css"; styles.href = link; document.head.appendChild(styles); return new Promise((res, rej) => { styles.onload = res; styles.onerror = rej; }); } function loadScript(link) { const script = document.createElement("script"); script.src = link; script.referrerPolicy = "no-referrer"; script.type = "text/javascript"; script.crossOrigin = "anonymous" document.head.appendChild(script); return new Promise((res, rej) => { script.onload = res; script.onerror = rej; }); } const scriptLinks = [ { type: "style", link: "https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css" }, { type: "style", link: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" }, { type: "style", link: "https://cdn.jsdelivr.net/npm/video.js@8.9.0/dist/video-js.min.css" }, { type: "style", link: `${getEndPointBaseUrl()}/assets/shopify-products-room-slider.css` }, { type: "style", link: `${getEndPointBaseUrl()}/assets/bootstrap-polaris/bootstrap-polaris.min.css` }, { type: "script", link: "https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js" }, { type: "script", link: "https://cdn.jsdelivr.net/npm/sweetalert2@11" }, { type: "script", link: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" }, { type: "script", link: "https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" }, { type: "script", link: "https://cdn.jsdelivr.net/npm/video.js@8.9.0/dist/video.min.js" }, { type: "script", link: "https://cdn.jsdelivr.net/npm/hls.js@1.5.0/dist/hls.min.js" } ] for (const script of scriptLinks) { if (script.type === "style") { await loadStyles(script.link) } else if (script.type === "script") { await loadScript(script.link) } } function addVideoHtml(videoUrl, thumbnail) { return ` `; } async function getProductsHtmlForShopify(roomId, endPointUrl = null) { const roomResp = await getProductsFromBackend(roomId, 1, 50, endPointUrl); const roomProducts = roomResp.data; $(".slider-shopify").empty(); $(".slider-shopify").show(); $(".slider-shopify").removeClass("slick-initialized slick-slider slick-dotted") if (roomProducts.length { const product = productResp.shopify if (product == null) { return; } const newCard = document.createElement("div"); newCard.classList.add("styleroom-card"); const divId = `modalTrigger_${product.handle}`; newCard.innerHTML = ` `; const slider = document.getElementById("slider-card"); slider.appendChild(newCard) const divElement = document.getElementById(divId); function updateModalContent(imgSrc, selectedVariantId, price, selectedVariant, selectedVariantObj) { let currentProd = selectedVariantObj ? selectedVariantObj : product.variants[0] const priceIsDiscounted = parseInt(currentProd.compare_at_price) >= parseInt(currentProd.price); const priceDiscountedHtml = `${getFormattedPrice(currentProd.price)} ${getFormattedPrice(currentProd.compare_at_price)}`; const modalContent = document.getElementById("product-modal-body"); let isSoldOut = false; const isSingleOptionSoldOut = product.variants.length === 1 && product.variants[0].inventory_quantity < 1; designsRoom = getDesignRoom() let btn_text = `${designsRoom.product_btn_text}`; const modalHTML = ` ${product.title} ${priceIsDiscounted ? priceDiscountedHtml : ` ${getFormattedPrice(currentProd.price)} `} ${product.variants.map((variant) => { isSoldOut = variant.inventory_quantity < 1; return ` ${variant.title}${isSoldOut ? ` (Sold Out)` : ""} `; }).join("")} ${isSingleOptionSoldOut ? "Sold Out" : quantityHtml} ${btn_text} `; modalContent.innerHTML = modalHTML; const selectElement = modalContent.querySelector("select.form-select"); // Attach the event listener to the select element selectElement.addEventListener("change", selectChangeHandler); // init quantity buttons let quantitySelectors = document.querySelectorAll(".quantity-selector"); quantitySelectors.forEach(function (selector) { let input = selector.querySelector(".quantity-selector__input"); let add = selector.querySelector(".quantity-selector__add"); let subtract = selector.querySelector(".quantity-selector__subtract"); let min = +input.getAttribute("min") || 0; let max = +input.getAttribute("max") || Infinity; add.addEventListener("click", function () { input.value = (+input.value min) ? input.value - 1 : min; }); }); } function selectChangeHandler() { let selectedVariant = product.variants.find(function (variant) { return variant.title === this.value; }, this); let selectedQuantity = product.variants.find(function (variant) { return variant.inventory_quantity === this.value; }, this); if (selectedVariant) { let selectVariantImage = product.images.find(function (image) { return image.id === selectedVariant.image_id; }); ‘Paste’ code below in the indicated placeholder Now, click ‘save’ and press ‘exit’ Congratulations! Your Snippet is created! After, go back to your Shopify Admin panel and select ‘Customize’ Add a new section component, we recommend you ‘Rich text’ element Remove all unnecessary components, just leave the title Edit title, give your Digital Product Rooms Snippet a name – ‘Discover Product Videos’ Now, click on ‘save’ and finally add the snippet elements named ‘Custom Liquid’ Edit ‘Custom Liquid’ by adding the following line of code {% render ‘dpr-slider’, sliderimages: ‘thumbnails’ %} in the indicated placeholder Finally, click on ‘save’ and give your Snippet a couple of seconds to appear. From the ‘Home page’ side bar, you can drag and drop your Digital Product RoomsSnippet across the page Ready to Get Started? Fill in the form below to book a demo get in touch