如何在 Shopify 移动端添加一个 App 风格的快捷导航条，如下图所示；
调出搜索框（同时可以看到免邮提醒功能）
调出搜索框，免跳转直接在当前页进行搜索：
代码
上面提到了，增强版主题最新版中更新了这个功能，已经在使用增强版主题的店铺可以去下载最新版本。即使是不同的主题风格（配色），也会自动匹配背景色。
接下来提供一键复制版，直接复制添加到 theme.liquid 中 /body 之前即可：
<style>
@media screen and (min-width: 769px) {
.shopify-nav-footer-tab.shopify-nav-d-md-none {
display: none;
}
}
.shopify-nav-footer-tab {
display: grid;
z-index: 2;
justify-items: center;
grid-template-columns: repeat(5, 20%);
color: #000000;
background: var(--gradient-background, #fff);
border-radius: 0px 0px 0 0;
position: sticky;
width: 100%;
bottom: 0;
}
.shopify-nav-footer-tab__item {
padding-top: 6px;
padding-bottom: 6px;
text-decoration: none;
color: #000;
font-size: 12px;
display: flex;
flex-direction: column;
align-items: center;
}
p.shopify-nav-footer-tab__title.shopify-nav-title {
margin: 0;
margin-top: -5px;
}
</style>
<div class="shopify-nav-footer-tab shopify-nav-d-md-none">
<a href="/" target="_self" class="shopify-nav-footer-tab__item">
<div class="shopify-nav-footer-tab__icon">
<svg
width="29"
height="28"
viewBox="0 0 29 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M25.4853 12.7071L15 4.22182L4.51472 12.7071"
stroke="#000000"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M23 11V23H7L7 11"
stroke="#000000"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</div>
<p class="shopify-nav-footer-tab__title shopify-nav-title">Home</p>
</a>
<a href="/collections" target="_self" class="shopify-nav-footer-tab__item">
<div class="shopify-nav-footer-tab__icon">
<svg
width="29"
height="28"
viewBox="0 0 29 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3.5 7H25.5" stroke="#000000"></path>
<path d="M3.5 14H22" stroke="#000000"></path>
<path d="M3.5 21H25.5" stroke="#000000"></path>
</svg>
</div>
<p class="shopify-nav-footer-tab__title shopify-nav-title">Categories</p>
</a>
<a href="/cart" target="_self" class="shopify-nav-footer-tab__item">
<div class="shopify-nav-footer-tab__icon">
<svg
width="29"
height="28"
viewBox="0 0 29 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.5 22L7.38889 8H21.6111L22.5 22H6.5Z"
stroke="#000000"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M10.5 8V8C10.5 5.79086 12.2909 4 14.5 4V4C16.7091 4 18.5 5.79086 18.5 8V8"
stroke="#000000"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</div>
<p class="shopify-nav-footer-tab__title shopify-nav-title">Cart</p>
</a>
<a href="/search" target="_self" class="shopify-nav-footer-tab__item">
<div class="shopify-nav-footer-tab__icon">
<svg
width="29"
height="28"
viewBox="0 0 29 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="13.5" cy="12" r="7.5" stroke="#000000"></circle>
<path
d="M19 17.5L23.5 22.5"
stroke="#000000"
stroke-linecap="round"
></path>
</svg>
</div>
<p class="shopify-nav-footer-tab__title shopify-nav-title">Search</p>
</a>
<a href="/account" target="_self" class="shopify-nav-footer-tab__item">
<div class="shopify-nav-footer-tab__icon">
<svg
width="29"
height="28"
viewBox="0 0 29 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask id="path-1-inside-1_1813_8066" fill="white">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.5 15.3716C17.8134 14.5405 19 12.8395 19 10C19 6.68629 18 4 14.5 4C11 4 10 6.68629 10 10C10 12.8395 11.1866 14.5405 12.5 15.3716V16.1454C8.13117 16.7796 4.54077 19.3898 4.54077 22H14.5H24.4592C24.4592 19.3898 20.8688 16.7796 16.5 16.1454V15.3716Z"
></path>
</mask>
<path
d="M16.5 15.3716L15.9653 14.5265C15.6756 14.7098 15.5 15.0288 15.5 15.3716H16.5ZM12.5 15.3716H13.5C13.5 15.0288 13.3244 14.7098 13.0347 14.5265L12.5 15.3716ZM12.5 16.1454L12.6437 17.135C13.1353 17.0636 13.5 16.6422 13.5 16.1454H12.5ZM4.54077 22H3.54077C3.54077 22.5523 3.98849 23 4.54077 23V22ZM24.4592 22V23C25.0115 23 25.4592 22.5523 25.4592 22H24.4592ZM16.5 16.1454H15.5C15.5 16.6422 15.8647 17.0636 16.3563 17.135L16.5 16.1454ZM17.0347 16.2166C18.6666 15.1841 20 13.1468 20 10H18C18 12.5321 16.9603 13.897 15.9653 14.5265L17.0347 16.2166ZM20 10C20 8.27702 19.7465 6.54758 18.9074 5.2224C18.0166 3.81555 16.5537 3 14.5 3V5C15.9463 5 16.7334 5.5276 17.2176 6.29232C17.7535 7.13871 18 8.40927 18 10H20ZM14.5 3C12.4463 3 10.9834 3.81555 10.0926 5.2224C9.25354 6.54758 9 8.27702 9 10H11C11 8.40927 11.2465 7.13871 11.7824 6.29232C12.2666 5.5276 13.0537 5 14.5 5V3ZM9 10C9 13.1468 10.3334 15.1841 11.9653 16.2166L13.0347 14.5265C12.0397 13.897 11 12.5321 11 10H9ZM13.5 16.1454V15.3716H11.5V16.1454H13.5ZM5.54077 22C5.54077 21.1576 6.14257 20.1135 7.47322 19.1383C8.77095 18.1871 10.603 17.4312 12.6437 17.135L12.3563 15.1557C10.0282 15.4937 7.8806 16.36 6.29093 17.5251C4.73417 18.6661 3.54077 20.2322 3.54077 22H5.54077ZM14.5 21H4.54077V23H14.5V21ZM24.4592 21H14.5V23H24.4592V21ZM16.3563 17.135C18.397 17.4312 20.2291 18.1871 21.5268 19.1383C22.8574 20.1135 23.4592 21.1576 23.4592 22H25.4592C25.4592 20.2322 24.2658 18.6661 22.7091 17.5251C21.1194 16.36 18.9718 15.4937 16.6437 15.1557L16.3563 17.135ZM15.5 15.3716V16.1454H17.5V15.3716H15.5Z"
fill="#000000"
mask="url(#path-1-inside-1_1813_8066)"
></path>
</svg>
</div>
<p class="shopify-nav-footer-tab__title shopify-nav-title">Account</p>
</a>
</div>
评论0