Product Thumbnail CSS

Want to customize the product thumbnails throughout your store? We’ve done the work to identify the common CSS classes in the Dawn theme to make your life easier!

The product card is a snapshot of a product and provides key details such as the product thumbnail image, title, price, and sometimes product variants and ratings. Use the product card to display items from your store on other pages and posts across your site.

Where to Add Custom CSS

Entire Store

Add custom CSS to the base.css file of your Shopify theme. The changes will apply to all pages and components using the styles defined in the base.css file.

Specific Pages

Certain pages may have separate CSS files dedicated to their specific components. Inspect the page to locate the CSS file name and add your custom CSS to the respective file.

How to Edit CSS

You can use CSS to change font styles, colors, and more! To learn more, check out:
Learning CSS Basics for Shopify
Coding for Beginners Workshop Recording

Code Snippets

To target the product card container

.card-wrapper {
/* card wrapper css here */
}

To target the product information container

.card__information {
/* card information container css here */
}

To target the product title

.card--standard>.card__content .card__information .card__heading {
/* product title css here */
}

To target the vendor

.card--standard>.card__content .card__information 
.caption-with-letter-spacing {
/* product vendor css here */
}

To target the product price

.card-information>.price {
/* product price css here */
}

To target the product rating, when you have a ratings app installed

.card-information>.rating {
/* product rating stars css here */
}

.card-information .caption.rating-count {
/* product rating count css here */
}

To target the product thumbnail image

.card__media .media img {
/* product thumbnail image css here */
}

To target the “Add to Cart” button

.quick-add__submit {
/* add to cart button css here */
}