วิธีสร้างถาดรถเข็นใน Shopify

Q: ทักษะทางเทคนิคใดที่จำเป็นในการสร้างตะกร้าข้าง?

ความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript จะเป็นประโยชน์ในการสร้างตะกร้าข้าง Shopify มีเอกสารและทรัพยากรมากมายที่จะช่วยเจ้าของร้านในการนำฟีเจอร์ที่กำหนดเองไปใช้.

สารบัญ

บทนำ
ทำความเข้าใจกับตะกร้าข้าง
การสร้างตะกร้าข้างใน Shopify
แนวปฏิบัติที่ดีที่สุดสำหรับตะกร้าข้าง
บทสรุป
คำถามที่พบบ่อย

บทนำ

ลองนึกภาพว่าลูกค้ากำลังท่องเว็บไซต์ของคุณด้วยความตื่นเต้น ขณะเพิ่มรายการลงในตะกร้าแต่กลับถูกเปลี่ยนเส้นทางไปยังหน้าตะกร้าแยกต่างหาก เวลานั้นอาจรู้สึกกระทันหัน ทำให้เกิดตะกร้าที่ถูกทิ้งและการสูญเสียยอดขาย แล้วถ้ามีวิธีที่ลูกค้าจะสามารถเห็นตะกร้าของตนโดยไม่ Interrupt ประสบการณ์การช้อปปิ้งของพวกเขาได้ล่ะ? นี่คือการทำงานของตะกร้าข้าง—เป็นตะกร้าที่เลื่อนออกมาจากข้างนอกเพื่อยกระดับประสบการณ์การใช้งานและเพิ่มอัตราการแปลง.

ตะกร้าข้างอนุญาตให้ลูกค้าเห็นรายการที่เลือกและค่าใช้จ่ายรวมโดยไม่ต้องออกจากหน้าปัจจุบัน ส่งเสริมการช้อปปิ้งอย่างต่อเนื่อง ในสภาพการแข่งขันที่สูงในตลาด e-commerce ในปัจจุบัน การปรับปรุงด้านนี้ของร้านของคุณจึงมีความสำคัญต่อการรักษาลูกค้าและเพิ่มยอดขายอย่างมีประสิทธิภาพ.

ในโพสต์นี้เราจะเจาะลึกทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับการสร้างตะกร้าข้างใน Shopify เราจะสรุปประโยชน์ของการนำฟีเจอร์นี้ไปใช้ ให้คำแนะนำแบบทีละขั้นตอนในการสร้าง และพูดคุยเกี่ยวกับวิธีการทำให้มันเป็นส่วนหนึ่งของกลยุทธ์ประสบการณ์ผู้ใช้ของคุณ เมื่อสิ้นสุดบทความนี้ คุณจะได้รับความเข้าใจอย่างละเอียดเกี่ยวกับการสร้างตะกร้าข้างใน Shopify เพื่อให้ร้านของคุณยังคงเป็นมิตรกับผู้ใช้และมีประสิทธิภาพ.

สิ่งที่คุณจะได้เรียนรู้

ความสำคัญของตะกร้าข้างใน e-commerce.
วิธีการนำตะกร้าข้างที่กำหนดเองไปใช้ในร้าน Shopify ของคุณโดยไม่ต้องใช้แอพของบุคคลที่สาม.
แนวปฏิบัติที่ดีที่สุดในการปรับปรุงประสบการณ์ผู้ใช้กับตะกร้าข้างของคุณ.

เริ่มกันเถอะ!

ทำความเข้าใจกับตะกร้าข้าง

ตะกร้าข้างคืออะไร?

ตะกร้าข้าง ที่มักเรียกว่าตะกร้าที่เลื่อนออกหรือมินิตะกร้า เป็นองค์ประกอบของอินเตอร์เฟซที่อนุญาตให้ลูกค้าเห็นเนื้อหาของตะกร้าช้อปปิ้งของพวกเขาโดยไม่ต้องเปลี่ยนหน้าไปยังหน้าแยกต่างหาก แทนที่จะเปลี่ยนเส้นทางผู้ใช้ไปที่หน้าตะกร้าเฉพาะ ตะกร้าจะเลื่อนเข้ามาจากด้านข้างของหน้าจอ ทำให้เห็นภาพรวมที่สะดวกของรายการที่เลือก วิธีการนี้ไม่เพียงแค่ปรับปรุงประสบการณ์การช้อปปิ้ง แต่ยังสนับสนุนให้ผู้ใช้สำรวจร้านของคุณต่อไป ซึ่งนำไปสู่การแปลงที่สูงขึ้น.

