Solved

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

elias_hiess
New Member
8 0 0

Hello, i have a this section 

Bildschirm­foto 2023-02-28 um 11.41.21.png

 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"
]
}


Accepted Solutions (2)
Artzen_tech
Shopify Partner
552 113 112

This is an 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

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify

View solution in original post

Artzen_tech
Shopify Partner
552 113 112

This is an 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

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify

View solution in original post

Replies 14 (14)

Artzen_tech
Shopify Partner
552 113 112

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

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
elias_hiess
New Member
8 0 0

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>

 

 

Bildschirm­foto 2023-02-28 um 13.19.38.png

Artzen_tech
Shopify Partner
552 113 112

This is an 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

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
elias_hiess
New Member
8 0 0

Thank you very much that is it !

Artzen_tech
Shopify Partner
552 113 112

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

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
elias_hiess
New Member
8 0 0

Hi, maybe you can help me again today 🙂

I have a button 

 

Bildschirm­foto 2023-03-01 um 11.02.39.png


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
Shopify Partner
552 113 112

This is an 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

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
elias_hiess
New Member
8 0 0

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

And the Password there is Test123

 

if you only need this 

Artzen_tech
Shopify Partner
552 113 112

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

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
elias_hiess
New Member
8 0 0

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
Shopify Partner
552 113 112

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

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
elias_hiess
New Member
8 0 0

Dont think it works

elias_hiess
New Member
8 0 0

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
Shopify Partner
3 0 0

how to add a link to a video?

shopify://shop_images/home-part-five.jpg  
this is used for img