بروزرسانی: 26 خرداد 1404
چگونه در سال 2023 ویدیوی Shopify را به راحتی به بخش بنر اضافه کنیم
- اکنون باید کد طرحواره را اضافه کنیم که در آن فیلدی برای آپلود ویدیو اضافه می شود.
اندازه بنر تصویر Shopify توصیه شده چیست؟
منبع
آیا می خواهید Shopify Video را به بخش بنر اضافه کنید؟ بنر مهمترین بخش هر وب سایت است. این بخش اصلی برای جلب توجه بازدیدکنندگان و نمایش محصولات یا خدمات خود به شیوه ای پویا و جذاب است. با افزودن یک ویدیو، می توانید به مشتریان بالقوه یک معرفی سریع و جذاب از برند خود ارائه دهید.
Shopify Video را به بخش بنر اضافه کنید
{%- if section.settings.my_video_background_banner == blank -%} // your exisiting code{%- endif -%}//CSS Code.my_video_background_banner { position: absolute; width: 100%; height: 100%;}
- حالا روی صرفه جویی دکمه.
برای اعمال ویدیو به عنوان بنر، باید چند کد اضافه کنیم. برای افزودن ویدیو به فروشگاه های Shopify می توانیم مراحل زیر را دنبال کنیم.
- ورود به پنل مدیریت Shopify
- رفتن به فروشگاه آنلاین > تم ها > سفارشی کردن > … دکمه نقطه > ویرایش کد
- اکنون فایل ویرایشگر تم ظاهر می شود.
- رفتن به بخش ها > و ویرایش کنید image-banner.liquid
- حالا کد زیر را روی آن قرار دهید image-banner.liquid
این مقاله با نشان دادن نحوه افزودن یک ویدیو Shopify به بخش بنر، از جمله آپلود فایل ویدیویی، ایجاد یک بخش ویدیویی در کد موضوع و سفارشی کردن ظاهر آن در صفحه اصلی فروشگاه، به پایان می رسد.
در اینجا اسکرین شات ها داده می شود:
- حالا شرطی می گذاریم که اگر ویدیو آپلود شود، تصویر نمایش داده نمی شود. پس بیایید شرایط را اضافه کنیم.
کار ما تمام شد حالا باید یک ویدیو آپلود کنیم و لینک را در قسمت پس زمینه ویدیو قرار دهیم. برای آپلود ویدیو مراحل زیر را دنبال کنید:
- وارد Shopify شوید
- تنظیمات > فایل > آپلود فایل ها
- حالا فقط کپی 🀄 ارتباط. باید لینک را در قسمت Image banner قرار دهیم.
- رفتن به فروشگاه آنلاین > تم ها > سفارشی کردن > بنر تصویری
- پیوند را در قسمت بنر پس زمینه ویدیو جای گذاری کنید.
{%- if section.settings.my_video_background_banner != blank -%} <div class="my_video_background_banner"> <video autoplay muted loop id="myVideoBackground"> <source src="https://shopidevs.com/add-shopify-video-to-banner-section/{{ section.settings.my_video_background_banner }}" type="video/mp4"> </video> </div>{%- endif -%}
//schema{ "type": "url", "id": "my_video_background_banner", "label": "My Video Background Banner"},
- اکنون باید کد css را برای پاسخگو بودن ویدیو برای هر دستگاهی اضافه کنیم.
- رفتن به دارایی ها > base.css
- حالا کد را کپی پیست کنید