Individual Product Page

Description

Each product has its own individual product page. This is where you can find more information on the product as well as build out a custom page under additional information.

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>

.ProductItem .ProductItem-details .ProductItem-details-title {
}

</style>

Custom CSS

To target the breadcrumb navigation

/* entire breadcrumb navigation */
.ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb {
}

/* breadcrumb: store */
.ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb a:first-child {
}

/* breadcrumb: listing */
.ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb a:last-child {
}

To target the images

/* product images */
.ProductItem-gallery {
}

/* isolated product image */
.ProductItem-gallery img {
}

To target the product title

/* product title */
.ProductItem .ProductItem-details .ProductItem-details-title {
}

To target the product price

/* product price */
.ProductItem .ProductItem-details .product-price {
}

To target the sale price
NOTE: The sale label is not always enabled on a product page. This code will make that label visible.

/* sale item: sale label */
.ProductItem-details .product-mark.sale {
}

To target the quantity

/* quantity label */
.ProductItem-details .quantity-label {
}

/* quantity input field */
.ProductItem-details .product-quantity-input input {
}

To target the add to cart button

/* add to cart button */
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
}

To target the additional details area

/* additional details area */
.ProductItem .ProductItem-additional {
}

To target the sale items

/* sale item: original price */
.ProductItem .ProductItem-details .product-price .original-price .sqs-money-native {
}

/* sale item: sale price */
.ProductItem.on-sale .ProductItem-details .product-price .sqs-money-native {
}

To target the product excerpt

/* product excerpt */
.ProductItem-details-excerpt {
}

To target the variant dropdown

/* variant dropdown */
.ProductItem-details .variant-option select {
}

.ProductItem-details .variant-select-wrapper:after {
}

To target the sold out label

/* sold out label */
.sold-out .ProductItem-details .product-mark {
}

.ProductItem-details .Share-buttons-item-icon {
}