Code needed to making a banner image clickable in the new 15.0 Dawn theme

Store Design
, ,
1

Where can i locate the correct code to use to make my first banner on the dawn theme clickable

2

Hi, @Steph1232aqwse

Can you take a screenshot to describe your requirements? So that I can assist you.

3

@AnneLuo hi. I just had a question a little away from the topic.

I wanted to know how to add that custom message beneath that underline in our posts. I am talking about the part where you ask the client to like or accept your answer as a solution.

Thanks

4

Hi Anne this is the first image banner block on the dawn theme i was not make it clickable.

5

Okay. Got it. Do you want to click and jump to another page? This requires modifying the theme code.

6

Hi. Are you talking about a personal signature?

7

AnneLuo_0-1720427499711.png
AnneLuo_0-1720427499711.png1017×452 17.5 KB

1 Like
8

Screenshot_2024-07-08-14-49-42-536-edit_com.android.chrome.jpg
Screenshot_2024-07-08-14-49-42-536-edit_com.android.chrome.jpg1080×2340 153 KB

this is what I am talking about

9

This helps actually. Thanks

10

@Steph1232aqwse do you need the entire image banner section clickable?

11

@Steph1232aqwse Open your image-banner.liquid file and replace this code

{{ ‘section-image-banner.css’ | asset_url | stylesheet_tag }}

{%- if section.settings.image_height == ‘adapt’ and section.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner–mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: ‘’;
display: block;
}
}

@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: ‘’;
display: block;
}
}
{%- endstyle -%}
{%- endif -%}

{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}

{%- liquid
assign full_width = ‘100vw’
assign widths = ‘375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840’

if section.settings.image_behavior == ‘ambient’
assign half_width = ‘60vw’
assign full_width = ‘120vw’
assign stacked_sizes = ‘(min-width: 750px) 60vw, 120vw’
assign widths = ‘450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680’
elsif section.settings.image_behavior == ‘fixed’ or section.settings.image_behavior == ‘zoom-in’
assign half_width = ‘100vw’
assign stacked_sizes = ‘100vw’
else
assign half_width = ‘50vw’
assign stacked_sizes = ‘(min-width: 750px) 50vw, 100vw’
endif
assign fetch_priority = ‘auto’
if section.index == 1
assign fetch_priority = ‘high’
endif
-%}

{%- if section.settings.image != blank -%}
{%- liquid assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio if section.settings.image_2 != blank assign image_class = 'banner__media-image-half' endif if section.settings.image_2 != blank and section.settings.stack_images_on_mobile assign sizes = stacked_sizes elsif section.settings.image_2 != blank assign sizes = half_width else assign sizes = full_width endif -%} {{ section.settings.image | image_url: width: 3840 | image_tag: width: section.settings.image.width, height: image_height, class: image_class, sizes: sizes, widths: widths, fetchpriority: fetch_priority }}
{%- elsif section.settings.image_2 == blank -%}
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%} {%- if section.settings.image_2 != blank -%}
{%- liquid assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio if section.settings.image != blank assign image_class_2 = 'banner__media-image-half' endif if section.settings.image != blank and section.settings.stack_images_on_mobile assign sizes = stacked_sizes elsif section.settings.image_2 != blank assign sizes = half_width else assign sizes = full_width endif -%} {{ section.settings.image_2 | image_url: width: 3840 | image_tag: width: section.settings.image_2.width, height: image_height_2, class: image_class_2, sizes: sizes, widths: widths, fetchpriority: fetch_priority }}
{%- endif -%}
{%- for block in section.blocks -%} {%- case block.type -%} {%- when 'heading' -%}

{{ block.settings.heading }}

{%- when 'text' -%}

{{ block.settings.text }}

