Shopify themes, liquid, logos, and UX
I followed a the tutorial linked on this thread with a few of my own modifications to fix some functionality issues, and was able to add a "Video with text" section that preforms much likje the standard "Image with text" section. However there are two issues that seem to be presenting.
Firstly the button is still present even when the field is blank.
Secondly it does not seem to register line breaks.
Is there a way to fix these two issues?
<!-- video with text section --> <div id="vid-txt-{{ section.id }}" class="vid-text-con"> <div class="vid-text-wra page-width" > <div class="vid-with-text-box" {% if section.settings.bg_clr %}style="background:{{ section.settings.body_text }}"{% endif %}> <div class="text-content"> <div class="content"> <h2>{{ section.settings.heading }}</h2> <p>{{ section.settings.content }}</p> <div class="section-btn"> <a class="button button--primary " href="{{ section.settings.url }}">{{ section.settings.btn_label }}</a> </div> </div> </div> <div class="video-section"> <div class="m_video"> {% if section.settings.select == 'MP4' %} {% if section.settings.vid != blank %} <video class="video-js" loop autoplay preload="none" muted playsinline loading='lazy'> <source src="{{ section.settings.vid }}" type="video/mp4"> <source src="{{ section.settings.vid }}" type="video/ogg"> </video> {% endif %} {% else %} {% if section.settings.i_vid != blank %} <iframe width="100%" height="315" src="{{ section.settings.i_vid }}{% if section.settings.vid_auto %}?autoplay=1{% endif %}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> {% endif %} {% endif %} </div> </div> </div> </div> </div> <style> .vid-text-wra { margin-top: 30px; padding-top: 40px; padding-bottom: 40px; } .vid-with-text-box { display: flex; align-items: center; padding: 20px 30px; } .text-content { width: 50%; padding: 50px 30px 40px; } .content h2 { font-size: 28px; line-height: 36px; padding-bottom: 20px; } .content p { font-size: 18px; letter-spacing: 0.5px; } .video-section { width: 50%; height: 100%; } .m_video { height: 100%; } .m_video video { height: 100%; width: 100%; object-fit: cover; } .section-btn { margin-top: 40px; } {% if section.settings.revrt %} #vid-txt-{{ section.id }} .vid-with-text-box{ flex-direction: row-reverse; } {% endif %} @media only screen and (max-width: 992px) { {% if section.settings.m_revrt %} .vid-with-text-box{ flex-direction: column-reverse; } {% endif %} .text-content { width: 100%; } .video-section { width: 100%; } .vid-with-text-box { padding: 0px 0px; } .text-content { width: 100%; padding: 20px 15px 20px; } .content h2 { font-size: 24px; line-height: 32px; padding-bottom: 10px; } } </style> {% schema %} { "name": "video with text", "class": "video_with_text", "settings": [ { "type": "checkbox", "id": "revrt", "label": "Video left" }, { "type": "checkbox", "id": "m_revrt", "label": "Video top on mobile" }, { "type": "text", "id": "heading", "label": "Heading", "default": "Video With Text" }, { "type": "textarea", "id": "content", "label": "Content" }, { "type": "url", "id": "url", "label": "Button URL" }, { "type": "text", "id": "btn_label", "label": "Button URL" }, { "type": "radio", "id": "select", "label": "Video type", "options": [ { "value": "MP4", "label": "MP4" }, { "value": "iframe", "label": "Youtube/Vimeo" } ], "default": "MP4" }, { "type": "url", "id": "vid", "label": "MP4 video URL" }, { "type": "image_picker", "id": "poster", "label": "Poster on MP4 video" }, { "type": "checkbox", "id": "check", "label": "Video autoplay" }, { "type": "url", "id": "i_vid", "label": "Youtube/Vimeo video URL" }, { "type": "checkbox", "id": "bg_clr", "label": "background color" }, { "type": "color", "id": "body_text", "label": "BG-color", "default": "#cdcdcd" } ], "presets": [ { "name": "video with text" } ] } {% endschema %} {% stylesheet %} {% endstylesheet %} {% javascript %} {% endjavascript %}
Test site URL: https://native-sons-roasters-3430.myshopify.com/
Theme: Out of the Sandbox- Flex
THank you!
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024