How do add code to Dawn theme website?

[rebeccasilva0]

Hello everyone,

I have this website that I am trying to add 3 images below the Our Mission block text section. I have already tried adding an image block section below it but my theme Dawn does not give me this option. As you can see in the image below.

These are the 3 images I want to add to the bottom of the Our Mission block text section and above the social media icons. What is the correct coding I need to add to be able to add these images to that section? where do I add the code?

Thank you so much!!!

Rebecca

[MR115_ShopiDevs]

Please add this code footer.liquid file

  
![Image 1|600x450](upload://2mJxzu35eCHReSWmXNjrq4bzxPa.png)

  
![Image 1|600x450](upload://2mJxzu35eCHReSWmXNjrq4bzxPa.png)

  
![Image 1|600x450](upload://2mJxzu35eCHReSWmXNjrq4bzxPa.png)

Replace src=“image1.jpg” with the full URL
Add CSS files (e.g., base.css, theme.css)

.our-mission-images {
    text-align: center;
    margin: 20px 0;
    display: flex;
}

Expected output

[yash141]

Hi @rebeccasilva0

Open your Shopify Admin > Online Store > Themes > Actions > Edit Code > Search for footer.liquid.

Paste the following HTML block just above the tag (or wherever you want the images to appear in the footer):

  
![Image 1|600x450](upload://2mJxzu35eCHReSWmXNjrq4bzxPa.png)

  
![Image 1|600x450](upload://2mJxzu35eCHReSWmXNjrq4bzxPa.png)

  
![Image 1|600x450](upload://2mJxzu35eCHReSWmXNjrq4bzxPa.png)

Go to your CSS file (likely theme.css, theme.scss.liquid, or base.css) and add this at the bottom:

.our-mission-images {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 30px 0;
  flex-wrap: wrap;
}

.our-mission-images img {
  width: 30%;
  max-width: 300px;
  height: auto;
  margin: 10px;
}

Preview Your Changes

Click “Preview” or visit your site’s footer. You should see three images (SSL badge) horizontally aligned, responsive on all screen sizes — matching the design shown in your reference image:

Hope that helps

[rebeccasilva0]

Now, how do I make the social media icons colorful instead of black and white? Is there a way?

[yash141]

@rebeccasilva0 can apply inline styles to add color directly in the code.

Go to:

Online Store → Themes → Edit Code → snippets/social-icons.liquid

Look for code like this:

- {%- render 'icon-instagram' -%}
          {{ 'general.social.links.instagram' | t }}
      
    

To make the icon colorful, add a style attribute to the tag — right after the class. For example:

- {%- render 'icon-instagram' -%}
          {{ 'general.social.links.instagram' | t }}
      
    

Just replace #e4405f with the hex color code for the platform you’re customizing.

That’s it! Your social icons will now appear in color.
Hope this helps!