Dynamic social icons section in shopify - Lucifer's Code

Home Shopify Dynamic social icons section in shopify

Dynamic social icons section in shopify

Read

March 02, 2021

Create a dynamic social icons section in Shopify. you can change social icons using drop-down,3-4 types of icons category available & change their color & size,i use Font Awesome icons in this social section. also, add a link in the icon.

Change icon size,Space & Padding Dynamically
use different colors in icons
3-4 diffrent types of icons category provided

all the design & layout created in 1920 x 1080 screen size.
all the design & layout is responsive in desktop,tablet & mobile view.
all the content, fonts & image are free resources.

Note You have to add font-awesome cdn in your "theme.liquid" file this

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Section.liquid File

  <div class="icons-section">
  
  <h2>Our Social</h2>
    
    {%for block in section.blocks %}
    
    <span style="background-color:{{section.settings.icons_bg}};height:{{section.settings.icons_bg_eh}}px;width:{{section.settings.icons_bg_eh}}px;border-radius:{{section.settings.bg_radius}}px;">
      
      <a href="{{block.settings.icons_link}}">
        
        <i class="fa {{block.settings.icons_type}}" aria-hidden="true" style="color:{{block.settings.color_icons}};"></i>
      
      </a>
    
    </span>
    
    {%endfor%}

</div>
  
<style>
    .icons-section {
        display: table;
        margin: 0 auto;
        text-align: center;
    }
    .icons-section span i{
        color:{{block.settings.color_icons}};
        font-size:{{section.settings.font_size}}px;
        padding:0 {{section.settings.icons_pad}}px;
    }
    .icons-section span {
    
        margin: 15px;
        display: inline-block;
        display: inline-flex;
        align-items: center;
        text-align: center;
        justify-content: center;
    }

</style>
  
  {% schema %}
    {
      "name": "Social Network",
      "settings": 
      [
         
        {
          "type": "range",
          "id": "font_size",
          "label": "Icons Size",
          "min": 0,
          "max": 45,
          "step": 1,
          "default": 20
        },
        {
          "type": "range",
          "id": "icons_pad",
          "label": "Icons Space",
          "min": 0,
          "max": 25,
          "step": 1,
          "default": 5
        },
        {
          "type": "range",
          "id": "icons_bg_eh",
          "label": "Icons Bg Size",
          "min": 0,
          "max": 100,
          "step": 1,
          "default": 52
        }
      ],
      "blocks": 
      [
        {
          "type":"block",
          "name":"add icons",
          "settings":
          [ 
            {
              "type": "select",
              "id": "icons_type",
              "label": "Select Icons",
              "default": "fa-facebook-official",
              "options": 
              [
                  {"value": "fa-facebook-official", "label": "Facebook 1"},
                  {"value": "fa-facebook", "label": "Facebook 2"},
                  {"value": "fa-facebook-square", "label": "Facebook 3"},
                  {"value": "fa-twitter", "label": "Twitter 1"},
                  {"value": "fa-twitter-square", "label": "Twitter 2"},
                  {"value": "fa-instagram", "label": "Instagram"},
                  {"value": "fa-behance", "label": "Behance 1"},
                  {"value": "fa-behance-square", "label": "Behance 2"},
                  {"value": "fa-pinterest-p", "label": "Pinterest 1"},
                  {"value": "fa-pinterest-square", "label": "Pinterest 2"},
                  {"value": "fa-pinterest", "label": "Pinterest 3"}
              ]
            },
            {
              "type": "text",
              "id": "icons_link",
              "label": "Add Link",
              "default": "#"
            },
            {
              "type": "color",
              "id": "color_icons",
              "label": "Main Color Change",
              "default": "#3e3e3e"
            }            
          ]
        }       
      ],
      "presets": 
        [
          {
            "name": "Add Social Icons",
            "category": "Custom layout"
          }
        ]
    }
  {% endschema %}
  
  {% stylesheet %}
  {% endstylesheet %}
  
  {% javascript %}
  {% endjavascript %}

Output