How can I add a link to an image instead of text?

[elias_hiess]

Hello, i have a this section 

 it is just rows linking to a page.

But the link is only on the text below "Toys".

Is there a way to get the link on the image ? i will send you the json below

{
"sections": {
"main": {
"type": "main-page",
"disabled": true,
"settings": {
"padding_top": 36,
"padding_bottom": 36
}
},
"f2e5a0f8-a0a6-4cf1-a91a-11797e26f129": {
"type": "multicolumn",
"blocks": {
"template--17981705126168__f2e5a0f8-a0a6-4cf1-a91a-11797e26f129-1676905814930e3377-0": {
"type": "column",
"settings": {
"image": "shopify:\/\/shop_images\/toy_page.jpg",
"title": "",
"text": "",
"link_label": "Toys",
"link": "shopify:\/\/pages\/toys"
}
},
"9d7f445c-51fe-4374-bb3a-07036102b219": {
"type": "column",
"settings": {
"image": "shopify:\/\/shop_images\/bed_page.jpg",
"title": "",
"text": "",
"link_label": "Beds",
"link": "shopify:\/\/pages\/beds"
}
},
"9e25ee6b-da7b-4abc-b40a-791b67857ee9": {
"type": "column",
"settings": {
"image": "shopify:\/\/shop_images\/collar_page.jpg",
"title": "",
"text": "",
"link_label": "Collars",
"link": "shopify:\/\/pages\/collars"
}
},
"template--17981705126168__f2e5a0f8-a0a6-4cf1-a91a-11797e26f129-1676905814930e3377-1": {
"type": "column",
"settings": {
"image": "shopify:\/\/shop_images\/accessoires_page.jpg",
"title": "",
"text": "",
"link_label": "Accessoires",
"link": "shopify:\/\/pages\/accessoires"
}
},
"template--17981705126168__f2e5a0f8-a0a6-4cf1-a91a-11797e26f129-1676905814930e3377-2": {
"type": "column",
"settings": {
"image": "shopify:\/\/shop_images\/transport_page.jpg",
"title": "",
"text": "",
"link_label": "Transport",
"link": "shopify:\/\/pages\/transport"
}
}
},
"block_order": [
"template--17981705126168__f2e5a0f8-a0a6-4cf1-a91a-11797e26f129-1676905814930e3377-0",
"9d7f445c-51fe-4374-bb3a-07036102b219",
"9e25ee6b-da7b-4abc-b40a-791b67857ee9",
"template--17981705126168__f2e5a0f8-a0a6-4cf1-a91a-11797e26f129-1676905814930e3377-1",
"template--17981705126168__f2e5a0f8-a0a6-4cf1-a91a-11797e26f129-1676905814930e3377-2"
],
"settings": {
"title": "",
"heading_size": "h2",
"image_width": "full",
"image_ratio": "square",
"columns_desktop": 5,
"column_alignment": "left",
"background_style": "primary",
"button_label": "",
"button_link": "",
"color_scheme": "background-1",
"columns_mobile": "2",
"swipe_on_mobile": true,
"padding_top": 36,
"padding_bottom": 36
}
},
"newsletter": {
"type": "newsletter",
"blocks": {
"heading": {
"type": "heading",
"settings": {
"heading": "Subscribe to our emails",
"heading_size": "h1"
}
},
"paragraph": {
"type": "paragraph",
"settings": {
"text": "<p>Join our email list for exclusive offers and the latest news. <\/p>"
}
},
"email-form": {
"type": "email_form",
"settings": {
}
}
},
"block_order": [
"heading",
"paragraph",
"email-form"
],
"settings": {
"color_scheme": "background-2",
"full_width": true,
"padding_top": 68,
"padding_bottom": 52
}
}
},
"order": [
"main",
"f2e5a0f8-a0a6-4cf1-a91a-11797e26f129",
"newsletter"
]
}

[Artzen_tech · Accepted solution]

Hi @elias_hiess 
Its Artzen Technologies! We will be happy to help you today.

Instead of this <a href="https://www.google.com"> 

Please try this (<a href="{{ block.settings.link }}">)   (link is the id which you have given to the link)
And also add this to your schema. This will surely help you
{
"type": "text",
"id": "link",
"default": "Multicolumn",
"label": "t:sections.multicolumn.settings.link.label"
},


Let me know if need further assistance
Regards,
Artzen Technologies

[Artzen_tech]

Hello @Elias_heiss
Its Artzen Technologies! We will be happy to help you today.

