A user sought to reduce the height of their announcement bar and header on their Shopify store (using the Impact theme) to make product pages more visible. They also wanted to decrease spacing between sections.
Solution provided:
Header/announcement bar reduction: Add custom CSS code to the theme.liquid file (above the </body> tag) targeting the header and announcement bar heights.
Section spacing reduction: Add additional CSS code (above </style> in theme.liquid) to adjust margins between product info elements using .product-info>*+* selector with 8px margins.
Outcome: Both issues were successfully resolved. The user confirmed the solutions worked as intended, with before/after screenshots demonstrating the reduced header height and tighter section spacing.
Hey @noosathletics
Keep the previous code and add this new code above in the end of theme.liquid file
.product-info>*+* {
margin-top: 8px !important;
margin-bottom: 8px !important;
}
RESULT:
If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
