Jones Template: A lush design and dedicated project pages bring your portfolio to life.

Notes

1. Adding Custom CSS to Home > Design > Custom CSS

2. Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;

3. If it still doesn’t work, send me a message via Contact Form  with your site url. I’ll give you exact CSS.

Header

Show Cart Icon (Only Shop & Product Page)

/* Hide cart on entire site */
.Cart.sqs-custom-cart {
    display: none;
}
/* Unhide cart on shop page */
.collection-type-products.view-list .Cart.sqs-custom-cart {
   display: initial;
}
/* Unhide cart on product page */
.collection-type-products.view-item .Cart {
    display: initial;
}

Header Background Color

/* Desktop - Tablet */
header#header {
    background: #ff0000;
    margin-top: -10px;
}
/* Mobile */
.mobile-bar-wrapper {
    background: #ff0000;
}

Logo (Top) – Navigation (Bottom)

header#header {
    -webkit-flex-direction: column;
    flex-direction: column;
}

Logo (Bottom) – Navigation (Top)

header#header {
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

Sticky Header when Scrolling (Desktop – Mobile)

/* Desktop - Tablet */
header#header {
    position: fixed;
    width: 100%;
    z-index: 9999;
    background: #ff0000;
    top: -10px;
}
/* Remove Overlap Content */
div#content {
    margin-top: 100px;
}
/* Mobile */
.mobile-bar-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    background: #ff0000;
}

Remove Logo (One Page – Entire Site)

/* Entire Site */
.logo-image {
    display: none;
}
/* One Page */
body#collection-58ac618286e6c0460d452c9d .logo-image {
    display: none;
}

See how to find Page ID.

Remove Navigation (One Page – Entire Site)

/* Entire Site */
div#mainNavWrapper {
    display: none;
}
/* One Page */
body#collection-58ac618286e6c0460d452c9d div#mainNavWrapper {
    display: none;
}

See how to find Page ID.

Underline Navigation Active Link

.nav-item.active a {
    text-decoration: underline;
}

Footer

Remove Footer (One Page – Entire Site)

/* Entire Site */
footer#footer {
    display: none;
}
/* One Page */
/* Replace body..f39 with your page ID */
body#collection-58a22b0dcd0f68d988ae2f39 footer#footer {
    display: none;
}

See how to find Page ID.

Footer Background Color (One Page – Entire Site)

/* Entire Site */
footer#footer {
    background: #ff0000;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 1350px;
    margin: 0 !important;
}
/* One page */
body#collection-58a22b0dcd0f68d988ae2f39 footer#footer {
    background: #ff0000;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 1350px;
    margin: 0 !important;
}

See how to find Page ID.

Contact Page

Submit Button Color

.form-button-wrapper .button {
    background: #ff0000 !important;
    border-color: #ff0000 !important;
    color: #000 !important;
    font-size: 18px !important;
    border-radius: 20px !important;
}

Shop Page

Remove Pricing

.product-price {
    display: none;
}

Align Left Title & Pricing

.ProductList-meta {
    text-align: left !important;
}

Decrease spacing between Image & Title

.ProductList-outerImageWrapper {
    padding-bottom: 140% !Important;
}

Product Detail Page

Remove Breadcrumb

.ProductItem-nav-breadcrumb {
    display: none;
}

Increase Product Detail Width

@media screen and (min-width:641px) {
.ProductItem-details {
    width: 70%;
}
.ProductItem-gallery {
    width: 30%;
}
}

Remove Add to Cart (All Products)

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

Change Add to Cart Color

.sqs-add-to-cart-button {
    background: #ff0000 !important;
    border-color: #ff0000 !important;
    color: green !important;
    font-size: 40px !important;
    border-radius: 100px;
}

Change Add to Cart Text

.sqs-add-to-cart-button-inner {
    visibility: hidden;
}
.sqs-add-to-cart-button-inner:before {
    visibility: visible;
    content: "Add to basket";
    display: block;
    position: absolute;
    font-size: 10px;
    color: #ff0000;
}

Remove Quantity Box

/* Remove on all products */
.product-quantity-input {
    display: none !important;
}
/* Remove on certain product pages */
/* Replace body.... with your page ID */
body#item-58a239bf5016e1926ab0151e .product-quantity-input, body#item-58a239bf5239987987e .product-quantity-input {
    display: none !important;
}

See how to find Page ID.

Change “Sale” Color

.product-mark.sale {
    background: #000 !important;
    color: #ff0000 !important;
    text-transform: lowercase !important;
}

Change Price Color

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

Change Price currency

body.native-currency-code-usd .sqs-money-native:before {
    content: "AUD ";
}

Remove Related Products

.ProductItem-additional {
    display: none;
}

Other

Reduce Mobile Banner Height

@media screen and (max-width:640px) {
    .page-banner-wrapper {
        height: 30vh !important;
    }
}

Hide Mobile Banner

@media screen and (max-width:640px) {
    .page-banner-wrapper {
        display: none;
    }
}

 

Featured Image: Squarespace.com