how to change the location of instagram icon?

Store Design
, , , , , , ,

Topic summary

A user wants to relocate their Instagram icon to appear directly under the newsletter section in their Shopify store’s footer, rather than its current position.

Proposed Solutions:

Multiple CSS-based approaches were suggested:

  • Adding custom CSS to adjust .footer__aside-top margins (typically margin-left: 50% with media queries for responsive design)
  • Inserting code into theme.css or base.css files with position adjustments

However, a key limitation was identified: The Instagram icon and newsletter exist in separate footer sections, making simple CSS positioning problematic across different screen sizes.

Recommended Approach:

One contributor provided modified Liquid code for the footer template that restructures the layout by:

  • Capturing the social media icons within the newsletter block
  • Integrating both elements into the same section for proper alignment

This code-level customization is considered more reliable than CSS-only solutions, as it ensures consistent layout across devices without requiring complex responsive styling workarounds.

The discussion remains open, with the user sharing their current footer.liquid code for further investigation.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Want this instagram icon to be here.. under the newsletter..

URL: https://redpandaoutdoor.in/

Screenshot 2024-12-12 163221.png
Screenshot 2024-12-12 163221.png1895×909 67.9 KB

2

HI @Emiway1

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (min-width: 1024px){
.footer__aside-top {
    margin-left: 50% !important;
}
}

Here is the result: https://prnt.sc/g-CZ2ZyZe8kI

I hope this helps

Best,

Daisy

3

Hi!

Which is theme you are using on store?

To move the icon you need customize code, change position code handle to place you want it show up.

4

Can’t we include both together? i want it with newsletter

Screenshot 2024-12-12 164931.png
Screenshot 2024-12-12 164931.png1919×907 52.4 KB

5

It’s impact

6

you need move that part in code, if you just use css to move position it will not at same layout with newsletter beside use css you need take care more style for multi screen device.

So best easy you need customize with code directly.

7

Hi @Emiway1 ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(min-width:768px){
.footer__wrapper {
    gap: 0 !importaant; 
   
}
.footer__aside-top {
    margin-left: 473px;
    margin-top: 7px;
}

}
@media(max-width:767px){
.footer__aside-top {
    margin-left: 0 !important;
    
}

}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

8

Hello, @Emiway1

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
@media screen and (min-width: 1024px) {
    .footer__aside-top {
        margin-left: 50% !important;
        bottom: 51px !important;
        position: relative;
    }
}

Thanks!

9

Hi @Emiway1

Since the icon and the newsletter are located in two separate sections, it’s not possible to bring them closer together. If possible, could you kindly share the code from the footer.liquid file so I can further investigate?

Best,

Daisy

10 
{%- assign newsletter_block = section.blocks | where: 'type', 'newsletter' | first -%}

{%- if section.blocks.size > 3 -%}

{%- endif -%}

  

    

      {%- comment -%}
      ------------------------------------------------------------------------------------------------------------------
      BLOCK AREA
      ------------------------------------------------------------------------------------------------------------------
      {%- endcomment -%}

      {%- if section.blocks.size > 0 -%}
        

          {%- for block in section.blocks -%}
            {%- case block.type -%}
              {%- when 'text' -%}
                {%- if block.settings.title != blank or block.settings.content != blank or shop.features.follow_on_shop? and block.settings.enable_follow_on_shop -%}
                  

                    {%- if block.settings.title != blank -%}
                      

{{ block.settings.title | escape }}

                    {%- endif -%}

                    {%- if block.settings.content != blank -%}
                      
                        {{- block.settings.content -}}
                      

                    {%- endif -%}

                    {%- if shop.features.follow_on_shop? and block.settings.enable_follow_on_shop -%}
                      
                        {{- shop | login_button: action: 'follow' -}}
                      

                    {%- endif -%}
                  

                {%- endif -%}

              {%- when 'links' -%}
                {%- if block.settings.menu != blank -%}
                  
                    {%- if block.settings.show_menu_title -%}
                      

