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

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

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

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

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

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

[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文件里面。如果直接插入网页，请插入在内

        let displaybottom = document.querySelector('.displa犀利士
y-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”）。

如何查找主题的按钮代码

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

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

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

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

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

 
                  

                  {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                    
                    

                      
                        
                          {%- if product.selected_or_first_available_variant.available -%}
                            {{ 'products.product.add_to_cart' | t }}
                          {%- else -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- endif -%}
                        
                        

                          
                        
                      
                      {%- if block.settings.show_dynamic_checkout -%}
                        {{ form | payment_button }}
                      {%- endif -%}
                    
                  {%- endform -%}

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

 
                  

                  {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                    
                    

                      
                        
                          {%- if product.selected_or_first_available_variant.available -%}
                            {{ 'products.product.add_to_cart' | t }}
                          {%- else -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- endif -%}
                        
                        

                          
                        
                      
                      {%- if block.settings.show_dynamic_checkout -%}
                        {{ form | payment_button }}
                      {%- endif -%}
                    
                  {%- endform -%}

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

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

[/erphpdown]