[FIXED] How to add Image in section in Shopify?

Issue

I want to add Image in the home page and for that, I added this code in customimg.liquid under section

{
"type": "image_picker",
"id": "image_1",
"label": "Image"    
}

template->index.liquid

{% section 'customimg' %}
{{ settings.image_1 | img_url: 'master' | img_tag }}

The image is not showing up on the home page.

Could you please help me where I am missing. Thanks

Solution

Since you are calling the section like so {% section 'customimg' %} instead of using {{ content_for_index }} I assume that you like the section to be static.

First you need to read a lot about how to use sections in here: https://help.shopify.com/en/themes/development/sections

Issues with your code

The structure inside the section must be written this way:

{% schema %}
{
  "name": "Image",
  "settings": [
    {
      "type": "image_picker",
      "id": "image_1",
      "label": "Image"    
    }
  ]
}
{% endschema %}

This is deprecated img_url: 'master' don't use it. Use this instead img_url: '2048x' .

This is wrong {{ settings.image_1 .... You must call it like so {{ section.settings.image_1 ...

You can't call the image outside the section! You must call the image inside the section, since the section object is accessible only inside the section.

---

How should your code look:

sections/customimg.liquid

{{ section.settings.image_1 | img_url: '2048x' | img_tag }}

{% schema %}
{
  "name": "Image",
  "settings": [
    {
      "type": "image_picker",
      "id": "image_1",
      "label": "Image"    
    }
  ]
}
{% endschema %}

templates/index.html

{% section 'customimg' %}

---

As an alternative your code can be dynamic and look like this

sections/custommg.liquid

{{ section.settings.image_1 | img_url: '2048x' | img_tag }}

{% schema %}
{
  "name": "Image",
  "settings": [
    {
      "type": "image_picker",
      "id": "image_1",
      "label": "Image"    
    }
  ],
  "presets": [
    {
      "name": "Image",
      "category": "Content"
    }
  ]
}
{% endschema %}

templates/index.liquid

{{ content_for_index }}

The dynamic way allows you to add the section multiply times from the admin panel instead of a single one.

Answered By - drip

Answer Checked By - Cary Denson (PHPFixing Admin)