Shopify themes, liquid, logos, and UX
For some reason, the smallest image size on Image banner in any Pages are very big, I wanted all the banners to have standard banner size.
This is how the smallest banner size looks like:
Hello @arutze ,
You can try to follow these steps:
Go to Online Store -> Themes -> Actions -> Edit code
Go to Sections -> page-template.liquid
Add a CSS class or ID to the image element within the code. For example:
{% if page.image_banner %}
<div class="image-banner">
<img src="{{ page.image_banner | img_url: 'master' }}" alt="{{ page.title }}">
</div>
{% endif %}
Go to Assets folder -> base.css file -> add this following code at the bottom of page
.image-banner img {
max-width: 100%;
height: auto;
}
Save and preview
Hope this can help.
Transcy
Hi @Transcy , I don't have the page-template.liquid section 😞
and can you confirm that it will not affect the image banner size on the main page?
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