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
				
					<div class="my_custom_code_snipest" style="display: none;" data-param-name="{{ slider_images }}"></div>
<script>
    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 = $(`<span id="designRoom">`);
                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 `<video style="min-width: 100%; min-height: 80vh;max-width: 100%; max-height: 80vh; object-fit: cover"
class="video-js vjs-default-skin styleroom-video" id="styleroom-video-modal" autoPlay loop muted
           crossOrigin="anonymous" preload="auto" controls playsInline poster="${thumbnail}" data-setup="{}">
        <source src="${videoUrl}" type="application/x-mpegURL"/>
    </video>`;
            }

            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 <= 4) {
                    $(".slider-shopify").addClass("slick-track-less-than-3-prod");
                } else {
                    $(".slider-shopify").removeClass("slick-track-less-than-3-prod");
                }

                roomProducts.forEach((productResp) => {
                    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 = `
          <div style="background-image: url(${product.image.src});"  class="styleroom-image-div" id="${divId}"></div>
        `;
                    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 = `<span style="color: red !important;"><b>${getFormattedPrice(currentProd.price)}</b></span> <span class="text-decoration-line-through"> ${getFormattedPrice(currentProd.compare_at_price)}</span>`;
                        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 = `
            <div class="modal-content-view">
              <div class="mobile-model-product-img-container">
                <a href="/products/${product.handle}">
                  <img decoding="async" src="${imgSrc ? imgSrc : product.image.src}" class="modal-image-div" alt="product" />
                </a>
              </div>
              <div class="modal-text-div mobile-product-modal-text">
                <div style="width: 100%"><p class="styleroom-card-title mobile-product-title-text truncate-text">${product.title}</p></div>
                <div style="width: 100%"><p class="styleroom-card-price mt-3 ">${priceIsDiscounted ? priceDiscountedHtml : `<span> ${getFormattedPrice(currentProd.price)} </span>`}</p></div>
                <select class="form-select" style="${product.variants[0].title === "Default Title" || isSingleOptionSoldOut ? "display: none;" : ""}">
                ${product.variants.map((variant) => {
                            isSoldOut = variant.inventory_quantity < 1;
                            return `
                        <option value="${variant.title}" ${selectedVariant &#038;&#038; selectedVariant === variant.title ? "selected" : ""} ${isSoldOut ? "disabled" : ""}>
                            ${variant.title}${isSoldOut ? ` (Sold Out)` : ""}
                        </option>
                    `;
                        }).join("")}
                </select>
                ${isSingleOptionSoldOut ? "Sold Out" : quantityHtml}
                <button class="styleroom-cart-btn" ${isSingleOptionSoldOut ? "disabled" : ""} data-product-id="${product.id}" onClick="addtocartfun(${selectedVariantId ? selectedVariantId : product.variants[0].id},${roomId}, ${product.id} , this)">${btn_text}</button>
              </div>
            </div>
          `;

                        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 < max) ? +input.value + 1 : max;
                            });
                            subtract.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;
                            });
                            const options = this.getElementsByTagName("option");
                            for (let i = 0; i < options.length; i++) {
                                options[i].textContent = product.variants[i].title === "Default Title" ? "Custom Title" : product.variants[i].title;
                            }
                            updateModalContent(selectVariantImage.src, selectedVariant.id, selectedVariant.price, selectedVariant.title, selectedVariant);
                        }
                    }

                    // Add a click event listener to the div element
                    divElement.addEventListener("click", function (e) {

                        const modalElement = document.getElementById("exampleModal");
                        const modal = new bootstrap.Modal(modalElement);
                        modal.show();
                        const currentVideo = $(document).find("#videoModal video")
                        if (currentVideo.length) {
                            currentVideo.get(0).pause();
                        }
                        modalElement.addEventListener("hidden.bs.modal", () => {
                            if (currentVideo.length) {
                                currentVideo.get(0).play();
                            }
                        });
                        // Load initial modal content
                        updateModalContent();
                    });
                });

                $(".slider-shopify").slick({
                    dots: true,
                    speed: 300,
                    arrows: true,
                    nextArrow: `<svg class="prod-slider-next"><path class="prod-next-path" d="M0 0 L30 32 L60 0"></path></svg>`,
                    prevArrow: `<svg class="prod-slider-prev"><path class="prod-prev-path" d="M0 0 L30 32 L60 0"></path></svg>`,
                    slidesToShow: 4,
                    slidesToScroll: 4,
                    margin: 10,
                    responsive: [
                        {
                            breakpoint: 600,
                            settings: {
                                slidesToShow: 4,
                                slidesToScroll: 4,
                            }
                        },
                        {
                            breakpoint: 300,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2,
                            }
                        },
                        {
                            breakpoint: 200,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1,
                            }
                        }
                    ]
                });
            }

            async function addMainSliderEvents() {
                $(document).on("click", ".slider-container-inner .slick-slide", function (e) {

                    const roomData = $(e.currentTarget).data("room")
                    const roomURL = $(e.currentTarget).data("room-url")
                    if ($(window).width() <= 600 &#038;&#038; roomURL) {
                        window.open(roomURL, "_self");
                    } else {
                        $("#videoModal").find(".modal-body .video-container").html(addVideoHtml(roomData.video, roomData.thumbnail))
                        let video = $("#styleroom-video-modal");
                        videojs(video.get(0), {autoplay: true, loadingSpinner: false});
                        let endpointURL = `${getEndPointBaseUrl()}/getRoomProductsDetail`
                        getProductsHtmlForShopify(roomData.id, endpointURL).then(() => {
                            $(".slider-container").animate({opacity: 1})
                        });
                        bootstrap.Modal.getInstance("#videoModal").show()
                    }
                })
            }
            async function addModalHtml() {
                const modalBody = `
                                <div class="modal fade dpr-video-modal" id="videoModal" tabindex="-1">
                                     <div class="modal-dialog modal-dialog-centered">
                                          <div class="modal-content" style="background: transparent; border: none; position: relative;">
                                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                               <div class="modal-body" id="modal-body">
                                               <div class="video-container"></div>
                                                 <div class="slider-container-shopify"><div class="col slider-shopify" id="slider-card" style="display: none;"></div>
                                               </div>
                                          </div>
                                     </div>
                                </div>`;
                const productModalBody = ` <div class="modal fade dpr-product-modal" id="exampleModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body" id="product-modal-body"></div>
                </div>
            </div>
        </div>`;

                let tempContainer = document.createElement("div");
                tempContainer.innerHTML = modalBody;
                document.body.appendChild(tempContainer.firstElementChild);

                tempContainer = document.createElement("div");
                tempContainer.innerHTML = productModalBody;

                document.body.appendChild(tempContainer.firstElementChild);

                let newModalElem = document.getElementById("videoModal");
                let newModal = new bootstrap.Modal("#videoModal")

                newModalElem.addEventListener("hidden.bs.modal", async function () {
                    try {
                        $(".product-slide").css("pointer-events", "unset")
                        $(".modal-body .video-container").html("");
                        $(".slider-shopify").html("")
                        $(document).find("#videoModal .slider-container-shopify .slider-shopify").html("");

                    } catch (e) {
                        console.log("#videoModal hidden.bs.modal", e.message)
                    }
                });

                newModalElem.addEventListener("shown.bs.modal", async function () {
                    let shop = Shopify.shop;
                    const roomId = $(this).data("room-id");
                    let endpointURL = `${getEndPointBaseUrl()}/getRoomProductsDetail`
                    const productSlider = document.createElement("div");
                    productSlider.id = "product-slider";
                    const roomResp = await getProductsFromBackend(roomId, 1, 50, endpointURL);

                    if (roomResp) {
                        roomProducts = roomResp.data.map((room) => room.shopify);
                    }

                    if (Array.isArray(roomProducts)) {
                        roomProducts.forEach(product => {
                            const productImage = document.createElement("img");
                            productImage.classList.add("product-slider-image");
                            productImage.src = product.image.src;
                            productImage.alt = "product-slider-image"
                            productSlider.appendChild(productImage);

                            $(".product-slide").css("pointer-events", "unset")
                        });

                        if (roomProducts.length <= 4) {
                            $(productSlider).addClass("slick-track-less-than-3-prod");
                        } else {
                            $(productSlider).removeClass("slick-track-less-than-3-prod");
                        }

                        $(".slider-container-shopify .slider-shopify").append(productSlider);
                        let video = $("#styleroom-video-modal");

                        videojs(video.get(0), {autoplay: true, loadingSpinner: false});
                        $(productSlider).slick({
                            dots: true,
                            speed: 300,
                            arrows: true,
                            nextArrow: `<svg class="product-slider-next"><path class="product-next-path" d="M0 0 L30 32 L60 0"></path></svg>`,
                            preletrow: `<svg class="product-slider-prev"><path class="product-prev-path" d="M0 0 L30 32 L60 0"></path></svg>`,
                            slidesToShow: 5,
                            slidesToScroll: 5,
                            infinite: true,
                        });
                        $(productSlider).slick("refresh");
                    }
                })
            }
            await addModalHtml();
            await addMainSliderEvents();
            var div_count = 0;
            var paramElements = document.querySelectorAll(".my_custom_code_snipest");

            paramElements.forEach(function (paramElement) {

                var user_choice = "design-room-thumbs-picture";
                if (paramElement) {
                    user_choice = paramElement.getAttribute("data-param-name");
                }

                var buttonText = "";
                var adminStyles = "";
                var shop = Shopify.shop;
                var xhr_getRooms = new XMLHttpRequest();
                var endpointURL = `https://dpr-live.digitalproductrooms.com/getAllRoomsData?&shop=${shop}`;
                if (shop.includes("olga-dev")) {
                    endpointURL = `https://shopify-plugin-dev.vo-style.com/getAllRoomsData?&shop=${shop}`;
                }
                if (shop.includes("hassan-styleroom-store")) {
                    endpointURL = `https://shopify-plugin-staging.vo-style.com/getAllRoomsData?&shop=${shop}`;
                }
                xhr_getRooms.open("GET", endpointURL);
                xhr_getRooms.setRequestHeader("Content-Type", "application/json");
                xhr_getRooms.onload = function () {
                    if (xhr_getRooms.status === 200) {
                        var response = JSON.parse(xhr_getRooms.responseText);
                        initSlickCarousel(response, user_choice, paramElement).then();
                    }
                }
                xhr_getRooms.onerror = function () {
                    console.error("An error occurred while adding the room preview");
                };
                xhr_getRooms.send()

                async function initSlickCarousel(apiResponse, user_choice, paramElement) {
                    await initSLider(apiResponse, user_choice, paramElement);
                };
            });

            async function initSLider(apiResponse, user_choice, paramElement) {
                var buttonText = apiResponse.admin_btn_text;
                var adminStyles = apiResponse.admin_style;
                
                var slickImages = apiResponse.data.map(item => item.image);
                await addDesignRoom(apiResponse.shop_styles)
                // Check if a script element is found
                function insertAfter(referenceNode, newNode) {
                    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
                }

                const newDiv = document.createElement("div");
                newDiv.id = "slider-container-" + div_count;
                //assign class
                newDiv.classList.add("page-width");
                newDiv.classList.add("olga-slider-container");
                if (user_choice === "thumbnails") {
                    newDiv.classList.add("slider-container-thumbnail");
                }
                // Create the Slick Slider container
                const sliderContainer = document.createElement("div");
                sliderContainer.id = "slider-container-inner-" + div_count;
                sliderContainer.classList.add("slider-container-inner");

                newDiv.appendChild(sliderContainer);
                insertAfter(paramElement, newDiv)
                apiResponse.data.forEach((room, index) => {

                    // Create a slide div for each image
                    const slide = document.createElement("div");
                    slide.classList.add("styleroom-card_all");
                    // Set background image
                    if (user_choice === "thumbnails") {
                        slide.style.backgroundImage = `url(${room.thumbnail})`;
                        slide.classList.add("olga-thumbnail");
                    } else {
                        slide.style.backgroundImage = `url(${room.image})`;
                    }
                    slide.id = "slick-slide"
                    slide.setAttribute("data-room", JSON.stringify(room));
                    slide.setAttribute("data-room-url", room.room_url);
                    const buttonDiv = document.createElement("div");
                    buttonDiv.classList.add("styleroom-btn-div");
                    const roomName = document.createElement("p");
                    roomName.classList.add("styleroom-p");
                    roomName.textContent = room.name;

                    const roomButton = document.createElement("button");
                    roomButton.classList.add("styleroom-button");
                    roomButton.textContent = buttonText;
                    slide.appendChild(buttonDiv);
                    buttonDiv.appendChild(roomName);
                    buttonDiv.appendChild(roomButton);
                    // Set data attributes
                    slide.setAttribute("data-room-id", apiResponse.data[index].id);
                    slide.setAttribute("data-room-url", apiResponse.data[index].room_url);
                    slide.setAttribute("data-video-thumbnail", apiResponse.data[index].thumbnail);
                    sliderContainer.appendChild(slide);
                });
                if (slickImages.length > 0) {

                    $(sliderContainer).slick({
                        speed: 500,
                        arrows: true,
                        nextArrow: `<svg class="prod-slider-next"><path class="prod-next-path" d="M0 0 L30 32 L60 0"></path></svg>`,
                        prevArrow: `<svg class="prod-slider-prev"><path class="prod-prev-path" d="M0 0 L30 32 L60 0"></path></svg>`,
                        slidesToShow: 3,
                        slidesToScroll: 2,
                        infinite: true,
                    });

                    const dynamicStyles = document.createElement("style");
                    dynamicStyles.innerHTML = `
                                .dpr-loaded{
                                    overflow-x: hidden;
                                }
                                
                                .olga-slider-container .styleroom-card_all {
                                    padding: 1rem;
                                    background-size: cover;
                                    background-repeat: no-repeat;
                                    position: relative;
                                    background-position: center;
                                    cursor: pointer;
                                    padding-bottom: 8% !important;
                                }

                                .olga-slider-container .styleroom-btn-div{
                                    display: grid;
                                    position: absolute;
                                    bottom: 10px;
                                    width:100%;
                                    padding-top: 0;
                                    padding-bottom: 0;
                                    padding-left: 10px;
                                    padding-right: 10px;
                                }

                                .olga-slider-container .styleroom-card_all::before {
                                    content: "";
                                    display: block;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    bottom: 0;
                                    right: 0;
                                    background-color: rgba(0, 0, 0, 0.3);
                                    z-index: 1;
                                }

                                .olga-slider-container .prod-slider-next path.prod-next-path {
                                        stroke: lightgray;
                                        fill: transparent;
                                        stroke-width: 6px;
                                    }

                                .olga-slider-container .prod-slider-prev path.prod-prev-path {
                                        stroke: lightgray;
                                        fill: transparent;
                                        stroke-width: 6px;
                                    }

                                .olga-slider-container .slick-track {
                                    display: flex !important;
                                    gap: 5px !important;
                                }
                                
                                .olga-slider-container {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                }
                                .olga-slider-container .slider-container-inner {
                                    width: 90%;
                                }
                                
                                .olga-slider-container #slider-container-inner-${div_count} img {
                                    max-width: 100%;
                                    padding: 1px !important;
                                    max-height: 100px;
                                    cursor: pointer;
                                }
                                
                                .olga-slider-container .olga-thumbnail {
                                    aspect-ratio: 9 / 16;
                                }
                                
                                .olga-slider-container .slick-slide {
                                    min-height:300px !important;
                                    display: flex !important;
                                    justify-content: center !important;
                                }
                                .olga-slider-container .prod-slider-next {
                                    display: block;
                                    width: 60px;
                                    height: 72px;
                                    position: absolute;
                                    right: 0px;
                                    bottom: 40%;
                                    margin-right: -80px;
                                    transform: rotate(270deg);
                                    z-index: 100;
                                    zoom: 0.54;
                                    cursor: pointer;
                                }

                                .olga-slider-container .prod-slider-prev {
                                    display: block;
                                    width: 60px;
                                    height: 72px;
                                    position: absolute;
                                    left: 0;
                                    margin-left: -80px;
                                    bottom: 40%;
                                    transform: rotate(90deg);
                                    z-index: 100;
                                    zoom: 0.54;
                                    cursor: pointer;
                                }

                                .olga-slider-container .styleroom-p {
                                    letter-spacing: 0.2em;
                                    text-transform: uppercase;
                                    word-wrap: break-word;
                                    color: white;
                                    font-weight: 500;
                                    z-index: 2;
                                    line-height: 1;
                                    margin: 16px 0px;
                                }
                                .olga-slider-container .styleroom-button {
                                    border: none;
                                    padding: 10px;
                                    text-align: center;
                                    text-transform: uppercase;
                                    display: inline-block;
                                    cursor: pointer;
                                    padding: 10px 15px;
                                    letter-spacing: 0.2em;
                                    z-index: 2;
                                    width: fit-content
                                }
                                @media screen and (max-width: 768px) {
                                    .olga-slider-container .prod-slider-prev {
                                        zoom: 0.24;
                                    }
                                    
                                    .olga-slider-container .prod-slider-next {
                                        zoom: 0.24;
                                    }
                                    
                                    .olga-slider-container .olga-slider-container {
                                        height: 110px;
                                    }
                                    
                                    .olga-slider-container .slider-container-thumbnail {
                                        height: 190px;
                                    }
                                    .olga-slider-container .slick-slide {
                                        min-height:100px !important;
                                    }
                                }
                                @media screen and (max-width: 992px) {
                                    .olga-slider-container .slider-container-thumbnail {
                                        height: 340px;
                                    }
                                    .olga-slider-container .slick-slide {
                                        min-height:191px !important;
                                    }
                                }
                                .dpr-loaded .dpr-video-modal .btn-close{
                                        position: absolute;
                                        right: -10px;
                                        top: -10px;
                                        z-index: 5;
                                        background-color: white;
                                        border-radius: 50%;
                                        padding: 4px;
                                }
                                .dpr-loaded  .dpr-video-modal .modal-body{
                                    padding: 0;
                                }
                                .dpr-loaded  .modal-backdrop.show:empty{
                                    display: unset;
                                }
                                .dpr-loaded  .dpr-video-modal .styleroom-card{
                                    height: 120px;
                                    gap: 20px;
                                    background-color: transparent;
                                    display: flex !important;
                                    flex-direction: column;
                                    align-items: center;
                                    position: relative;
                                   
                                }
                                 .dpr-loaded  .dpr-video-modal .slick-slide div:empty{
                                      display: unset;
                                      height: 100% !important;
                                      width: 90% !important;
                                      background-color: #FFFFFF;
                                      border-radius: 8px;
                                      background-repeat: no-repeat;
                                      background-size: contain;
                                      background-position-y: center;
                                }
                                .dpr-loaded .dpr-video-modal .modal-dialog{
                                        position: relative;
                                        width: 100%;
                                        max-width: 378px;
                                }
                                .dpr-loaded .dpr-video-modal #slider-card{
                                      position: absolute;
                                      bottom: 10px;
                                      left: 0;
                                      width: 100%;
                                }
                                .dpr-loaded .dpr-video-modal #product-slider{
                                      display: none;
                                }
                                .dpr-loaded .dpr-video-modal .slick-track-less-than-3-prod .slick-track{
                                      float: right;
                                }

                                .dpr-loaded .dpr-video-modal .slick-track-less-than-3-prod .slick-dots{
                                      display: none;
                                }
                                .dpr-loaded .dpr-video-modal .slick-dots{
                                      padding: 0;
                                      margin-top: 7px;
                                      zoom: 0.6;
                                }
                                .dpr-loaded .dpr-video-modal .prod-slider-prev{
                                      display: block;
                                      width: 60px;
                                      height: 72px;
                                      position: absolute;
                                      left: -10px;
                                      top: 268px;
                                      transform: rotate(90deg);
                                      z-index: 100;
                                      zoom: 0.24;
                                      cursor: pointer;
                                }
                                .dpr-loaded .dpr-video-modal .prod-slider-next{
                                      display: block;
                                      width: 60px;
                                      height: 72px;
                                      position: absolute;
                                      right: -26px;
                                      top: 268px;
                                      transform: rotate(270deg);
                                      z-index: 100;
                                      zoom: 0.24;
                                      cursor: pointer;
                                }
                                .dpr-loaded .dpr-video-modal .slick-arrow path{
                                      stroke: #FFFFFF;
                                      fill: transparent;
                                      stroke-width: 6px;
                                }
                                .dpr-loaded .dpr-video-modal .prod-slider-next path.prod-next-path {
                                    stroke: #FFFFFF;
                                    fill: transparent;
                                    stroke-width: 6px;
                                }
                                .dpr-loaded .dpr-video-modal .slider-shopify{
                                    padding: 10px 14px;
                                }
                                .dpr-loaded .dpr-video-modal .styleroom-image-div{
                                    cursor: pointer;
                                }
                                .dpr-loaded .dpr-product-modal .modal-content {
                                    max-width: 356px;
                                }
                                .dpr-loaded .dpr-product-modal .modal-dialog {
                                    padding: 0 4px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                }
                                .dpr-loaded .dpr-product-modal .modal-image-div{
                                    height: 160px;
                                    width: 140px;
                                    object-fit: contain;
                                }
                                .dpr-loaded .dpr-product-modal .modal-content-view{
                                    display: flex;
                                    gap: 10px;
                                    width: 100%;
                                }
                                .dpr-loaded .dpr-product-modal  .modal-body{
                                    justify-content: center;
                                    display: flex;
                                }
                                .dpr-loaded .dpr-product-modal .mobile-product-modal-text .quantity-selector button {
                                    position: unset;
                                    bottom: unset;
                                    min-height: 18px;
                                    border: 0;
                                    padding: 4px;
                                }
                                
                                .dpr-loaded .dpr-product-modal .mobile-product-modal-text .quantity-selector .quantity-selector__input {
                                    border: 0;
                                    min-height: 20px;
                                }
                                
                                .dpr-loaded .dpr-product-modal .mobile-product-modal-text .quantity-selector svg path {
                                    fill: black !important;
                                }
                                
                                .dpr-loaded .dpr-product-modal .mobile-product-modal-text {
                                    padding-bottom: 20px;
                                }
                                
                                .dpr-loaded .dpr-product-modal .mobile-product-modal-text .quantity-selector {
                                    border: 1px solid #0b1d2a;
                                }
                                
                                /*  desktop product item */
                                .dpr-loaded .dpr-product-modal .desktop-model-product .quantity-selector button {
                                    position: unset;
                                    bottom: unset;
                                    min-height: 18px;
                                    border: 0;
                                    padding: 4px;
                                }
                                .dpr-loaded .dpr-product-modal .desktop-model-product .quantity-selector {
                                    min-height: 20px;
                                    border: 1px solid #0b1d2a;
                                }
                                
                                .dpr-loaded .dpr-product-modal .desktop-model-product .quantity-selector .quantity-selector__input {
                                    border: 0;
                                }
                                .dpr-loaded .dpr-product-modal .desktop-model-product .quantity-selector svg path {
                                    fill: black !important;
                                }
                                .dpr-loaded .dpr-product-modal .desktop-model-product {
                                    padding-bottom: 20px;
                                }
                                .dpr-loaded .dpr-product-modal .desktop-model-product.quantity-selector {
                                    border: 1px solid #0b1d2a;
                                }
                                .dpr-loaded .dpr-product-modal .desktop-model-product .quantity-selector .btn,
                                .dpr-loaded .dpr-product-modal .desktop-model-product .quantity-selector .btn:focus,
                                .dpr-loaded .dpr-product-modal .desktop-model-product .quantity-selector .btn:hover,
                                .dpr-loaded .dpr-product-modal .desktop-model-product .quantity-selector .quantity-selector__input,
                                .dpr-loaded .dpr-product-modal .desktop-model-product .quantity-selector .quantity-selector__input:focus,
                                .dpr-loaded .dpr-product-modal .desktop-model-product .quantity-selector .quantity-selector__input:hover {
                                    box-shadow: none;
                                }
                                .dpr-loaded .dpr-product-modal .styleroom-cart-btn{
                                        color: #fbf8f0 !important;
                                        background-color: #bd9712 !important;
                                        font-size: 14px !important;
                                        border: 1px solid transparent !important;
                                        font-family: Arial !important;
                                        cursor: pointer;
                                        letter-spacing: 0.2em;
                                        width: 100%;
                                        text-align: center;
                                        text-transform: uppercase;
                                        margin-top: auto;
                                }
                                .dpr-loaded .mobile-toast-container{
                                        width: 86px !important;
                                }
                                .dpr-loaded .mobile-toast.swal2-popup.swal2-toast{
                                      align-items: center;
                                      justify-content: center;
                                      overflow: hidden !important;
                                }
                                .dpr-loaded .mobile-toast-container .swal2-icon{
                                    zoom: 2 !important;
                                    margin: 0 !important;
                                }
                                .dpr-loaded  .mobile-toast.swal2-popup.swal2-toast .swal2-title{
                                        display: none !important;
                                        overflow: hidden !important;
                                }
                                    .dpr-loaded .mobile-toast.swal2-popup.swal2-toast {
                                        overflow: hidden !important;
                                    }
                                    
                                    .dpr-loaded .mobile-toast.mobile-toast-swal2-hide {
                                        overflow: hidden !important;
                                    }
                                    
                                    .dpr-loaded .mobile-toast.swal2-popup.swal2-toast .swal2-title {
                                        display: none !important;
                                        overflow: hidden !important;
                                    }
                                    
                                    .dpr-loaded .mobile-toast.swal2-popup.swal2-toast .swal2-html-container {
                                        display: none !important;
                                    }
                                    
                                    .dpr-loaded .mobile-toast-container {
                                        width: 86px !important;
                                    }
                                    
                                    .dpr-loaded .mobile-toast-container.swal2-hide {
                                        display: none;
                                    }
                                    
                                    .dpr-loaded .mobile-toast-container .swal2-icon {
                                        zoom: 2 !important;
                                        margin: 0 !important;
                                    }
                                    
                                    .dpr-loaded .mobile-toast-container .mobile-toast {
                                        align-items: center;
                                        justify-content: center;
                                    }

                                     @media screen and (max-width: 992px) {
                                    .slick-slide {
                                        min-height:191px !important;
                                    }
                                }
                              @media screen and (max-width: 500px) {
                                  .olga-slider-container:not(.slider-container-thumbnail), 
                                  .olga-slider-container:not(.slider-container-thumbnail) .slick-list,
                                  .olga-slider-container:not(.slider-container-thumbnail) .styleroom-card_all,
                                  .olga-slider-container:not(.slider-container-thumbnail) .styleroom-card_all::before  {
                                      height: 110px !important;
                                  }
                                  
                                  .olga-slider-container:not(.slider-container-thumbnail) .styleroom-btn-div  {
                                      bottom: 85px !important;
                                  }
                                
                                  .styleroom-btn-div button{
                                      display: none !important;
                                  }

                                  .styleroom-btn-div p{
                                      margin: 0 !important;
                                      overflow: hidden !important;
                                      display: -webkit-box !important;
                                      -webkit-line-clamp: 2 !important;
                                      -webkit-box-orient: vertical !important;
                                      font-size: calc(var(--font-heading-scale) * 1rem) !important;
                                  }

                              }

                              @media screen and (max-width: 325px) {
                                  .olga-slider-container:not(.slider-container-thumbnail), 
                                  .olga-slider-container:not(.slider-container-thumbnail) .slick-list,
                                  .olga-slider-container:not(.slider-container-thumbnail) .styleroom-card_all,
                                  .olga-slider-container:not(.slider-container-thumbnail) .styleroom-card_all::before  {
                                      height: 100px !important;
                                  }

                                  .olga-slider-container:not(.slider-container-thumbnail) .styleroom-btn-div  {
                                      bottom: 95px !important;
                                  }
                              } 
                            `;
                    if (adminStyles) {
                        var prefixedAdminStyles = adminStyles.replace(/\.\w+/g, (match) => `.olga-slider-container ${match}`);
                        const cleanedStyles = prefixedAdminStyles.substring(1, prefixedAdminStyles.length - 1);
                        dynamicStyles.innerHTML += cleanedStyles;
                    }
                  
                    document.head.appendChild(dynamicStyles);
                }
                div_count = div_count + 1;

            }

            scriptExecuted = true;
        }
    });
</script>

				
			
‘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’, slider
images: ‘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 Rooms
Snippet across the page

Ready to Get Started?

Fill in the form below to book a demo
Scroll to Top