วิธีโค้ดแถบประกาศของคุณเองสำหรับร้านค้าออนไลน์ของคุณ

เผยแพร่แล้ว: 2021-08-15
หมายเหตุ: ก่อนทำการเปลี่ยนแปลงใดๆ กับรหัสร้านค้าของคุณ โปรดสำรองข้อมูลไซต์ของคุณเสมอ

ฉันแน่ใจว่าคุณเคยเห็นแบนเนอร์แบบนี้มาก่อน มักจะพบที่ด้านบนสุดของเว็บไซต์:

ตัวอย่างแถบประกาศเว็บไซต์

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

เป็นที่ที่ดีในการประกาศสิ่งต่างๆ เช่น การขาย ลิงก์ไปยังบัญชีโซเชียลมีเดีย โปรโมชันการจัดส่ง (เช่น การจัดส่งฟรี) ความล่าช้าในการผลิต ประกาศโพสต์บล็อกใหม่ และอื่นๆ บางครั้งพ่อค้าก็ใช้พวกมันเพื่อจับภาพอีเมล

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

ในบทช่วยสอนนี้ เราจะสร้างแถบประกาศนี้โดยใช้ส่วนธีม Shopify แบบกำหนดเอง

วิธีการสร้างแถบประกาศ Shopify
ก่อนที่เราจะเริ่มต้นได้ เราต้องแมปทุกสิ่งที่เราต้องการ

มาทำแผนที่กันเถอะ!

เราต้องการคุณสมบัติอะไร?

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

  • ข้อความ (ความสามารถในการเพิ่มข้อความและลิงก์ด้วยรูปแบบพื้นฐาน เช่น ตัวหนาและตัวเอียง)
  • ขนาดตัวอักษร
  • สีข้อความ
  • สีพื้นหลัง
  • สีเส้นขอบ
  • ขนาดเส้นขอบ
  • การขยายความ

สร้างไฟล์ส่วนของคุณ

เข้าสู่ระบบแดชบอร์ด Shopify และไปที่ ร้านค้าออนไลน์ > ธีม

บทช่วยสอนการปรับแต่งธีมของ Shopify

โฆษณา

คลิกที่เมนูดรอปดาวน์ที่มีข้อความว่า Actions และคลิก Edit code

บทแนะนำการปรับแต่งแถบประกาศของ Shopify

ในบานหน้าต่างไฟล์เบราว์เซอร์ ให้มองหาโฟลเดอร์ชื่อ Sections และขยายโฟลเดอร์นั้น คลิกที่ลิงค์ เพิ่มส่วนใหม่

ปรับแต่งแถบประกาศใน Shopify

มาตั้งชื่อ แถบประกาศ ส่วนธีมใหม่ของเรากัน

การเพิ่มแถบประกาศ

เมื่อไฟล์ของคุณถูกสร้างขึ้นแล้ว คุณจะเห็นรหัสส่วนสำเร็จรูปต่อไปนี้

{% สคีมา %}
 {
 “ชื่อ”: “ชื่อส่วน”,
 "การตั้งค่า": []
 }
 {% จบสคีมา %}

 {% สไตล์ชีต %}
 {% endstylesheet %}

 {% จาวาสคริปต์ %}
 {% endjavascript %}

นี้อาจดูสับสน แต่ในตอนท้ายของบทช่วยสอนนี้ จะทำให้เข้าใจมากขึ้น สคีมาแท็กเป็นที่ที่คุณจะจัดเก็บข้อมูลทั้งหมดเกี่ยวกับส่วนใหม่ของคุณ

หากคุณต้องการอ่านเพิ่มเติมเกี่ยวกับสคีมาเนื้อหา โปรดดูเอกสารประกอบที่ครอบคลุมของ Shopify

ต่อไป เราต้องอ้างอิงถึงไฟล์/รหัสนี้ ซึ่งเราต้องการให้แถบประกาศของเราแสดงบนเว็บไซต์ของเรา มาวางของเราไว้ที่ด้านบนสุดของเว็บไซต์

