Product Block
Description
Use the product block to display items from your store on other pages and posts across your site. Be creative with it and use it to design layouts different than your store's built-in landing page.
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>
.product-block .productDetails .product-title {
}
</style>Custom CSS
General
To target the product title
/* product title */
.product-block .productDetails .product-title {
}
To target the product price
/* product price */
.product-block .productDetails .product-price {
}To target the product image
/* product image */
.product-block .image-container img {
}To target the product description
/* product description */
.product-block .productDetails .product-excerpt {
}To target the variant title
/* variant title */
.product-block .productDetails .variant-option-title {
}To target the variant dropdown
/* variant dropdown */
.product-block .productDetails .variant-option select {
}To target the quantity
/* quantity title */
.product-block .productDetails .quantity-label {
}
/* quantity input */
.product-block .productDetails input:not([type='submit']) {
}To target the add to cart button
/* add to cart button */
.product-block .productDetails .sqs-add-to-cart-button {
}
/* add to cart text */
.product-block .productDetails .sqs-add-to-cart-button * {
}
To target the view full item link
/* view full item link */
.sqs-product-quick-view-lightbox .ProductItem-details-quickViewFullItemLink {
}Quick View
To target the quick view button
/* quick view button */
.sqs-product-quick-view-button {
}To target the quick view lightbox
/* quick view lightbox */
.sqs-product-quick-view-lightbox .ProductItem {
}To target the quick view close icon
/* quick view close icon */
.sqs-product-quick-view-lightbox-close-button line {
}To target the quick view page overlay
/* quick view page overlay */
.sqs-product-quick-view-lightbox.sqs-modal-lightbox .sqs-modal-lightbox-content .lightbox-background {
}To target the quick view product image
/* quick view product image */
.sqs-product-quick-view-lightbox .ProductItem-gallery-slides-item-image {
}To target the quick view product thumbnails
/* quick view product thumbnails */
.sqs-product-quick-view-lightbox .ProductItem-gallery-thumbnails-item img {
}To target the quick view product title
/* quick view product title */
.sqs-product-quick-view-lightbox .ProductItem-details .ProductItem-product-price {
}To target the quick view price
/* quick view price */
.sqs-product-quick-view-lightbox .ProductItem-details .ProductItem-product-price * {
}To target the quick view sale price
/* quick view sale price */
.sqs-product-quick-view-lightbox .ProductItem.on-sale .ProductItem-details .product-price .sqs-money-native * {
}To target the quick view original price
/* quick view original price */
.sqs-product-quick-view-lightbox .ProductItem-details .ProductItem-product-price .original-price * {
}To target the quick view excerpt
/* quick view excerpt */
.sqs-product-quick-view-lightbox .ProductItem-details .ProductItem-details-excerpt {
}To target the quick view variant dropdown
/* quick view variant dropdown */
.sqs-product-quick-view-lightbox .ProductItem-details .variant-option select {
}To target quick view quantity
/* quick view quantity label */
.sqs-product-quick-view-lightbox .quantity-label {
}
/* quick view quantity input */
.sqs-product-quick-view-lightbox .product-quantity-input input {
}To target the add to cart
/* quick view add to cart */
.sqs-product-quick-view-lightbox .sqs-add-to-cart-button {
}