Ad

How To Add Image In Section In Shopify?

- 1 answer

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.

enter image description here

Could you please help me where I am missing. Thanks

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad