All things Shopify and commerce
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi all
I want to add a small icon on top of each header on the multicolumn section. I want to add a heart icon on top of the first column which is "We care" and a handshake icon on top of the second column which is "We commit" and finally a package icon on top of the third column which is "We deliver".
I used this website for the icons: https://www.flaticon.com/free-icons/heart
Store URL: https://cngdxq-tk.myshopify.com/
Thanks In Advance,
Solved! Go to the solution
This is an accepted solution.
Instructions:
1) In your theme's code open the 'base.css' or 'section-multicolumn.css' file
2) At the bottom of the file paste the below CSS code:
#shopify-section-template--18094115750084__multicolumn_9FJhrW img.multicolumn-card__image{
width: 70px /*Change for preference*/;
height: auto; /*Same as width when image is square*/
}
#shopify-section-template--18094115750084__multicolumn_9FJhrW .media.media--transparent.media--adapt {
padding-bottom: 70px !important; /*The bottom padding of this element needs to be the same as the height of the multicolumn image */
}
At the top of the settings for each column block in a multicolumn section , you can select an image from your computer.
Yes, but its pretty big
You can add CSS to make image smaller, I can help you with that but you need to add the images first so i can look at your website and come up with the css code
Hey! I have added the icons
This is an accepted solution.
Instructions:
1) In your theme's code open the 'base.css' or 'section-multicolumn.css' file
2) At the bottom of the file paste the below CSS code:
#shopify-section-template--18094115750084__multicolumn_9FJhrW img.multicolumn-card__image{
width: 70px /*Change for preference*/;
height: auto; /*Same as width when image is square*/
}
#shopify-section-template--18094115750084__multicolumn_9FJhrW .media.media--transparent.media--adapt {
padding-bottom: 70px !important; /*The bottom padding of this element needs to be the same as the height of the multicolumn image */
}
Hey! That worked, much appreciated.