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 · Accepted solution]

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 %}

<div class="icons-section">
  <div class="container">
    <div class="inner-icons">
      <div class="heading">
      {% if section.settings.heading != '' %}
        <h4>{{ section.settings.heading }}</h4>
      {% endif %}
      </div>

      <div class="row">
        {% for block in section.blocks %}
          <div class="col">
            {% if block.settings.icons != '' %}
              <img src="{{ block.settings.icons | img_url: 'master' }}" alt="{{ block.settings.icons.alt }}">
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

{% 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.