How to put icon images in footer on Shopify ?

Usually, we add icons to our Shopify website footer to make our website more user-friendly, which improves our interaction with customers. Another reason is to enable our customers to access our social platform by clicking on our social media icons. 

Also, we can add payment icons to build a relationship with our customers by letting them know that we accept payments in multiple ways. Therefore, our customers experience a mental click, realizing they have the flexibility to choose any payment option . and it also gives them trust to buy products from our website.In essence, it’s a trick to interact with your clients to give them transparent information. 

Let's see, what are the ways to put icon images in a footer on Shopify?

Shopify allows us to add these features by default. We will see how we can set up icons using built-in features in Shopify.but you may want your own icon images in your Shopify footer to personalize your site, make it look unique from other Shopify websites.

Technically, we have two ways to put our icon images in the footer. One is the default theme option. Another way is to use a piece of code to customize our footer. Don’t worry,  I showed both of the methods to put icon images in the footer on the Shopify website. Let’s start with the easy one.

How to put icon images in footer shopify easily

Method 1 : Put Icon Images in Footer on Shopify using simple settings

  • With every step, I added screenshots. Take a look at the screenshots for additional visual guidance. 

| Step 1

Log in to your Shopify admin panel . Once you are there, click “Online Store from the left sidebar.

Put icon images in footer on shopify step 1

Online Store section will expand. once you see it click on Themes.

Put icon images in footer on shopify step 2

| Step 2

Click on Customize, and the theme editor will open.

Put icon images in footer on Shopify step 3

| Step 3

Scroll down on the left sidebar , you can see “Footer”. Click on it

Put icon images in footer on shopify step 4

| Step 4

Now you can edit the footer . to add social media icons . Tick the Social media icons . scroll down and find Theme Settings.

Put icon images in footer on shopify step 5

| Step 5

Scroll down and Click on  Theme Settings” .You will notice input boxes for various social media accounts. Copy your social media profile link and paste it into the matching box

Put icon images in footer on shopify step 6

Then your social media icon logo will automatically appear on your footer. when someone clicks any of the social media platform icon now it will automatically redirect them to your social media platform 

Put icon images in footer on shopify step 7

| Step 6

To add payment option icons You need to set up payment methods . those payment methods are added only those Icon will be shown on the footer.

Tick on Show payment icons

If your payment options are settled then you can see icons are visible now .

Put icon images in footer on shopify step 9

Once you are done with these, click Save. And you’re all set!

Method 2 : How to put icon images in footer shopify - customly

Customize the footer using code.

By customizing our Shopify footer, we can design our footer according to our needs. Shopify’s footer is quite similar for all Shopify users, but what if we want to personalize our site and want a unique design on our footer that is different from other websites? that represent our brand through your own design. We can customize our Shopify footer by using a piece of code. It is better if you have some code and design knowledge.

Let’s see how we can do that step by step:

| Step 1

Go to your Shopify admin panel and click “Online Store from the left sidebar. 

Put icon images in footer on shopify step 1

when the Online Store section expands. Click on Themes

Put icon images in footer on shopify step 2

| Step 2

Click On the three-dot icon . and Click Edit code. Make sure to take a backup of your theme before making significant changes.

| Step 3

You will be navigated to the theme edit page . Look for the sections related to the footer. Common files include theme.liquid , footer.liquid or similarly named files.

Customize footer on shopify step 3

File names can be different. It depends on your theme . once you get it . Now, you can design the footer according to your requirements. 

| Step 4

Basic footer Design code. you can copy and paste it into your footer section. 

Html and CSS Code :
    <div class="footer-container">
            <div class="footer-section">
                <h4>Who We Are ?</h4>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias ratione, blanditiis officiis officia voluptas qui autem consectetur reiciendis amet quasi, porro, debitis nobis fuga? Beatae ex atque veniam magni voluptatibus?</p>
            <div class="footer-section">
            <h4>Contact Us</h4>
            <p>Your store address</p>
            <p>Phone: +0990200202</p>

            <div class="footer-section">
                <h4>Quick Links</h4>
                <li><a href="/">Home</a></li>
                <li><a href="/collections/all">Shop</a></li>
                <li><a href="/pages/about-us">About Us</a></li>
                <li><a href="/pages/contact-us">Contact Us</a></li>

            <div class="footer-section">
                <h4>Follow Us</h4>
                <li><a href="#" target="_blank">Facebook</a></li>
                <li><a href="#" target="_blank">Twitter</a></li>
                <li><a href="#" target="_blank">Instagram</a></li>

            <div class="copyright-section">
            <p>© {{ 'now' | date: '%Y' }} Your Store Name. All rights reserved.</p>


<!-- CSS Design -->

    footer {
      background-color: #f4f4f4;
      padding: 20px 0;

    .footer-container {
      display: flex;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;

    .footer-section {
      width: 22%;

    h4 {
      font-size: 18px;
      margin-bottom: 10px;

    ul {
      list-style: none;
      padding: 0;
      margin: 0;

    li {
      margin-bottom: 8px;

    a {
      text-decoration: none;
      color: #333;

    .copyright-section {
      text-align: center;
      margin-top: 20px;
      border-top: 1px solid #ddd;
Result :
custom footer result
Customize shopify footer step 4

Once you have done Click on Save button . 

Click To See more tutorial in shopify

Click Here