Shopify themes, liquid, logos, and UX
How can I add a Banner Image To my product Grid In Collection Template
Hi @JimvanAken
Adding banner on the collection page? Or Inserting the banner image to the grid of collections?
Hello @JimvanAken ,
There are two ways to add a banner image to your product grid in a Shopify collection template:
1. Using the Theme Editor (For Beginners)
Shopify themes often come with a visual theme editor that allows adding elements without coding. Here's a general guideline (consult your theme's documentation for specifics):
2. Using Code Editing (For Advanced Users)
For more control or if your theme lacks a banner option, you can edit the collection template code using Liquid. Here's how:
{% if section.settings.banner_enabled %} <div class="collection-banner">
<img src="{{ section.settings.banner_image | asset_url }}" alt="{{ section.settings.banner_alt_text }}">
</div>
{% endif %}
{% for product in collection.products %}
{% endfor %}
Important Considerations:
Thanks,
What i am looking for is to insert my collection banner in the product grid, Like the added photo
This is costumize design that needs a developer. Let us know if your interested. Thanks!
Hi @JimvanAken ,
This is Theodore from PageFly - Shopify Page Builder App.
There are two ways to add a banner image to your product grid in the collection template on Shopify:
1. Theme Editor (if available):
2. Theme Code Editing (more control):
Important: Back up your theme before editing code.
Best regards,
Theodore | PageFly
Amandalman
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Thanks!
I would like to try the coding, can you help me with that?
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024