You can definitely add a link to the images in this section. You have to go to this section in edit code and add the anchor tag (<a> tag) to the image code in this div(<div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">) and close the anchor tag where this div is ending. This will definitely work and follow you to the link which is added to the text.

Let me know if need further assistance
Regards,
Artzen Technologies

[elias_hiess]

Hi thanks for helping. 

I show you the code i put in, the problem is now every column has the same link and the styling is missing 

<a href="https://www.google.com">
<div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
<div class="media media--transparent media--{{ section.settings.image_ratio }}"
{% if section.settings.image_ratio == 'adapt' %}
style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
{% endif %}>
{%- capture sizes -%}(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %}, (min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %}, calc(100vw - 30px){%- endcapture -%}
{{ block.settings.image | image_url: width: 1420 | image_tag:
loading: 'lazy',
sizes: sizes,
widths: '275, 550, 710, 1420',
class: 'multicolumn-card__image'
}}
</div>
</div>
</a>

 

[Artzen_tech · Accepted solution]

Hi @elias_hiess 
Its Artzen Technologies! We will be happy to help you today.

Instead of this <a href="https://www.google.com"> 

Please try this (<a href="{{ block.settings.link }}">)   (link is the id which you have given to the link)
And also add this to your schema. This will surely help you
{
"type": "text",
"id": "link",
"default": "Multicolumn",
"label": "t:sections.multicolumn.settings.link.label"
},


Let me know if need further assistance
Regards,
Artzen Technologies

[elias_hiess]

Thank you very much that is it !

[Artzen_tech]

Glad that the solution helped you. Let me know if you need any further assistance.

[elias_hiess]

Hi, maybe you can help me again today 🙂

I have a button 

Is there a way that this buttons triggers at the launch of the site so if i visit it the first time this language switcher pops up ? 

[Artzen_tech · Accepted solution]

Hi @elias_hiess 
Its Artzen Technologies! We will be happy to help you today.

We will definitely see through your problem and provide you a solution. But for this we will need your backend access because for this issue we will have to carefully look through the liquid code and other codes as well related to this.
So, if you are okay then please share the store url and password.

Let me know if need further assistance
Regards,
Artzen Technologies

[elias_hiess]

Hi, yes the url is https://lazypet.org/

And the Password there is Test123

if you only need this 

[Artzen_tech]

Hi @elias_hiess 
Its Artzen Technologies! We will be happy to help you today.

I have reviewed your site and also your problem. And i have come up with a solution for the same.
Add the following one line code inside <script> tag in the theme.liquid file
 window.onload = (event) =>
{ document.getElementById("transcyBtnSwitcher").click(); };

This code will surely give you the result which you are seeking.

Let me know if need further assistance
Regards,
Artzen Technologies

[elias_hiess]

I have added this code 

<script>
$(document).ready(function () { document.getElementById("transcyBtnSwitcher").click(); });
</script>

in the theme.liquid in the head but it seems not to work

[Artzen_tech]

window.onload = (event) =>
{ document.getElementById("transcyBtnSwitcher").click(); };
Try this one 

[elias_hiess]

Dont think it works

[elias_hiess]

This is my theme.liquid

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="">
<link rel="canonical" href="{{ canonical_url }}">
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>

<script>
window.onload = (event) =>{ document.getElementById("transcyBtnSwitcher").click(); };
</script>

{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif -%}

{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
{%- endunless -%}

<title>
{{ page_title }}
{%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
{%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
{%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
</title>

{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}

{% render 'meta-tags' %}

<script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
{{ content_for_header }}

{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}

{% style %}
{{ settings.type_body_font | font_face: font_display: 'swap' }}
{{ body_font_bold | font_face: font_display: 'swap' }}
{{ body_font_italic | font_face: font_display: 'swap' }}
{{ body_font_bold_italic | font_face: font_display: 'swap' }}
{{ settings.type_header_font | font_face: font_display: 'swap' }}

:root {
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
--font-body-style: {{ settings.type_body_font.style }};
--font-body-weight: {{ settings.type_body_font.weight }};
--font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};

--font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
--font-heading-style: {{ settings.type_header_font.style }};
--font-heading-weight: {{ settings.type_header_font.weight }};

--font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
--font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};

--color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
--color-shadow: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
--color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
--color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
--color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
--color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
--color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
--color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
--payment-terms-background-color: {{ settings.colors_background_1 }};

--gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
--gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
--gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
--gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};

--media-padding: {{ settings.media_padding }}px;
--media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
--media-border-width: {{ settings.media_border_thickness }}px;
--media-radius: {{ settings.media_radius }}px;
--media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
--media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
--media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
--media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
--media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};

--page-width: {{ settings.page_width | divided_by: 10 }}rem;
--page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;

--product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
--product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
--product-card-text-alignment: {{ settings.card_text_alignment }};
--product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
--product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
--product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
--product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;

--collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
--collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
--collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
--collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
--collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
--collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
--collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;

--blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
--blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
--blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
--blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
--blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
--blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
--blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;

--badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;

--popup-border-width: {{ settings.popup_border_thickness }}px;
--popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
--popup-corner-radius: {{ settings.popup_corner_radius }}px;
--popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
--popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
--popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
--popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;

--drawer-border-width: {{ settings.drawer_border_thickness }}px;
--drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
--drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
--drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
--drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
--drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;

--spacing-sections-desktop: {{ settings.spacing_sections }}px;
--spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;

--grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
--grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
--grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
--grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;

--text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
--text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
--text-boxes-radius: {{ settings.text_boxes_radius }}px;
--text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
--text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
--text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
--text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
--text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;

--buttons-radius: {{ settings.buttons_radius }}px;
--buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
--buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
--buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
--buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
--buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
--buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
--buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;

--inputs-radius: {{ settings.inputs_radius }}px;
--inputs-border-width: {{ settings.inputs_border_thickness }}px;
--inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
--inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
--inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
--inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
--inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
--inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
--inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;

--variant-pills-radius: {{ settings.variant_pills_radius }}px;
--variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
--variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
--variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
--variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
--variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
--variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

html {
box-sizing: border-box;
font-size: calc(var(--font-body-scale) * 62.5%);
height: 100%;
}

body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
}

@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}
{% endstyle %}

