Adding A Video In The Multirow or multicolumn Section in Dawn Theme

ℹ️ Looking for more than just the basics? The premium version of this section offers a lot more features and flexibility. 👉🏾 Check it out

📍First, we are going to implement video uploading system using schema.

1. Open multirow.liquid file and search for schema ( ctrl + f )

2. Inside the schema search for blocks

3. Inside the blocks you will find settings, inside the settings you need to paste the below code ( this is schema for video. ) Make sure you put comma after closing tag.

{
  "type": "video",
  "id": "video",
  "label": "t:sections.video.settings.video.label"
},

Save the file, go to your dashboard, and refresh:) Now, besides the image, we can upload video as well.

📍Final Step, now we need to show the video on the screen via liquid.

1. Inside the multirow.liquid we need to search for image-with-text__media ( find out exact same class name )

The above div or block is the starting of our existing image picker. We need to put the code before the closing tag of this div or block. Follow below image and put the code after where it says end.

{% comment  %} video  {% endcomment %}
  {% if block.settings.video %}
     {{
       block.settings.video | video_tag: image_size: '300x',
       autoplay: true,
       loop:true,
       controls:true,
       muted:true,
       style: "height:100%;width:100%;max-width:100%"
     }}
  {% endif %}

All done! But as we have two items, we need to add a bit of code. On the video code, you can see there are two terms called if block and endif block. The first block ( if ) says if the video exists show the video on the website and endif basically ends of if block. As we have an image block beside the video we need to tell the image that if image exists show image on the website.
Note: we can use two blocks at a time but it won’t look good as we are focused on adding one element at a time.

To add if block for the image block we need to search for image-with-text__media-item. Add if block before where it says start and add endif after where it says end.

1. Open multicolumn.liquid file and follow steps 1 to 3 of the multirow section to enable the video uploading system using schema.

📍Final Step, now we need to show the video on the screen via liquid.

1. Inside the multicolumn.liquid file search for multicolumn-card. Inside this div or block, we need to put the code, If you notice there is if block after the div or block where it says block.settings.image , this is for the image block, we need to find the ending of this if block so that we can put our video code after that.

Put below code after where it says end

{% comment  %} video  {% endcomment %}
   {%- if block.settings.video != null -%}
     {{
        block.settings.video | video_tag: image_size: '300x',
        autoplay: true,
        controls:true,
        muted:false,
        style: "height:100%;width:100%;max-width:100%"
      }}
  {%- endif -%}

All set! The summary is that the process is the same for both multirow and multicolumn, you just need to identify where to put the code. I hope you enjoyed it:) Let me know if you find it helpful.