Cách thêm ảnh động GIF để hiển thị các trang sản phẩm
Last Updated on January 17, 2023 by Dan Dan
Yếu tố quan trọng của một cửa hàng Shopify thành công là tốc độ tải trang. Bạn không muốn một trang cồng kềnh khiến người dùng thoát ra trước khi tải. Việc tải lên một Gif không được tối ưu hóa có thể khiến thời gian tải trang tăng lên đáng kể và đẩy thời gian tải trang của bạn lên quá 3 giây được đề xuất.
Tuy nhiên, nếu được thực hiện đúng cách, Gif có thể là một cách bắt mắt và hữu ích để hiển thị sản phẩm của bạn từ nhiều góc độ hoặc hiển thị những gì nó làm ngay khi người xem truy cập vào trang. Blog này sẽ thực hiện quá trình nhúng ảnh Gif vào trang sản phẩm Shopify.
Tạo Gif
Để tạo tệp Gif, trước tiên bạn cần phải quyết định một video clip trình bày sản phẩm hiển thị theo cách bạn muốn, có thể là từ mọi phía hoặc cách thức hoạt động của nó. Video clip này cần ngắn gọn và xúc tích nhất có thể.
Sau khi có video nguồn, bạn có thể sử dụng một trong các công cụ trực tuyến miễn phí hiện có để chuyển đổi video đó. Nếu đó là một công cụ trực tuyến, hãy đảm bảo rằng nó không để lại hình mờ trên hình ảnh cuối cùng. Ngoài ra, bạn có thể sử dụng Adobe Premiere để xuất ảnh gif từ video nếu bạn có quyền truy cập vào đó. Dù bằng cách nào, hãy dễ dàng chọn tổng kích thước của hình ảnh (càng nhỏ càng tốt) và đảm bảo rằng tệp cuối cùng không lớn như vậy.
Chọn kích thước không lớn hơn không gian bạn sẽ đặt nó, nếu không, bạn chỉ tăng thời gian tải mà không có lý do.
Chúng tôi khuyên bạn nên sử dụng tệp video thay thế cho định dạng gif thực tế như WebM hoặc mp4, vì nó sẽ sạch hơn trong khi là tệp có kích thước nhỏ hơn nhiều.
CSS Animations như một công cụ hiểu biết về nhận thức
Có một yếu tố được gọi là tải nhận thức, còn được gọi là khả năng của bộ nhớ làm việc của bạn để xử lý lượng dữ liệu. Vì mỗi ngày bộ não của bạn bị tấn công bởi hàng triệu điểm thông tin, nó cần phải xử lý chúng theo cách đúng đắn để hiểu chúng. Ảnh động có thể làm phong phú thêm trải nghiệm mua sắm / xem tổng thể vì trang đích của bạn là con mắt của khách hàng và do đó bạn cần sắp xếp hợp lý phần trình bày của mình. Một ví dụ điển hình về nó có thể là:
Mỗi khi khách hàng của bạn cố gắng đăng ký nhận bản tin của bạn với thông tin không đầy đủ, biểu mẫu sẽ lắc qua lại, khá giống với cách con người cử chỉ khi họ lắc đầu từ chối. Những tương tác ‘phá vỡ bức tường thứ tư’ như vậy có thể tiến xa hơn trong việc hoàn thành công việc theo đúng cách với khách hàng của bạn, những người dành ít thời gian và năng lượng hơn bình thường khi mua sắm tại các trang web khác.
Toàn bộ đỉnh cao của sự hiểu biết của con người dựa trên lượng thông tin mà tâm trí bạn có thể xử lý tại một thời điểm nhất định, đặc biệt là khi dữ liệu đang nóng và có khối lượng lớn. Quá trình bắt đầu với các bộ lọc bộ nhớ giác quan của bạn, hiện diện ở bên trái, bên phải và trung tâm của não bộ xử lý, sắp xếp và lưu dữ liệu, trong khi các phần khác của não phân tích những dữ liệu này song song. Thông thường, hiện tượng quá tải nhận thức xảy ra và tâm trí của bạn không còn khả năng hiểu thông tin một cách thoải mái, thay vào đó dẫn đến sự thất vọng ngày càng tăng và việc đưa ra quyết định bị tổn hại.
Như được quan sát trong các nghiên cứu liên quan khác nhau, tải nhận thức có thể xử lý hiệu quả việc sử dụng hoạt ảnh có thể giúp giảm độ phức tạp của thông tin đối với tâm trí con người, dựa trên tốc độ giới thiệu dữ liệu cho người dùng mà không bị quá tải. Các phương pháp tiếp cận chiến lược này có thể minh bạch, rõ ràng có thể thúc giục người dùng phản hồi tốt hơn về các Lời kêu gọi hành động khác nhau.
Chèn tệp Gif vào trang sản phẩm Shopify
Thông thường các trang web Thương mại điện tử thích trình bày tất cả các sản phẩm của họ trên tường sản phẩm của họ, điều này khiến khách hàng cảm thấy choáng ngợp hoặc quá kiệt sức để đưa ra quyết định. Thay vào đó, bạn cần cho họ thấy nhiều hơn những gì bạn nói với họ vì cho họ toàn bộ chiều dài và bìa để khám phá sản phẩm của bạn và tìm sản phẩm phù hợp theo quyết định ưa thích của họ.
Do đó, chúng tôi khuyên bạn nên thêm tệp gif vào sản phẩm của mình để trưng bày chi tiết tất cả các diện mạo của sản phẩm, từ mọi góc độ để người dùng cảm thấy gắn kết hơn với sản phẩm của bạn. Bạn có thể bắt đầu bằng cách tải các tệp lên trang sản phẩm Shopify của mình:
Bước 1:
Truy cập trang sản phẩm Shopify của bạn và chèn hoạt ảnh gif vào bản sao sản phẩm và chèn hoạt ảnh gif của bản sao sản phẩm. Thử và chèn hoạt ảnh gif vào hình ảnh sản phẩm ‘bình thường’ vì nó sẽ không cho phép nó được tải lên. Thay vào đó, bạn có thể lưu trữ nó trên máy chủ đám mây hoặc thậm chí trên Google Drive của mình.
Bước 2:
Khi bạn đã hoàn tất việc tải ảnh gif lên máy chủ đám mây, tất cả những gì bạn cần làm là sửa URL hình ảnh và dán nó lên trang sản phẩm Shopify của bạn.
Những điều cần cân nhắc khi sử dụng ảnh Gif trong Shopify
Mặc dù hình ảnh động là một cách tuyệt vời để mô tả sản phẩm của bạn với khách hàng, nhưng chúng có thể làm chậm trang web Thương mại điện tử của bạn rất nhiều nếu không được kiểm tra liên tục. Do đó, bạn cần phải theo dõi chặt chẽ các tốc độ tải khác nhau.
- Cố gắng chia tỷ lệ ảnh gif của bạn thành kết xuất chất lượng thấp hơn để tải nhẹ và tốc độ tốt hơn.
- Bạn cũng có thể chọn chia các tệp gif thành hai hoặc nhiều tệp gif riêng lẻ, bạn có thể thêm một cách tiết kiệm vào hình ảnh sản phẩm, do đó làm cho chúng nổi bật mà không ảnh hưởng đến tốc độ tải trang.
Sự kết luận
Các chiến lược trên có thể cung cấp cho người dùng trải nghiệm mua sắm hoàn toàn không bị phân tâm và đảm bảo sự chú ý của họ hướng đến nhiệm vụ đang làm. Sau khi thực hiện đúng cách, hoạt ảnh có thể dẫn dắt khách truy cập của bạn thông qua các nhiệm vụ, cung cấp cho họ tín hiệu về việc hoàn thành nhiệm vụ, cũng như khiến họ quan tâm.
Trên thực tế, với tư cách là chủ doanh nghiệp, bạn sẽ yêu cầu các giải pháp Shopify tùy chỉnh để mang đến cho khán giả của mình trải nghiệm mua sắm phong phú và do đó, chúng tôi khuyên bạn nên làm như sau:
Nebulab
Của chúng giải pháp mặt tiền cửa hàng tùy chỉnh nhắm mục tiêu đến khách hàng của Shopify nổi tiếng về tính độc đáo của họ. Họ cũng đã làm việc với nhiều thương hiệu Thương mại điện tử nổi tiếng trên toàn cầu và cũng cung cấp dịch vụ tư vấn cho mọi giai đoạn phát triển dự án Thương mại điện tử.
Vsourz
Họ là một end-to-end Cơ quan phát triển Shopify với các dịch vụ như thiết lập cửa hàng hoàn chỉnh, nhập sản phẩm, tích hợp API của bên thứ ba, phát triển plug-in Thương mại điện tử tùy chỉnh, v.v. Nhiều năm kinh nghiệm trong ngành và đã làm việc với nhiều thương hiệu đang phát triển khiến họ được các doanh nghiệp trên toàn thế giới săn đón.
CodeClouds
Là những người dẫn đầu ngành trong việc cung cấp các giải pháp chuyển đổi, chúng hoàn hảo để thuê các nhà phát triển chủ đề Shopify cho các trang web Thương mại điện tử đang tìm cách nhân rộng trải nghiệm mua sắm của người dùng. Đội ngũ gồm hơn 500 nhà phát triển của họ làm tăng thêm giá trị cho doanh nghiệp của bạn và quản lý các giải pháp theo xu hướng thay đổi của thời gian gần đây.