{{ block.settings.menu.title }}

                    {%- endif -%}

                    
                      {%- for link in block.settings.menu.links -%}
                        - {{ link.title }}
                        
                      {%- endfor -%}
                    

                  

                {%- endif -%}

              {%- when 'newsletter' -%}
                
                  {%- if block.settings.image != blank -%}
                    {%- capture sizes -%}{{ block.settings.image_width }}px{%- endcapture -%}
                    {%- capture widths -%}{{ block.settings.image_width }}, {{ block.settings.image_width | times: 2 | at_most: block.settings.image.width }}{%- endcapture -%}
                    {%- capture style -%}max-width: {{ block.settings.image_width }}px{%- endcapture -%}
                    {{- block.settings.image | image_url: width: block.settings.image.width | image_tag: loading: 'lazy', style: style, sizes: sizes, widths: widths -}}
                  {%- endif -%}

                  

                    {%- if block.settings.title != blank -%}
                      

{{- block.settings.title | escape -}}

                    {%- endif -%}

                    {%- if block.settings.content != blank -%}
                      
                        {{- block.settings.content -}}
                      

                    {%- endif -%}

                    {%- form 'customer', id: 'footer-newsletter', class: 'footer__newsletter-form form' -%}
                      {%- if form.posted_successfully? -%}
                        {%- capture success_message -%}{{ 'general.newsletter.subscribed_successfully' | t }}{%- endcapture -%}
                        {%- render 'banner', content: success_message, status: 'success' -%}
                      {%- else -%}
                        {%- if form.errors -%}
                          {%- capture error_message -%}{{ form.errors.translated_fields['email'] }} {{ form.errors.messages['email'] }}{%- endcapture -%}
                          {%- render 'banner', content: error_message, status: 'error' -%}
                        {%- endif -%}

                        

                        {%- capture label -%}{{ 'general.newsletter.email' | t }}{%- endcapture -%}
                        {%- render 'input', name: 'contact[email]', label: label, type: 'email', required: true, autocomplete: 'email', enterkeyhint: 'send', self_submit: true -%}                  
                        {%- endif -%}
                    {%- endform -%}
                  

                

            {%- endcase -%}
          {%- endfor -%}
        

      {%- endif -%}

      {%- comment -%}
      ------------------------------------------------------------------------------------------------------------------
      SECONDARY AREA
      ------------------------------------------------------------------------------------------------------------------
      {%- endcomment -%}

      
        {%- comment -%}
        ----------------------------------------------------------------------------------------------------------------
        SOCIAL MEDIA + LOCALIZATION
        ----------------------------------------------------------------------------------------------------------------
        {%- endcomment -%}

        {%- if section.settings.show_social_media -%}
          {%- capture social_media -%}{%- render 'social-media' -%}{%- endcapture -%}
        {%- endif -%}

        {%- if section.settings.show_country_selector and localization.available_countries.size > 1 -%}
          {%- assign country_selector = true -%}
        {%- endif -%}

        {%- if section.settings.show_locale_selector and localization.available_languages.size > 1 -%}
          {%- assign locale_selector = true -%}
        {%- endif -%}

        {%- if social_media != blank or country_selector or locale_selector -%}
          

            {{- social_media -}}

            {%- if country_selector or locale_selector -%}
              

                {%- if social_media == blank -%}
                  {%- assign popover_horizontal_position = 'start' -%}
                {%- else -%}
                  {%- assign popover_horizontal_position = 'end' -%}
                {%- endif -%}

                {%- if country_selector -%}
                  {%- render 'localization-selector', type: 'country', show_country_name: section.settings.show_country_name, show_country_flag: section.settings.show_country_flag, popover_horizontal_position: popover_horizontal_position -%}
                {%- endif -%}

                {%- if locale_selector -%}
                  {%- render 'localization-selector', type: 'locale', popover_horizontal_position: popover_horizontal_position -%}
                {%- endif -%}
              

            {%- endif -%}
          

        {%- endif -%}

        {%- comment -%}
        ----------------------------------------------------------------------------------------------------------------
        COPYRIGHT + PAYMENT METHODS
        ----------------------------------------------------------------------------------------------------------------
        {%- endcomment -%}

        
          {%- if section.settings.show_payment_icons and shop.enabled_payment_types.size > 0 -%}
            

              {%- for type in shop.enabled_payment_types -%}
                {{- type | payment_type_svg_tag -}}
              {%- endfor -%}
            

          {%- endif -%}

          

