Supply Template: Engaging grid layouts and sidebar navigation make it easy for customers to browse and buy.

Notes

• Adding Custom CSS to Home > Design > Custom CSS
• Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;
• With One page. Add to Page Settings > Advanced > Header (If you use Personal Plan > Edit Page > Add Code Block > Add code)
• Send me a message if you have any questions/the code doesn’t work (free).
• You can send a donation if this is helpful for you 😉

Header

Remove Logo

Entire Site

div#siteHeader img {
    display: none !important;
}

One Page

<style>
div#siteHeader img {
    display: none !important;
}
</style>

Remove Site Title (Mobile)

Entire Site

@media screen and (max-width:640px) {
div#siteHeader #siteTitle {
    display: none !important;
}
}

One Page

<style>
@media screen and (max-width:640px) {
div#siteHeader #siteTitle {
    display: none !important;
}
}
</style>

Site Title Color

Entire Site

div#siteHeader #siteTitle {
    color: #ff0000;
}

One Page

<style>
div#siteHeader #siteTitle {
    color: #ff0000;
}
</style>

Replace Site Title with Logo (Mobile)

Entire Site

@media screen and (max-width:640px) {
div#siteHeader img {
    display: block !important;
}
h1#siteTitle {
    display: none !important;
}
}

One Page

<style>
@media screen and (max-width:640px) {
div#siteHeader img {
    display: block !important;
}
h1#siteTitle {
    display: none !important;
}
}
</style>

Navigation Hover Color

.navigation a:hover {
    color: #f7f8f9 !important;
}

Navigation Active Link Color

.navigation .active-link a {
    color: #f1f2f3 !important;
}

Remove Navigation

Entire Site

.navigation {
    display: none !important;
}

One Page

<style>
.navigation {
    display: none !important;
}
</style>

Header Background Color

Entire Site

header#header {
    background: #000;
}

One Page

<style>
header#header {
    background: #000;
}
</style>

Remove Header

Entire Site

@media screen and (max-width:640px) {
header#header {
    display: none !important;
}
}

One Page

<style>
@media screen and (max-width:640px) {
header#header {
    display: none !important;
}
}
</style>

Sticky Header (Mobile)

Entire Site

@media screen and (max-width:640px) {
header#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
}

One Page

<style>
@media screen and (max-width:640px) {
header#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
}
</style>

Change Hamburger Icon Color

a#navOpen:before {
    color: #ff0000;
}

Replace Hamburger Icon with Custom Icon

a#navOpen:before {
    content: "";
    background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 30px;
    height: 30px;
    display: inline-block;
}

Replace Hamburger Icon with word “Menu”

a#navOpen:before {
    content: "Menu";
    color: #000;
    font-family: proxima-nova;
    font-size: 16px;
    position: absolute;
    right: 10px;
}

Add word “Menu” beside Hamburger Icon

a#navOpen:after {
    content: "Menu";
    font-family: proxima-nova;
    color: #000;
    font-size: 16px;
    position: absolute;
    left: -30px;
}

Navigation Overlay Color

div#under {
    background: #f1f2f3;
}

Footer

Remove Footer

Entire Site

footer#footer {
    display: none;
}

One Page

<style>
footer#footer {
    display: none;
}
</style>

Shop

Product Overlay Color

.masonry-overlay {
    background: #f1f2f3 !important;
}

Align Product Info (Name, Price)

section.masonry-content {
    text-align: left !important;
}

Product Info Font Size (Name, Price)

section.masonry-content {
    font-size: 20px;
}

Change Sale Color

.product-mark.sale {
    background: #000;
    color: #fff;
    font-size: 20px;
    text-transform: lowercase;
    border-radius: 20px;
}

Rename Sale Text

.product-mark.sale {
    visibility: hidden;
}
.product-mark.sale:after {
    visibility: visible;
    content: "Sale Sale";
    color: #000;
    background: #f1f2f3;
    padding: 5px 10px;
    font-size: 15px;
}

Product Page

Remove Product Share

.collection-type-products span.squarespace-social-buttons.inline-style {
    display: none;
}

Remove Add to Cart

All Products

.sqs-add-to-cart-button-wrapper {
    display: none;
}

One Products

Edit Product > Additional Info > Add Code Block > Paste below code

<style>
.sqs-add-to-cart-button-wrapper {
    display: none;
}
</style>

Change Price Color

All Products

.view-item span.sqs-money-native {
    color: #ff0000;
}

One Product

<style>
.view-item span.sqs-money-native {
    color: #ff0000;
}
</style>

Remove Quantity Input

All Products

.product-quantity-input {
    display: none;
}

One Product

<style>
.product-quantity-input {
    display: none;
}
</style>

Blog – Blog Posts

Remove Post Date

Blog Page

.view-list .published {
    display: none;
}

Posts

.view-item .published {
    display: none;
}

Remove Post Like/Share

Blog Page

.view-list .entry-actions {
    display: none;
}

Posts

.view-item .entry-actions {
    display: none;
}

Increase Post Detail Width

All Posts

@media screen and (min-width:1025px) {
.view-item main#main {
    width: 1000px;
}
}

One Post

Edit Post > Add Code Block > Paste below code

<style>
@media screen and (min-width:1025px) {
main#main {
    width: 1000px;
}
}
</style>

Change Post Pagination Color

.pagination * {
    color: #ff0000 !important;
}

Featured Image: Squarespace.com