{{ 'base.css' | asset_url | stylesheet_tag }}

{%- unless settings.type_body_font.system? -%}
<link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
{%- endunless -%}
{%- unless settings.type_header_font.system? -%}
<link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
{%- endunless -%}

{%- if settings.predictive_search_enabled -%}
<link rel="stylesheet" href="{{ 'component-predictive-search.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}

<script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
if (Shopify.designMode) {
document.documentElement.classList.add('shopify-design-mode');
}
</script>
</head>

<body class="gradient">
<a class="skip-to-content-link button visually-hidden" href="#MainContent">
{{ "accessibility.skip_to_text" | t }}
</a>

{%- if settings.cart_type == 'drawer' -%}
{%- render 'cart-drawer' -%}
{%- endif -%}

{% section 'announcement-bar' %}
{% section 'header' %}
<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
{{ content_for_layout }}
</main>

{% section 'footer' %}

<ul hidden>
<li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>
<li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>
</ul>

<script>
window.shopUrl = '{{ request.origin }}';
window.routes = {
cart_add_url: '{{ routes.cart_add_url }}',
cart_change_url: '{{ routes.cart_change_url }}',
cart_update_url: '{{ routes.cart_update_url }}',
cart_url: '{{ routes.cart_url }}',
predictive_search_url: '{{ routes.predictive_search_url }}'
};

window.cartStrings = {
error: `{{ 'sections.cart.cart_error' | t }}`,
quantityError: `{{ 'sections.cart.cart_quantity_error_html' | t: quantity: '[quantity]' }}`
}

window.variantStrings = {
addToCart: `{{ 'products.product.add_to_cart' | t }}`,
soldOut: `{{ 'products.product.sold_out' | t }}`,
unavailable: `{{ 'products.product.unavailable' | t }}`,
}

window.accessibilityStrings = {
imageAvailable: `{{ 'products.product.media.image_available' | t: index: '[index]' }}`,
shareSuccess: `{{ 'general.share.success_message' | t }}`,
pauseSlideshow: `{{ 'sections.slideshow.pause_slideshow' | t }}`,
playSlideshow: `{{ 'sections.slideshow.play_slideshow' | t }}`,
}
</script>

{%- if settings.predictive_search_enabled -%}
<script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

<style>
.header__menu-item.header__menu-item{
font-size: 18px !important;
}
</style>
</body>
</html>

[yeziyue]

how to add a link to a video?

shopify://shop_images/home-part-five.jpg  

this is used for img