Liv W

#1. Current code

I’m not sure with this code, I see it will stop working after update, but I think site should be fine without this code, but if you have problem after update, you can message me.

.ProductItem-gallery-slides:before {
    padding-bottom: 100% !important
}

#2. Current code

(code will change product thumbnails size)

button.ProductItem-gallery-thumbnails-item.loaded {
    width: 75px !important;
    height: 75px !important
}

New code

button.ProductItem-gallery-thumbnails-item.loaded {
    width: 75px !important;
    height: 75px !important
}
button.product-gallery-thumbnails-item {
    width: 75px !important;
    height: 75px !important 
}

 

#3. Current code

section#pdp {
    padding-top: 10px !important
}

section.products.collection-content-wrapper.products-list {
    padding-top: 100px !important
}

New code should be

section#pdp {
    padding-top: 10px !important
}
section.products.collection-content-wrapper.products-list {
    padding-top: 100px !important
}
div.product-detail {
    padding-top: 10px !important;
}
div.product-list {
    padding-top: 100px !important;
}

#4. Current code

It will stop working after update, but site should be fine without this code after update. After update, you will see an option to align Product Detail to top or center (align top = use code)

section.product-details.ProductItem-details {
    padding-top: 10px !important
}

#5. Current code

button.product-item-gallery-carousel-control {
    display: none !important
}

New code

button.product-item-gallery-carousel-control {
    display: none !important;
}
button.product-gallery-carousel-control {
    display: none !important;
}

#6. Current code

@media screen and (min-width: 768px) {
    .ProductItem-gallery {
        width:60% !important
    }

    section.product-details.ProductItem-details {
        width: 40% !important
    }
}

New code

@media screen and (min-width: 768px) {
    .ProductItem-gallery {
        width:60% !important
    }

    section.product-details.ProductItem-details {
        width: 40% !important
    }
}
@media screen and (min-width: 768px) {
    .product-gallery {
        width:60% !important;
    }
    .product-meta {
        width: 40% !important
    }
}