文章
文章用户商铺文档快讯圈子网址导航问答

shopify产品详情页通过代码实现手机端按钮悬浮显示

释放双眼，带上耳机，听听看~！

在手机端很常见的效果，页面滑到到一定的位置，购物车按钮在底部悬浮显示（详细效果演示请看下面的视频）

shopify产品详情页通过代码实现手机端按钮悬浮显示

如何不使用插件，直接代码实现这种效果呢？我们以shopify默认dawn主题为例（其他主题自行修改相关细节）

方法B-适用于Shopify1.0、2.0所有模板，在代码编辑器插入（按钮代码使用主题自带）

下面是需要用到的相关代码

CSS代码，可以插入到.css文件里面。如果直接插入网页，请插入在<style> </style>内

[erphpdown]

@media only screen and (max-width:589px){
  .display-mobile {
    padding: 0 10px;
    background: #ffffff;
    webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    width: 100%;
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    margin: 0;
    z-index: 99;
  }
  .display-mobile .payment-buttons {
    margin-top: 10px;
  }
  .display-mobile .shopify-payment-button__more-options {
    display:none;
  } 
}

JS代码，可以插入到.js文件里面。如果直接插入网页，请插入在<script> </script>内

        let displaybottom = document.querySelector('.display-bottom')
        // 1. 页面滚动事件
        window.addEventListener('scroll', function () {
            // 2. 页面检测滚动的距离
            // console.log(document.documentElement.scrollTop)
            let num = document.documentElement.scrollTop
            // 3. 进行判断显示和隐藏
            if (num >= 1000) {
                //num数值大于等于设定-显示那个元素
                displaybottom.style.display = 'block'
            } else {
                // 否则隐藏元素
                displaybottom.style.display = 'none'
            }
        })

HTML代码，插入到shopify产品详情页模板内，shopify不同主题产品详情页模板名字不同，请在编辑器内搜索Product查找（Dawn主题产品详情页名字“main-product.liquid”）。

<div class="display-bottom" style="display:none;">
<div class="display-mobile">
<!--这里面插入shopify按钮代码-->
</div>
</div>

如何查找主题的按钮代码

1、在Chrome浏览器打开shopify网站产品详情

2、按F12进入开发者模式。点击右上角“小箭头”图标

3、在网页界面上选中按钮区域。右边出现的区块就是按钮代码区块，复制<product-form class=”product-form”>…</product-form>整段代码（如果您想实现更完整复制的效果，可以把变体选择器、数量选择器代码复制下来）

shopify产品详情页通过代码实现手机端按钮悬浮显示

 

进入shopify模板代码编辑页面，编辑“main-product.liquid”页面，搜索“<product-form class=”product-form”>”，此段代码既是按钮代码。

shopify产品详情页通过代码实现手机端按钮悬浮显示shopify产品详情页通过代码实现手机端按钮悬浮显示

 

