Why can't I see the img tag in the Prestige theme?

Store Design
, , ,

Topic summary

A developer is creating a custom page.liquid template in the Prestige Shopify theme but cannot see images on the frontend, despite the <img> tags appearing in the HTML DOM with proper srcset attributes.

Code Structure:

  • Uses Liquid templating with section settings and blocks
  • Implements <picture> elements with responsive srcset attributes
  • Includes both <source> tags for mobile and image_tag filters for desktop

Current Issue:

  • Images render in the DOM inspector but don’t display visually
  • Missing <img> tag in the rendered output

Troubleshooting Steps Suggested:

  • Verify the template is correctly selected in the Shopify customizer
  • Ensure images are actually added through the block settings in the theme editor
  • Code validation appears correct

Status: The issue remains unresolved. The developer has shared preview URLs and screenshots showing the DOM structure, but the root cause of why images aren’t rendering visually hasn’t been identified yet.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

I am creating a new page.liquid but with the code that I provided below I can not see the images. In html dom I can see srcset=“image” but in the frontend I can not see tag thats why I can not see the images. What am I missing?

<div class="materialGuide">
  <div class="heroWrapper">
    <div class="heroText">
      <h1>{{ section.settings.materialHeading }}</h1>
      <p>{{ section.settings.materialDesc }}</p>
    </div>
    <img class="heroImage" srcset="{{ section.settings.materialHero | img_url: 'master' }}">
  </div>
  <h2>{{ section.settings.materialBottomHeading }}</h2>
  {%- for block in section.blocks -%}
    <div class="materialComp1">
      <picture>
        {%- if block.settings.comp1 != blank -%}
          <source
            media="(max-width: 699px)"
            srcset="{{ block.settings.comp1 | image_url: width: '400x' }} 400w, {{ block.settings.comp1 | image_url: width: '600x' }} 600w, {{ block.settings.comp1 | image_url: width: '800x' }} 800w, {{ block.settings.comp1 | image_url: width: '1000x' }} 1000w"
            width="{{ block.settings.comp1.width }}"
            height="{{ block.settings.comp1.height }}">
        {%- endif -%}

        {%- if block.settings.image != blank -%}
          {{- block.settings.image | image_url: width: block.settings.image.width | image_tag: loading: 'lazy', sizes: sizes, widths: '200,300,400,500,600,700,800,900,1000,1200,1400,1600,1800,2000,2200,2400,2600,2800,3000,3200', reveal-on-scroll: block.settings.reveal_on_scroll -}}
        {%- endif -%}
      </picture>
      <div class="comp1Right">
        <h3>{{ block.settings.comp1Heading }}</h3>
        <p>{{ block.settings.comp1Desc }}</p>
      </div>
    </div>
  {%- endfor -%}
</div>

{% schema %}
  {
    "name": "Material Guide",
    "settings": [
      {
        "type": "text",
        "id": "materialHeading",
        "label": "Material Heading",
        "default": "Materialien"
      }, {
        "type": "text",
        "id": "materialDesc",
        "label": "Material Description",
        "default": "Dies ist dein Guide für die vielseitigen Fasern und Materialien, welche wir in unseren Jeans und Non-Denim Produkten verarbeiten."
      }, {
        "type": "image_picker",
        "id": "materialHero",
        "label": "Material Hero"
      }, {
        "type": "text",
        "id": "materialBottomHeading",
        "label": "Material Component Heading",
        "default": "Stoffe/Materialien"
      }
    ],
    "blocks": [
      {
        "type": "block",
        "name": "Material Guide Blocks",
        "settings": [
          {
            "type": "image_picker",
            "id": "comp1",
            "label": "Image 1"
          }, {
            "type": "text",
            "id": "comp1Heading",
            "label": "Component 1 Heading",
            "default": "Heading"
          }, {
            "type": "text",
            "id": "comp1Desc",
            "label": "Component 1 Description",
            "default": "Description"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Material Guide"
      }
    ]
  }
{% endschema %}

<style>
  section#shopify-section-template--18001063641353__main .section-spacing.section-spacing--tight {
    display: none;
  }

  .heroWrapper {
    position: relative;
  }

  .heroText {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50%;
    text-align: center;
    color: white;
  }

  .heroText h1 {
    margin-bottom: 15px;
  }

  .heroText p {
    width: 50%;
    margin: 0 auto;
    font-family: var(--heading-font-family);
  }

  .materialGuide h2 {
    position: relative;
    margin: 5% 0 3%;
    text-align: center;
    color: #000;
  }

  .materialGuide h2:after {
    content: "";
    display: block;
    width: 70px;
    height: 2px;
    background: #D4CDB5;
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .materialComp1 {
    display: flex;
    align-items: center;
    width: 90%;
    margin: 3% auto;
  }

  .materialComp1 img {
    width: 50%;
    height: auto;
  }

  .comp1Right {
    width: 50%;
    margin: 0 7%;
  }

  .comp1Right h3 {
    font-size: 20px;
    color: #000;
    font-weight: 100;
    margin-bottom: 10px;
  }

  .comp1Right p {
    color: #000;
    font-size: 12px;
    font-family: var(--heading-font-family);
    width: 80%;
  }
</style>
1 Like
2

@PamDigital

Please share page.liquid page URL!

Thanks!

3

This is the preview;

https://q3pjl1nejtw2rgjr-52530872502.shopifypreview.com

and this is the page ;
/pages/material-test

4

@PamDigital

Please go to your customizer and select your template and add the block insert the image !

I think your code is correct.

Thanks!

5

I can actually see the images in the HTML DOM even though they are not visible since there is no tag. I am sharing a screenshot;

image.jpg
image.jpg1915×912 220 KB