{%- when 'buttons' -%}
{%- if block.settings.button_label_1 != blank -%} {{- block.settings.button_label_1 | escape -}} {%- endif -%} {%- if block.settings.button_label_2 != blank -%} {{- block.settings.button_label_2 | escape -}} {%- endif -%}
{%- endcase -%} {%- endfor -%}
{% schema %} { "name": "t:sections.image-banner.name", "tag": "section", "class": "section", "disabled_on": { "groups": ["header", "footer"] }, "settings": [ { "type": "url", "id": "url", "label": "Link for Image Banner" }, { "type": "image_picker", "id": "image", "label": "t:sections.image-banner.settings.image.label" }, { "type": "image_picker", "id": "image_2", "label": "t:sections.image-banner.settings.image_2.label" }, { "type": "range", "id": "image_overlay_opacity", "min": 0, "max": 100, "step": 10, "unit": "%", "label": "t:sections.image-banner.settings.image_overlay_opacity.label", "default": 0 }, { "type": "select", "id": "image_height", "options": [ { "value": "adapt", "label": "t:sections.image-banner.settings.image_height.options__1.label" }, { "value": "small", "label": "t:sections.image-banner.settings.image_height.options__2.label" }, { "value": "medium", "label": "t:sections.image-banner.settings.image_height.options__3.label" }, { "value": "large", "label": "t:sections.image-banner.settings.image_height.options__4.label" } ], "default": "medium", "label": "t:sections.image-banner.settings.image_height.label", "info": "t:sections.image-banner.settings.image_height.info" }, { "type": "select", "id": "desktop_content_position", "options": [ { "value": "top-left", "label": "t:sections.image-banner.settings.desktop_content_position.options__1.label" }, { "value": "top-center", "label": "t:sections.image-banner.settings.desktop_content_position.options__2.label" }, { "value": "top-right", "label": "t:sections.image-banner.settings.desktop_content_position.options__3.label" }, { "value": "middle-left", "label": "t:sections.image-banner.settings.desktop_content_position.options__4.label" }, { "value": "middle-center", "label": "t:sections.image-banner.settings.desktop_content_position.options__5.label" }, { "value": "middle-right", "label": "t:sections.image-banner.settings.desktop_content_position.options__6.label" }, { "value": "bottom-left", "label": "t:sections.image-banner.settings.desktop_content_position.options__7.label" }, { "value": "bottom-center", "label": "t:sections.image-banner.settings.desktop_content_position.options__8.label" }, { "value": "bottom-right", "label": "t:sections.image-banner.settings.desktop_content_position.options__9.label" } ], "default": "middle-center", "label": "t:sections.image-banner.settings.desktop_content_position.label" }, { "type": "checkbox", "id": "show_text_box", "default": true, "label": "t:sections.image-banner.settings.show_text_box.label" }, { "type": "select", "id": "desktop_content_alignment", "options": [ { "value": "left", "label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label" }, { "value": "center", "label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label" }, { "value": "right", "label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label" } ], "default": "center", "label": "t:sections.image-banner.settings.desktop_content_alignment.label" }, { "type": "color_scheme", "id": "color_scheme", "label": "t:sections.all.colors.label", "default": "scheme-1" }, { "type": "header", "content": "t:sections.all.animation.content" }, { "type": "select", "id": "image_behavior", "options": [ { "value": "none", "label": "t:sections.all.animation.image_behavior.options__1.label" }, { "value": "ambient", "label": "t:sections.all.animation.image_behavior.options__2.label" }, { "value": "fixed", "label": "t:sections.all.animation.image_behavior.options__3.label" }, { "value": "zoom-in", "label": "t:sections.all.animation.image_behavior.options__4.label" } ], "default": "none", "label": "t:sections.all.animation.image_behavior.label" }, { "type": "header", "content": "t:sections.image-banner.settings.mobile.content" }, { "type": "select", "id": "mobile_content_alignment", "options": [ { "value": "left", "label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label" }, { "value": "center", "label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label" }, { "value": "right", "label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label" } ], "default": "center", "label": "t:sections.image-banner.settings.mobile_content_alignment.label" }, { "type": "checkbox", "id": "stack_images_on_mobile", "default": true, "label": "t:sections.image-banner.settings.stack_images_on_mobile.label" }, { "type": "checkbox", "id": "show_text_below", "default": true, "label": "t:sections.image-banner.settings.show_text_below.label" } ], "blocks": [ { "type": "heading", "name": "t:sections.image-banner.blocks.heading.name", "limit": 1, "settings": [ { "type": "inline_richtext", "id": "heading", "default": "t:sections.image-banner.blocks.heading.settings.heading.default", "label": "t:sections.image-banner.blocks.heading.settings.heading.label" }, { "type": "select", "id": "heading_size", "options": [ { "value": "h2", "label": "t:sections.all.heading_size.options__1.label" }, { "value": "h1", "label": "t:sections.all.heading_size.options__2.label" }, { "value": "h0", "label": "t:sections.all.heading_size.options__3.label" }, { "value": "hxl", "label": "t:sections.all.heading_size.options__4.label" }, { "value": "hxxl", "label": "t:sections.all.heading_size.options__5.label" } ], "default": "h1", "label": "t:sections.all.heading_size.label" } ] }, { "type": "text", "name": "t:sections.image-banner.blocks.text.name", "limit": 1, "settings": [ { "type": "inline_richtext", "id": "text", "default": "t:sections.image-banner.blocks.text.settings.text.default", "label": "t:sections.image-banner.blocks.text.settings.text.label" }, { "type": "select", "id": "text_style", "options": [ { "value": "body", "label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label" }, { "value": "subtitle", "label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label" }, { "value": "caption-with-letter-spacing", "label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label" } ], "default": "body", "label": "t:sections.image-banner.blocks.text.settings.text_style.label" } ] }, { "type": "buttons", "name": "t:sections.image-banner.blocks.buttons.name", "limit": 1, "settings": [ { "type": "text", "id": "button_label_1", "default": "t:sections.image-banner.blocks.buttons.settings.button_label_1.default", "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label", "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info" }, { "type": "url", "id": "button_link_1", "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label" }, { "type": "checkbox", "id": "button_style_secondary_1", "default": false, "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label" }, { "type": "text", "id": "button_label_2", "default": "t:sections.image-banner.blocks.buttons.settings.button_label_2.default", "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label", "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info" }, { "type": "url", "id": "button_link_2", "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label" }, { "type": "checkbox", "id": "button_style_secondary_2", "default": false, "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label" } ] } ], "presets": [ { "name": "t:sections.image-banner.presets.name", "blocks": [ { "type": "heading" }, { "type": "text" }, { "type": "buttons" } ] } ] } {% endschema %}

