Shopify themes, liquid, logos, and UX
Hi Shopify Wizards 💻,
Can you explain me how can I add a small horizontal image that will appear on this page above the Title ? (see image below, green line)
Thank you !
Francisco
Solved! Go to the solution
This is an accepted solution.
Hi @Franz22 ,
If so, image will be same for all collections.
- You can upload images in Assets, ex: image-collection.png
- You just need to add this code in main-collection-banner.liquid file where you want to display it will work fine:
<img src="{{ 'image-collection.png' | asset_url }}" class="image" alt="" />
Hope it clear to you.
This is an accepted solution.
Hi @Franz22,
Please go to sections/main-collection-banner.liquid file and add code in line 6.
Refer https://i.imgur.com/3GZ3cII.png
Hope it clear to you.
This is code customization work .
Any other solution ? more specific solution please ?
Thank you
Hi @Franz22,
Please go to sections > main-collection-banner.liquid file and move code: https://i.imgur.com/ukItelW.png
Refer https://github.com/Shopify/dawn/blob/main/sections/main-collection-banner.liquid
Then you just need to upload the image in the collection, it will display fine. https://i.imgur.com/C9mVZHd.png
Hope it helps!
If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck
Hi,
Thank you for your answer. However what I want to upload is something different :
In that case, what should I do ?
Best,
Francisco
This is an accepted solution.
Hi @Franz22 ,
If so, image will be same for all collections.
- You can upload images in Assets, ex: image-collection.png
- You just need to add this code in main-collection-banner.liquid file where you want to display it will work fine:
<img src="{{ 'image-collection.png' | asset_url }}" class="image" alt="" />
Hope it clear to you.
Hi,
The asset integration and the line of code is clear. However, where exactly in main-collection-banner.liquid should do I add this line of code ?
I want the image to appear above "Monthly Selection". Please refer to my original thread to see details.
Thanks
Francisco
This is an accepted solution.
Hi @Franz22,
Please go to sections/main-collection-banner.liquid file and add code in line 6.
Refer https://i.imgur.com/3GZ3cII.png
Hope it clear to you.
It worked !
Thanks so much !
Hello - I have the same issue, but would like to be able to add a different horizontal banner for each collection, rather than a single one that applies to all. Basically like adding a second image to collections, and then allowing the collections page to use that second image as a banner. Otherwise the default collection image, which is square, doesn't appear correctly on the collections page, but does appear correctly on collection list for example on the home page. How can we do that?
Home page collections list: uses collection's square image
Collection page header uses square image also:
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
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