How can i add image icons

[Pyimk]

I am using Craft theme.
To get social proof, i want to add the tv and news channels that shows my product.
How can i add something like this one under “As seen On”

[Huptech-Web]

Good day @Pyimk , Kindly provide me with the link to your code editor so that I can assist you in adding custom code for better understanding.

[Pyimk]

I am not sure about what you meant by link to code editor.
However, this is my website link, https://findla.co/
This website contain the “As Seen On” that I mentioned. https://go.tryxwrap.com/index-00169

[Huptech-Web]

Hello @Pyimk ,

Here’s a step-by-step guide to add a new section in Shopify:

1. Navigate to the Theme Library:

   • Go to your Shopify admin dashboard.
   • Click on “Online Store” in the left sidebar.
   • Then, click on “Themes”.

2. Access the Code Editor:

   • In the Themes section, find your current theme and click on “Actions”.
   • From the dropdown menu, select “Edit code”.

3. Proceed to Add a New Section:

   • In the code editor, locate the “Sections” folder on the left sidebar.
   • Click on “Add a new section”.

4. Assign a Name:

   • In the popup that appears, enter a name for the new section, such as icons. Shopify will automatically append .liquid, so the file will be named icons.liquid.
   • Click “Create section”.

5. Paste the Code:

   • Once the new section is created, you will see an empty file.
   • Copy the code you provided and paste it into the icons.liquid file.

6. Save Changes:

   • After pasting the code, click “Save” in the top right corner of the code editor.

     

{% style %}

.icons-section .heading {
    text-align: center;
}
.icons-section .heading h4 {
    text-transform: capitalize;
    font-weight: bold;
}
.icons-section .row {
    display: flex;
    column-gap: 30px;
    justify-content: center;
}
.icons-section .row .col img {
    width: 100px;
    height: auto;
    object-fit: contain;
    box-shadow: 3px 3px 6px 7px whitesmoke;
    border-radius: 50%;
}
  
{% endstyle %}

  

    

      

      {% if section.settings.heading != '' %}
        #### {{ section.settings.heading }}
      {% endif %}
      

      
        {% for block in section.blocks %}
          

            {% if block.settings.icons != '' %}
              
            {% endif %}
          

        {% endfor %}
      

    

  

{% schema %}
{
  "name": "Icons",
  "tag": "section",
  "class": "icons_section",
  "blocks": [
    {
      "name": "Icons",
      "type": "Icons",
      "settings": [
        {
          "type": "image_picker",
          "id": "icons",
          "label": "Icons"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading"
    }
  ],
  "presets": [
    {
      "name": "Icons",
      "settings": {}
    }
  ]
}
{% endschema %}
​

Please take a look at the screenshots.

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

[Pyimk]

Thanks, It works and it helps me a lot.