Hướng dẫn sửa trang Event & khu vực Cửa hàng

1Mở trình chỉnh sửa giao diện

Đăng nhập Shopify Admin, ở menu bên trái bấm Online Store. Trang này liệt kê các theme của cửa hàng.

1. Ở theme New 0211 (theme đang có trang Event mới), bấm Edit theme.

2Chọn trang Event

Trình chỉnh sửa mở trang chủ trước. Chuyển sang trang Event như sau:

1. Bấm vào ô tên trang ở giữa thanh trên cùng (lúc đầu ghi Home page).
2. Chọn Pages.
3. Chọn event. Màn hình giữa sẽ hiện trang Event.

3Làm quen màn hình chỉnh sửa

Bên trái là danh sách các khu vực của trang, ở giữa là bản xem trước, bên phải là ô để sửa (hiện ra khi bấm vào một khu vực).

1. Các khu vực của trang, xếp theo thứ tự từ trên xuống dưới giống trên web:
   • WA Event Hero: banner ảnh lớn đầu trang.
   • WA Upcoming Events: các sự kiện sắp tới.
   • WA Past Events: các sự kiện đã qua.
   • WA Event RSVP: form đăng ký tham dự.
   • WA Campaign Duo: hai banner ảnh cuối trang.
   Bấm vào tên một khu vực để mở ô sửa của khu vực đó. Bấm mũi tên nhỏ bên trái tên để xem các mục con bên trong (ví dụ từng sự kiện).
2. Xem trên điện thoại: bấm để xem trang ở khổ điện thoại, bấm lần nữa để quay lại khổ máy tính.
3. Save: bấm sau khi sửa xong để lưu. Chưa bấm Save thì thay đổi chưa được lưu.
4. Publish: đưa cả theme này lên làm giao diện chính của web. Chỉ bấm khi đã thống nhất muốn đưa lên web thật. Sửa nội dung bình thường thì chỉ cần Save.

4Banner đầu trang (WA Event Hero)

Đổi ảnh / video

1. Bấm WA Event Hero ở danh sách bên trái.
2. Image: ảnh banner. Bấm vào ảnh để đổi ảnh khác (chọn ảnh có sẵn hoặc tải ảnh mới lên). Nên dùng ảnh ngang, rộng từ 1920px.
3. Video: không bắt buộc. Có video thì video tự chạy (không tiếng) thay cho ảnh.
4. Mobile image: ảnh riêng cho điện thoại, không bắt buộc. Để trống thì điện thoại dùng ảnh ở trên.
5. Image crop: chọn phần ảnh muốn giữ khi ảnh bị cắt cho vừa khung: Keep the top (giữ phía trên), Keep the centre (giữa), Keep the bottom (dưới).

Đổi chữ trên banner

Kéo ô bên phải xuống phần Text:

1. Heading: tiêu đề lớn trên banner (đang là "Our Community").
2. Text: dòng chữ nhỏ dưới tiêu đề, một hai câu ngắn.
3. Button label: chữ trên nút. Để trống thì không có nút. Có nút thì điền thêm đường dẫn ở ô Button link ngay dưới.

Kéo xuống thêm còn có: chiều cao banner (Small / Medium / Large), vị trí chữ (dưới trái / dưới giữa) và độ tối phủ lên ảnh để chữ dễ đọc.

5Sự kiện sắp tới (WA Upcoming Events)

Khu vực này có phần cài đặt chung (tiêu đề, số thẻ mỗi hàng…) và từng thẻ sự kiện bên trong.

5.1 Cài đặt chung

1. Heading: tiêu đề khu vực ("Upcoming Events").
2. Intro: đoạn giới thiệu ngắn dưới tiêu đề.
3. Cards per row on computer: số thẻ trên một hàng ở máy tính (2, 3 hoặc 4). Hiện đang là 4.
4. Photo shape: hình dạng khung ảnh của các thẻ (dọc 2:3, dọc 4:5, vuông, ngang 3:2, hoặc giữ nguyên hình gốc).

5.2 Thêm, xoá, đổi thứ tự sự kiện

1. Add Event: thêm một thẻ sự kiện mới (tối đa 12 thẻ). Thẻ mới hiện ở cuối, bấm vào nó để điền nội dung.
2. Danh sách thẻ, mỗi dòng là một sự kiện, theo đúng thứ tự trên web:
   • Đổi thứ tự: rê chuột vào dòng, giữ biểu tượng 6 chấm ở đầu dòng rồi kéo lên hoặc xuống.
   • Tạm ẩn: rê chuột vào dòng, bấm biểu tượng con mắt. Bấm lại để hiện.
   • Xoá: rê chuột vào dòng, bấm biểu tượng thùng rác (hoặc nút Remove block ở cuối ô sửa của thẻ).
