Products: Smaller product image size

To reduce the size of your main product image, you can make this code customization.

Result after:

Before:

How to:

Option 1: Product pages and homepage featured product

This version will change the size on all your product pages and if you have any homepage featured products.

/* -- code to make product image smaller -- */
.product__slides.product-single__photos.slick-slider.slick-dotted, .product__slides.product-single__photos.slick-slider {
    max-width:400px; margin: auto !important;
}
/* - end - */

Option 2: Homepage featured product only

This version will only change the size for the homepage featured product leaving the production pages at the regular size.

/* -- code to make product image smaller -- */
.template-index .product__slides.product-single__photos.slick-slider.slick-dotted, .template-index .product__slides.product-single__photos.slick-slider {
    max-width:400px; margin: auto !important;
}
/* - end - */

The value 400px; can be adjusted to your preference.


Where do I add the code?

Open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Next, in the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Example:

Save the file after adding your code.

Still need help? Contact Us Contact Us