Graeme

#1. Browser tab show as “Store 1”

https://graeme-smallfield.squarespace.com/original-paintings?noredirect

#2. Current code

I guess this code will reduce Variant + Quantity height + change color/size of Product Arrows

@media screen and (max-width: 767px) {
    div.variant-select-wrapper {
        padding-top:5px !important;
        padding-bottom: 5px !important
    }

    input[type="number"] {
        padding-top: 5px !important;
        padding-bottom: 5px !important
    }

    button.product-item-gallery-carousel-control {
        background-color: #666 !important;
        width: 35px !important;
        min-width: unset !important;
        min-height: unset !important;
        align-items: center;
        justify-content: center
    }

    button.product-item-gallery-carousel-control.ProductItem-gallery-prev:after {
        position: relative;
        left: 5px
    }

    button.product-item-gallery-carousel-control.ProductItem-gallery-next:after {
        position: relative;
        right: 5px
    }

If you don’t use Quantity, Variant Dropdown, you can ignore it.

New code should be

/* code run on mobile only */
@media screen and (max-width: 767px) {
/* reduce variant height */
.variant-select-wrapper {
    min-height: unset !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
/* reduce quantity height - work without update */
    input[type="number"] {
        padding-top: 5px !important;
        padding-bottom: 5px !important
    }
/* product arrows */
button.product-gallery-carousel-control {
        background-color: #666 !important;
        width: 35px !important;
        min-width: unset !important;
        min-height: unset !important;
        align-items: center;
        justify-content: center
    }

button.product-gallery-carousel-control.product-gallery-prev:after {
        position: relative;
        left: 5px;
    }

button.product-gallery-carousel-control.product-gallery-next:after {
        position: relative;
        right: 5px
    }
}

#3. Current code

@media screen and (max-width: 767px) {
    body.view-item .products.collection-content-wrapper {
        padding-left:10px !important;
        padding-right: 10px !important
    }

    section.product-details.ProductItem-details {
        padding-left: 6vw !important;
        padding-right: 6vw !important
    }

    section.collection-type-products .ProductItem-details .ProductItem-details-excerpt {
        order: 2 !important
    }

    div.sqs-add-to-cart-button {
        padding: 10px 20px !important
    }

    .ProductItem-nav-breadcrumb {
        display: block !important
    }

    h1.ProductItem-details-title {
        margin-bottom: 0px !important
    }

    .ProductItem-details .ProductItem-product-price {
        margin-top: 0px !important;
        margin-bottom: 0px !important
    }

    .sold-out .sqs-add-to-cart-button-inner:before {
        display: block
    }
}

New code should be (there is a code, I don’t know…you can check it then let me know, I will check again and adjust it)

@media screen and (max-width: 767px) {
    /* set left right padding around product detail */
    body.view-item .product-detail > [data-product-detail-layout="simple"] {
        padding-left:10px !important;
        padding-right: 10px !important
    }
    /* increase space around product: title, price, add to cart, description.. */
    .product-meta {
        padding-left: 6vw !important;
        padding-right: 6vw !important
    }
    /* this code will move order of Product description, but i'm not sure what the position of the items should be? to able to adjust code */
    section.collection-type-products .ProductItem-details .ProductItem-details-excerpt {
        order: 2 !important
    }
    /* reduce add to cart height */
    button.sqs-add-to-cart-button {
        padding: 10px 20px !important
    }
    /* show breadcrumbs on mobile */
    .product-detail .product-nav {
        display: block !important
    }
    /* space under product name */
    h1.product-title {
        margin-bottom: 0px !important
    }
    /* space under above product price */
    .product-price {
        margin-top: 0px !important;
        margin-bottom: 0px !important
    }
    /* this code still work */
    .sold-out .sqs-add-to-cart-button-inner:before {
        display: block
    }
}

 

#4. Current code

@media only screen and (max-width: 640px) {
    .products.collection-content-wrapper .ProductItem-nav-breadcrumb-link {
        font-size:14px !important;
        color: #8f2626 !important
    }
}

New code

/* product detail page - mobile - breadcrumbs size and color */
@media only screen and (max-width: 640px) {
    a.product-nav-breadcrumb-link {
        font-size:14px !important;
        color: #8f2626 !important
    }
}

#5. Current code

.products.collection-content-wrapper .ProductItem-nav-breadcrumb-link {
    font-weight: 800;
    font-size: 17px !important
}

New code (still place this code before #4 code, same as current position)

/* Product detail - breadcrumb style */
a.product-nav-breadcrumb-link {
    font-weight: 800;
    font-size: 17px !important
}

#6. Current code

section.collection-type-products .ProductItem-details .ProductItem-details-excerpt {
    max-width: 450px
}

New code

/* max width for product description */
div.product-description {
    max-width: 450px;
}

#7. Current code

body.view-item div.product-mark.sold-out {
    display: none !important
}

New code

/* product detail page - hide sold out text */
body.view-item .product-mark.sold-out {
    display: none !important
}

#8. Current code

.sold-out .product-price {
    display: none !important
}

New code

/* hide sold out price */
.sold-out {
.product-price, .product-list-item-price {
    display: none !important
}}

#9. I see site uses Universal Filter Plugin, you try checking to see if it still works or not, if it doesn’t work, let me know which page you use it, I will check.