How to place small icons in the multicolumn model

Store Design
, , ,

Topic summary

Goal: add very small, per-column icons to the Dawn 14.0.0 Multicolumn section, positioned like Apple-style message balloons. The requester wants to place and control each icon individually on each balloon/card.

Guidance shared:

  • The Multicolumn section in Dawn allows uploading an image for each column via the theme customizer. If an explicit “icon” control is needed (not just an image), the section’s schema and Liquid (Shopify’s templating language) must be edited to add that setting.
  • To achieve crisp, small icons, upload SVG files and apply light CSS to size and position them consistently. A suggested icon size is 80x80 px.
  • A referenced example site appears to use a page builder app, but a similar layout can be built with the theme’s customization plus SVGs and CSS.

Requests and status:

  • Another participant asked for exact code and placement instructions to modify the three columns. The helper offered assistance but has not yet provided code snippets.
  • Screenshots/images are central to understanding the desired appearance and the current sizing issue. The thread remains open without a finalized implementation or code solution.
Summarized with AI on December 12. AI used: gpt-5.
1

I want to put some icons in the Dawn 14.0.0 multicolumn model. My inspiration is in Appel’s text balloons:

PedroPrado_0-1718819107689.png
PedroPrado_0-1718819107689.png877×527 20.6 KB

I would like to place the very small icons in the same place.
How do I do the same?
I would like a way that I could take and place individually on each one.
The balloons I want to put these icons on:

PedroPrado_1-1718819156752.png
PedroPrado_1-1718819156752.png1161×608 26 KB

my store link: https://xqtymudi20rxhvpp-78296449301.shopifypreview.com

2

Hi @PedroPrado

There is an option to upload the icon image in the multi column section refer to the screenshot below.

2024-06-20 12_20_57-bisabrandpk · Customize Updated copy of Updated copy of Dawn · Shopify — Mozilla.png
2024-06-20 12_20_57-bisabrandpk · Customize Updated copy of Updated copy of Dawn · Shopify — Mozilla.png1336×554 48.9 KB

if you need an icon option instead of image then you need to write some schema code and liquid for updating section.

Thanks

3

can you please show me how i really need it . and thank you so much sir

4

@raouf2003 what you need?

5

so i been trying to make to look like this

Capture d’écran 2024-12-16 225150.png
Capture d’écran 2024-12-16 225150.png425×498 13.2 KB

but always look like that the image is not conserced as an icon

Capture d’écran 2024-12-17 073348.png
Capture d’écran 2024-12-17 073348.png432×502 17.8 KB

can you help me ?

6

@raouf2003

you can upload an svg formate and make a little css code to make it look like the example can you share the store url?

1 Like
7

this is store i want it to look like and that is my store

8

@raouf2003 i have seen that he is using page builder app to creating that section but you can create that same using your theme customize settings as you are using now. you just need to upload SVG image files to the store, If you are unable i would love to create that for you.

1 Like
9

can you just tell what size i need to put to make sure its look the exact same (size of svg image please )

10

@raouf2003 that will be 80x80px size.

1 Like
11

can you please provide the code and where to place to change the three collumns i’m using please

12

bro i really need your help please

13

@raouf2003 I would love to help you bro.