Sense theme - replace 'image with text' with a video

buildskincare
Tourist
6 0 1

Hi there! Anyone know how I could easily replace the the image in the image-with-text section with a video (autoplay mp4 not youtube or vimeo) and keep the same styling?

 

page link: buildskincare.ca

Replies 5 (5)

OneCommerce
Shopify Partner
253 19 108

Hello mate,

We are OneExperts from OneCommerce and we here to help you out.

 

To solve this:

1. Create a new section in your theme and call it "video-with-text"

2. Try this code:

<div class="video-with-text">
<video src="{{ section.settings.video_url }}" autoplay loop></video>
<p>{{ section.settings.text }}</p>
</div>

3. Add a new setting, use this code:

{% schema %}
{
"name": "Video with text",
"settings": [
{
"type": "video",
"id": "video_url",
"label": "Video"
},
{
"type": "text",
"id": "text",
"label": "Text"
}
]
}
{% endschema %}

4. Use CSS to style the video:

.video-with-text {
/* Your CSS styles for the video-with-text class go here */
}

video {
/* Your CSS styles for the video go here */
}

 

This way you should be able to upload your video and add some text in the section and it will automatically play when the page load. You may also need to add some javascript code to make it compatible with all the browsers and to stop it after some time or some other logic you want.

 

Hope this can help.

 

Regards,

OneExperts by OneCommerce

 

 

OneCommerce - The Ultimate eCommerce Solution Platform
We offer 12+ solutions to help increase traffic, maximize conversion rates and generate better revenue for more than 500,000 eCommerce merchants worldwide.

Get know us at: Website | Blog | FAQ | Contact us

BSS-Commerce
Shopify Expert
3465 459 515

Hi @buildskincare 

Go to Admin => Online Store => Theme => Edit Code => Section => Add new section. You name the section you want to add and paste the following code in:

<!-- Welcome section starts -->

{{ 'base.css' | asset_url | stylesheet_tag }}
{%- style -%}
.container{
  margin-top:50px;
  display:flex;
  position:relative;
  min-height:500px;
  justify-content: end;
}
  .videoWt_left_container{
    position:absolute;
    top:50%;
    left:100px;
    transform:translateY(-50%);
    max-width:35%;
    border-radius:10px;
    background:linear-gradient(to right, #f0fb9e,#f8fdd2);
    padding: 24px;
  }
  .videoWt_right_container{
    width:60%;
  }
  .videoWt_media{
      width:100%;
      height:100%;
     border-radius:10px;
  overflow:hidden
  }
  
  .view-btn{
    padding: 12px 32px;
    background:#000;
    cusor:pointer;
    border-radius:5px
  }
  .view-btn a{
    text-decoration:none;
    color: #f0fb9e
  }
.videoWt_media>video{
  width:100%;
  min-height: 100px;
 
}
{%- endstyle -%}
<section class="welcome">
  <div class="container page-width page-width-desktop section">
   <div class="videoWt_left_container">
      <div class="welcome-outter">
        {% if section.settings.section-heading != blank %}
        <h2 class="section-heading">{{ section.settings.section-heading }}</h2>
        {% endif %}
        {% if section.settings.section-large-heading != blank %}
        <h1 class="section-large-heading">{{ section.settings.section-large-heading }}</h1>
        {% endif %}
        {% if section.settings.description != blank %}
        <p class="discription">{{ section.settings.description }}</p>
        {% endif %}
      </div>
      <div class="col-xs-12 col-md-12 text-center">
        {% if section.settings.view-btn != blank %}
        <button class="view-btn">
          <a href="{{ section.settings.view-btn-link }}">{{ section.settings.view-btn }}</a>
        </button>
        {% endif %}
      </div>
   </div>
   <div class="videoWt_right_container">
      <div class="videoWt_media">
        {% if section.settings.video_url != blank %}
          <iframe width="100%" height="100%" src="https://www.youtube.com/embed/{{ section.settings.video_url.id }}?autoplay=1&mute=1" name="youtube embed" allow='autoplay' frameborder="0" allowfullscreen>
            </iframe>
        {% endif %}
      </div>
   </div>
  </div>
</section>
<!-- Welcome section ends -->
{% schema %}
{
"name": "Welcome", // Section name
"settings": [
  {
  "id": "section-heading",
  "type": "text",
  "label": "Heading 1",
    "default":"Image with text"
  },
 
  {
  "id": "description",
  "type": "textarea",
  "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"
  },
  {
  "id": "view-btn-link",
  "type": "url",
  "label": "Button URL"
  },
  {
  "id": "view-btn",
  "type": "text",
  "label": "Button name",
  "default":"Buy now"
  },
  {
      "type": "video_url",
      "id": "video_url",
      "accept": [
        "youtube",
        "vimeo"
      ],
      "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
      "label": "video url",
      "placeholder": "Paste your video link url"
    }
],
 
"presets": [
  {
  "name": "Video with text",
  "category": "ADVANCED LAYOUT"
  }
]
}
{% endschema %}

 

Then go to Theme => Customize Theme and select the section you just created and use.

I hope that it's useful for you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

buildskincare
Tourist
6 0 1

Hi, thank you! This looks much closer to what I was hoping. It's not very mobile friendly unfortunately. 

heike1
Visitor
2 0 1

@buildskincare have you been able to solve this? I am also struggling with this issue 😞 @BSS-Commerce would you be able to make it mobile friendly? the way it is, it's unfortunately not usable.. thx!

IkigaiBox
Visitor
1 0 0

Same did you find an answer?