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 && 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 && 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
