Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Customizing the Navigation Menu on Big Cartel?

wonkyjam

New Coder
I'm looking to edit the navigation menu on my website and move some of the pages within a drop-down menu, so the 'shipping' and 'contact' pages are within a drop-down below the 'info' page - can anyone help with this please?

Here is a link to my website: www.wonkyjam.bigcartel.com

I've also included the code below too:

HTML:
<!DOCTYPE html>
<html>
  <head>
    <title>{{ page.name }} | {{ store.name }}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{{ theme | theme_css_url }}" media="screen" rel="stylesheet" type="text/css">
    {{ head_content }}
    <style>.preloader * { opacity: 0; }.transition-preloader * { transition: none !important }</style>
  </head>
  <body id="{{ page.permalink }}" class="{{ page.category }} preloader transition-preloader">
    <a class="skip-link" href="#main">Skip to main content</a>
    {% if theme.announcement_message_text != blank %}
      <div aria-label="Announcement message" class="announcement-message">
        <div class="announcement-message__text">{{ theme.announcement_message_text }}</div>
        <button title="Close announcement message" class="announcement-message__close-button">
          <svg aria-hidden="true" fill="currentColor" class="announcement-message__close-icon" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="9.2 12.3 12.5 12.5">
            <path d="m21.4 14.4-4.1 4.1 4 4.1c.6.5.6 1.3 0 1.8-.4.5-1.2.5-1.7 0l-4.1-4.1-4.1 4.1c-.5.5-1.3.5-1.8 0s-.5-1.3 0-1.8l4.1-4.1-4.1-4.1c-.5-.5-.5-1.3 0-1.8s1.3-.5 1.8 0l4.1 4.1 4.1-4c.5-.6 1.3-.6 1.8 0 .5.4.5 1.2 0 1.7Z"/>
          </svg>
        </button>
      </div>
    {% endif %}
    <header class="header">
      <div class="mobile-header">
        <div class="wrapper">
          <button class="open-mobile-navigation" aria-label="Open navigation menu" aria-expanded="false" aria-controls="mobile-navigation">
            <svg fill="currentColor" aria-hidden="true" viewBox="0 0 100 114" width="22" height="22">
              <rect y="15" width="100" height="12" rx="8"></rect>
              <rect y="51" width="100" height="12" rx="8"></rect>
              <rect y="87" width="100" height="12" rx="8"></rect>
            </svg>
          </button>
          <div class="mobile-header__icons">
            {% if theme.show_search %}
              <button class="nav-button open-search" type="button" aria-haspopup="dialog" aria-controls="search-modal" title="Open search menu">
                <svg class="search-modal__submit-icon" aria-hidden="true" fill="currentColor" viewBox="0 0 22.91 23.12">
                  <path d="M0 9.35c0 5.16 4.2 9.35 9.35 9.35 2.04 0 3.9-.66 5.44-1.76l5.77 5.78c.27.27.62.4 1 .4.8 0 1.35-.6 1.35-1.38 0-.38-.14-.71-.39-.96l-5.73-5.77c1.21-1.57 1.92-3.53 1.92-5.66C18.7 4.2 14.51 0 9.35 0S0 4.2 0 9.35Zm2 0C2 5.3 5.29 2 9.35 2s7.35 3.29 7.35 7.35-3.29 7.35-7.35 7.35S2 13.41 2 9.35Z" class="cls-1"/>
                </svg>
              </button>
            {% endif %}
            <a class="cart-link" href="/cart" aria-label="View cart, {{ cart.item_count | pluralize: 'Item', 'Items' }}">
              <svg aria-hidden="true" fill="currentColor" width="23" height="20" viewBox="0 0.5 22.28 20.03">
                <path d="M0 1.4375C0 0.929688 0.390625 0.5 0.9375 0.5H2.69531C3.55469 0.5 4.33594 1.00781 4.6875 1.75H20.7422C21.7578 1.75 22.5 2.72656 22.2266 3.74219L20.625 9.67969C20.3125 10.9297 19.1797 11.75 17.9297 11.75H6.64062L6.875 12.8828C6.95312 13.3125 7.34375 13.625 7.77344 13.625H19.0625C19.5703 13.625 20 14.0547 20 14.5625C20 15.1094 19.5703 15.5 19.0625 15.5H7.77344C6.44531 15.5 5.27344 14.5625 5.03906 13.2344L3.00781 2.64844C2.96875 2.49219 2.85156 2.375 2.69531 2.375H0.9375C0.390625 2.375 0 1.98438 0 1.4375ZM5 18.625C5 17.9609 5.35156 17.375 5.9375 17.0234C6.48438 16.6719 7.22656 16.6719 7.8125 17.0234C8.35938 17.375 8.75 17.9609 8.75 18.625C8.75 19.3281 8.35938 19.9141 7.8125 20.2656C7.22656 20.6172 6.48438 20.6172 5.9375 20.2656C5.35156 19.9141 5 19.3281 5 18.625ZM18.125 16.75C18.7891 16.75 19.375 17.1406 19.7266 17.6875C20.0781 18.2734 20.0781 19.0156 19.7266 19.5625C19.375 20.1484 18.7891 20.5 18.125 20.5C17.4219 20.5 16.8359 20.1484 16.4844 19.5625C16.1328 19.0156 16.1328 18.2734 16.4844 17.6875C16.8359 17.1406 17.4219 16.75 18.125 16.75Z"></path>
              </svg>
              <span class="cart-value" aria-hidden="true">{{ cart.item_count }}</span>
              <span class="visually-hidden">View cart</span>
              <span class="cart-num-items-hidden visually-hidden">{{ cart.item_count | pluralize: 'item', 'items' }}</span>
            </a>
          </div>
        </div>
      </div>
      <div class="wrapper">
        <div class="header-columns">
          <div class="header-left">
            {% if theme.show_search %}
              <button class="nav-button open-search" type="button" aria-haspopup="dialog" aria-controls="search-modal" title="Open search menu">
                <svg class="search-modal__submit-icon" aria-hidden="true" fill="currentColor" viewBox="0 0 22.91 23.12">
                  <path d="M0 9.35c0 5.16 4.2 9.35 9.35 9.35 2.04 0 3.9-.66 5.44-1.76l5.77 5.78c.27.27.62.4 1 .4.8 0 1.35-.6 1.35-1.38 0-.38-.14-.71-.39-.96l-5.73-5.77c1.21-1.57 1.92-3.53 1.92-5.66C18.7 4.2 14.51 0 9.35 0S0 4.2 0 9.35Zm2 0C2 5.3 5.29 2 9.35 2s7.35 3.29 7.35 7.35-3.29 7.35-7.35 7.35S2 13.41 2 9.35Z" class="cls-1"/>
                </svg>
              </button>
            {% endif %}
          </div>
          <div class="store-name {% if theme.logo != blank %}image{% else %}text{% endif %}">
            <a href="/" title="{{ store.name | escape }}" class="header-store-link header-store-link--{% if theme.header_logo != blank %}logo{% else %}text{% endif %}">
              {% if theme.logo != blank %}
                {% assign logo_image_height_1x = theme.logo_image_height %}
                {% assign logo_image_height_2x = logo_image_height_1x | times: 2 %}
                <img
                  class="store-logo"
                  srcset="{{ theme.images.logo.url | constrain: '', logo_image_height_1x }}, {{ theme.images.logo.url | constrain: '', logo_image_height_2x }} 2x"
                  src="{{ theme.images.logo.url | constrain: '', logo_image_height_1x }}"
                  alt="{{ store.name }} Home"
              {% else %}
                {{ store.name }}
              {% endif %}
            </a>
          </div>
          <div class="header-right">
            <div class="header-cart">
              <a class="cart-link" href="/cart" aria-label="View cart, {{ cart.item_count | pluralize: 'Item', 'Items' }}">
                <svg aria-hidden="true" fill="currentColor" width="23" height="20" viewBox="0 0.5 22.28 20.03">
                  <path d="M0 1.4375C0 0.929688 0.390625 0.5 0.9375 0.5H2.69531C3.55469 0.5 4.33594 1.00781 4.6875 1.75H20.7422C21.7578 1.75 22.5 2.72656 22.2266 3.74219L20.625 9.67969C20.3125 10.9297 19.1797 11.75 17.9297 11.75H6.64062L6.875 12.8828C6.95312 13.3125 7.34375 13.625 7.77344 13.625H19.0625C19.5703 13.625 20 14.0547 20 14.5625C20 15.1094 19.5703 15.5 19.0625 15.5H7.77344C6.44531 15.5 5.27344 14.5625 5.03906 13.2344L3.00781 2.64844C2.96875 2.49219 2.85156 2.375 2.69531 2.375H0.9375C0.390625 2.375 0 1.98438 0 1.4375ZM5 18.625C5 17.9609 5.35156 17.375 5.9375 17.0234C6.48438 16.6719 7.22656 16.6719 7.8125 17.0234C8.35938 17.375 8.75 17.9609 8.75 18.625C8.75 19.3281 8.35938 19.9141 7.8125 20.2656C7.22656 20.6172 6.48438 20.6172 5.9375 20.2656C5.35156 19.9141 5 19.3281 5 18.625ZM18.125 16.75C18.7891 16.75 19.375 17.1406 19.7266 17.6875C20.0781 18.2734 20.0781 19.0156 19.7266 19.5625C19.375 20.1484 18.7891 20.5 18.125 20.5C17.4219 20.5 16.8359 20.1484 16.4844 19.5625C16.1328 19.0156 16.1328 18.2734 16.4844 17.6875C16.8359 17.1406 17.4219 16.75 18.125 16.75Z"></path>
                </svg>
                <span class="cart-value" aria-hidden="true">{{ cart.item_count }}</span>
                <span class="visually-hidden">View cart</span>
                <span class="cart-num-items-hidden visually-hidden">{{ cart.item_count | pluralize: 'item', 'items' }}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <nav class="header-nav-container" aria-label="Primary">
        <div class="wrapper">
          <ul class="header-pages">
            <li class="header-page-link">
              {% if categories.active != blank %}
                <div class="category-nav header-category-nav">
                  <button class="category-nav-heading" aria-label="Open category navigation" aria-controls="header-dropdown" aria-expanded="false">
                    <div class="category-nav-page">Shop</div>
                    <svg aria-hidden="true" fill="currentColor" class="category-nav-arrow" viewBox="0 0 15 7.6" enable-background="new 0 0 15 7.6"><path d="M15 1.1l-7.5 6.5-7.5-6.3 1-1.2 6.5 5.5 6.5-5.6z"/></svg>
                  </button>
                  <div class="category-dropdown" id="header-dropdown" aria-hidden="true">
                    {% if categories.active != blank %}
                      <ul class="dropdown-list categories-list">
                        <li><a href="/products">All products</a></li>
                        {% for category in categories.active %}
                          <li>{{ category | link_to }}</li>
                        {% endfor %}
                      </ul>
                    {% endif %}
                  </div>
                </div>
              {% else %}
                <a href="/products">{{ pages.products.name }}</a>
              {% endif %}
            </li>
            {% for page in pages.all limit: theme.nav_items %}
              <li class="header-page-link">{{ page | link_to }}</li>
            {% endfor %}
            <li class="header-page-link"><a href="/contact">{{ pages.contact.name }}</a></li>
          </ul>
        </div>
      </nav>
    </header>
    <main class="content" id="main">
      <div class="wrapper">
        {% if page.category == 'custom' %}
          <h1 class="page-title">{{ page.name }}</h1>
          <div class="page-content {{ page.category }}-content">
            {{ page_content | paragraphs }}
            {% if page.name == theme.lookbook_page_name %}
              {% if theme.image_sets.lookbook_images.size > 0 %}
                <div class="lookbook-gallery">
                  {% for image in theme.image_sets.lookbook_images %}
                    <img
                      alt="Lookbook image {{ forloop.index }}"
                      class="blur-up lookbook-gallery-image lazyload"
                      src="{{ image.url | constrain: 20 }}"
                      data-srcset="
                        {{ image.url | constrain: 400 }} 400w,
                        {{ image.url | constrain: 600 }} 600w,
                        {{ image.url | constrain: 800 }} 800w,
                        {{ image.url | constrain: 1600 }} 1600w,
                        {{ image.url | constrain: 2000 }} 2000w
                      "
                      data-sizes="auto"
                  {% endfor %}
                </div>
              {% endif %}
            {% endif %}
          </div>
        {% else %}
          {{ page_content }}
        {% endif %}
      </div>
      {% if page.full_url contains '/product/' %}
        {% if theme.show_related_products %}
          {% assign current_id = product.id %}
          {% if product.categories != blank %}
            {% for category in product.categories limit: 2 %}
              {% capture product_divs %}
                {% for product in category.products limit: 10 %}
                  {% if product.id != current_id %}
                    {% assign image_width = product.image.width | times: 1.0 %}
                    {% assign image_height = product.image.height | times: 1.0 %}
                    {% assign aspect_ratio = image_width | divided_by: image_height %}
                    {% assign product_status = '' %}
                    {% case product.status %}
                      {% when 'active' %}
                        {% if product.on_sale %}{% assign product_status = 'On sale' %}{% endif %}
                      {% when 'sold-out' %}
                        {% assign product_status = 'Sold out' %}
                      {% when 'coming-soon' %}
                        {% assign product_status = 'Coming soon' %}
                    {% endcase %}
                    <div class="product-list-thumb {{ product.css_class }}">
                      <a class="product-list-link{% if product.images[1] != blank and theme.secondary_image_on_hover == true %} product-list-link--show-secondary{% endif %}" href="{{ product.url }}" title="View {{ product.name | escape }}">
                        <div class="product-list-image-container product-list-image-container-{{ theme.grid_image_style }}">
                          <img
                            alt=""
                            class="blur-up product-list-image product-list-image--primary lazyload grid-{{ theme.grid_image_style }}"
                            src="{{ product.image | product_image_url | constrain: 20 }}"
                            {% unless theme.grid_image_style == 'default' %}data-aspectratio="{{ aspect_ratio }}"{% endunless %}
                            data-srcset="
                              {{ product.image | product_image_url | constrain: 240 }} 240w,
                              {{ product.image | product_image_url | constrain: 400 }} 400w,
                              {{ product.image | product_image_url | constrain: 600 }} 600w,
                              {{ product.image | product_image_url | constrain: 800 }} 800w,
                              {{ product.image | product_image_url | constrain: 960 }} 960w,
                              {{ product.image | product_image_url | constrain: 1200 }} 1200w
                            "
                            data-sizes="auto"
                          {% if product.images[1] != blank and theme.secondary_image_on_hover == true %}
                            {% assign image_width = product.image.width | times: 1.0 %}
                            {% assign image_height = product.image.height | times: 1.0 %}
                            {% assign aspect_ratio = image_width | divided_by: image_height %}
                            <img
                              alt=""
                              class="blur-up product-list-image product-list-image--secondary lazyload grid-{{ theme.grid_image_style }}"
                              src="{{ product.images[1] | product_image_url | constrain: 20 }}"
                              {% unless theme.grid_image_style == 'default' %}data-aspectratio="{{ aspect_ratio }}"{% endunless %}
                              data-srcset="
                                {{ product.images[1] | product_image_url | constrain: 240 }} 240w,
                                {{ product.images[1] | product_image_url | constrain: 400 }} 400w,
                                {{ product.images[1] | product_image_url | constrain: 600 }} 600w,
                                {{ product.images[1] | product_image_url | constrain: 800 }} 800w,
                                {{ product.images[1] | product_image_url | constrain: 960 }} 960w,
                                {{ product.images[1] | product_image_url | constrain: 1200 }} 1200w
                              "
                              data-sizes="auto"
                          {% endif %}
                          {% if product_status != blank %}<div class="product-list-thumb-status">{{ product_status }}</div>{% endif %}
                        </div>
                        <div class="product-list-thumb-info">
                          <div class="product-list-thumb-name">{{ product.name }}</div>
                          <div class="product-list-thumb-price">
                            {% if product.variable_pricing %}
                              {{ product.min_price | money: theme.money_format }} - {{ product.max_price | money: theme.money_format }}
                            {% else %}
                              {{ product.default_price | money: theme.money_format }}
                            {% endif %}
                          </div>
                        </div>
                      </a>
                    </div>

                  {% endif %}
                {% endfor %}
              {% endcapture %}
            {% endfor %}
          {% endif %}
        {% endif %}
      {% endif %}
      {% if product_divs != blank %}
        <aside class="related-products-container" data-num-products="4" role="complementary" aria-label="Related Products">
          <div class="wrapper">
            <div class="all-related-products" style="display: none">{{ product_divs }}</div>
            <div class="related-products-header">
              <h2 class="related-products-title">You might also like</h2>
            </div>
            <div class="product-list-container">
              <div class="related-product-list product-list"></div>
            </div>
          </div>
        </aside>
      {% endif %}
    </main>
    <footer class="footer">
      <div class="wrapper">
        <div class="footer-store-name">{{ store.name }}</div>
            <nav class="footer-nav-links" aria-label="Secondary">
          <ul>
            <li><a href="/">{{ pages.home.name }}</a></li>
            <li><a href="/products">{{ pages.products.name }}</a></li>
            {% for page in pages.all %}
              <li>{{ page | link_to }}</li>
            {% endfor %}
            <li><a href="/contact">{{ pages.contact.name }}</a></li>
            {% if store.website != blank %}
              <li><a href="{{ store.website }}">Back to site</a></li>
            {% endif %}
          </ul>
        </nav>
        {% if theme.instagram_url != blank
          or theme.tiktok_url != blank
          or theme.twitter_url != blank
          or theme.snapchat_url != blank
          or theme.facebook_url != blank
          or theme.pinterest_url != blank
          or theme.youtube_url != blank
          or theme.tumblr_url != blank
          or theme.bandcamp_url != blank %}
          <nav aria-label="Social links">
            <ul class="social-icons">
              {% if theme.instagram_url != blank %}
                <li><a href="{{ theme.instagram_url }}" title="Instagram"><svg class="instagram-icon" height="36" width="36" aria-hidden="true" focusable="false" role="img" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="0 0 503.84 503.84"><path fill="currentColor" d="M251.92 45.39c67.27 0 75.23.26 101.8 1.47 24.56 1.12 37.9 5.22 46.78 8.67a78 78 0 0129 18.85 78 78 0 0118.85 29c3.45 8.88 7.55 22.22 8.67 46.78 1.21 26.57 1.47 34.53 1.47 101.8s-.26 75.23-1.47 101.8c-1.12 24.56-5.22 37.9-8.67 46.78a83.51 83.51 0 01-47.81 47.81c-8.88 3.45-22.22 7.55-46.78 8.67-26.56 1.21-34.53 1.47-101.8 1.47s-75.24-.26-101.8-1.47c-24.56-1.12-37.9-5.22-46.78-8.67a78 78 0 01-29-18.85 78 78 0 01-18.85-29c-3.45-8.88-7.55-22.22-8.67-46.78-1.21-26.57-1.47-34.53-1.47-101.8s.26-75.23 1.47-101.8c1.12-24.56 5.22-37.9 8.67-46.78a78 78 0 0118.85-29 78 78 0 0129-18.85c8.88-3.45 22.22-7.55 46.78-8.67 26.57-1.21 34.53-1.47 101.8-1.47m0-45.39c-68.42 0-77 .29-103.87 1.52S102.92 7 86.92 13.22a123.68 123.68 0 00-44.64 29.06 123.68 123.68 0 00-29.06 44.64c-6.22 16-10.48 34.34-11.7 61.15S0 183.5 0 251.92s.29 77 1.52 103.87 5.48 45.13 11.7 61.13a123.68 123.68 0 0029.06 44.62 123.52 123.52 0 0044.64 29.07c16 6.23 34.34 10.49 61.15 11.71s35.45 1.52 103.87 1.52 77-.29 103.87-1.52 45.11-5.48 61.11-11.71a128.74 128.74 0 0073.69-73.69c6.23-16 10.49-34.34 11.71-61.15s1.52-35.45 1.52-103.87-.29-77-1.52-103.87-5.48-45.11-11.71-61.11a123.52 123.52 0 00-29.05-44.62 123.68 123.68 0 00-44.64-29.08c-16-6.22-34.34-10.48-61.15-11.7S320.34 0 251.92 0z"/><path fill="currentColor" d="M251.92 122.56a129.36 129.36 0 10129.36 129.36 129.35 129.35 0 00-129.36-129.36zm0 213.36a84 84 0 1184-84 84 84 0 01-84 84z"/><circle fill="currentColor" cx="386.4" cy="117.44" r="30.23"/></svg></a></li>
              {% endif %}

              {% if theme.tiktok_url != blank %}
                <li><a href="{{ theme.tiktok_url }}" title="TikTok"><svg class="tiktok-icon" aria-hidden="true" height="36" width="36" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="0 0 347.67 398.67"><path d="M295.74,79.91c-21.48-14-36.97-36.41-41.81-62.52-1.04-5.64-1.62-11.45-1.62-17.39h-68.54l-.11,274.68c-1.15,30.76-26.47,55.45-57.5,55.45-9.65,0-18.73-2.41-26.73-6.62-18.34-9.65-30.89-28.87-30.89-50.99,0-31.77,25.85-57.62,57.61-57.62,5.93,0,11.62,.98,17,2.66v-69.97c-5.57-.76-11.23-1.23-17-1.23C56.59,146.36,0,202.95,0,272.52c0,42.68,21.32,80.45,53.86,103.29,20.49,14.39,45.42,22.86,72.3,22.86,69.56,0,126.15-56.59,126.15-126.15V133.23c26.88,19.29,59.82,30.66,95.36,30.66V95.35c-19.14,0-36.97-5.69-51.93-15.44Z"/></svg></a>
              {% endif %}

              {% if theme.twitter_url != blank %}
                <li><a href="{{ theme.twitter_url }}" title="Twitter"><svg class="twitter-icon" height="36" width="36" aria-hidden="true" focusable="false" role="img" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg></a></li>
              {% endif %}

              {% if theme.snapchat_url != blank %}
                <li><a href="{{ theme.snapchat_url }}" title="Snapchat"><svg class="snapchat-icon" aria-hidden="true" width="24" height="24" fill="none" data-testid="GhostIconFilled" viewBox="0 0 38 38"><path fill-rule="evenodd" d="M36.5 26c.6.3 1.1.6 1.4 1.4.3.8 0 1.7-.6 2.5l-1 .8-2.5 1-.4.1c-.2.1-.2.3-.3.5l-.2.5-.8.9c-.8.5-1.7.6-2.6.6-.9 0-1.8 0-3 .4l-1.3.8c-1.4.8-3.2 2-6.2 2s-4.8-1.2-6-2l-1.6-.8c-1-.3-2-.4-2.9-.4-.9 0-1.8 0-2.6-.6l-.7-.7-.3-.7c0-.2-.1-.4-.3-.5l-.4-.2c-.7-.2-1.5-.4-2.4-1l-1-.7c-.8-.8-1-1.7-.7-2.5.4-1 1.1-1.3 1.9-1.7l.4-.2c1.7-1 3-2.1 4-3.5l.7-1.3v-.5L7 20l-.7-.5h-.1l-.9-.6a8.3 8.3 0 0 1-1.6-1.7c-.4-.9-.5-1.8-.1-2.8.5-1.2 1.7-2 3.1-2h1l.2.1V9.8A10.2 10.2 0 0 1 13 1.5C14.8.5 16.8 0 19 0s4.2.5 6 1.5a10.2 10.2 0 0 1 5 8.3v2.7h.3l1-.1c1.4 0 2.6.8 3.1 2 .3 1 .3 2-.2 2.8-.3.6-.8 1.1-1.5 1.7-.2 0-.5.2-.8.5h.1l-.3.2-.5.4-.3.2v.5l.8 1.3a11.3 11.3 0 0 0 5 4ZM33 29.5a9 9 0 0 0 2.2-.8c1-.6.5-1 0-1.1-5.8-2.8-6.7-7.2-6.8-7.6 0-.4 0-.7.4-1 .2-.3 1.2-1 2-1.4l.8-.6c.8-.6 1.2-1.2 1-2-.3-.4-.7-.6-1.2-.6h-.5l-1.6.6-.8.2h-.2c-.3 0-.4 0-.4-.4.1-1.1.2-3 0-4.9-.1-2.6-1-3.8-2-5A9 9 0 0 0 19 2.1a9 9 0 0 0-7 3 7.8 7.8 0 0 0-2 5 32.7 32.7 0 0 0 0 4.8c0 .3 0 .5-.3.5h-.2l-.8-.3a10.6 10.6 0 0 0-2-.6c-.6 0-1 .2-1.2.7-.3.7 0 1.3 1 2l.7.4 2 1.4c.5.4.4.7.4 1v.1c0 .4-1 4.8-6.9 7.6-.3.2-1 .5.1 1a9 9 0 0 0 2.2 1c.5 0 1 .2 1.4.4.3.3.4.7.4 1 0 .4.1.7.4.8.2.2.7.3 1.4.3 1 0 2.1 0 3.5.5.7.2 1.3.6 2 1 1.2.7 2.5 1.6 4.9 1.6 2.4 0 3.8-.9 5-1.6a7 7 0 0 1 1.9-1c1.4-.4 2.6-.5 3.5-.5.7 0 1.2 0 1.4-.3.3-.1.3-.4.4-.7 0-.4 0-.8.5-1 .3-.3.8-.4 1.3-.6Z" clip-rule="evenodd"/></svg></a></li>
              {% endif %}

              {% if theme.facebook_url != blank %}
                <li><a href="{{ theme.facebook_url }}" title="Facebook"><svg class="facebook-icon" height="36" width="36" aria-hidden="true" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="5 5 19.91 20"><path d="M23.9 5H6.1C5.5 5 5 5.5 5 6.1v17.7c0 .7.5 1.2 1.1 1.2h9.5v-7.7H13v-3h2.6V12c0-2.6 1.6-4 3.9-4 1.1 0 2 .1 2.3.1v2.7h-1.6c-1.2 0-1.5.6-1.5 1.5v1.9h3l-.4 3h-2.6V25h5.1c.6 0 1.1-.5 1.1-1.1V6.1c.1-.6-.4-1.1-1-1.1z"></path></svg></a></li>
              {% endif %}

              {% if theme.pinterest_url != blank %}
                <li><a href="{{ theme.pinterest_url }}" title="Pinterest"><svg class="pinterest-icon" height="36" width="36" aria-hidden="true" focusable="false" role="img" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="0 0 496 512"><path fill="currentColor" d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"></path></svg></a></li>
              {% endif %}

              {% if theme.youtube_url != blank %}
                <li><a href="{{ theme.youtube_url }}" title="YouTube"><svg class="youtube-icon" aria-hidden="true" width="27" height="18" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="0 0 27 18"><path d="M23.501714 17.4615797c1.1014225-.296264 1.9688826-1.1330082 2.2633155-2.2415719.4738052-1.7797495.5279544-5.27205903.5341429-6.0470555v-.30951368c-.0061885-.77498826-.0603377-4.2672619-.5341429-6.04701143C25.4705966 1.70781777 24.6031365.8347272 23.501714.53846326c-1.7926805-.4834795-8.4305681-.53281414-9.7665731-.53784828h-.4703449c-1.3359979.00503414-7.97385278.05436879-9.76657436.53784828C2.3967991.83477298 1.52933901 1.70781777 1.23490611 2.8164272.7152488 4.76841054.70040145 8.78041249.69996476 9.00807629v.01011834s0 4.19241857.53494135 6.20181317c.2944329 1.1085637 1.16189299 1.9453079 2.26331553 2.2415719 1.75197791.4724913 8.13135846.5303474 9.66738706.5374318h.6687183c1.5360285-.0070844 7.9154091-.0649405 9.667387-.5374318zM10.881749 12.824582V5.21180722l6.6908867 3.80647896L10.881749 12.824582z" fill-rule="nonzero"/></svg></a></li>
              {% endif %}

              {% if theme.tumblr_url != blank %}
                <li><a href="{{ theme.tumblr_url }}" title="Tumblr"><svg class="tumblr-icon" height="36" width="36" aria-hidden="true" focusable="false" role="img" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="0 0 320 512"><path fill="currentColor" d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"></path></svg></a></li>
              {% endif %}

              {% if theme.bandcamp_url != blank %}
                <li><a href="{{ theme.bandcamp_url }}" title="Bandcamp"><svg class="bandcamp-icon" aria-hidden="true" width="20" height="12" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="0 0 20 12"><path d="M13.624378 11.7500561H0L6.375622 0H20z" fill-rule="nonzero"/></svg></a></li>
              {% endif %}
            </ul>
          </nav>
        {% endif %}
        <div class="footer-store-credit">{{ none }}</div>
      </div>
    </footer>
    <div id="mobile-navigation" aria-hidden="true" role="dialog" aria-modal="true">
      <div class="mobile-navigation__wrapper">
        <div class="mobile-navigation__body">

          <nav aria-label="Browse products">
            <ul class="mobile-navigation__links">
              <li><a href="/">{{ pages.home.name }} </a></li>
              <li><a href="/products">{{ pages.products.name }}</a></li>
              {% for category in categories.active %}
                <li>{{ category | link_to }}</li>
              {% endfor %}
            </ul>
          </nav>

          <nav aria-label="Pages">
            <ul class="mobile-navigation__links">
              {% for page in pages.all %}
                <li>{{ page | link_to }}</li>
              {% endfor %}
              <li><a href="/contact">{{ pages.contact.name }}</a></li>
              {% if store.website != blank %}
                <li><a href="{{ store.website }}">Back to site</a></li>
              {% endif %}
            </ul>
          </nav>

          {% if theme.instagram_url != blank
            or theme.tiktok_url != blank
            or theme.twitter_url != blank
            or theme.snapchat_url != blank
            or theme.facebook_url != blank
            or theme.pinterest_url != blank
            or theme.youtube_url != blank
            or theme.tumblr_url != blank
            or theme.bandcamp_url != blank %}
            <nav aria-label="Social links">
              <ul class="mobile-navigation__icons social-icons">
                {% if theme.instagram_url != blank %}
                  <li><a href="{{ theme.instagram_url }}" title="Instagram"><svg class="instagram-icon" height="36" width="36" aria-hidden="true" focusable="false" role="img" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="0 0 503.84 503.84"><path fill="currentColor" d="M251.92 45.39c67.27 0 75.23.26 101.8 1.47 24.56 1.12 37.9 5.22 46.78 8.67a78 78 0 0129 18.85 78 78 0 0118.85 29c3.45 8.88 7.55 22.22 8.67 46.78 1.21 26.57 1.47 34.53 1.47 101.8s-.26 75.23-1.47 101.8c-1.12 24.56-5.22 37.9-8.67 46.78a83.51 83.51 0 01-47.81 47.81c-8.88 3.45-22.22 7.55-46.78 8.67-26.56 1.21-34.53 1.47-101.8 1.47s-75.24-.26-101.8-1.47c-24.56-1.12-37.9-5.22-46.78-8.67a78 78 0 01-29-18.85 78 78 0 01-18.85-29c-3.45-8.88-7.55-22.22-8.67-46.78-1.21-26.57-1.47-34.53-1.47-101.8s.26-75.23 1.47-101.8c1.12-24.56 5.22-37.9 8.67-46.78a78 78 0 0118.85-29 78 78 0 0129-18.85c8.88-3.45 22.22-7.55 46.78-8.67 26.57-1.21 34.53-1.47 101.8-1.47m0-45.39c-68.42 0-77 .29-103.87 1.52S102.92 7 86.92 13.22a123.68 123.68 0 00-44.64 29.06 123.68 123.68 0 00-29.06 44.64c-6.22 16-10.48 34.34-11.7 61.15S0 183.5 0 251.92s.29 77 1.52 103.87 5.48 45.13 11.7 61.13a123.68 123.68 0 0029.06 44.62 123.52 123.52 0 0044.64 29.07c16 6.23 34.34 10.49 61.15 11.71s35.45 1.52 103.87 1.52 77-.29 103.87-1.52 45.11-5.48 61.11-11.71a128.74 128.74 0 0073.69-73.69c6.23-16 10.49-34.34 11.71-61.15s1.52-35.45 1.52-103.87-.29-77-1.52-103.87-5.48-45.11-11.71-61.11a123.52 123.52 0 00-29.05-44.62 123.68 123.68 0 00-44.64-29.08c-16-6.22-34.34-10.48-61.15-11.7S320.34 0 251.92 0z"/><path fill="currentColor" d="M251.92 122.56a129.36 129.36 0 10129.36 129.36 129.35 129.35 0 00-129.36-129.36zm0 213.36a84 84 0 1184-84 84 84 0 01-84 84z"/><circle fill="currentColor" cx="386.4" cy="117.44" r="30.23"/></svg></a></li>
                {% endif %}

                {% if theme.tiktok_url != blank %}
                  <li><a href="{{ theme.tiktok_url }}" title="TikTok"><svg class="tiktok-icon" aria-hidden="true" height="36" width="36" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="0 0 347.67 398.67"><path d="M295.74,79.91c-21.48-14-36.97-36.41-41.81-62.52-1.04-5.64-1.62-11.45-1.62-17.39h-68.54l-.11,274.68c-1.15,30.76-26.47,55.45-57.5,55.45-9.65,0-18.73-2.41-26.73-6.62-18.34-9.65-30.89-28.87-30.89-50.99,0-31.77,25.85-57.62,57.61-57.62,5.93,0,11.62,.98,17,2.66v-69.97c-5.57-.76-11.23-1.23-17-1.23C56.59,146.36,0,202.95,0,272.52c0,42.68,21.32,80.45,53.86,103.29,20.49,14.39,45.42,22.86,72.3,22.86,69.56,0,126.15-56.59,126.15-126.15V133.23c26.88,19.29,59.82,30.66,95.36,30.66V95.35c-19.14,0-36.97-5.69-51.93-15.44Z"/></svg></a>
                {% endif %}

                {% if theme.twitter_url != blank %}
                  <li><a href="{{ theme.twitter_url }}" title="Twitter"><svg class="twitter-icon" height="36" width="36" aria-hidden="true" focusable="false" role="img" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg></a></li>
                {% endif %}

                {% if theme.snapchat_url != blank %}
                  <li><a href="{{ theme.snapchat_url }}" title="Snapchat"><svg class="snapchat-icon" aria-hidden="true" width="24" height="24" fill="none" data-testid="GhostIconFilled" viewBox="0 0 38 38"><path fill-rule="evenodd" d="M36.5 26c.6.3 1.1.6 1.4 1.4.3.8 0 1.7-.6 2.5l-1 .8-2.5 1-.4.1c-.2.1-.2.3-.3.5l-.2.5-.8.9c-.8.5-1.7.6-2.6.6-.9 0-1.8 0-3 .4l-1.3.8c-1.4.8-3.2 2-6.2 2s-4.8-1.2-6-2l-1.6-.8c-1-.3-2-.4-2.9-.4-.9 0-1.8 0-2.6-.6l-.7-.7-.3-.7c0-.2-.1-.4-.3-.5l-.4-.2c-.7-.2-1.5-.4-2.4-1l-1-.7c-.8-.8-1-1.7-.7-2.5.4-1 1.1-1.3 1.9-1.7l.4-.2c1.7-1 3-2.1 4-3.5l.7-1.3v-.5L7 20l-.7-.5h-.1l-.9-.6a8.3 8.3 0 0 1-1.6-1.7c-.4-.9-.5-1.8-.1-2.8.5-1.2 1.7-2 3.1-2h1l.2.1V9.8A10.2 10.2 0 0 1 13 1.5C14.8.5 16.8 0 19 0s4.2.5 6 1.5a10.2 10.2 0 0 1 5 8.3v2.7h.3l1-.1c1.4 0 2.6.8 3.1 2 .3 1 .3 2-.2 2.8-.3.6-.8 1.1-1.5 1.7-.2 0-.5.2-.8.5h.1l-.3.2-.5.4-.3.2v.5l.8 1.3a11.3 11.3 0 0 0 5 4ZM33 29.5a9 9 0 0 0 2.2-.8c1-.6.5-1 0-1.1-5.8-2.8-6.7-7.2-6.8-7.6 0-.4 0-.7.4-1 .2-.3 1.2-1 2-1.4l.8-.6c.8-.6 1.2-1.2 1-2-.3-.4-.7-.6-1.2-.6h-.5l-1.6.6-.8.2h-.2c-.3 0-.4 0-.4-.4.1-1.1.2-3 0-4.9-.1-2.6-1-3.8-2-5A9 9 0 0 0 19 2.1a9 9 0 0 0-7 3 7.8 7.8 0 0 0-2 5 32.7 32.7 0 0 0 0 4.8c0 .3 0 .5-.3.5h-.2l-.8-.3a10.6 10.6 0 0 0-2-.6c-.6 0-1 .2-1.2.7-.3.7 0 1.3 1 2l.7.4 2 1.4c.5.4.4.7.4 1v.1c0 .4-1 4.8-6.9 7.6-.3.2-1 .5.1 1a9 9 0 0 0 2.2 1c.5 0 1 .2 1.4.4.3.3.4.7.4 1 0 .4.1.7.4.8.2.2.7.3 1.4.3 1 0 2.1 0 3.5.5.7.2 1.3.6 2 1 1.2.7 2.5 1.6 4.9 1.6 2.4 0 3.8-.9 5-1.6a7 7 0 0 1 1.9-1c1.4-.4 2.6-.5 3.5-.5.7 0 1.2 0 1.4-.3.3-.1.3-.4.4-.7 0-.4 0-.8.5-1 .3-.3.8-.4 1.3-.6Z" clip-rule="evenodd"/></svg></a></li>
                {% endif %}

                {% if theme.facebook_url != blank %}
                  <li><a href="{{ theme.facebook_url }}" title="Facebook"><svg class="facebook-icon" height="36" width="36" aria-hidden="true" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="5 5 19.91 20"><path d="M23.9 5H6.1C5.5 5 5 5.5 5 6.1v17.7c0 .7.5 1.2 1.1 1.2h9.5v-7.7H13v-3h2.6V12c0-2.6 1.6-4 3.9-4 1.1 0 2 .1 2.3.1v2.7h-1.6c-1.2 0-1.5.6-1.5 1.5v1.9h3l-.4 3h-2.6V25h5.1c.6 0 1.1-.5 1.1-1.1V6.1c.1-.6-.4-1.1-1-1.1z"></path></svg></a></li>
                {% endif %}

                {% if theme.pinterest_url != blank %}
                  <li><a href="{{ theme.pinterest_url }}" title="Pinterest"><svg class="pinterest-icon" height="36" width="36" aria-hidden="true" focusable="false" role="img" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="0 0 496 512"><path fill="currentColor" d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"></path></svg></a></li>
                {% endif %}

                {% if theme.youtube_url != blank %}
                  <li><a href="{{ theme.youtube_url }}" title="YouTube"><svg class="youtube-icon" aria-hidden="true" width="27" height="18" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="0 0 27 18"><path d="M23.501714 17.4615797c1.1014225-.296264 1.9688826-1.1330082 2.2633155-2.2415719.4738052-1.7797495.5279544-5.27205903.5341429-6.0470555v-.30951368c-.0061885-.77498826-.0603377-4.2672619-.5341429-6.04701143C25.4705966 1.70781777 24.6031365.8347272 23.501714.53846326c-1.7926805-.4834795-8.4305681-.53281414-9.7665731-.53784828h-.4703449c-1.3359979.00503414-7.97385278.05436879-9.76657436.53784828C2.3967991.83477298 1.52933901 1.70781777 1.23490611 2.8164272.7152488 4.76841054.70040145 8.78041249.69996476 9.00807629v.01011834s0 4.19241857.53494135 6.20181317c.2944329 1.1085637 1.16189299 1.9453079 2.26331553 2.2415719 1.75197791.4724913 8.13135846.5303474 9.66738706.5374318h.6687183c1.5360285-.0070844 7.9154091-.0649405 9.667387-.5374318zM10.881749 12.824582V5.21180722l6.6908867 3.80647896L10.881749 12.824582z" fill-rule="nonzero"/></svg></a></li>
                {% endif %}

                {% if theme.tumblr_url != blank %}
                  <li><a href="{{ theme.tumblr_url }}" title="Tumblr"><svg class="tumblr-icon" height="36" width="36" aria-hidden="true" focusable="false" role="img" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="0 0 320 512"><path fill="currentColor" d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"></path></svg></a></li>
                {% endif %}

                {% if theme.bandcamp_url != blank %}
                  <li><a href="{{ theme.bandcamp_url }}" title="Bandcamp"><svg class="bandcamp-icon" aria-hidden="true" width="20" height="12" xmlns="[URL='http://www.w3.org/2000/svg']SVG namespace[/URL]" viewBox="0 0 20 12"><path d="M13.624378 11.7500561H0L6.375622 0H20z" fill-rule="nonzero"/></svg></a></li>
                {% endif %}
              </ul>
            </nav>
          {% endif %}
        </div>
      </div>
    </div>
    {% if theme.show_search %}
      <div id="search-modal" class="search-modal" role="dialog" aria-modal="true" aria-hidden="true">
        <div class="search-modal__content">
          <div class="search-modal__wrapper">
            <button class="search-modal__close" aria-label="Close search dialog" data-dismiss="modal" type="button">
              <svg class="search-modal__close-icon" aria-hidden="true" fill="currentColor" viewBox="0 0 17 17">
                <path d="M17 1.4L15.6 0 8.5 7.1 1.4 0 0 1.4l7.1 7.1L0 15.6 1.4 17l7.1-7.1 7.1 7.1 1.4-1.4-7.1-7.1z"/>
              </svg>
            </button>
            <form class="search-modal__form" name="search" action="/products" method="get" accept-charset="utf8" role="search">
              <input type="hidden" name="utf8" value='✓'>
              <label class="search-modal__label" for="search-input">Search products</label>
              <input class="search-modal__input" id="search-input" name="search" type="search" autocomplete="off" />
              <button type="submit" class="search-modal__submit" aria-label="Submit search form">
                <svg class="search-modal__submit-icon" aria-hidden="true" fill="currentColor" viewBox="0 0 22.91 23.12">
                  <path d="M0 9.35c0 5.16 4.2 9.35 9.35 9.35 2.04 0 3.9-.66 5.44-1.76l5.77 5.78c.27.27.62.4 1 .4.8 0 1.35-.6 1.35-1.38 0-.38-.14-.71-.39-.96l-5.73-5.77c1.21-1.57 1.92-3.53 1.92-5.66C18.7 4.2 14.51 0 9.35 0S0 4.2 0 9.35Zm2 0C2 5.3 5.29 2 9.35 2s7.35 3.29 7.35 7.35-3.29 7.35-7.35 7.35S2 13.41 2 9.35Z" class="cls-1"/>
                </svg>
              </button>
            </form>
          </div>
        </div>
      </div>
    {% endif %}
    <script>
      const themeOptions = {
        showSoldOutOptions: {{ theme.show_sold_out_product_options }},
        desktopProductPageImages: '{{ theme.desktop_product_page_images }}',
        mobileProductPageImages: '{{ theme.mobile_product_page_images }}',
        productImageZoom: {{ theme.product_image_zoom }},
      }
      const themeColors = {
        backgroundColor: '{{ theme.background_color }}',
        textColor: '{{ theme.text_color }}'
      }
    </script>
    {% if theme.announcement_message_text != blank %}
      <script>
        let hashCode=function(s){return s.split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a;},0);}
        let announcementElement = document.querySelector(".announcement-message");
        let announcementText = document.querySelector(".announcement-message__text").innerHTML;
        let closeAnnouncementBtn = document.querySelector(".announcement-message__close-button");
        let hashedAnnouncement = hashCode(announcementText);

        function closeAnnouncement() {
          let announcementElement = document.querySelector(".announcement-message");
          announcementElement?.remove();
          document.cookie = [ICODE]announcementClosed=${hashedAnnouncement};path=/[/ICODE];
        }

        if (announcementElement?.classList && closeAnnouncementBtn && hashedAnnouncement) {
          let hasClosedAnnouncement = document.cookie.includes([ICODE]announcementClosed=${hashedAnnouncement}[/ICODE]);
          if (!hasClosedAnnouncement) {
            announcementElement.classList.add('visible');
          }
          closeAnnouncementBtn.addEventListener("click", closeAnnouncement);
        }
      </script>
    {% endif %}
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="{{ 'api' | theme_js_url }}"></script>
    <script src="{{ theme | theme_js_url }}"></script>
    {% if page.full_url contains '/product/' %}
      <script>
        Product.find('{{ product.permalink }}', processProduct)
      </script>
    {% endif %}
  </body>
</html>
 

New Threads

Buy us a coffee!

Back
Top Bottom