3. Coming soon tile: ô "More cities coming soon" tự hiện để lấp chỗ trống khi số sự kiện ít hơn số thẻ mỗi hàng (ví dụ 1 sự kiện mà mỗi hàng 4 thẻ). Đủ 4 sự kiện thì ô này tự ẩn. Chữ, nút và màu của ô này sửa ngay ở đây.

5.3 Sửa một thẻ sự kiện

Bấm vào tên thẻ trong danh sách (ví dụ Event – From Vietnam to Melrose). Ô sửa bên phải có các phần sau.

1. Thẻ đang sửa được tô xanh trong danh sách, và có khung xanh ở bản xem trước.
2. Image: ảnh của sự kiện (poster hoặc ảnh chụp). Bấm vào ảnh để đổi.
3. Image style: kiểu hiển thị ảnh:
   • Fill the frame: ảnh phủ kín khung (hợp với ảnh chụp).
   • Poster: whole image on a colour: ảnh hiện nguyên, đặt trên nền màu, có dòng chữ bên dưới (như 4 thẻ hiện tại).
4. Poster colour (màu nền) và Poster text colour (màu chữ). Chỉ dùng cho kiểu Poster.
5. Poster text: chữ nằm dưới ảnh trên nền màu. Mỗi dòng gõ một dòng, ví dụ dòng 1 "Los Angeles, USA", dòng 2 "Oct 17–18". Chữ này tự động in hoa trên web, gõ chữ thường cũng được.
6. Title: tên sự kiện (chữ in đậm dưới ảnh).

Kéo ô bên phải xuống tiếp:

1. Place: tên địa điểm ngắn, hiện dưới tên sự kiện (ví dụ "Melrose Pop-up").
2. Short date: ngày viết ngắn, hiện bên phải địa điểm (ví dụ "Oct 17–18").
3. Description: đoạn mô tả sự kiện.
4. Where: địa chỉ. Khách bấm vào địa chỉ sẽ mở Google Maps tự động.
5. Address link: không bắt buộc. Chỉ điền khi muốn dùng link bản đồ riêng.

1. When: ngày diễn ra, viết đầy đủ (ví dụ "October 17 – October 18, 2026").
2. Time: giờ mở cửa (ví dụ "10:00 AM – 7:00 PM").
3. Button label: chữ trên nút. Để trống thì không có nút.
4. Button link: nút dẫn tới đâu. Để trống thì khi bấm nút, trang tự cuộn xuống form đăng ký (mục 7).
5. Remove block: xoá hẳn thẻ này.

Ô nào để trống thì dòng đó không hiện trên web (ví dụ không có giờ thì bỏ trống Time).

6Sự kiện đã qua (WA Past Events)

Mỗi sự kiện đã qua là một hàng: ảnh một bên, chữ một bên, các hàng đổi bên xen kẽ.

6.1 Cài đặt chung và danh sách

1. Add Past event: thêm một sự kiện đã qua.
2. Danh sách: đổi thứ tự, ẩn, xoá giống như ở mục 5.2.
3. Heading: tiêu đề khu vực (hiện là "In case you missed it").
4. Photo shape: hình dạng khung ảnh. Đang dùng Widescreen 16:9 để ảnh bìa video không bị cắt chữ. First photo on ngay dưới chọn hàng đầu tiên để ảnh bên trái hay bên phải.

6.2 Sửa một sự kiện đã qua

1. Image: ảnh của sự kiện. Bấm Select để chọn hoặc tải ảnh lên.
2. YouTube video: dán link video YouTube. Nếu không chọn ảnh, web tự lấy ảnh bìa của video, và khách bấm vào sẽ mở video. Đã chọn ảnh thì ảnh được ưu tiên hiện.
3. Image crop: giữ phần trên / giữa / dưới của ảnh khi ảnh bị cắt cho vừa khung.
4. Title: tên sự kiện.
5. Place: địa điểm.
6. Date: ngày (ví dụ "October 17–18, 2026").

1. Tags: các nhãn nhỏ, cách nhau bằng dấu phẩy (ví dụ "Pop-up, Film").
2. Description: đoạn mô tả.
3. Button label: chữ trên nút (ví dụ "Watch the film").
4. Link: nút và ảnh dẫn tới đâu (một trang, bài viết hoặc video). Với sự kiện có link YouTube thì để trống cũng được, nút tự mở video.

7Form đăng ký tham dự (WA Event RSVP)

