Store Page CSS

#1. Add padding below category links

div.product-list-header {
    padding-bottom: 50px !important;
}

#2. Round corners of images

div.product-list-item div.grid-image-wrapper img {
    border-radius: 20px !important;
}

#3. Add a light overlay over store image

div.product-list-item div.grid-image-wrapper:after {
    content: "";
    background-color: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}

#4. Add a light overlay over store image on hover

div.product-list-item div.grid-image-wrapper:after {
    content: "";
    background-color: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s ease;
}
div.product-list-item:hover div.grid-image-wrapper:after {
    opacity: 1;
    transition: all 0.3s ease;
}

#5. Add a dark overlay over image

div.product-list-item div.grid-image-wrapper:after {
    content: "";
    background-color: rgba(0,0,0,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: all 0.3s ease;
}

#6. Add a dark overlay over image on hover

div.product-list-item div.grid-image-wrapper:after {
    content: "";
    background-color: rgba(0,0,0,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s ease;
}
div.product-list-item:hover div.grid-image-wrapper:after {
    opacity: 1;
    transition: all 0.3s ease;
}

#7. Add an outline border around add to cart

div.product-list-item button.sqs-add-to-cart-button {
    border: 2px solid #f1f !important;
}

#8. Round corners of Add to Cart

div.product-list-item button.sqs-add-to-cart-button {
    border-radius: 50px !important;
}

#9. Zoom add to cart on hover

button.sqs-add-to-cart-button {
   transition: all 0.3s ease !important;
}
button.sqs-add-to-cart-button:hover {
   transition: all 0.3s ease !important;
   transform: scale(1.1);
}

#10. Add an outline border around dropdown

div.product-list-item .variant-select-wrapper {
    border: 2px solid #f1f !important;
}