Make an image in a grid clickable on empire

Store Design
1

Hi,

I am trying to add links to the images in this grid feature on empire and i got this far but for some reason the link does not redirect away from the page. It just refreshes it.

What am i missing?


{% schema %}
{
  "name": "Grid",
  "class": "promo-grid--section",
  "max_blocks": 20,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Grid"
    },
    {
      "id": "section_height",
      "type": "select",
      "label": "Image height",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        },
        {
          "value": "natural",
          "label": "Natural"
        }
      ],
      "default": "small"
    },
    {
      "id": "section_columns",
      "type": "range",
      "label": "Number of columns",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 2
    },
    {
      "id": "text_alignment",
      "type": "select",
      "label": "Text alignment",
      "options": [
        {
          "value": "top-left",
          "label": "Top left"
        },
        {
          "value": "top-center",
          "label": "Top center"
        },
        {
          "value": "top-right",
          "label": "Top right"
        },
        {
          "value": "center-left",
          "label": "Center left"
        },
        {
          "value": "center-center",
          "label": "Center center"
        },
        {
          "value": "center-right",
          "label": "Center right"
        },
        {
          "value": "bottom-left",
          "label": "Bottom left"
        },
        {
          "value": "bottom-center",
          "label": "Bottom center"
        },
        {
          "value": "bottom-right",
          "label": "Bottom right"
        }
      ],
      "default": "top-left"
    }
  ],
  "blocks": [
    {
      "type": "promotion",
      "name": "Promotional item",
      "settings": [
        {
          "id": "image",
          "type": "image_picker",
          "label": "Image"
        },
        {
          "type": "select",
          "id": "background_position",
          "label": "Background position",
          "options": [
            {
              "value": "top-left",
              "label": "Top left"
            },
            {
              "value": "top-center",
              "label": "Top center"
            },
            {
              "value": "top-right",
              "label": "Top right"
            },
            {
              "value": "center-left",
              "label": "Center left"
            },
            {
              "value": "center-center",
              "label": "Center center"
            },
            {
              "value": "center-right",
              "label": "Center right"
            },
            {
              "value": "bottom-left",
              "label": "Bottom left"
            },
            {
              "value": "bottom-center",
              "label": "Bottom center"
            },
            {
              "value": "bottom-right",
              "label": "Bottom right"
            }
          ],
          "default": "center-center"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Grid"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Text",
          "default": "Use this section to welcome customers to your store, say a bit about your brand, or share news."
        },
        {
          "type": "color",
          "id": "color",
          "label": "Text color",
          "default": "#4d4d4d"
        },

         {
          "type": "url",
          "id": "link_1",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_1",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_1",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_1",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_1",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_1",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "url",
          "id": "link_2",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_2",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_2",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_2",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_2",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_2",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "url",
          "id": "link_3",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_3",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_3",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_3",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_3",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_3",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "url",
          "id": "link_4",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_4",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_4",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_4",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_4",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_4",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "url",
          "id": "link_5",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_5",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_5",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_5",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_5",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_5",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "url",
          "id": "link_6",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_6",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_6",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_6",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_6",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_6",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },

 {
          "type": "url",
          "id": "image_link",
          "label": "Image link"
        },

        {
          "type": "header",
          "content": "Overlay"
        },
        {
          "id": "show_overlay",
          "type": "checkbox",
          "label": "Show overlay"
        },
        {
          "id": "background",
          "type": "color",
          "label": "Color"
        },
        {
          "id": "opacity",
          "type": "range",
          "label": "Opacity",
          "min": 1,
          "max": 100,
          "step": 1,
          "unit": "%",
          "default": 50
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Grid",
      "category": "Image",
      "blocks": [
        {
          "type": "promotion"
        },
        {
          "type": "promotion"
        },
        {
          "type": "promotion"
        },
        {
          "type": "promotion"
        }
      ]
    }
  ],
  "templates": [
    "index",
    "product",
	"page",
	"collection",
	"customers/login"
  ]
}

{% endschema %}
2

@ihernandez ,

You href route is going to a blank one. You have to put the under the forloop. I am not sure why you have two links but I fix the code below. Please replace your current code with the code below.

Please mark as a solution if it helps. Thank you


{% schema %}
{
  "name": "Grid",
  "class": "promo-grid--section",
  "max_blocks": 20,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Grid"
    },
    {
      "id": "section_height",
      "type": "select",
      "label": "Image height",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        },
        {
          "value": "natural",
          "label": "Natural"
        }
      ],
      "default": "small"
    },
    {
      "id": "section_columns",
      "type": "range",
      "label": "Number of columns",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 2
    },
    {
      "id": "text_alignment",
      "type": "select",
      "label": "Text alignment",
      "options": [
        {
          "value": "top-left",
          "label": "Top left"
        },
        {
          "value": "top-center",
          "label": "Top center"
        },
        {
          "value": "top-right",
          "label": "Top right"
        },
        {
          "value": "center-left",
          "label": "Center left"
        },
        {
          "value": "center-center",
          "label": "Center center"
        },
        {
          "value": "center-right",
          "label": "Center right"
        },
        {
          "value": "bottom-left",
          "label": "Bottom left"
        },
        {
          "value": "bottom-center",
          "label": "Bottom center"
        },
        {
          "value": "bottom-right",
          "label": "Bottom right"
        }
      ],
      "default": "top-left"
    }
  ],
  "blocks": [
    {
      "type": "promotion",
      "name": "Promotional item",
      "settings": [
        {
          "id": "image",
          "type": "image_picker",
          "label": "Image"
        },
        {
        "type": "url",
        "id": "image_link",
        "label": "Image link"
        },
        {
          "type": "select",
          "id": "background_position",
          "label": "Background position",
          "options": [
            {
              "value": "top-left",
              "label": "Top left"
            },
            {
              "value": "top-center",
              "label": "Top center"
            },
            {
              "value": "top-right",
              "label": "Top right"
            },
            {
              "value": "center-left",
              "label": "Center left"
            },
            {
              "value": "center-center",
              "label": "Center center"
            },
            {
              "value": "center-right",
              "label": "Center right"
            },
            {
              "value": "bottom-left",
              "label": "Bottom left"
            },
            {
              "value": "bottom-center",
              "label": "Bottom center"
            },
            {
              "value": "bottom-right",
              "label": "Bottom right"
            }
          ],
          "default": "center-center"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Grid"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Text",
          "default": "Use this section to welcome customers to your store, say a bit about your brand, or share news."
        },
        {
          "type": "color",
          "id": "color",
          "label": "Text color",
          "default": "#4d4d4d"
        },
        {
          "type": "text",
          "id": "text_1",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_1",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_1",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_1",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_1",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "text",
          "id": "text_2",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_2",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_2",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_2",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_2",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "url",
          "id": "link_3",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_3",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_3",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_3",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_3",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_3",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "url",
          "id": "link_4",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_4",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_4",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_4",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_4",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_4",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "url",
          "id": "link_5",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_5",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_5",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_5",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_5",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_5",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "url",
          "id": "link_6",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_6",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_6",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_6",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_6",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_6",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
		 {
          "type": "url",
          "id": "image_link",
          "label": "Image link"
        },
        {
          "type": "header",
          "content": "Overlay"
        },
        {
          "id": "show_overlay",
          "type": "checkbox",
          "label": "Show overlay"
        },
        {
          "id": "background",
          "type": "color",
          "label": "Color"
        },
        {
          "id": "opacity",
          "type": "range",
          "label": "Opacity",
          "min": 1,
          "max": 100,
          "step": 1,
          "unit": "%",
          "default": 50
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Grid",
      "category": "Image",
      "blocks": [
        {
          "type": "promotion"
        },
        {
          "type": "promotion"
        },
        {
          "type": "promotion"
        },
        {
          "type": "promotion"
        }
      ]
    }
  ],
  "templates": [
    "index",
    "product",
	"page",
	"collection",
	"customers/login"
  ]
}

{% endschema %}
3

@made4Uo I got this error when I replaced it with the new code.
Please see image attached.

ihernandez_0-1645620494049.png

4

Hi @ihernandez ;

I cannot really try this code since I don’t have the snippet “promo-block.” If you provide that, it would be helpful to debug. I am not sure why there is a lot of links in the block either. Anyway, I just delete the image_link in the schema.


{% schema %}
{
  "name": "Grid",
  "class": "promo-grid--section",
  "max_blocks": 20,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Grid"
    },
    {
      "id": "section_height",
      "type": "select",
      "label": "Image height",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        },
        {
          "value": "natural",
          "label": "Natural"
        }
      ],
      "default": "small"
    },
    {
      "id": "section_columns",
      "type": "range",
      "label": "Number of columns",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 2
    },
    {
      "id": "text_alignment",
      "type": "select",
      "label": "Text alignment",
      "options": [
        {
          "value": "top-left",
          "label": "Top left"
        },
        {
          "value": "top-center",
          "label": "Top center"
        },
        {
          "value": "top-right",
          "label": "Top right"
        },
        {
          "value": "center-left",
          "label": "Center left"
        },
        {
          "value": "center-center",
          "label": "Center center"
        },
        {
          "value": "center-right",
          "label": "Center right"
        },
        {
          "value": "bottom-left",
          "label": "Bottom left"
        },
        {
          "value": "bottom-center",
          "label": "Bottom center"
        },
        {
          "value": "bottom-right",
          "label": "Bottom right"
        }
      ],
      "default": "top-left"
    }
  ],
  "blocks": [
    {
      "type": "promotion",
      "name": "Promotional item",
      "settings": [
        {
          "id": "image",
          "type": "image_picker",
          "label": "Image"
        },
        {
        "type": "url",
        "id": "image_link",
        "label": "Image link"
        },
        {
          "type": "select",
          "id": "background_position",
          "label": "Background position",
          "options": [
            {
              "value": "top-left",
              "label": "Top left"
            },
            {
              "value": "top-center",
              "label": "Top center"
            },
            {
              "value": "top-right",
              "label": "Top right"
            },
            {
              "value": "center-left",
              "label": "Center left"
            },
            {
              "value": "center-center",
              "label": "Center center"
            },
            {
              "value": "center-right",
              "label": "Center right"
            },
            {
              "value": "bottom-left",
              "label": "Bottom left"
            },
            {
              "value": "bottom-center",
              "label": "Bottom center"
            },
            {
              "value": "bottom-right",
              "label": "Bottom right"
            }
          ],
          "default": "center-center"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Grid"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Text",
          "default": "Use this section to welcome customers to your store, say a bit about your brand, or share news."
        },
        {
          "type": "color",
          "id": "color",
          "label": "Text color",
          "default": "#4d4d4d"
        },
        {
          "type": "text",
          "id": "text_1",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_1",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_1",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_1",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_1",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "text",
          "id": "text_2",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_2",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_2",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_2",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_2",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "url",
          "id": "link_3",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_3",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_3",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_3",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_3",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_3",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "url",
          "id": "link_4",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_4",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_4",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_4",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_4",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_4",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "url",
          "id": "link_5",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_5",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_5",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_5",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_5",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_5",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "url",
          "id": "link_6",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "text_6",
          "label": "Button text"
        },
		{
          "type": "color",
          "id": "color_6",
          "label": "Button color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_6",
          "label": "Background color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "color_hover_6",
          "label": "Button Hover color",
          "default": "#4d4d4d"
        },
		{
          "type": "color",
          "id": "bg_hover_6",
          "label": "Background Hover color",
          "default": "#4d4d4d"
        },
        {
          "type": "header",
          "content": "Overlay"
        },
        {
          "id": "show_overlay",
          "type": "checkbox",
          "label": "Show overlay"
        },
        {
          "id": "background",
          "type": "color",
          "label": "Color"
        },
        {
          "id": "opacity",
          "type": "range",
          "label": "Opacity",
          "min": 1,
          "max": 100,
          "step": 1,
          "unit": "%",
          "default": 50
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Grid",
      "category": "Image",
      "blocks": [
        {
          "type": "promotion"
        },
        {
          "type": "promotion"
        },
        {
          "type": "promotion"
        },
        {
          "type": "promotion"
        }
      ]
    }
  ],
  "templates": [
    "index",
    "product",
	"page",
	"collection",
	"customers/login"
  ]
}
{% endschema %}
5

@made4Uo we had our sections customized to allow us to use multiple buttons on a promo block. I also want to be able to use the same section but make it so i can use it without the buttons and use the image as a link too. Is this what is causing the issue? This is the promo-block-background snippet and i also attached the one just called promo block snippet

{%- comment -%}
  @param blocks {array}
    Array of blocks to iterate block stylings through
{%- endcomment -%}


{% assign additional_classes = additional_classes | default: blank %}

{% assign has_link = false %}
{% if block.settings.block_link != blank %}
  {% assign has_link = true %}
{% endif %}

{%- capture classes -%}
  promo-block
  {% if block.settings.image != blank %}promo-block--image{% else %}promo-block--placeholder{% endif %}
  promo-block--{{ section.id }}--{{ block.id }}
  promo-block--index-{{ index }}
  promo-block--{{ background_position }}
  {% if maintain_aspect_ratio %}promo-mosaic--maintain-aspect-ratio{% endif %}
  {{ additional_classes | strip_newlines }}
{%- endcapture -%}

{% style %}
.promo-block--{{ section.id }}--{{ block.id }}.promo-block--top-center {
  background-position: center top;
}

.promo-block--{{ section.id }}--{{ block.id }}.promo-block--top-left {
  background-position: left top;
}

.promo-block--{{ section.id }}--{{ block.id }}.promo-block--top-right {
  background-position: right top;
}

.promo-block---{{ section.id }}-{{ block.id }}.promo-block--center-center {
  background-position: center center;
}

.promo-block--{{ section.id }}--{{ block.id }}.promo-block--center-left {
  background-position: left center;
}

.promo-block--{{ section.id }}--{{ block.id }}.promo-block--center-right {
  background-position: right center;
}

.promo-block--{{ section.id }}--{{ block.id }}.promo-block--bottom-center {
  background-position: center bottom;
}

.promo-block--{{ section.id }}--{{ block.id }}.promo-block--bottom-left {
  background-position: left bottom;
}

.promo-block--{{ section.id }}--{{ block.id }}.promo-block--bottom-right {
  background-position: right bottom;
}
{% endstyle %}

<{% if block.settings.title != blank and block.settings.text != blank %}article{% else %}div{% endif %}
  class="{{ classes | replace: '  ', ' ' | strip_newlines }} {% if block.settings.image == blank %}onboarding-image{% endif %}"
  {{ block.shopify_attributes }}
  {% if block.settings.image %}
    {%
      render 'rimg'
      img: block.settings.image,
      background: true,
      lazy: true,
      size: '1350x1350'
    %}
  {% endif %}
>
  {% if block.settings.image %}
    {%
      render 'rimg'
      img: block.settings.image,
      lazy: true,
      canvas: true,
      class: 'promo-block--background',
      size: '1350x1350'
    %}
  {% endif %}

  {%- capture wrapper_classes -%}
    promo-block--content
    promo-block--content-align-{{ text_alignment }}
    {% unless maintain_aspect_ratio %}promo-grid--maintain-aspect-ratio{% endunless %}
    {% unless compress_blocks %}promo-block--expanded{% endunless %}
    {% unless has_link %}promo-block--unlinked{% endunless %}
  {%- endcapture -%}
    

  

    {% if block.settings.title != blank %}
      ## 
        {{ block.settings.title | escape }}
      
    {% endif %}

    {% if block.settings.text != blank %}
      

        {{ block.settings.text | escape }}
      

    {% endif %}
    
{% for i in (1..6) %}
      
    {% capture links %}link_{{i}}{% endcapture %}
    {% capture text %}text_{{i}}{% endcapture %}
    {% capture color %}color_{{i}}{% endcapture %}
    {% capture bg %}bg_{{i}}{% endcapture %}
    {% capture colorHover %}color_hover_{{i}}{% endcapture %}
    {% capture bgHover %}bg_hover_{{i}}{% endcapture %}
    {% if block.settings[text] != blank%}
    

      
        {{ block.settings[text] | escape }}
      
    

      
    {% endif %}
{% endfor %}