Hello I made a custom section with custom blocks: Oct 23 5:37 PM - Codeshare
But it results in this and there is no image, does anyone know why the image does not appear.
I’m just trying to put an image under the title which covers about 1/5th of the screen but keeps its original format (200x200px) for example but also (300x200px) the full image needs to be visible. URL: Controllable LED Curtain – TrendBlend
Topic summary
Custom Shopify product section troubleshooting: an image under the title wasn’t rendering due to using deprecated sizing syntax with the Liquid image_url filter. The fix was to switch from img_url-style ‘240x240’ to image_url width/height parameters (e.g., width: 240, height: 240). Documentation link was provided.
After the image appeared, it displayed too small because a global CSS rule (.image-block { width: 20%; }) constrained it. Overriding that rule within the section (e.g., .custom-image-text-block .image-block { width: 100%; }) resolved the sizing issue.
Latest request: arrange only the filled product information items (up to 8 title + explanation pairs) around the product image with equal spacing, excluding the top where the section title sits. The shared code shows the schema (settings for titles/explanations and image picker), but no final layout/CSS implementation for positioning these text blocks was provided.
Key terms: Liquid image_url filter—Shopify’s templating helper to generate image URLs with size parameters; img_url is deprecated.
Status: Image visibility and size issues are resolved. Layout for evenly spaced text around the image remains open; no concrete solution posted yet. Code snippets and a screenshot were central to diagnosing the issues.
Hello 
The issue is with the syntax you’re using on the “image_url” filter:
src="{{ section.settings.image | image_url: '240x240' }}"
That syntax was for the deprecated “img_url”, for “image_url” you need to use this syntax:
src="{{ section.settings.image | image_url: width: 240, height: 240 }}"
Here you have the full docs on how to work with the “image_url” filter:
1 Like
Hello @nardoayala ,
The image finally shows up but is very small! I got this code now, but the image needs to be a lot bigger!
{% schema %}
{
"name": "Product Information Block",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Product Information"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "text_title_1",
"label": "Text Block 1 Title",
"default": "Feature 1"
},
{
"type": "textarea",
"id": "text_explanation_1",
"label": "Text Block 1 Explanation",
"default": "Explanation for feature 1."
},
{
"type": "text",
"id": "text_title_2",
"label": "Text Block 2 Title",
"default": "Feature 2"
},
{
"type": "textarea",
"id": "text_explanation_2",
"label": "Text Block 2 Explanation",
"default": "Explanation for feature 2."
},
{
"type": "text",
"id": "text_title_3",
"label": "Text Block 3 Title"
},
{
"type": "textarea",
"id": "text_explanation_3",
"label": "Text Block 3 Explanation"
},
{
"type": "text",
"id": "text_title_4",
"label": "Text Block 4 Title"
},
{
"type": "textarea",
"id": "text_explanation_4",
"label": "Text Block 4 Explanation"
},
{
"type": "text",
"id": "text_title_5",
"label": "Text Block 5 Title"
},
{
"type": "textarea",
"id": "text_explanation_5",
"label": "Text Block 5 Explanation"
},
{
"type": "text",
"id": "text_title_6",
"label": "Text Block 6 Title"
},
{
"type": "textarea",
"id": "text_explanation_6",
"label": "Text Block 6 Explanation"
},
{
"type": "text",
"id": "text_title_7",
"label": "Text Block 7 Title"
},
{
"type": "textarea",
"id": "text_explanation_7",
"label": "Text Block 7 Explanation"
},
{
"type": "text",
"id": "text_title_8",
"label": "Text Block 8 Title"
},
{
"type": "textarea",
"id": "text_explanation_8",
"label": "Text Block 8 Explanation"
}
]
}
{% endschema %}
You have this CSS rule in base.css that’s reducing your image size:
.image-block {
width: 20%; /* Adjust the width of the image block */
}
Do you need that for something? It seems problematic as a global style. You could overwrite it just for this specific section by adding this to your section’s styles:
.custom-image-text-block .image-block {
width: 100%;
}
1 Like
Hello @nardoayala , that was indeed the issue which I did not see. Thank you for your help! I have one other issue regarding the text placements. Again, the code is made so that I can fill in 8 titles with subtext (productinformation) around the productpicture (but not at the top since the title is there). Now I want to place each existing piece of productinformation (note that not all 8 pieces of text will be used but for the ones that are filled in) around the productpicture, with the same amount of space in between each. Kind regards,
Stef
This is my current code:
{% schema %}
{
"name": "Product Information Block",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Product Information"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "text_title_1",
"label": "Text Block 1 Title",
"default": "Feature 1"
},
{
"type": "textarea",
"id": "text_explanation_1",
"label": "Text Block 1 Explanation",
"default": "Explanation for feature 1."
},
{
"type": "text",
"id": "text_title_2",
"label": "Text Block 2 Title",
"default": "Feature 2"
},
{
"type": "textarea",
"id": "text_explanation_2",
"label": "Text Block 2 Explanation",
"default": "Explanation for feature 2."
},
{
"type": "text",
"id": "text_title_3",
"label": "Text Block 3 Title"
},
{
"type": "textarea",
"id": "text_explanation_3",
"label": "Text Block 3 Explanation"
},
{
"type": "text",
"id": "text_title_4",
"label": "Text Block 4 Title"
},
{
"type": "textarea",
"id": "text_explanation_4",
"label": "Text Block 4 Explanation"
},
{
"type": "text",
"id": "text_title_5",
"label": "Text Block 5 Title"
},
{
"type": "textarea",
"id": "text_explanation_5",
"label": "Text Block 5 Explanation"
},
{
"type": "text",
"id": "text_title_6",
"label": "Text Block 6 Title"
},
{
"type": "textarea",
"id": "text_explanation_6",
"label": "Text Block 6 Explanation"
},
{
"type": "text",
"id": "text_title_7",
"label": "Text Block 7 Title"
},
{
"type": "textarea",
"id": "text_explanation_7",
"label": "Text Block 7 Explanation"
},
{
"type": "text",
"id": "text_title_8",
"label": "Text Block 8 Title"
},
{
"type": "textarea",
"id": "text_explanation_8",
"label": "Text Block 8 Explanation"
}
]
}
{% endschema %}