~ 1 min read

如何在Shopify中创建购物车抽屉.

How to Create a Cart Drawer in Shopify

目录

  1. 介绍
  2. 了解购物车抽屉
  3. 在Shopify中创建购物车抽屉
  4. 购物车抽屉的最佳实践
  5. 结论
  6. 常见问题

介绍

想象一下，一个顾客在您的在线商店中浏览，兴奋地将商品添加到购物车中，却突然被重定向到一个独立的购物车页面。这样的体验可能会让人感到不适，常常导致购物车放弃和销售损失。如果有一种更无缝的方式让顾客查看他们的购物车，而不打断他们的购物体验呢？这就是购物车抽屉——一种滑动的、脱离画布的购物车，增强用户体验并提高转化率。

购物车抽屉允许顾客在不离开当前页面的情况下查看他们选定的商品和总费用，促进无干扰的购物之旅。在当今竞争激烈的电子商务环境中，优化商店的这一部分对于保留客户和最大化销售至关重要。

在本文中，我们将深入研究在Shopify中创建购物车抽屉所需知道的所有内容。我们将概述实施该功能的好处，提供创建的逐步指南，并讨论如何将其纳入您的用户体验策略中。到最后，您将全面了解，确保您的商店保持用户友好和高效。

您将学习到什么

  • 购物车抽屉在电子商务中的重要性。
  • 如何在您的Shopify商店上实施自定义购物车抽屉，而无需使用第三方应用。
  • 增强购物车抽屉用户体验的最佳实践。

让我们开始吧！

了解购物车抽屉

什么是购物车抽屉？

购物车抽屉，通常被称为滑出购物车或迷你购物车，是一个界面元素，允许顾客在不离开当前页面的情况下查看其购物车的内容。它不将用户重定向到专用的购物车页面，而是从屏幕的侧面滑入，提供所选商品的便利概览。这种方法不仅简化了购物体验，还鼓励用户继续浏览您的商店，最终提高转化率。

购物车抽屉的重要性

在您的Shopify商店中拥有购物车抽屉带来了诸多好处：

  1. 增强的用户体验：顾客可以快速查看他们的购物车内容，而不会干扰他们的浏览流程。

  2. 减少购物车放弃：通过让客户轻松看到他们的商品和总费用，购物车抽屉可以帮助降低购物车放弃的可能性。

  3. 提高销售：顺畅的结账过程可以导致更多已完成的交易，积极影响您的收益。

  4. 移动优化：随着越来越多的消费者在移动设备上购物，购物车抽屉在较小的屏幕上提供了更友好的用户体验。

  5. 自定义选项：设计精美的购物车抽屉可以根据您的商店品牌进行定制，增强您的整体美感。

在Shopify中创建购物车抽屉

前提条件

在开始创建过程之前，请确保您具备以下条件：

  • 访问您的Shopify商店的管理面板。
  • 对HTML、CSS和JavaScript有基本了解。
  • 允许自定义代码的主题（大多数Shopify主题都支持）。

逐步指南

步骤1：访问您的Shopify代码编辑器

  1. 登录到您的Shopify管理面板。
  2. 在左侧边栏中，导航到在线商店并点击主题。
  3. 找到您当前使用的主题并点击操作 > 编辑代码。

步骤2：创建必要的文件

  1. 在资产文件夹中，创建两个新文件：drawer.css和drawer.js。

  2. 打开drawer.css，并添加以下样式以管理您的购物车抽屉的外观：

    .drawer {
    display: none;
}
.drawer__header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
}
.drawer__close {
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
.drawer__wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    max-width: 500px;
    z-index: 9999;
    overflow: auto;
    transition: transform 0.3s;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px #777;
}
.drawer.is-active {
    display: block;
}
.drawer.is-visible .drawer__wrapper {
    transform: translateX(0);
}

  3. 接下来，打开drawer.js，并插入以下JavaScript以管理抽屉的功能：

    var drawer = function () {
    var settings = {
        activeClass: 'is-active',
        visibleClass: 'is-visible',
        selectorTarget: '[data-drawer-target]',
        selectorTrigger: '[data-drawer-trigger]',
        selectorClose: '[data-drawer-close]',
    };

    var openDrawer = function (trigger) {
        var target = document.getElementById(trigger.getAttribute('aria-controls'));
        target.classList.add(settings.activeClass);
        document.documentElement.style.overflow = 'hidden';
        setTimeout(function () {
            target.classList.add(settings.visibleClass);
        }, 50);
    };

    var closeDrawer = function (event) {
        var closestParent = event.closest(settings.selectorTarget);
        closestParent.classList.remove(settings.visibleClass);
        document.documentElement.style.overflow = '';
        setTimeout(function () {
            closestParent.classList.remove(settings.activeClass);
        }, 350);
    };

    var clickHandler = function (event) {
        var toggle = event.target,
            open = toggle.closest(settings.selectorTrigger),
            close = toggle.closest(settings.selectorClose);

        if (open) {
            openDrawer(open);
        }
        if (close) {
            closeDrawer(close);
        }
        if (open || close) {
            event.preventDefault();
        }
    };

    document.addEventListener('click', clickHandler, false);
};

drawer();

步骤3：创建HTML结构

  1. 在部分文件夹中，创建一个名为drawer.liquid的新文件。

  2. 插入以下HTML结构以定义抽屉的布局：

    <section class="drawer" id="drawer-name" data-drawer-target>
    <div class="drawer__overlay" data-drawer-close tabindex="-1"></div>
    <div class="drawer__wrapper">
        <div class="drawer__header">
            <div class="drawer__title">继续购物</div>
            <button class="drawer__close" data-drawer-close aria-label="关闭抽屉"></button>
        </div>
        <div class="drawer__content" id="cart__drawer">
            <div id="cart__drawer_items"></div>
            <div style="margin-top: 50px">
                <h4>总计：<span id="cart__total_price"></span></h4>
                <a id="cart__checkout_btn" href="/zh-hans/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">继续结账</a>
            </div>
        </div>
    </div>
