Shopify Custom Coded: Vimeo/Youtube Review Section

Here is the End Result

Hi, My Name is Mozzam Shahid. An Information Technology Graduate, Based in Lahore, running a brand name cosmeticmoon.com.pk Who I'm Why you should take interest in this Blog. I've been doing Shopify E-commerce consultation and marketing for the past 5 years. during this time most of the top brands in the e-commerce space that in the UK, CA, USA, EU, AU, Bulgaria, Morocco, Dubai, NL, and Germany. Honestly, I forget half of there names. People from 500 Fortune Inc. Standford, Howard Enterpenures to Enterpenures from the Streets I worked with everyone. Yes, Even the Enterpenure that is from the Pacific.

This year Finding a Shopify Developer is getting though as we are busy, spending time in inventory, marketing, and designing. I always listen that something is not possible, time taking this and that.

So I've decided to make some boxes that are from scratch Special Thanks to the Howard CS50X Course By David J. Malan. His teaching is very helpful.

The Blog is starting from this point

Open Shopify > Online Store > "Make a Duplicate of your theme" > Click on 3 Dots > Edit Code

Go to Sections > Click on Add a Section > Choose Liquid & Name a section

In My Case, I've named head-video.liquid

Following is the code

{{ 'head-video.css' | asset_url | stylesheet_tag }}
<div class="main-video">
        <div class="heading-video">{{ section.settings.headline }}</div>
        <p class="description-video">{{ section.settings.description }}</p>

            <div class="video-section">
              {% for block in section.blocks %}
            <iframe class="player-videos" src="{{ block.settings.main-video }}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="Basket of Love">
            </iframe>
              {% endfor %}
            </div>
    </div>

{% schema %}
  {
    "name": "VideoReview", "tag": "section", "class": "section",
    "disabled_on": {
      "groups": ["header", "footer"]
    },
    "settings": [
      {
        "type": "inline_richtext", "id": "headline", "label": "Video Section Headline"
      },
      {
        "type": "text",   "id": "description", "label": "Description"
      }
    ],
    "max_blocks": 3,
    "blocks": [
      {
        "name": "Video",
        "type": "video",
        "settings": [
          {
          "type": "video_url", "id": "main-video", "label": "Video URL",
            "accept": [
          "youtube",
          "vimeo"
        ]
          }
        ]
      },
    ],
    "presets": [
      {
        "name": "VideoReviews",
        "blocks": [
      {
        "type": "video",
      }
      ]
      }
    ]
  }
{% endschema %}

Here is the CSS Code
Now go to assets and create a CSS file same name

.player-videos{
    height:600px;
}

.main-video{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 20px;
}

.heading-video{
    font-size: 32px;
    font-weight: semi-condensed;
}

.description-video{
    font-size: 18px;
    text-align: center;
}

.video-section {
  display: flex;
  justify-content: center;
  align-content: center;
  gap: 20px;
  border-radius: 5px;
}

@media screen and (max-width:769px){
  .video-section {
  flex-direction: column;

}

}

Now we will talk about it in detail