How to Add an Instagram Icon Category Section to Your Shopify Store

Abhishek Krishna in SHOPIFY Jun 26 / 5 months ago

Introduction

In today's digital age, social media integration is crucial for eCommerce success. One of the most popular platforms for businesses to showcase their products and engage with customers is Instagram. Adding an Instagram icon category section to your Shopify store can significantly enhance your online presence and drive traffic to your Instagram profile. This guide will walk you through the steps to create and optimize an Instagram icon category section for your Shopify store.

Step-by-Step Guide to Adding an Instagram Icon Category Section

Step 1: Create a New Section in Shopify

Access Your Theme Code:

• Go to your Shopify admin panel.
• Navigate to Online Store > Themes.
• Click Actions > Edit code on your active theme.

Create the Section File:

• In the left sidebar, locate the Sections folder.
• Click Add a new section.
• Name it insta-icon-category and click Create section.

Add the Section Schema and Liquid Code:

In the newly created section file (insta-icon-category.liquid), paste the following code:

{% comment %} Section Schema  {% endcomment %}
{% schema %}
{
  "name": "insta Icon Category",
  "max_blocks": 30,
  "blocks": [
    {
      "type": "collection",
      "name": "collection",
      "settings": [
        {
          "id": "single_cat",
          "type": "collection",
          "label": "collection"
        },
        {
          "id": "collection_name",
          "type": "text",
          "label": "collection_name"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "insta Icon Category",
      "category": "Collections"
    }
  ]
}
{% endschema %}

{% comment %} Liquid Code for Display {% endcomment %}
  {% for block in section.blocks %}
    {% assign data_title = block.settings.single_cat.title %}
    {% assign data_url = block.settings.single_cat.url %}
    {% assign collection_name = block.settings.collection_name %}  
          {% if collection_name == '' %}
            {% assign collection_show_name = data_title %}
          {% else %}
            {% assign collection_show_name = collection_name %}
          {% endif %}
          {{- collection_show_name | link_to: collection.url }} 
  {% endfor %}

Step 2: Add the Stylesheet

Locate the Theme Stylesheet:

• In the left sidebar, find the Assets folder.
• Open your main stylesheet file (theme.scss.liquid, styles.scss.liquid, or similar).

Add the Custom CSS:

Paste the following CSS code at the end of the stylesheet file:

{% comment %} Stylesheet {% endcomment %}

  * {
    box-sizing: border-box;
  }
  @media screen and (max-device-width: 1024px) {
    .scrollmenuitems {
      justify-content: flex-start !important;
    }
  }
  .circle {
    position: relative;
    width: 100px;
    height: 100px;
  }
  .circle svg {
    fill: none;
    stroke: #8a3ab9;
    stroke-linecap: round;
    stroke-width: 3;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: stroke-draw 6s ease-out infinite alternate;
  }
  .circle svg:hover {
    animation: stroke-draw 10s ease-out infinite alternate;
    cursor: pointer;
  }
  .circle img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    border-radius: 50%;
  }
  @keyframes stroke-draw {
    from {
      stroke: #8a3ab9;
      stroke-dasharray: 1;
    }
    to {
      stroke: #cd486b;
      transform: rotate(180deg);
      stroke-dasharray: 8;
    }
  }
  h4 {
    margin: 15px;
    padding: 0;
  }
  .instaslider {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
  }
  .instaslide {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 2;
  }
  .column {
    float: left;
    padding: 3px;
  }
  div.scrollmenuitems {
    overflow: auto;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div.scrollmenuitems a {
    display: inline-block;
    color: rgb(120, 85, 71);
    text-align: center;
    padding: 5px;
    text-decoration: none;
  }
  div.scrollmenuitems a:hover {
    color: black;
  }
  .cat_name {
    color: rgb(120, 85, 71);
  }

Step 3: Add the Section to Your Theme

Open the Theme Customizer:

• Go to Online Store > Themes.
• Click Customize on your active theme.

Add the New Section:

• In the customizer, navigate to the section where you want to add the Instagram icon category (e.g., homepage).
• Click Add section and find the new section you created (insta Icon Category).
• Add the section and configure the settings as desired.

Conclusion

Adding an Instagram icon category section to your Shopify store is a powerful way to enhance your social media integration, increase engagement, and drive traffic. By following this step-by-step guide, you can easily set up and optimize this feature, making your Shopify store more appealing to your customers. Implementing these SEO strategies will help your article rank higher on Google, ensuring more users find and benefit from your content.