</section>

  3. 添加必要的JavaScript以获取和更新购物车数据：

    <script>
    fetch('/cart.js')
        .then((resp) => resp.json())
        .then((data) => {
            if (data.items.length > 0) {
                data.items.forEach(function(product) {
                    document.getElementById('cart__drawer_items').innerHTML += '<img src="' + product.featured_image.url + '" alt="' + product.featured_image.alt + '"><h5>' + product.title + '</h5><p>' + product.quantity + ' x ' + Shopify.formatMoney(product.line_price) + '</p>';
                });
                document.getElementById('cart__total_price').innerHTML = Shopify.formatMoney(data.total_price);
            } else {
                document.getElementById('cart__drawer_items').innerHTML = '<p>购物车为空</p>';
            }
        });
</script>

步骤4：在主题中引用抽屉

  1. 打开theme.liquid，并在<head>部分中包含您创建的CSS和JavaScript文件：

    {{ 'drawer.css' | asset_url | stylesheet_tag }}
{{ 'drawer.js' | asset_url | script_tag }}

  2. 在<body>标签内引用您的drawer.liquid部分：

    {% section 'drawer' %}

步骤5：从头部触发抽屉

  1. 在部分文件夹中打开header.liquid文件。

  2. 找到与您的购物车图标相关的锚标签，并将其修改为触发抽屉，如下所示：

    <a href="#" class="site-header__icon site-header__cart" data-drawer-trigger aria-controls="drawer-name" aria-expanded="false">
    {% include 'icon-cart' %}
    <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
    <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}">
        <span data-cart-count>{{ cart.item_count }}</span>
    </div>
</a>

  3. 保存所有更改。

测试您的购物车抽屉

完成步骤后，测试您在Shopify商店中的购物车抽屉至关重要：

  1. 在新标签中打开您的商店。
  2. 向您的购物车添加一件商品。
  3. 点击头部的购物车图标，观察抽屉的功能。
  4. 确保购物车动态更新，且总价格准确反映。

购物车抽屉的最佳实践

为了优化购物车抽屉的有效性，请考虑以下最佳实践：

  • 用户友好的设计：确保购物车抽屉在视觉上吸引人且易于导航。使用清晰的排版、适当的间距和直观的按钮位置。

  • 响应式设计：在不同设备和屏幕尺寸上测试您的购物车抽屉，以确保所有用户，尤其是移动购物者，都能获得无缝体验。

  • 实时更新：实现功能，允许客户直接在抽屉内更新数量或移除商品，而无需刷新页面。

  • 鼓励额外销售：利用购物车抽屉展示交叉销售或追加销售建议，吸引客户添加更多商品到购物车。

  • 明确的行动呼吁：确保结账按钮突出且易于在抽屉中访问，鼓励用户完成他们的购买。

结论

在Shopify中创建购物车抽屉是一个战略举措，可以显著增强客户的购物体验。通过遵循本指南中的步骤，您可以实施一个自定义、高效且用户友好的购物车抽屉，使客户保持参与并鼓励他们完成购买。

随着电子商务的不断发展，确保您的商店满足现代购物者的期望至关重要。一个设计良好的购物车抽屉不仅提高用户体验，还作为一个强有力的工具来增加转化率和提高销售额。

如果您希望在优化Shopify商店方面获得进一步帮助，请考虑探索Praella的服务。他们在用户体验与设计、网站与应用开发以及战略、连续性与增长方面的专业知识，可以帮助您创造与客户产生共鸣的难忘购物体验。

准备好提升您的Shopify商店了吗？今天就开始实施您的购物车抽屉，看看它带来的变化！

常见问题

什么是购物车抽屉？

购物车抽屉是在线商店中的一种界面功能，它允许客户在不离开当前页面的情况下查看购物车内容。它通常从侧面滑入，提供所添加商品的快速概览。

购物车抽屉如何改善用户体验？

购物车抽屉通过允许客户在不离开当前浏览会话的情况下查看购物车商品，促进更加顺畅的购物旅程，降低购物车放弃率，从而改善用户体验。

我可以自定义我的购物车抽屉设计吗？

是的，您可以使用CSS自定义购物车抽屉的设计，以确保它与您品牌的美学一致，并提供引人入胜的用户界面。

创建购物车抽屉需要什么技术技能？

了解HTML、CSS和JavaScript的基本知识有助于创建购物车抽屉。Shopify提供了丰富的文档和资源，帮助商店所有者实施自定义功能。

我如何在实现后测试我的购物车抽屉？

在实现购物车抽屉后，向您的购物车添加商品，点击购物车图标以触发抽屉，并确保商品和总价格在不刷新页面的情况下正确更新。在各种设备上测试，以确保响应能力和功能性。

创建购物车抽屉是否必须使用第三方应用程序？

不，您可以通过自定义代码创建购物车抽屉，而无需依赖第三方应用程序。这可以根据您商店的需求提供更大的灵活性和自定义。

Previous
如何在Shopify中创建购买按钮：全面指南
Next
如何在 Shopify 中创建结账页面
四一一

解锁您的电子商务成功

Shopify POS 初学者指南：成功设置
Shopify POS 初学者指南：成功设置
Read Article
s