Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
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
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
DESKTOP VIEW ONLY PLEASE
This is an accepted solution.
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
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
Hi @Ryan1998
Has your issue been resolved?
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
yes thanks
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025