~ 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. 在Sections文件夾中，創建一個名為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-hant/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. 在Sections文件夾中打開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