© {{ 'now' | date: '%Y' }}, Red Panda Outdoor 

        

      

    

  

{% schema %}
{
  "name": "Footer",
  "class": "shopify-section--footer",
  "tag": "footer",
  "max_blocks": 5,
  "settings": [
    {
      "type": "checkbox",
      "id": "show_social_media",
      "label": "Show social media",
      "info": "To configure social media, go to your social media settings.",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_payment_icons",
      "label": "Show payment icons",
      "default": true
    },
    {
      "type": "header",
      "content": "Country/region selector",
      "info": "To add a country/region, go to your [markets settings.](/admin/settings/markets)"
    },
    {
      "type": "checkbox",
      "id": "show_country_selector",
      "label": "Show country/region selector",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_country_flag",
      "label": "Show country flag",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_country_name",
      "label": "Show country name",
      "default": true
    },
    {
      "type": "header",
      "content": "Language selector",
      "info": "To add a language, go to your [language settings.](/admin/settings/languages)"
    },
    {
      "type": "checkbox",
      "id": "show_locale_selector",
      "label": "Show language selector",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "text",
      "name": "Text",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "About our store"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "Content",
          "default": "

Use this text area to tell your customers about your brand and vision. You can change it in the theme editor.

"
        },
        {
          "type": "checkbox",
          "id": "enable_follow_on_shop",
          "label": "Show Follow on Shop",
          "info": "To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)",
          "default": true
        }
      ]
    },
    {
      "type": "links",
      "name": "Links",
      "settings": [
        {
          "type": "link_list",
          "id": "menu",
          "label": "Menu",
          "info": "This menu won't show dropdown items.",
          "default": "footer"
        },
        {
          "type": "checkbox",
          "id": "show_menu_title",
          "label": "Show menu title",
          "default": true
        }
      ]
    },
    {
      "type": "newsletter",
      "name": "Newsletter",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "Customers who subscribe will have their email address added to the \"accepts marketing\" [customer list](/admin/customers?query=&accepts_marketing=1)."
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "600 x 600px .png recommended"
        },
        {
          "type": "range",
          "id": "image_width",
          "min": 50,
          "max": 300,
          "step": 10,
          "unit": "px",
          "label": "Image width",
          "default": 150
        },
        {
          "type": "select",
          "id": "heading_size",
          "label": "Title size",
          "options": [
            {
              "value": "h3",
              "label": "H3"
            },
            {
              "value": "h4",
              "label": "H4"
            },
            {
              "value": "h5",
              "label": "H5"
            },
            {
              "value": "h6",
              "label": "H6"
            }
          ],
          "default": "h3"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Sign up to our newsletter"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "Content"
        }
      ]
    }
  ]
}
{% endschema %}
11

hi @Emiway1

You can try with this code.

{%- assign newsletter_block = section.blocks | where: 'type', 'newsletter' | first -%}

{%- if section.blocks.size > 3 -%}

{%- endif -%}

  

    

      {%- comment -%}
      ------------------------------------------------------------------------------------------------------------------
      BLOCK AREA
      ------------------------------------------------------------------------------------------------------------------
      {%- endcomment -%}

	  {%- if section.settings.show_social_media -%}
		{%- capture social_media -%}{%- render 'social-media' -%}{%- endcapture -%}
	  {%- endif -%}

      {%- if section.blocks.size > 0 -%}
        

          {%- for block in section.blocks -%}
            {%- case block.type -%}
              {%- when 'text' -%}
                {%- if block.settings.title != blank or block.settings.content != blank or shop.features.follow_on_shop? and block.settings.enable_follow_on_shop -%}
                  

                    {%- if block.settings.title != blank -%}
                      

