Here is my code:
<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">
<head>
<!-- Maker Theme - Version 6.0.3 by Troop Themes - https://troopthemes.com/ -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
<link rel="preconnect" href="https://fonts.shopify.com" crossorigin>
<link rel="preconnect" href="https://monorail-edge.shopifysvc.com">
<link rel="preload" href="{{ 'theme--critical.css' | asset_url }}" as="style">
<link rel="preload" href="{{ 'theme--async.css' | asset_url }}" as="style">
<link rel="preload" href="{{ 'lazysizes.min.js' | asset_url }}" as="script">
<link rel="preload" href="{{ 'theme.min.js' | asset_url }}" as="script">
{%- if canonical_url != blank -%}
<link rel="canonical" href="{{ canonical_url }}">
{%- endif -%}
{% if settings.favicon != nil %}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x' }}" type="image/png">
<link rel="apple-touch-icon" href="{{ settings.favicon | img_url: '180x' }}">
{% endif %}
{% render 'framework--social-meta-tags' %}
{% if request.page_type == 'index' %}
<title>{{ page_title }}</title>
{% elsif request.page_type == 'password' %}
<title>{{ shop.name }}</title>
{% else %}
<title>{{ page_title }} | {{ shop.name }}</title>
{% endif %}
{% render 'framework--css-variables' %}
{% render 'partial--css-variables' %}
{% render 'partial--js-variables' %}
<script>
function onLoadStylesheet() {
const link = document.querySelector(`link[href="${theme.assets.stylesheet}"]`);
link.loaded = true;
link.dispatchEvent(new Event('load'));
}
</script>
<noscript>
<style>
body .layout--main-content > *,
body .header--root,
body .footer--root,
body .popup-modal-close,
body .modal--root,
body .modal--window {
opacity: 1;
}
</style>
<link href="{{ 'theme--async.css' | asset_url }}" rel="stylesheet">
</noscript>
<link href="{{ 'theme--critical.css' | asset_url }}" rel="stylesheet" media="all"/>
<link
href="{{ 'theme--async.css' | asset_url }}"
rel="stylesheet"
media="print"
onload="this.media='all';onLoadStylesheet()"
>
<style>{% render 'custom-styles' %}</style>
<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>
<script src="{{ 'theme.min.js' | asset_url }}" defer="defer"></script>
{% if request.page_type contains 'customers' %}
<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
<script src="{{ 'customer_area.js' | shopify_asset_url }}" defer="defer"></script>
{% endif %}
{{ content_for_header }}
</head>
<body
class="template--{{ template | split: '.' | first | remove: '_' | replace: '/', '--' }} page--{{ page_title | handle }}{% if customer %} customer-logged-in{% endif %}"
data-theme-id="765"
data-theme-name="Maker"
data-theme-version="6.0.3"
data-tabbing="false"
>
{% unless request.page_type == 'password' %}
<a data-item="a11y-button" href='#main-content'>
{{ 'general.skip_link' | t }}
</a>
<div
class="off-canvas--viewport"
data-js-class="OffCanvas"
data-off-canvas--state="closed"
>
<div class="off-canvas--overlay" data-js-class="Transition"></div>
<div
aria-label="{{ 'general.close' | t }}"
data-js-class="Transition"
data-off-canvas--close
>
{% render 'framework--icons', icon: 'cross' %}
</div>
<div class="off-canvas--main-content">
{% section 'announcement' %}
{% section 'header' %}
{% endunless %}
<main role="main" class="layout--main-content" id="main-content">
{{ content_for_layout }}
</main>
{% unless request.page_type == 'password' %}
{% section 'framework--footer' %}
{% render 'partial--popup', component: 'main' %}
</div>
<div
class="off-canvas--right-sidebar"
data-active="cart"
data-js-class="Transition"
>
<div class="off-canvas--focus-trigger" tabindex="0"></div>
{% if request.page_type == 'product' %}
<div class="off-canvas--container" data-view="pickup"></div>
{% endif %}
{% if request.page_type == 'collection' %}
<div class="off-canvas--container" data-view="collection-filter"></div>
{% endif %}
{% if settings.product--quick-add-enabled %}
<div class="off-canvas--container" data-view="product-form"></div>
{% endif %}
{% if settings.cart--type == 'drawer' or settings.product--quick-add-enabled %}
<div class="off-canvas--container" data-view="cart">
{% render 'framework--cart', view: 'mobile', is_drawer: true %}
</div>
{% endif %}
<div class="off-canvas--focus-trigger" tabindex="0"></div>
</div>
<div
class="off-canvas--left-sidebar"
data-active="menu"
data-js-class="Transition"
>
<div class="off-canvas--focus-trigger" tabindex="0"></div>
<div class="off-canvas--container" data-view="menu">
{% render 'layout--mobile-nav' %}
</div>
<div class="off-canvas--focus-trigger" tabindex="0"></div>
</div>
</div>
{% render 'framework--feedback-bar' %}
{% render 'framework--search', view: 'modal' %}
{% render 'framework--modal' %}
{% endunless%}
a.featured-card.featured-card--contain {
display: flex;
flex-direction: column-reverse;
}
</body>
</html>
Shopify Discussion
Partners and Developers