ความสำคัญของตะกร้าข้าง

การมีตะกร้าข้างในร้าน Shopify ของคุณมาพร้อมกับประโยชน์มากมาย:

ประสบการณ์ผู้ใช้ที่ดีขึ้น: ลูกค้าสามารถดูเนื้อหาตะกร้าอย่างรวดเร็วโดยไม่หยุดการท่องเว็บ.
ลดการทิ้งตะกร้า: โดยการทำให้ลูกค้าเห็นรายการและค่าใช้จ่ายรวมได้ง่าย ตะกร้าข้างช่วยลดโอกาสในการทิ้งตะกร้า.
เพิ่มยอดขาย: กระบวนการชำระเงินที่ราบรื่นสามารถนำไปสู่การทำธุรกรรมที่เสร็จสมบูรณ์มากขึ้น ส่งผลบวกต่อรายได้ของคุณ.
การปรับให้เหมาะกับอุปกรณ์เคลื่อนที่: เมื่อลูกค้ามากขึ้นเลือกช้อปปิ้งผ่านอุปกรณ์เคลื่อนที่ การใช้ตะกร้าข้างช่วยให้ประสบการณ์การใช้งานดียิ่งขึ้นบนหน้าจอขนาดเล็ก.
ตัวเลือกในการปรับแต่ง: ตะกร้าข้างที่ออกแบบมาอย่างลงตัวสามารถปรับแต่งให้ตรงกับแบรนด์ของร้านคุณเพื่อเพิ่มประสิทธิภาพโดยรวม.

การสร้างตะกร้าข้างใน Shopify

ข้อกำหนดเบื้องต้น

ก่อนเริ่มกระบวนการสร้าง โปรดตรวจสอบว่าคุณมี:

การเข้าถึงแผงผู้ดูแลของร้าน Shopify ของคุณ.
ความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript.
ธีมที่อนุญาตให้เขียนโค้ดแบบกำหนดเอง (ธีม Shopify ส่วนใหญ่ทำ).

คำแนะนำแบบทีละขั้นตอน

ขั้นตอนที่ 1: เข้าถึงตัวแก้ไขโค้ดของคุณใน Shopify

เข้าสู่ระบบแผงผู้ดูแลของ Shopify ของคุณ.
ในแถบด้านซ้าย ให้ไปที่ ร้านค้าออนไลน์ และคลิกที่ ธีม.
ค้นหาธีมที่ใช้งานอยู่ของคุณ และคลิกที่ การดำเนินการ > แก้ไขโค้ด.

ขั้นตอนที่ 2: สร้างไฟล์ที่จำเป็น

ในโฟลเดอร์ สินทรัพย์ ให้สร้างไฟล์ใหม่ 2 ไฟล์: drawer.css และ drawer.js.

เปิด 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);
}

ถัดไป ให้เปิด 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

ในโฟลเดอร์ ส่วน ให้สร้างไฟล์ใหม่ที่ชื่อว่า drawer.liquid.

แทรกโครงสร้าง 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="/th/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">ดำเนินการชำระเงิน</a>
            </div>
        </div>
    </div>
</section>

เพิ่ม 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: อ้างอิงตะกร้าข้างในธีมของคุณ

เปิด theme.liquid และรวมไฟล์ CSS และ JavaScript ที่คุณสร้างใน <head> ส่วน:
```
{{ 'drawer.css' | asset_url | stylesheet_tag }}
{{ 'drawer.js' | asset_url | script_tag }}
```
อ้างอิงส่วน drawer.liquid ของคุณภายในแท็ก <body>:
```
{% section 'drawer' %}
```

ขั้นตอนที่ 5: เรียกใช้งานตะกร้าจากหัวข้อ

เปิดไฟล์ header.liquid ในโฟลเดอร์ ส่วน.

ค้นหาแท็ก anchor ที่เกี่ยวข้องกับไอคอนตะกร้าของคุณและปรับเปลี่ยนเพื่อเรียกใช้งานตะกร้าข้างให้เหมือนดังนี้:

<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>

บันทึกการเปลี่ยนแปลงทั้งหมด.

การทดสอบตะกร้าข้างของคุณ

หลังจากทำขั้นตอนเสร็จสิ้น มันสำคัญที่จะต้องทดสอบตะกร้าข้างในร้าน Shopify ของคุณ:

เปิดร้านของคุณในแท็บใหม่.
เพิ่มผลิตภัณฑ์ลงในตะกร้า.
คลิกที่ไอคอนตะกร้าในหัวเรื่องและสังเกตการทำงานของตะกร้า.
ตรวจสอบให้แน่ใจว่าตะกร้าได้รับการอัปเดตแบบเรียลไทม์และราคาสุทธิแสดงอย่างถูกต้อง.

แนวปฏิบัติที่ดีที่สุดสำหรับตะกร้าข้าง

เพื่อเพิ่มประสิทธิภาพของตะกร้าข้างของคุณ พิจารณาแนวปฏิบัติที่ดีที่สุดต่อไปนี้:

ออกแบบให้ใช้งานง่าย: ให้แน่ใจว่าตะกร้าข้างมีความสวยงามและใช้งานง่าย ใช้แบบตัวอักษรที่ชัดเจน เว้นระยะที่เหมาะสมและการจัดวางปุ่มที่เข้าใจได้.
ออกแบบให้ตอบสนอง: ทดสอบตะกร้าข้างของคุณในอุปกรณ์และขนาดหน้าจอที่แตกต่างกันเพื่อให้แน่ใจว่าประสบการณ์ที่ราบรื่นสำหรับผู้ใช้ทุกคน โดยเฉพาะนักช้อปทางมือถือ.
การอัปเดตแบบเรียลไทม์: ใช้ฟังก์ชันality ที่อนุญาตให้ลูกค้าอัปเดตปริมาณหรือลบรายการได้โดยตรงในตะกร้าโดยไม่ต้องรีเฟรชหน้า.
กระตุ้นการขายเพิ่มเติม: ใช้ตะกร้าข้างเพื่อแสดงข้อเสนอ upsell หรือ cross-sell กระตุ้นให้ลูกค้าเพิ่มรายการเพิ่มเติมในตะกร้า.
เรียกร้องการกระทำที่ชัดเจน: ให้แน่ใจว่าปุ่มชำระเงินโดดเด่นและเข้าถึงได้ง่ายภายในตะกร้า กระตุ้นให้ผู้ใช้การทำธุรกรรมเสร็จสมบูรณ์.

บทสรุป

การสร้างตะกร้าข้างใน Shopify เป็นการย้ายเชิงกลยุทธ์ที่สามารถเพิ่มประสบการณ์การช้อปปิ้งเพื่อให้ลูกค้าของคุณดีขึ้นอย่างมาก โดยการทำตามขั้นตอนที่สรุปไว้ในคู่มือนี้ คุณสามารถนำเสนอการปรับแต่งให้มีประสิทธิภาพและเป็นมิตรกับผู้ใช้ของตะกร้าข้างที่ทำให้ลูกค้าเผื่อแผ่และกระตุ้นให้พวกเขาทำธุรกรรมเสร็จสมบูรณ์.

เมื่อ e-commerce ยังคงพัฒนา หนึ่งในความสำคัญคือการทำให้แน่ใจว่าร้านค้าของคุณสอดคล้องกับความคาดหวังของนักช้อปในปัจจุบัน ตะกร้าข้างที่ออกแบบได้ดีไม่เพียงแต่ช่วยปรับปรุงประสบการณ์ผู้ใช้ แต่ยังทำหน้าที่เป็นเครื่องมือที่มีประสิทธิภาพในการเพิ่มอัตราการแปลงและยอดขาย.

ถ้าคุณกำลังมองหาความช่วยเหลือเพิ่มเติมในการปรับปรุงร้าน Shopify ของคุณ ควรพิจารณาใช้บริการของ Praella ผู้เชี่ยวชาญของพวกเขาใน ประสบการณ์ผู้ใช้ & การออกแบบ, การพัฒนาเว็บไซต์ & แอปพลิเคชัน, และ กลยุทธ์ ความต่อเนื่อง และการเติบโต สามารถช่วยให้คุณสร้างประสบการณ์การช้อปปิ้งที่น่าจดจำที่ตรงใจลูกค้า.

พร้อมที่จะเพิ่มประสิทธิภาพร้าน Shopify ของคุณแล้วหรือยัง? เริ่มนำเสนอการใช้งานตะกร้าข้างของคุณวันนี้และดูการเปลี่ยนแปลงที่เกิดขึ้น!

คำถามที่พบบ่อย

ตะกร้าข้างคืออะไร?