This will give you an option in your customizer to add links within your store to certain pages, products, etc or any external url by pasting the pasting the url

Shadab_dev_0-1720441274158.png
Shadab_dev_0-1720441274158.png338×252 17.1 KB

Hope this helps

1 Like
12

Hi
Yes please. i need the entire banner image clickable

13

Hi @Steph1232aqwse ,

Please go to image-banner.liquid file and change all code:

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- if section.settings.image_height == 'adapt' and section.settings.image != blank -%}
  {%- style -%}
    @media screen and (max-width: 749px) {
      #Banner-{{ section.id }}::before,
      #Banner-{{ section.id }} .banner__media::before,
      #Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
        padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }

    @media screen and (min-width: 750px) {
      #Banner-{{ section.id }}::before,
      #Banner-{{ section.id }} .banner__media::before {
        padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }
  {%- endstyle -%}
{%- endif -%}

{%- style -%}
  #Banner-{{ section.id }}::after {
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }
  .banner__action-full {
    display: block !important;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
  }
{%- endstyle -%}

{%- liquid
  assign full_width = '100vw'
  assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'

  if section.settings.image_behavior == 'ambient'
    assign half_width = '60vw'
    assign full_width = '120vw'
    assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
    assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
  elsif section.settings.image_behavior == 'fixed' or section.settings.image_behavior == 'zoom-in'
    assign half_width = '100vw'
    assign stacked_sizes = '100vw'
  else
    assign half_width = '50vw'
    assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
  endif
  assign fetch_priority = 'auto'
  if section.index == 1
    assign fetch_priority = 'high'
  endif
-%}

  {%- if section.settings.image != blank -%}
    

      {%- liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank
          assign image_class = 'banner__media-image-half'
        endif
        if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
          assign sizes = stacked_sizes
        elsif section.settings.image_2 != blank
          assign sizes = half_width
        else
          assign sizes = full_width
        endif
      -%}
      {{
        section.settings.image
        | image_url: width: 3840
        | image_tag:
          width: section.settings.image.width,
          height: image_height,
          class: image_class,
          sizes: sizes,
          widths: widths,
          fetchpriority: fetch_priority
      }}
    

  {%- elsif section.settings.image_2 == blank -%}
    
      {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
    

  {%- endif -%}
  {%- if section.settings.image_2 != blank -%}
    
      {%- liquid
        assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
        if section.settings.image != blank
          assign image_class_2 = 'banner__media-image-half'
        endif
        if section.settings.image != blank and section.settings.stack_images_on_mobile
          assign sizes = stacked_sizes
        elsif section.settings.image_2 != blank
          assign sizes = half_width
        else
          assign sizes = full_width
        endif
      -%}
      {{
        section.settings.image_2
        | image_url: width: 3840
        | image_tag:
          width: section.settings.image_2.width,
          height: image_height_2,
          class: image_class_2,
          sizes: sizes,
          widths: widths,
          fetchpriority: fetch_priority
      }}
    

  {%- endif -%}
  
    

      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'heading' -%}
            ## 
              {{ block.settings.heading }}
            
          {%- when 'text' -%}
            
              