{{ block.settings.title | escape }}

                    {%- endif -%}

                    {%- if block.settings.content != blank -%}
                      
                        {{- block.settings.content -}}
                      

                    {%- endif -%}

                    {%- if shop.features.follow_on_shop? and block.settings.enable_follow_on_shop -%}
                      
                        {{- shop | login_button: action: 'follow' -}}
                      

                    {%- endif -%}
                  

                {%- endif -%}

              {%- when 'links' -%}
                {%- if block.settings.menu != blank -%}
                  
                    {%- if block.settings.show_menu_title -%}
                      

{{ block.settings.menu.title }}

                    {%- endif -%}

                    
                      {%- for link in block.settings.menu.links -%}
                        - {{ link.title }}
                        
                      {%- endfor -%}
                    

                  

                {%- endif -%}

              {%- when 'newsletter' -%}
                
                  {%- if block.settings.image != blank -%}
                    {%- capture sizes -%}{{ block.settings.image_width }}px{%- endcapture -%}
                    {%- capture widths -%}{{ block.settings.image_width }}, {{ block.settings.image_width | times: 2 | at_most: block.settings.image.width }}{%- endcapture -%}
                    {%- capture style -%}max-width: {{ block.settings.image_width }}px{%- endcapture -%}
                    {{- block.settings.image | image_url: width: block.settings.image.width | image_tag: loading: 'lazy', style: style, sizes: sizes, widths: widths -}}
                  {%- endif -%}

                  

                    {%- if block.settings.title != blank -%}
                      

{{- block.settings.title | escape -}}

                    {%- endif -%}

                    {%- if block.settings.content != blank -%}
                      
                        {{- block.settings.content -}}
                      

                    {%- endif -%}

                    {%- form 'customer', id: 'footer-newsletter', class: 'footer__newsletter-form form' -%}
                      {%- if form.posted_successfully? -%}
                        {%- capture success_message -%}{{ 'general.newsletter.subscribed_successfully' | t }}{%- endcapture -%}
                        {%- render 'banner', content: success_message, status: 'success' -%}
                      {%- else -%}
                        {%- if form.errors -%}
                          {%- capture error_message -%}{{ form.errors.translated_fields['email'] }} {{ form.errors.messages['email'] }}{%- endcapture -%}
                          {%- render 'banner', content: error_message, status: 'error' -%}
                        {%- endif -%}

                        

                        {%- capture label -%}{{ 'general.newsletter.email' | t }}{%- endcapture -%}
                        {%- render 'input', name: 'contact[email]', label: label, type: 'email', required: true, autocomplete: 'email', enterkeyhint: 'send', self_submit: true -%}                  
                        {%- endif -%}
                    {%- endform -%}
                  

				  {%- if social_media != blank -%}
					{{- social_media -}}
				  {%- endif -%}	
                

            {%- endcase -%}
          {%- endfor -%}
        

      {%- endif -%}

      {%- comment -%}
      ------------------------------------------------------------------------------------------------------------------
      SECONDARY AREA
      ------------------------------------------------------------------------------------------------------------------
      {%- endcomment -%}

      
        {%- comment -%}
        ----------------------------------------------------------------------------------------------------------------
        SOCIAL MEDIA + LOCALIZATION
        ----------------------------------------------------------------------------------------------------------------
        {%- endcomment -%}

        {%- if section.settings.show_country_selector and localization.available_countries.size > 1 -%}
          {%- assign country_selector = true -%}
        {%- endif -%}

        {%- if section.settings.show_locale_selector and localization.available_languages.size > 1 -%}
          {%- assign locale_selector = true -%}
        {%- endif -%}

        {%- if social_media != blank or country_selector or locale_selector -%}
          

            {%- if country_selector or locale_selector -%}
              

                {%- if social_media == blank -%}
                  {%- assign popover_horizontal_position = 'start' -%}
                {%- else -%}
                  {%- assign popover_horizontal_position = 'end' -%}
                {%- endif -%}

                {%- if country_selector -%}
                  {%- render 'localization-selector', type: 'country', show_country_name: section.settings.show_country_name, show_country_flag: section.settings.show_country_flag, popover_horizontal_position: popover_horizontal_position -%}
                {%- endif -%}

                {%- if locale_selector -%}
                  {%- render 'localization-selector', type: 'locale', popover_horizontal_position: popover_horizontal_position -%}
                {%- endif -%}
              

            {%- endif -%}
          

        {%- endif -%}

        {%- comment -%}
        ----------------------------------------------------------------------------------------------------------------
        COPYRIGHT + PAYMENT METHODS
        ----------------------------------------------------------------------------------------------------------------
        {%- endcomment -%}

        
          {%- if section.settings.show_payment_icons and shop.enabled_payment_types.size > 0 -%}
            

              {%- for type in shop.enabled_payment_types -%}
                {{- type | payment_type_svg_tag -}}
              {%- endfor -%}
            

          {%- endif -%}

          

