Image does not show up on product page

Shopify Discussion
,
1

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

TrendBlend_1-1729697913422.png
TrendBlend_1-1729697913422.png1919×949 182 KB

2

Hello :slightly_smiling_face:

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
3

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 %}
4

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
5

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

6

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 %}