Creating the Shop page is overall quite easy. As you know there are 2 different layouts. One Layout is a standard Grid and the other Layout requires some custom CSS.

Please watch the video below on how to apply the required CSS codes.

PASSCODE: blackonyx

General CSS

Applies to both layouts.

.sqs-product-quick-view-button-wrapper .sqs-product-quick-view-button {
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 30px;
    margin-top: 7rem;
}
.ProductList-grid .ProductList-item:hover .sqs-product-quick-view-button-wrapper {
    background: url(https://static1.squarespace.com/static/57a89d342e69cffb1a3ad399/t/57ee641f9f74563967bad417/1475240991584/product-icon.png) center 30% no-repeat rgba(0,0,0,.6);
    background-size: 30px;

z-index: 999;
}
.sqs-product-quick-view-button-wrapper .sqs-product-quick-view-button:hover {
    border: 1px solid #fff;
    background: #fff;
    color:#000;
}
span.Share-buttons-item-label {
    background-color: #fff!important;
}
.collection-type-products .Main.Main--products-item .ProductItem-additional .row.sqs-row .html-block.sqs-block-html {
    width: 100%!important;
}

Custom Shop Page CSS

<style>
@media only screen and (min-width:1024px) {
  .ProductList-grid .ProductList-item:first-child {
    width: 66.66666667% !important;
}
.ProductList-grid .ProductList-item {
    padding: 0 15px;
    box-sizing: border-box;
}
.ProductList-grid .ProductList-item {
    width: 33.333333334%!important;
    padding-left: 0;
}
.ProductList-item {
    margin: 0 0 34px 0;
}
.ProductList-grid .ProductList-item:first-child .ProductList-outerImageWrapper, .ProductList-grid .ProductList-item:first-child .ProductList-innerImageWrapper {
    overflow: initial!important;
}
.ProductList-grid .ProductList-item:first-child .ProductList-outerImageWrapper img {
    top: 0px!important;
    position: relative!important;
    max-width: 100%;
    height: auto!important;
    left: 0!important;
}
.ProductList-grid .ProductList-item:first-child .ProductList-innerImageWrapper {
    position: relative;
}
.ProductList-grid .ProductList-item:first-child .ProductList-outerImageWrapper {
    padding-bottom: 0 !important;
    width: 100%;
    height: 100%;
    display: block;
}
}
</style>

Styling Options