Shop Collection – Storefront

Description

Adding products to your store creates a Squarespace Commerce storefront.

There are 2 parts to the store:

Custom CSS

For style changes across multiple pages, add the code snippet to your Custom CSS panel and each page will be updated.

Advanced Code Injection

For style changes on one page, add the code snippet to the page Advanced Code Injection so only that page will be updated. Enclose your code in style brackets like this:

<style>

.ProductList .ProductList-title {
}

</style>
 

Custom CSS

7.1

To target the category list

/* category list – side */
.nested-category-tree-wrapper {
}

/* category list – side - link */
.nested-category-tree-wrapper .category-item {
}

/* category list – top */
.products.collection-content-wrapper .nested-category-children {
}

/* category list – top - link */
.nested-category-breadcrumb-link {
}

To target the product image

/* product image */
.products.collection-content-wrapper .grid-item .grid-image {
}

To target the product title

/* product title */
.collection-type-products .grid-title {
}

To target the product price

/* product price */
.collection-type-products .grid-prices {
}

To target the sale text

/* sale text */
.product-mark sale {
}

To target the sale price

/* sale price */
.grid-item.on-sale .sqs-money-native {
}
 

7.0 Brine Template

To target the product listings

/* product listings */
.ProductList-grid {
}

To target the product images

/* product image */
.ProductList-innerImageWrapper img {
}

To target the product title

/* product title */
.ProductList .ProductList-title {
}

To target the product price

/* product price */
.ProductList .product-price {
}

To target the sale price

/* sale price */
.ProductList .on-sale .product-price {
}

To target the original price

/* original price */
.original-price {
}
7.0, 7.1Cristina TiosecoProduct