CRAFT THEME MAIN IMAGE LINK

[NOBILITYD]

Hi, 

how do I add a link to my main image banner on the craft theme?

Thank You!

[kaalTechGeeks]

Hey @NOBILITYD, 
can you please share your website URL so that I can understand how you are actually using the image banner section and is there any text content or not, 
And based on that I can share some codes for you 
Thanks 

[NOBILITYD]

https://shopdimensionsmaternity.com/

Thank you!

[kaalTechGeeks · Accepted solution]

Hi @NOBILITYD, 
In order to make the image banner section on your theme clickable I would recommend you to create a new section named "image-banner-ktg.liquid" in your online store theme editor, 
And once you have done that just copy paste the below code, 

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

{%- if section.settings.adapt_height_first_image 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 }};
    content: unset;
  }
  .banner__media:after{
    content: unset;
  }
{%- endstyle -%}

<div id="Banner-{{ section.id }}" class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
  {%- if section.settings.image != blank -%}
     {% if section.settings.link != blank %}
        <a href="{{ section.settings.link }}">
      {% endif %}
    <div class="banner__media media{% if section.settings.image == blank %} placeholder{% endif %}">

      {%-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 = "(min-width: 750px) 50vw, 100vw"
        elsif section.settings.image_2 != blank
          assign sizes = "50vw"
        else
          assign sizes = "100vw"
        endif
      -%}
      {{ section.settings.image | image_url: width: 1500 | image_tag:
        loading: 'lazy',
        width: section.settings.image.width,
        height: image_height,
        class: image_class,
        sizes: sizes,
        widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
        alt: section.settings.image.alt | escape
      }}
    </div>
      {% if section.settings.link != blank %}
        </a>
      {% endif %}
  {%- endif -%}
</div>

{% schema %}
{
  "name": "Image Banner - KTG",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.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": "small",
          "label": "t:sections.image-banner.settings.image_height.options__1.label"
        },
        {
          "value": "medium",
          "label": "t:sections.image-banner.settings.image_height.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-banner.settings.image_height.options__3.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.image-banner.settings.image_height.label",
      "info": "t:sections.image-banner.settings.image_height.info"
    },
    {
      "type": "checkbox",
      "id": "adapt_height_first_image",
      "default": false,
      "label": "t:sections.image-banner.settings.adapt_height_first_image.label",
      "info": "t:sections.image-banner.settings.adapt_height_first_image.info"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.image-banner.settings.color_scheme.info"
    },
    {
      "type": "header",
      "content": "Custom Link Attached"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    }
  ],
  "presets": [
    {
      "name": "Image Banner - KTG"
    }
  ]
}
{% endschema %}

  And save the file. 
Now go to store customization settings and from there add the section "Image banner - KTG" as shown in below image

and add all the details such as banner image and the link as in below image

and once you have added these you are good to go. 
Please let me know if you have any doubts 
Thanks

[NOBILITYD]

Wow that worked perfectly! thank you so much!

[kaalTechGeeks]

Hi @NOBILITYD, 

I am glad that my solution worked for you. Please mark it as accepted solution and do like it, as this motivates me to help others in the community.

Also if you need any help in the future, do not hesitate to ping me.

Thanks and regards

KaalTechGeeks

[NOBILITYD]

Hi, I just noticed that on the mobile site there is no main banner. How do I add the same one? To Have the same link?

Thanks!

[NOBILITYD]

Hi @kaalTechGeeks I noticed that on the mobile site there is no main banner. How do I add the same one? To Have the same link?