How can I create a video with text section in the Dawn theme?

Hi Community and Experts!

I am currently struggling with the following task:

I want to create a “Video with Text” section just like the “Image with Text” section. I found the following discussion where the Problem was solved, but no real solution was given: https://community.shopify.com/c/shopify-design/how-to-make-a-video-with-image-section-in-shopify/td-p/1391827

In the End it should look like this: https://myblend.se/pages/instructions

So, autoplay and loop as well.

I guess as stated in the discussion, duplicate the “Image with Text” section in the Section Folder in “Edit Code” and replace the Image code with video code. I cant figure out which is which and with what code to replace, the video.liquid code?

Edit: As well as add/configure an Asset .css

Thanks for the help!

@Zworthkey @KetanKumar

4 Likes

@vincentdh

yes, please try ir same section code other page its work as well

Hi @vincentdh

You can have a look at this app PlusPage.
This app can help you to add ‘video with text’ like ‘image with text’. So instead of image, it will be a video from Youtube, Vimeo, or custom upload.
They have a tutorial here.

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any questions!

@KetanKumar

Thanks for getting back!

What do you mean with same section code, other page?

I want to have a separate section, where I can have a video and text side to side.

Wouldn’t I need a component-video-with-text.css as well as a video-with-text-liquid?

If you could just post some code, I would very much appreciate it!

Thanks.

1 Like

@vincentdh

yes, please create new one and add

Hi @vincentdh ,

I am not sure if able to find solution but I just created a video with text section. You can also add an internal source video. Check the video for more info.

Did you find a code ,if yes do you mind sharing here please

@vincentdh do you mind sharing the theme name and the video with text and video with text overlay code please. it will be really helpful . i aam struggling with this please

1 Like

Hi everyone!

I hired a coder to do it since I couldn’t fin anything helpful. Here you go:

Create a new section with this code, called “video-with-text.liquid”

{{ 'component-video-with-text.css' | asset_url | stylesheet_tag }}

  

    

      

        
      

    

    
      

        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'heading' -%}
              ## 
                {{ block.settings.heading | escape }}
              
            {%- when 'text' -%}
              {{ block.settings.text }}

            {%- when 'button' -%}
              {%- if block.settings.button_label != blank -%}
                

    

  

{% schema %}
{
  "name": "Video with text",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        }
      ],
      "default": "background-1",
      "label": "Color scheme"
    },
    {
      "type": "text",
      "id": "video_url",
      "default": "https://cdn.shopify.com/s/files/1/0050/2779/0919/files/1_1_Cutting_fruit_H.mp4?v=1603372350",
      "label": "Video url",
      "info": "Upload your video to Shopify then paste the url here"
    },
    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt"
        },
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "adapt",
      "label": "Video ratio"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image_first",
          "label": "Video first"
        },
        {
          "value": "text_first",
          "label": "Text first"
        }
      ],
      "default": "image_first",
      "label": "Desktop layout",
      "info": "Video first is the default mobile layout."
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.video-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image with text",
          "label": "Heading"
        }
      ]
    },
    {
      "type": "text",
      "name": "Text name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

",
          "label": "Description"
        }
      ]
    },
    {
      "type": "button",
      "name": "Button name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "Button label",
          "info": "Leave the label blank to hide the button."
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Video with text",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}

And create a new asset called “component-video-with-text.css” with this code:

.video-with-text {
  margin-top: 5rem;
}

.video-with-text:not(.color-scheme-background-1) {
  margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
  .video-with-text {
    margin-bottom: calc(5rem + var(--page-width-margin));
  }
}

.video-with-text .grid {
  margin-left: 0;
  margin-bottom: 0;
}

.video-with-text__grid {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .video-with-text__grid--reverse {
    flex-direction: row-reverse;
  }
}

.video-with-text__media {
  background-color: transparent;
  min-height: 100%;
}

.video-with-text__media--small {
  height: 19.4rem;
}

.video-with-text__media--large {
  height: 40rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__media--small {
    height: 31.4rem;
  }

  .video-with-text__media--large {
    height: 60rem;
  }
}

.video-with-text__media--placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  position: relative;
  overflow: hidden;
}

.video-with-text__media--placeholder.video-with-text__media--adapt {
  height: 20rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__media--placeholder.video-with-text__media--adapt {
    height: 30rem;
  }
}

.video-with-text__media--placeholder > svg {
  position: absolute;
  left: 50%;
  max-width: 80rem;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  fill: currentColor;
}

.video-with-text__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  justify-content: center;
  padding: 4rem calc(4rem / var(--font-body-scale)) 5rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__grid--reverse .video-with-text__content {
    margin-left: auto;
  }
}

@media screen and (min-width: 750px) {
  .video-with-text__content {
    padding: 6rem 7rem 7rem;
  }
}

.video-with-text__content > * + * {
  margin-top: 2rem;
}

.video-with-text__content > .video-with-text__text:empty ~ a {
  margin-top: 2rem;
}

.video-with-text__content > :first-child:is(.video-with-text__heading) {
  margin-top: 0;
}

.video-with-text__content :last-child:is(.video-with-text__heading) {
  margin-bottom: 0;
}

.video-with-text__content .button + .video-with-text__text {
  margin-top: 2rem;
}

.video-with-text__content .video-with-text__text + .button {
  margin-top: 3rem;
}

.video-with-text__heading {
  margin-bottom: 0;
}

.video-with-text__text p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.video-with-text__content {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
31 Likes

THANK YOU SOOOO MUCH!!

4 Likes

hi @vincentdh can you please le me know which theme you using? for the myblend . please

1 Like

@sumanbhat

Dawn Theme

1 Like

Great job @vincentdh , thnx for the help it works fine and to me but not in mobile view.

In mobile view the video disappears . Do you have any solution update?

4 Likes

How would one increase the text size in the video with text box? In addition, can you decrease the amount of space between this and another section?

I also noticed the video does not show up on mobile devices… Any idea how to fix this?

2 Likes

@Bkimbrell

can you please share store url

www.honestsoul.co

it’s locked, password is honest001

1 Like

@Bkimbrell

thanks but i can’'t see video section on home page can you show me

1 Like

It’s on the Mission page.

1 Like

@Bkimbrell

thanks for more details can you please try this code

  1. Go to Online Store->Theme-> Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (max-width: 749px) {
.video-with-text video {
    position: relative !important;
}
}
9 Likes