给 Shopify 添加移动端 APP 风格的底部导航栏

最新推荐文章于 2025-07-28 08:01:25 发布

原创

最新推荐文章于 2025-07-28 08:01:25 发布 · 2.1k 阅读

标签

#前端

shopify的转化一直都是各位跨境人操心的一个点，而从移动端进来的流量高达70%多，所以怎么做好移动端的优化成为了重中之重。在移动端，底部导航栏是增强用户体验的一个重要元素。它能够帮助用户快速访问常用功能，提升交互效率。开始我也准备在网上cv一下就好了，结果发现居然都要收费，这又不是什么很高深的东西，学习前端一两个月的小白都可以搞定，为啥还要收费。。。于是我自己手搓了一个，复制粘贴到theme.liquid中就可以用。
在这里插入图片描述

第一步：引入 Font Awesome 图标库

为了给导航栏添加图标，我们需要使用 Font Awesome 图标库。可以通过以下链接在 Shopify 中引入 Font Awesome：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">

第二步：定义基本的 CSS 样式

接下来，我们需要编写一些基础的 CSS 样式，以确保导航栏在移动端显示良好。我们将使用媒体查询来控制导航栏在特定屏幕宽度下显示，并为导航栏和图标定义样式。

@import url('https://fonts.googleapis.com/css?family=Roboto');

:root {
   
   
  --my-app-background-color: rgba(93, 72, 182, 1);
  --my-app-navigation-container-color: #f0f0f0;
  --my-app-current-color: grey;
  --my-app-current-bg-color: grey;
}

body {
   
   
  background: var(--my-app-background-color, #1B0A78);
  font-family: 'Roboto', sans-serif;
  transition: background 0.3s linear;
}

.my-app-icon__container {
   
   
  display: none; /* 默认隐藏导航栏 */
}

@media only screen and (max-width: 1024px) {
   
   
  .my-app-icon__container {
   
   
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    flex-flow: row nowrap;
    background: var(--my-app-navigation-container-color, #f0f0f0);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
    z-index: 9999;
  }

  .my-app-icon__container a {
   
   
    text-decoration: none; /* 去掉下划线 */
  }

  .my-app-icon {
   
   
    flex: 1 1 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    user-select: none