เปิดไฟล์ theme.liquid ซึ่งสามารถพบได้ในเบราว์เซอร์ไฟล์ในโฟลเดอร์ Layout

โฆษณา

บทช่วยสอนการปรับแต่งธีมของ Shopify Liquid

มองหา แท็ก เปิด <body> และวางไว้ด้านล่าง — แบบนี้:

<body class= “แม่แบบ-{{ แม่แบบ | แยก: '.' | ก่อน }}” >
 {% ส่วน 'ประกาศ_bar' %}

เริ่มต้น

ต่อไป ในไฟล์ส่วนของคุณ ให้เพิ่ม div ด้วยคลาสของ ประกาศ ข้อความที่คุณต้องการให้แสดงในแถบประกาศของคุณจะถูกรวมไว้ใน div นี้

<div class= “การประกาศ” > {{ section.settings.announcement_text }} </div>

โค้ดที่ดูแปลกๆ ที่คุณเห็นใน div เรียกว่า "liquid tag" แท็กเหลวล้อมรอบด้วยวงเล็บ "หยิก" มันอ้างอิง ID ที่เรียกว่า ประกาศ_text ซึ่งเราจะเรียนรู้ในไม่กี่นาที

แต่ก่อนอื่น การตั้งค่าอินพุต

ผู้ค้าใช้การตั้งค่าอินพุตเพื่อกำหนดการตั้งค่าธีมสำหรับร้านค้าของตน ผู้ค้าเข้าถึงการตั้งค่าจากแถบด้านข้างตัวแก้ไขธีม” –Shopify

การตั้งค่าอินพุตนั้นยอดเยี่ยมและทรงพลังเมื่อคุณรู้วิธีใช้งานทั้งหมด โชคดีที่ Shopify ให้ตัวอย่างแต่ละรายการในเอกสารประกอบ ซึ่งทั้งหมดมีอยู่ที่นี่

ลบทุกอย่างในแท็ก {% schema %} ของคุณ และแทนที่ด้วยสิ่งต่อไปนี้ รหัสเต็มของคุณควรมีลักษณะดังนี้:

<div class= “การประกาศ” > {{ section.settings.announcement_text }} </div>

{% สคีมา %}
 {
 “ชื่อ”: “แถบประกาศ”,
 "การตั้งค่า": [
 {
 “ประเภท”: “ช่องทำเครื่องหมาย”,
 “id”: “announcement_visibility”,
 “ฉลาก”: “การมองเห็น (เปิด / ปิด)”,
 “ค่าเริ่มต้น”: จริง
 }
 ]
 }
 {% จบสคีมา %}

(เราลบสไตล์ชีตและแท็กจาวาสคริปต์ด้วย FYI)

โฆษณา

เราเลือกประเภทการป้อนข้อมูลใน ช่องกาเครื่องหมาย เพราะเราต้องการแสดงประเภทที่ด้านบนของส่วนของเราเพื่อให้เราสามารถเปิดและปิดแถบได้

การตั้งค่าแถบประกาศ

ตอนนี้เราได้กำหนดค่าช่องทำเครื่องหมายแล้ว เราจำเป็นต้องห่อ div คอนเทนเนอร์ (ที่เราสร้างขึ้นเมื่อสักครู่นี้) ไว้ในแท็กของเหลวที่ขับเคลื่อนโดยการตั้งค่าการมองเห็นของเรา

ห่อ div nnouncement ใน“ถ้า” คำสั่ง:

{% ถ้า section.settings.announcement_visibility %}

<div class= “การประกาศ” > {{ section.settings.announcement_text }} </div>
 {% สิ้นสุด %}


 {% สคีมา %}
 {
 “ชื่อ”: “แถบประกาศ”,
 "การตั้งค่า": [
 {
 “ประเภท”: “ช่องทำเครื่องหมาย”,
 “id”: “announcement_visibility”,
 “ฉลาก”: “การมองเห็น (เปิด / ปิด)”,
 “ค่าเริ่มต้น”: จริง
 }
 ]
 }
 {% จบสคีมา %}

