Currently, I'm in the process of developing a unique Shopify section that showcases text alongside images. To enable users to upload images via the theme customizer, I have implemented the image_picker settings within the schema. The issue I am facing is that while the images are rendered in the HTML console, they fail to display on the actual page.
Below is the code snippet:
<section class="custom-section">
<div class="container-wrapper">
<div class="text-section">
<div class="title-container">
<h2>{{ section.settings.heading }}</h2>
</div>
<div class="text-container">
<p>{{ section.settings.content }}</p>
</div>
<div class="spacer"></div>
<h1 class="circular">
<span class="char1">W</span>
<!-- ... additional chars ... -->
<span class="char39">.</span>
</h1>
</div>
<div class="images-wrapper">
{% if section.settings.image1 %}
<img src="{{ section.settings.image1 | image_url: 'master' }}" alt="Image 1">
{% endif %}
{% if section.settings.image2 %}
<img src="{{ section.settings.image2 | image_url: 'master' }}" alt="Image 2">
{% endif %}
{% if section.settings.image3 %}
<img src="{{ section.settings.image3 | image_url: 'master' }}" alt="Image 3">
{% endif %}
</div>
</div>
<div class="blue-background"></div>
</section>
Schema:
{
"name": "Custom Section",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Our jewelry"
},
{
"type": "text",
"id": "content",
"label": "Content",
"default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor tincidunt posuere. Nam tempus, leo ac tempus hendrerit."
},
{
"type": "text",
"id": "circular_content",
"label": "Circular Content",
"default": "We’re the bestie that you can be yourself with."
},
{
"type": "image_picker",
"id": "image1",
"label": "Image 1"
},
{
"type": "image_picker",
"id": "image2",
"label": "Image 2"
},
{
"type": "image_picker",
"id": "image3",
"label": "Image 3"
}
],
"presets": [
{
"name": "Sample Section"
}
]
}
Steps Taken to Resolve the Issue:
- I've double-checked the URLs in the console, but still unsure whether they are correct (Is there a way to verify the paths?).
Shown below:
https://i.sstatic.net/nofFguPN.png
- Examined the CSS for any properties that may hide the images (e.g., display: none, visibility: hidden, z-index issues).
Despite these efforts, the images persist in not appearing on the page.
Queries:
- What could possibly be causing the failure of images to appear even when properly referenced in the HTML?
- Are there any further steps or checks recommended to troubleshoot and resolve this problem?
Your assistance would be immensely valuable!