ตะกร้าข้างคือฟีเจอร์ในร้านค้าออนไลน์ที่อนุญาตให้ลูกค้าเห็นเนื้อหาของตะกร้าโดยไม่ต้องเปลี่ยนหน้าแยกต่างหาก โดยทั่วไปมันจะเลื่อนเข้าจากด้านข้างและให้ภาพรวมอย่างรวดเร็วของรายการที่เพิ่มลงในตะกร้า.

ตะกร้าข้างช่วยปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างไร?

ตะกร้าข้างช่วยปรับปรุงประสบการณ์ของผู้ใช้โดยอนุญาตให้ลูกค้าเห็นรายการในตะกร้าโดยไม่ต้องออกจากเซสชันการท่องเว็บปัจจุบัน ทำให้การช้อปปิ้งราบรื่นยิ่งขึ้นและลดอัตราการทิ้งตะกร้า.

ฉันสามารถปรับแต่งการออกแบบของตะกร้าข้างได้ไหม?

ใช่ คุณสามารถปรับแต่งการออกแบบของตะกร้าข้างด้วย CSS เพื่อให้แน่ใจว่ามันสอดคล้องกับสไตล์ของแบรนด์ของคุณและให้ประสบการณ์ผู้ใช้ที่น่าสนใจ.

ทักษะทางเทคนิคใดที่จำเป็นในการสร้างตะกร้าข้าง?

ความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript มีประโยชน์ในการสร้างตะกร้าข้าง Shopify มีเอกสารและทรัพยากรมากมายเพื่อช่วยเจ้าของร้านในการนำฟีเจอร์ที่กำหนดเองไปใช้.

ฉันจะทดสอบตะกร้าข้างได้อย่างไรหลังจากการนำไปใช้?

หลังจากนำตะกร้าข้างไปใช้ ให้เพิ่มรายการลงในตะกร้า คลิกที่ไอคอนตะกร้าเพื่อเรียกใช้งานตะกร้าและตรวจสอบให้แน่ใจว่ารายการและราคาสุทธิได้รับการอัปเดตอย่างถูกต้องโดยไม่ต้องรีเฟรชหน้า ทดสอบบนอุปกรณ์ต่างๆ เพื่อให้แน่ใจว่ามีการตอบสนองและทำงานได้.

จำเป็นต้องใช้แอพของบุคคลที่สามในการสร้างตะกร้าข้างหรือไม่?

ไม่ คุณสามารถสร้างตะกร้าข้างได้โดยใช้โค้ดที่กำหนดเองโดยไม่ต้องพึ่งแอพของบุคคลที่สาม สิ่งนี้ทำให้คุณสามารถปรับแต่งตามความต้องการของร้านของคุณได้มากขึ้น.

วิธีสร้างถาดรถเข็นใน Shopify.

สารบัญ

บทนำ

สิ่งที่คุณจะได้เรียนรู้

ทำความเข้าใจกับตะกร้าข้าง

ตะกร้าข้างคืออะไร?

ความสำคัญของตะกร้าข้าง

การสร้างตะกร้าข้างใน Shopify

ข้อกำหนดเบื้องต้น

คำแนะนำแบบทีละขั้นตอน

ขั้นตอนที่ 1: เข้าถึงตัวแก้ไขโค้ดของคุณใน Shopify

ขั้นตอนที่ 2: สร้างไฟล์ที่จำเป็น

ขั้นตอนที่ 3: สร้างโครงสร้าง HTML

ขั้นตอนที่ 4: อ้างอิงตะกร้าข้างในธีมของคุณ

ขั้นตอนที่ 5: เรียกใช้งานตะกร้าจากหัวข้อ

การทดสอบตะกร้าข้างของคุณ

แนวปฏิบัติที่ดีที่สุดสำหรับตะกร้าข้าง

บทสรุป

คำถามที่พบบ่อย

ตะกร้าข้างคืออะไร?

ตะกร้าข้างช่วยปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างไร?

ฉันสามารถปรับแต่งการออกแบบของตะกร้าข้างได้ไหม?

ทักษะทางเทคนิคใดที่จำเป็นในการสร้างตะกร้าข้าง?

ฉันจะทดสอบตะกร้าข้างได้อย่างไรหลังจากการนำไปใช้?

จำเป็นต้องใช้แอพของบุคคลที่สามในการสร้างตะกร้าข้างหรือไม่?

ปลดล็อกความสำเร็จของอีคอมเมิร์ซของคุณ