คำสั่ง "if" ใหม่ที่เราเพิ่มเข้าไปจะดูที่การตั้งค่าสำหรับ ID ที่ตรงกันของ ประกาศ_visibility เราตั้งค่าเริ่มต้นเป็น true ดังนั้นแถบจะแสดงขึ้น

มาเพิ่มการตั้งค่าที่เหลือกันเถอะ

แทนที่โค้ดระหว่างแท็กสคีมาของคุณด้วยสิ่งต่อไปนี้:

{% สคีมา %}
 {
 “ชื่อ”: “แถบประกาศ”,
 "การตั้งค่า": [
 {
 “ประเภท”: “ช่องทำเครื่องหมาย”,
 “id”: “announcement_visibility”,
 “ฉลาก”: “การมองเห็น (เปิด / ปิด)”,
 “ค่าเริ่มต้น”: จริง
 },
 {
 “ประเภท”: “richtext”,
 “id”: “announcement_text”,
 “ป้ายกำกับ”: “ข้อความ”,
 “default”: “ <p> ค่าเริ่มต้น <em> richtext </em> <a href= \ “https://example.com/\”> เนื้อหา </a></p> “
 },
 {
 “ประเภท”: “ช่วง”,
 “id”: “announcement_text_size”,
 “นาที”: 12,
 “สูงสุด”: 24,
 "ขั้นตอนที่ 1,
 “หน่วย”: “px”,
 “ป้ายกำกับ”: “ขนาดตัวอักษร”,
 “ค่าเริ่มต้น”: 16
 },
 {
 “ประเภท”: “สี”,
 “id”: “announcement_text_color”,
 “ฉลาก”: “สีข้อความ”,
 “ค่าเริ่มต้น”: “#000000”
 },
 {
 “ประเภท”: “สี”,
 “id”: “announcement_bg_color”,
 “ฉลาก”: “สีพื้นหลัง”,
 “ค่าเริ่มต้น”: “#aaa”
 },
 {
 “ประเภท”: “ช่วง”,
 “id”: “announcement_border_size”,
 “นาที”: 0
 “สูงสุด”: 10,
 “ขั้นตอน”: 1,
 “หน่วย”: “px”,
 “ฉลาก”: “ขนาดขอบ”,
 “ค่าเริ่มต้น”: 4
 },
 {
 “ประเภท”: “สี”,
 “id”: “announcement_border_color”,
 “ฉลาก”: “สีขอบ”,
 “ค่าเริ่มต้น”: “#333333”
 },
 {
 “ประเภท”: “ช่วง”,
 “id”: “announcement_padding”,
 “นาที”: 0
 “สูงสุด”: 20,
 "ขั้นตอนที่ 1,
 “หน่วย”: “px”,
 “ฉลาก”: “แพ็ดดิ้ง”,
 “ค่าเริ่มต้น”: 5
 },
 {
 “ประเภท”: “เลือก”,
 “id”: “announcement_text_align”,
 “ป้ายกำกับ”: “การจัดตำแหน่งข้อความ”,
 "ตัวเลือก": [
 { “value”: “left”, “label”: “left”},
 { “value”: “center”, “label”: “center”},
 { “value”: “right”, “label”: “right”}
 ],
 “ค่าเริ่มต้น”: “ศูนย์”
 }
 ]

}
 {% จบสคีมา %}

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

โฆษณา

Richtext

Richtext ให้พอเพียงการจัดรูปแบบที่จะเป็นประโยชน์จริงๆเพียงแค่เป็น Shopify รัฐ:“คุณสามารถใช้การตั้งค่า Richtext ที่จะอนุญาตให้มีเนื้อหาข้อความที่มีการจัดรูปแบบพื้นฐาน ตัวเลือกการจัดรูปแบบที่รองรับได้แก่ ตัวหนา ตัวเอียง ขีดเส้นใต้ ลิงก์ และย่อหน้า” (แหล่งที่มา)