1. Heading: tiêu đề form (thường là tên sự kiện sắp tới).
2. Text: đoạn mô tả bên trái form.
3. Event name in the email: tên sự kiện ghi trong tiêu đề email báo có người đăng ký, để dễ lọc thư.
4. Time slots: các khung giờ cho khách chọn, mỗi dòng một lựa chọn. Để trống thì form không có ô chọn giờ.
5. Button label: chữ trên nút gửi.

8Hai banner cuối trang (WA Campaign Duo)

1. Bấm mũi tên cạnh WA Campaign Duo để thấy 2 banner (Panel), bấm vào banner muốn sửa. Khu vực này có tối đa 2 banner.
2. Image: ảnh của banner (có thể chọn thêm Video ngay dưới).
3. Heading: chữ lớn trên banner.
4. Button label: chữ trên nút. Kéo xuống ô Link để chọn trang mà banner dẫn tới.

9Cửa hàng trên trang chủ (WA Stores)

Khu vực Stores nằm cuối trang chủ, ngay trên ô Newsletter: mỗi cửa hàng là một thẻ gồm ảnh, tên, địa chỉ (bấm vào mở Google Maps) và giờ mở cửa. Các thẻ xếp thành hàng trượt ngang: trên máy tính có mũi tên hai bên, trên điện thoại khách vuốt sang.

Mở trình chỉnh sửa như bước 1. Ở menu chọn trang trên thanh trên cùng (giống bước 2), chọn Home page.

9.1 Cài đặt chung và danh sách cửa hàng

1. WA Stores: bấm vào để mở cài đặt chung. Bấm mũi tên nhỏ bên trái để hiện danh sách cửa hàng.
2. Add Store: thêm một cửa hàng mới (tối đa 12). Thẻ mới hiện ở cuối, bấm vào để điền nội dung theo mục 9.2.
3. Danh sách cửa hàng, theo đúng thứ tự trên web. Đổi thứ tự, tạm ẩn, xoá giống như ở mục 5.2 (kéo biểu tượng 6 chấm, bấm con mắt, bấm thùng rác).
4. Heading: tiêu đề khu vực (hiện là "Stores"). Xoá trống cả Heading và Subheading thì không có dòng chữ, ảnh nằm sát khu vực phía trên.
5. Subheading: đoạn chữ ngắn dưới tiêu đề, không bắt buộc (ví dụ "Visit us in Ho Chi Minh City").
6. Stores visible on desktop: số thẻ thấy cùng lúc trên máy tính. Đang là 3.6: số lẻ để lộ một phần thẻ kế tiếp, khách biết là còn cửa hàng để trượt xem. Máy tính bảng tự hiện 2.3 thẻ, điện thoại 1.1 thẻ.
7. Photo shape: hình dạng khung ảnh: vuông (đang dùng), dọc 4:5, dọc 3:4 hoặc ngang 4:3. Mọi thẻ dùng chung một hình dạng nên luôn thẳng hàng.

9.2 Sửa một cửa hàng

Bấm vào tên cửa hàng trong danh sách (ví dụ Store – Signature Store Bàn Cờ). Ô sửa bên phải có các phần sau.

1. Store photo: ảnh cửa hàng (bên trong hoặc mặt tiền). Bấm Select để chọn hoặc tải ảnh lên. Chưa có ảnh thì khung hiện màu xám nhạt (trong trình chỉnh sửa có chữ "Add a store photo", trên web không có chữ).
2. Store name: tên cửa hàng, tự in hoa trên web. Bắt buộc: để trống tên thì thẻ đó không hiện.
3. Address: địa chỉ, hiện gạch chân. Khách bấm vào sẽ mở Google Maps với địa chỉ này. Nên viết ngắn, có tên thành phố và nước cho khách nước ngoài (ví dụ "141/8 Bàn Cờ, Ho Chi Minh City, Vietnam").
4. Map link: không bắt buộc. Dán link Google Maps của cửa hàng nếu muốn mở đúng ghim bản đồ thay vì tìm theo địa chỉ.
5. Opening hours: giờ mở cửa, mỗi dòng một hàng, ngày và giờ cách nhau bằng dấu |. Ví dụ:
   • MON–SAT | 10:00–21:00
   • SUN | 12:00–20:00
   Ngày và giờ tự xếp thành 2 cột thẳng hàng. Dòng không có dấu | (ví dụ "Closed on public holidays") hiện thành một dòng ghi chú.
6. Phone: số điện thoại, không bắt buộc. Trên điện thoại khách bấm vào là gọi được.
7. Remove block: xoá hẳn cửa hàng này.