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

 <div class="our-mission-images">
  <img
    src="https://cdn.shopify.com/s/files/1/0636/5419/9478/files/ssl-certificate.png?v=1751527417"
    alt="Image 1"
    style="width:30%; max-width:300px; margin: 10px;"
  >
  <img
    src="https://cdn.shopify.com/s/files/1/0636/5419/9478/files/ssl-certificate.png?v=1751527417"
    alt="Image 2"
    style="width:30%; max-width:300px; margin: 10px;"
  >
  <img
    src="https://cdn.shopify.com/s/files/1/0636/5419/9478/files/ssl-certificate.png?v=1751527417"
    alt="Image 3"
    style="width:30%; max-width:300px; margin: 10px;"
  >
</div>

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 · Accepted solution]

Hi @rebeccasilva0 

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

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

<div class="our-mission-images">
  <img
    src="https://cdn.shopify.com/s/files/1/0636/5419/9478/files/ssl-certificate.png?v=1751527417"
    alt="SSL Certificate 1"
  >
  <img
    src="https://cdn.shopify.com/s/files/1/0636/5419/9478/files/ssl-certificate.png?v=1751527417"
    alt="SSL Certificate 2"
  >
  <img
    src="https://cdn.shopify.com/s/files/1/0636/5419/9478/files/ssl-certificate.png?v=1751527417"
    alt="SSL Certificate 3"
  >
</div>

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:

  <li class="list-social__item">
      <a href="{{ settings.social_instagram_link }}" class="link list-social__link" >
        {%- render 'icon-instagram' -%}
        <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
      </a>
    </li>

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

 <li class="list-social__item">
      <a href="{{ settings.social_instagram_link }}" class="link list-social__link" style="color:#e4405f;">
        {%- render 'icon-instagram' -%}
        <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
      </a>
    </li>

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!