Shopify Question posted in
The Shopify help center can be found here.

Creating linkable Image with Text in Blocks Shopify

I tried to make a block in Shopify section, a linkable image with text – they should be made a new section for my page and has 3 features: adding an image, link for the image, a header and description. Also it could has 2 column. But, this script cannot be saved. Here is it’s

  {% for block in section.blocks %}  
  <div class="img" id="call-to-action">   
        <h1> {{ block.settings.text-box-title }} </h1>
        <h3> {{ block.settings.text-box-content }} </h3>
        <a href="{{ image-settings.link }}" class="img img--cta">{{ image.settings.link }}</a>
    </div>
  {% endfor %}


{% schema %}
{
  "name": "CTA Blocks",
  "max_blocks": 3,
   "settings": [
    {
      "id": "text-box",
      "type": "text",
      "label": "Heading",
      "default": "Title"
    }
  ],
  "blocks": [
    {
      "name": "Add Image with Text",
      "settings": [
        {
          "id": "image",
          "type": "image_picker",
            "label": "Image"
        },
        {
          "id": "link",
          "type": "url",
        "label": "Image link"
        },
        {
        "name": "Text Box",
        "settings": [
            {
                "id": "text-box-title",
                "type": "text",
                "label": "Heading",
                "default": "Title"
            },
            {
                "id": "text-box-content",
                "type": "richtext",
                "label": "Add custom text below",
                "default": "<p>Add your text here</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Call to Action Blocks",
      "category": "CTA button",
      "blocks": [
        { 
          "type": "select"
        },
        {
          "type": "select"
        }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Could you please help me? Thanks.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    This is the result from your script when I add new section block (or new image)

    This what I need when add new section block (or new image)


  2. 0

    You have invalid JSON, it should be:

    {
    "name": "CTA Blocks",
    "max_blocks": 3,
    "settings": [{
        "id": "text-box",
        "type": "text",
        "label": "Heading",
        "default": "Title"
    }],
    "blocks": [{
        "name": "Add Image with Text",
        "settings": [{
                "id": "image",
                "type": "image_picker",
                "label": "Image"
            },
            {
                "id": "link",
                "type": "url",
                "label": "Image link"
            },
            {
                "name": "Text Box",
                "settings": [{
                        "id": "text-box-title",
                        "type": "text",
                        "label": "Heading",
                        "default": "Title"
                    },
                    {
                        "id": "text-box-content",
                        "type": "richtext",
                        "label": "Add custom text below",
                        "default": "<p>Add your text here</p>"
                    }
                ]
            }
        ],
        "presets": [{
            "name": "Call to Action Blocks",
            "category": "CTA button",
            "blocks": [{
                    "type": "select"
                },
                {
                    "type": "select"
                }
            ]
        }]
    }]
}

    This is a good tool to check your JSON:
    https://jsonlint.com/

    Login or Signup to reply.
  3. 0

    I’ve fixed the issues of your code. So, please use here below attached updated code.

    {% for block in section.blocks %}  
  <div class="img" id="call-to-action-{{ block.id }}">   
    <h1> {{ block.settings.text-box-title }} </h1>
    <h3> {{ block.settings.text-box-content }} </h3>
    <a href="{{ block.settings.link }}" class="img-link-wrap img--cta">
      <img src="{{ block.settings.image | img_url : '600x600' }}" alt="" >
    </a>
  </div>
{% endfor %}


{% schema %}
{
    "name": "CTA Blocks",
    "max_blocks": 2,
    "settings": [
      {
        "id": "text-box",
        "type": "text",
        "label": "Heading",
        "default": "Title"
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Add Image with Text",
        "settings": [
            {
              "id": "image",
              "type": "image_picker",
              "label": "Image"
            },
            {
              "id": "link",
              "type": "url",
              "label": "Image link"
            },
            {
              "id": "text-box-title",
              "type": "text",
              "label": "Heading",
              "default": "Title"
            },
            {
              "id": "text-box-content",
              "type": "richtext",
              "label": "Add custom text below",
              "default": "<p>Add your text here</p>"
            }
          ]
       }     
    ],
    "presets": [
      {
        "name": "CTA Blocks",
        "category": "CTA button",
        "blocks": [
          { 
            "type": "image"
          }
        ]
      }
    ]
}
{% endschema %}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search