Social Media Icons & Expanding Message box in Dawn Theme

Technical Q&A
1

Hi, I’m trying to figure out how to put the social media icons next to their links in the footer.

Currently:

1b.JPG
1b.JPG1442×329 21.5 KB

To this:

1a.JPG
1a.JPG1034×329 22.6 KB

Also, is there also another way to expand the contact form’s message section to be slightly bigger? To fit in another 2-3 lines? Currently:

3b.JPG
3b.JPG884×516 16.1 KB

The website is https://thirstyrhino.myshopify.com/

and password is skeipe

Thank you in advance!

2

Hi @thirstyrhino ,

  • Icon: Go to sections > footer.liquid file, find ‘link link–text list-menu__item’ and add code here:

Screenshot.png
Screenshot.png1351×309 22.9 KB

Code:

{%- if link.title == 'Facebook' -%}
                              {%- render 'icon-facebook' -%}
                            {%- elsif link.title == 'Pinterest' -%}
                              {%- render 'icon-pinterest' -%}
                            {%- elsif link.title == 'Instagram' -%}
                              {%- render 'icon-instagram' -%}
                            {%- elsif link.title == 'TikTok' -%}
                              {%- render 'icon-tiktok' -%}
                            {%- elsif link.title == 'Youtube' -%}
                              {%- render 'icon-youtube' -%}
                            {%- endif -%}

Hope it helps!

1 Like
3

Hi @thirstyrhino ,

I am Ani From https://www.task4store.com/ - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

Here are the Solutions!

For message box:

.text-area {
    min-height: 20rem;
}

Go to Online Store->Theme->Edit code->assets->base.css

For footer section:

{%- if link.title == 'Facebook' -%}
                              {%- render 'icon-facebook' -%}
                            {%- elsif link.title == 'Pinterest' -%}
                              {%- render 'icon-pinterest' -%}
                            {%- elsif link.title == 'Instagram' -%}
                              {%- render 'icon-instagram' -%}
                            {%- elsif link.title == 'TikTok' -%}
                              {%- render 'icon-tiktok' -%}
                            {%- elsif link.title == 'Youtube' -%}
                              {%- render 'icon-youtube' -%}
                            {%- endif -%}

If you have any concerns feel free to ask me!

Regards,
Ani

1 Like
4

Thank you, it works!

Though some of the icons were large for some reason but I managed to fix them.

For future reference for anyone here just in case, basically I went to the snippet > icon-facebook.liquid (etc. applies to other social media). Pasted this between ‘class’ and ‘viewbox’.

width="16" height="18"​
5

Thank you, the code for the msg box works!

1 Like