Adding Icons to the multicolumns

Shopify Discussion
1

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

Mohd01_0-1737569581912.png
Mohd01_0-1737569581912.png116×106 1001 Bytes

Mohd01_1-1737569581842.png

Mohd01_2-1737569581985.png

Store URL: https://cngdxq-tk.myshopify.com/
Thanks In Advance,

2

At the top of the settings for each column block in a multicolumn section , you can select an image from your computer.

3

Yes, but its pretty big

4

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

5

Hey! I have added the icons

6

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 */
}
7

Hey! That worked, much appreciated.