© {{ 'now' | date: '%Y' }}, Red Panda Outdoor 

        

      

    

  

{% schema %}
{
  "name": "Footer",
  "class": "shopify-section--footer",
  "tag": "footer",
  "max_blocks": 5,
  "settings": [
    {
      "type": "checkbox",
      "id": "show_social_media",
      "label": "Show social media",
      "info": "To configure social media, go to your social media settings.",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_payment_icons",
      "label": "Show payment icons",
      "default": true
    },
    {
      "type": "header",
      "content": "Country/region selector",
      "info": "To add a country/region, go to your [markets settings.](/admin/settings/markets)"
    },
    {
      "type": "checkbox",
      "id": "show_country_selector",
      "label": "Show country/region selector",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_country_flag",
      "label": "Show country flag",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_country_name",
      "label": "Show country name",
      "default": true
    },
    {
      "type": "header",
      "content": "Language selector",
      "info": "To add a language, go to your [language settings.](/admin/settings/languages)"
    },
    {
      "type": "checkbox",
      "id": "show_locale_selector",
      "label": "Show language selector",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "text",
      "name": "Text",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "About our store"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "Content",
          "default": "

Use this text area to tell your customers about your brand and vision. You can change it in the theme editor.

"
        },
        {
          "type": "checkbox",
          "id": "enable_follow_on_shop",
          "label": "Show Follow on Shop",
          "info": "To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)",
          "default": true
        }
      ]
    },
    {
      "type": "links",
      "name": "Links",
      "settings": [
        {
          "type": "link_list",
          "id": "menu",
          "label": "Menu",
          "info": "This menu won't show dropdown items.",
          "default": "footer"
        },
        {
          "type": "checkbox",
          "id": "show_menu_title",
          "label": "Show menu title",
          "default": true
        }
      ]
    },
    {
      "type": "newsletter",
      "name": "Newsletter",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "Customers who subscribe will have their email address added to the \"accepts marketing\" [customer list](/admin/customers?query=&accepts_marketing=1)."
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "600 x 600px .png recommended"
        },
        {
          "type": "range",
          "id": "image_width",
          "min": 50,
          "max": 300,
          "step": 10,
          "unit": "px",
          "label": "Image width",
          "default": 150
        },
        {
          "type": "select",
          "id": "heading_size",
          "label": "Title size",
          "options": [
            {
              "value": "h3",
              "label": "H3"
            },
            {
              "value": "h4",
              "label": "H4"
            },
            {
              "value": "h5",
              "label": "H5"
            },
            {
              "value": "h6",
              "label": "H6"
            }
          ],
          "default": "h3"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Sign up to our newsletter"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "Content"
        }
      ]
    }
  ]
}
{% endschema %}