{{ block.settings.text }}

            

          {%- when 'buttons' -%}
            
              {%- if block.settings.button_label_1 != blank -%}
                
                  {{- block.settings.button_label_1 | escape -}}
                
              {%- endif -%}
              {%- if block.settings.button_label_2 != blank -%}
                
                  {{- block.settings.button_label_2 | escape -}}
                
              {%- endif -%}
            

        {%- endcase -%}
      {%- endfor -%}
    

  

  {%- if section.settings.link != blank -%}
    
  {%- endif -%}

{% schema %}
{
  "name": "t:sections.image-banner.name",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "t:sections.image-banner.settings.image_overlay_opacity.label",
      "default": 0
    },
    {
      "type": "select",
      "id": "image_height",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.image-banner.settings.image_height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.image-banner.settings.image_height.options__2.label"
        },
        {
          "value": "medium",
          "label": "t:sections.image-banner.settings.image_height.options__3.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-banner.settings.image_height.options__4.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.image-banner.settings.image_height.label",
      "info": "t:sections.image-banner.settings.image_height.info"
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "top-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "top-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "top-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
        },
        {
          "value": "middle-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
        },
        {
          "value": "middle-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
        },
        {
          "value": "middle-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
        },
        {
          "value": "bottom-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
        },
        {
          "value": "bottom-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
        },
        {
          "value": "bottom-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
        }
      ],
      "default": "middle-center",
      "label": "t:sections.image-banner.settings.desktop_content_position.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_box",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_box.label"
    },
    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.desktop_content_alignment.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "t:sections.all.animation.content"
    },
    {
      "type": "select",
      "id": "image_behavior",
      "options": [
        {
          "value": "none",
          "label": "t:sections.all.animation.image_behavior.options__1.label"
        },
        {
          "value": "ambient",
          "label": "t:sections.all.animation.image_behavior.options__2.label"
        },
        {
          "value": "fixed",
          "label": "t:sections.all.animation.image_behavior.options__3.label"
        },
        {
          "value": "zoom-in",
          "label": "t:sections.all.animation.image_behavior.options__4.label"
        }
      ],
      "default": "none",
      "label": "t:sections.all.animation.image_behavior.label"
    },
    {
      "type": "header",
      "content": "t:sections.image-banner.settings.mobile.content"
    },
    {
      "type": "select",
      "id": "mobile_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.mobile_content_alignment.label"
    },
    {
      "type": "checkbox",
      "id": "stack_images_on_mobile",
      "default": true,
      "label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_below",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_below.label"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-banner.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "t:sections.image-banner.blocks.heading.settings.heading.default",
          "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h2",
              "label": "t:sections.all.heading_size.options__1.label"
            },
            {
              "value": "h1",
              "label": "t:sections.all.heading_size.options__2.label"
            },
            {
              "value": "h0",
              "label": "t:sections.all.heading_size.options__3.label"
            },
            {
              "value": "hxl",
              "label": "t:sections.all.heading_size.options__4.label"
            },
            {
              "value": "hxxl",
              "label": "t:sections.all.heading_size.options__5.label"
            }
          ],
          "default": "h1",
          "label": "t:sections.all.heading_size.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-banner.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "text",
          "default": "t:sections.image-banner.blocks.text.settings.text.default",
          "label": "t:sections.image-banner.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
            },
            {
              "value": "caption-with-letter-spacing",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
            }
          ],
          "default": "body",
          "label": "t:sections.image-banner.blocks.text.settings.text_style.label"
        }
      ]
    },
    {
      "type": "buttons",
      "name": "t:sections.image-banner.blocks.buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label_1",
          "default": "t:sections.image-banner.blocks.buttons.settings.button_label_1.default",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_1",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "default": "t:sections.image-banner.blocks.buttons.settings.button_label_2.default",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_2",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.image-banner.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}

It will help you add the link here and everything works fine:

Screenshot.png
Screenshot.png339×652 24.3 KB

3 Likes
14

@Steph1232aqwse I have provided the solution above. Take a look at it.

Thanks

15

Your a star it worked. thank you very much.

16

Hi

so it works in terms of it creates a clickable link however when you clip on the banner it directs you to an error page. instead of the product

17

@Steph1232aqwse Glad it worked out for you.

Good luck on your store and business!

18

Hi @Steph1232aqwse ,

Did you enter the link for it at Customize?

If you have any questions, you can contact me directly.

Happy to help you :blush:

19

Hi

I followed the instructions. Am not sure what you mean by mean my customised

1 Like
20

Hi Namphan

Please can you check the codes you provided as it link to a code page after it has been embedded eded into my site