Can anyone help me decrease product image height + thumbnail arrows bigger? Happy to donate if someone can help.
url: https://errival.com/products/errival%E2%84%A2-mini-rubber-band-shotgun
Topic summary
Issue: Reduce product image height and enlarge thumbnail navigation arrows on the product page (desktop only).
Solution provided: Edit the theme stylesheet (Admin → Online store → Theme → Edit code → section-main-product.css). Within the desktop media query (min-width: 750px), increase the sticky column offset (top from 3rem to 7rem) to reposition content, slightly scale down and raise the image slider for reduced visual height, and significantly scale up the slider buttons (arrows) to make them more prominent. Additional minor vertical adjustments were applied to keep elements aligned.
Outcome: Screenshots show the gallery remains aligned while scrolling, with visibly larger thumbnail arrows and a reduced perceived image area height. The requester confirmed the fix worked.
Status: Resolved. No outstanding questions. Images were central to demonstrating the final layout and alignment.
DESKTOP VIEW ONLY PLEASE
Hi @Ryan1998
Step 1. Go to Admin → Online store → Theme > Edit code
Step 2. Find the file section-main-product.css. Search for the following CSS snippet
@media screen and (min-width: 750px) {
.product__column-sticky {
display: block;
position: sticky;
top: 3rem;
z-index: 2;
}
}
Please change to it
@media screen and (min-width: 750px) {
.product__column-sticky {
display: block;
position: sticky;
top: 7rem;
z-index: 2;
}
.product__column-sticky slider-component.slider-mobile-gutter:not(.quick-add-hidden) {
scale: 0.9;
transform: translateY(-2.4em);
}
.product__column-sticky .quick-add-hidden {
transform: translateY(-3.4em);
}
.product__column-sticky .slider-button {
scale: 6;
}
}
The result
When scrolling all the way down, everything is aligned.
If it helps you, please like and mark it as the solution.
Best Regards
1 Like
Hi @Ryan1998
Has your issue been resolved?
1 Like
yes thanks