How to link footer photo to website homepage? - Dawn Theme

[fbcgirl24]

Please provide a code to link this footer photo to my website homepage.

Adjustable Satin Bonnets & Hair Accessories - FeminiqueByCameron LLC

[yavzius]

Here is how you can add a link to the image on your footer on the Dawn theme:

1. Go to the theme editor: https://admin.shopify.com/store/feminiquebycameron-8821/themes

2. Search footer and add the codes below around the image element.

Replace this:

<div
  class="footer-block__image-wrapper"
  style="max-width: min(100%, {{ settings.brand_image_width }}px);"
>
  {{
    settings.brand_image
    | image_url: width: 1100
    | image_tag:
      loading: 'lazy',
      widths: '50, 100, 150, 200, 300, 400, 550, 800, 1100',
      height: brand_image_height,
      width: settings.brand_image_width
  }}
</div>

With this:

<a href="{{ routes.root_url }}">
<div
  class="footer-block__image-wrapper"
  style="max-width: min(100%, {{ settings.brand_image_width }}px);"
>
  {{
    settings.brand_image
    | image_url: width: 1100
    | image_tag:
      loading: 'lazy',
      widths: '50, 100, 150, 200, 300, 400, 550, 800, 1100',
      height: brand_image_height,
      width: settings.brand_image_width
  }}
</div>
</a>

[fbcgirl24]

Do I replace (routes.root_url) with my website link?

[yavzius]

No need. It automatically generates a link to your homepage.

https://shopify.dev/docs/api/liquid/objects#routes-root_url

[fbcgirl24]

I've tried it and when I press my logo it doesn't do anything. 

[fbcgirl24]

Please, could you help me with that. Thank You:)

[yavzius · Accepted solution]

Please replace this:

<img
  srcset="{{ block.settings.image | image_url: width: block.settings.image_width }}, {{ block.settings.image | image_url: width: image_size_2x }} 2x"
  src="{{ block.settings.image | image_url: width: 760 }}"
  alt="{{ block.settings.image.alt | escape }}"
  loading="lazy"
  width="{{ block.settings.image.width }}"
  height="{{ block.settings.image.height }}"
>

With this: 

<a href="{{ routes.root_url }}">
  <img
    srcset="{{ block.settings.image | image_url: width: block.settings.image_width }}, {{ block.settings.image | image_url: width: image_size_2x }} 2x"
    src="{{ block.settings.image | image_url: width: 760 }}"
    alt="{{ block.settings.image.alt | escape }}"
    loading="lazy"
    width="{{ block.settings.image.width }}"
    height="{{ block.settings.image.height }}"
  >
</a>

[fbcgirl24]

works like a charm, thank you!;)