以下是Shopify Dawn主题产品详情页“main-product.liquid”购物车按钮代码。

 <product-form class="product-form">
                  <div class="product-form__error-message-wrapper" role="alert" hidden>
                    <svg
                      aria-hidden="true"
                      focusable="false"
                      role="presentation"
                      class="icon icon-error"
                      viewBox="0 0 13 13"
                    >
                      <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                      <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                      <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                      <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                    </svg>
                    <span class="product-form__error-message"></span>
                  </div>

                  {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                    <input
                      type="hidden"
                      name="id"
                      value="{{ product.selected_or_first_available_variant.id }}"
                      disabled
                    >
                    <div class="product-form__buttons">
                      <button
                        type="submit"
                        name="add"
                        class="123 product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
                        {% if product.selected_or_first_available_variant.available == false %}
                          disabled
                        {% endif %}
                      >
                        <span>
                          {%- if product.selected_or_first_available_variant.available -%}
                            {{ 'products.product.add_to_cart' | t }}
                          {%- else -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- endif -%}
                        </span>
                        <div class="loading-overlay__spinner hidden">
                          <svg
                            aria-hidden="true"
                            focusable="false"
                            role="presentation"
                            class="spinner"
                            viewBox="0 0 66 66"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                          </svg>
                        </div>
                      </button>
                      {%- if block.settings.show_dynamic_checkout -%}
                        {{ form | payment_button }}
                      {%- endif -%}
                    </div>
                  {%- endform -%}
</product-form>

最后把前面的html/css/js/(js代码一定要放在最后不然会执行不成功)代码合在一起插入Shopify Dawn主题产品详情页“main-product.liquid”。最后的代码如下，代码插入在“{% schema %}”前即可。

<!--手机悬浮按钮-->
<div class="display-bottom">
<div class="display-mobile">
<!--这里插入shopify购物车按钮-->
 <product-form class="product-form">
                  <div class="product-form__error-message-wrapper" role="alert" hidden>
                    <svg
                      aria-hidden="true"
                      focusable="false"
                      role="presentation"
                      class="icon icon-error"
                      viewBox="0 0 13 13"
                    >
                      <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                      <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                      <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                      <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                    </svg>
                    <span class="product-form__error-message"></span>
                  </div>

                  {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                    <input
                      type="hidden"
                      name="id"
                      value="{{ product.selected_or_first_available_variant.id }}"
                      disabled
                    >
                    <div class="product-form__buttons">
                      <button
                        type="submit"
                        name="add"
                        class="123 product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
                        {% if product.selected_or_first_available_variant.available == false %}
                          disabled
                        {% endif %}
                      >
                        <span>
                          {%- if product.selected_or_first_available_variant.available -%}
                            {{ 'products.product.add_to_cart' | t }}
                          {%- else -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- endif -%}
                        </span>
                        <div class="loading-overlay__spinner hidden">
                          <svg
                            aria-hidden="true"
                            focusable="false"
                            role="presentation"
                            class="spinner"
                            viewBox="0 0 66 66"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                          </svg>
                        </div>
                      </button>
                      {%- if block.settings.show_dynamic_checkout -%}
                        {{ form | payment_button }}
                      {%- endif -%}
                    </div>
                  {%- endform -%}
</product-form>
<!--这里插入shopify购物车按钮-->
</div>
</div>
<!--CSSS代码-->
<style>
@media only screen and (max-width:589px){
.display-mobile {
padding: 0 10px;
background: #ffffff;
webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
width: 100%;
display: block;
position: fixed;
left: 0;
bottom: 0;
margin: 0;
z-index: 99;
}
.display-mobile .payment-buttons {
margin-top: 10px;
}
.display-mobile .shopify-payment-button__more-options {
display:none;
}
}
</style>
<!--JS代码-->
<script>
let displaybottom = document.querySelector('.display-bottom')
// 1. 页面滚动事件
window.addEventListener('scroll', function () {
// 2. 页面检测滚动的距离
// console.log(document.documentElement.scrollTop)
let num = document.documentElement.scrollTop
// 3. 进行判断显示和隐藏
if (num >= 1000) {
//num数值大于等于设定-显示那个元素
displaybottom.style.display = 'block'
} else {
// 否则隐藏元素
displaybottom.style.display = 'none'
}
})
</script>
<!--手机悬浮按钮-->

方法B.1适用于Shopify2.0主题，主题自定义里添加自定义代码。可直接复制代码在自定义界面插入（按钮代码使用主题自带）

添加如下图模块“Custom liquid”，部分主题叫“Custom html”，插入后把上面编辑好的对应的代码直接插入即可

shopify产品详情页通过代码实现手机端按钮悬浮显示

[/erphpdown]

打赏微海报分享
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
Shopify功能开发

导入shopify产品与订单数据到woocommerce-s2w import shopify to woocommerce插件使用方法

2022-11-24 18:07:15

Shopify功能开发

shopify开发 加入swiper幻灯片section并且加入块blocks

2022-11-28 21:50:44

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

  • 微信

返回顶部