แถบเลื่อนช่วงสำหรับขนาดแบบอักษร ช่องว่างภายใน และขนาดขอบ

ฉันใช้แถบเลื่อนช่วงเพื่อควบคุมขนาดข้อความ ช่วยให้คุณเลือกขนาดต่ำสุดและสูงสุด รวมทั้งขนาดเริ่มต้น ฉันเลือกใช้ px แต่คุณสามารถใช้ em หรืออะไรก็ได้ที่คุณต้องการ จากนั้นจะใช้การตั้งค่าชุดเดียวกันนี้ซ้ำเพื่อควบคุมขนาดของเส้นขอบด้านล่างของแถบประกาศ ตลอดจนการเติม

ข้อความและสีพื้นหลัง

ฉันใช้ประเภทการตั้งค่าสีเพื่อกำหนดสีพื้นหลังของแถบประกาศเองเช่นเดียวกับสีข้อความ

ดรอปดาวน์การเลือก

ในการปัดเศษการตั้งค่า เราใช้ประเภทดรอปดาวน์สำหรับการจัดแนวข้อความ

ที่ตั้งไว้ล่วงหน้า (ไม่จำเป็น)

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

CSS

สิ่งสุดท้ายที่เราต้องทำคือนำการกำหนดค่าสไตล์ทั้งหมดที่เราเลือก และแปลเป็น CSS ทันทีหลังจากคำสั่ง "if" การเปิดเผยการเปิดของคุณ โปรดเพิ่มแท็ก รูปแบบ ต่อไปนี้:

<style>
 .ประกาศ {
 ขนาดตัวอักษร:{{ section.settings.announcement_text_size }}px;
 สีพื้นหลัง: {{ section.settings.announcement_bg_color }};
 ขอบล่าง: {{ section.settings.announcement_border_size}}px ทึบ {{ section.settings.announcement_border_color }};
 ช่องว่างภายใน: {{ section.settings.announcement_padding}}px;
 จัดข้อความ: {{ section.settings.announcement_text_align }};
 }
 .announcement p {สี: {{ section.settings.announcement_text_color }};}
 .ประกาศ {text-decoration: underline;}
 .ประกาศ a:โฮเวอร์ {text-decoration: none;}
 </style>

นี่คือที่ที่เราจัดรูปแบบองค์ประกอบเสื้อคลุม ประกาศที่ เราทำเมื่อเริ่มต้นการเดินทางนี้ เราใช้แท็กของเหลวเดียวกันเพื่ออ้างอิง ID ของการตั้งค่าแต่ละประเภท สิ่งสำคัญที่ต้องจำไว้เมื่อเราอ้างอิง ID ในสคีมา เราต้องนำหน้าด้วย section.settings

ผลลัพธ์สุดท้าย

การตั้งค่าแถบประกาศของ Shopify

การปรับแต่งแถบประกาศของ Shopify

และเช่นเดียวกัน คุณได้เขียนโค้ดส่วนธีมแรกของคุณแล้ว ตอนนี้คุณสามารถแจ้งเตือนลูกค้าของคุณเกี่ยวกับการขายครั้งต่อไปของคุณได้อย่างง่ายดาย!

มีอีกหลายสิ่งที่คุณควรพิจารณาเพิ่มในเรื่องนี้ คำสั่งแบบมีเงื่อนไขว่าเพจประเภทใดที่สามารถเห็นได้ (เช่น หน้าแรกเท่านั้น อาจจะ?)

โฆษณา

ด้วยสิ่งที่คุณได้เรียนรู้ในบทช่วยสอนนี้ รวมกับเอกสารประกอบที่ครอบคลุมของ Shopify คุณสามารถสร้างส่วนธีมเพื่อทำอะไรก็ได้: รายการสินค้าเด่น คอลเลกชันสินค้าเด่น และอื่นๆ

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

ดูโค้ดเต็มๆได้ที่นี่