A store owner seeks to reduce the size of product images on their product page to better align with the cart and pricing elements below.
Problem:
Solutions Provided:
Three community members offered CSS-based solutions:
DaisyVo’s approach: Navigate to Shopify admin > Customize > Theme settings > Custom CSS, then add code targeting .product .flickity-slider img with 80% width and transform properties
rajweb’s method: Edit theme.css/base.css file directly, adding CSS for .product__image-slider .carousel-cell img with 80% width
Rahul_dhiman’s solution: Similar approach via base.css, targeting .product__image-slider .carousel-cell with positioning adjustments, plus additional styling for product title and price formatting
All solutions include screenshots demonstrating the visual results. The issue appears resolved based on the store owner’s final acknowledgment.
Hello, my website is tunetoyz.com password: tunetoyz123
My product page currently looks like this but I want to make the photo smaller so the entire thing fits in the below section. (Like I want it to align with the Carti 29.99 Add to cart etc right now its too big)
Hi @TuneToyz
You can follow the steps here:
Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there
Here is the code for Step 3:
@media screen and (min-width: 1024px){
body .product .flickity-slider {
top: 0 !important;
}
body .product .flickity-slider img {
width: 80%;
transform: translateX(10%) !important;
}
}
Here is the result:
Let me know if it works!
Best,
Daisy
Hey @TuneToyz ,
to align with the Carti 29.99 Add to cart etc .
Follow these steps:
Online Store
Themes
Edit Code
In the code editor, find and open the theme.css (or base.css depending on your theme) file, which controls the styling.
Add CSS Code to resize the product image:
.product .flickity-slider {
top: 80px;
}
.product__image-slider .carousel-cell img {
width: 80%;
}
Result:
If I was able to help you, please don’t forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma
Hello @TuneToyz
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.
.product__image-slider .carousel-cell {
top: 10px !important;
}
.product__title h1 {
text-transform: uppercase;
color: #111;
font-size: 35px;
}
.product__info-wrapper .price-item.price-item--regular {
font-size: 17px !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Thanks
