FROM CACHE - en_header

Youtube video with text in Homepage Dawn Theme

dassk
Visitor
2 0 0
‎05-03-2022 03:05 PM

Hello Community and Shopify Experts.

 

I am currently using Dawn Theme , and i am trying to put a youtube video , but with a different layout than the default is offering, i want it to look this way, i have been doing a lot of research to get a code that could work for my needs.

 

can anyone help me how to modify the standard dawn theme video code

 

Regards,

Untitled.jpg

270 Views
0 Likes
Report
Replies 3 (3)
Mike1974
Excursionist
22 0 2
‎05-18-2022 04:39 PM

try this  

{% liquid 
    assign pt = section.settings.pt | prepend: 'pt-'
    assign pb = section.settings.pb | prepend: 'pb-'
    assign mt = section.settings.mt | prepend: 'mt-'
    assign mb = section.settings.mb | prepend: 'mb-'
%}

<section 
    id="youtube-with-text-{{ section.id }}"
    class="youtube-with-text {{ section.settings.bg_color }} {{ pt }} {{ pb }} {{ mt }} {{ mb }}"
    style="
        {% unless section.settings.custom_bg_color contains 'rgba(0,0,0,0)' %}
            background: {{ section.settings.custom_bg_color }} !important;
        {% endunless %}
    ">
    <div class="{% if section.settings.container %}container{% else %}container-fluid{% endif %}">
        <div class="row align-items-center {{ section.settings.media_align }}">
            <div class="col-md-6 mb-4 mb-md-0">
                {% capture video_src %}
                    {% if section.settings.video.type == 'youtube' %}
                        {% if section.settings.youtube_controls %}
                            {% assign youtube_controls = '1' %}
                        {% else %}
                            {% assign youtube_controls = '0' %}
                        {% endif %}
                        {% if section.settings.youtube_privacy %}
                            {% assign youtube_address = 'https://www.youtube-nocookie.com' %}
                        {% else %}
                            {% assign youtube_address = 'https://www.youtube.com' %}
                        {% endif %}
                        {{ youtube_address }}/embed/{{ section.settings.video.id }}?controls={{ youtube_controls }}&amp;start={{ section.settings.youtube_start }}
                    {% else %}
                        https://player.vimeo.com/video/{{ section.settings.video.id }}
                    {% endif %}
                {% endcapture %}
                <div class="{{ section.settings.video_border }}">
                    <div class="rounded overflow-hidden ratio {{ section.settings.ratio }}">
                        <iframe
                            src="{{ video_src | strip }}"
                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
                            frameborder="0"
                            allowfullscreen
                            loading="lazy"
                            style="border-radius: 1rem !important;">
                        </iframe>
                    </div>
                </div>
            </div>
            <div class="col-md">
                {% unless section.settings.title == blank %}
                    <h2 class="title {{ section.settings.title_size }} mb-3">
                        {{ section.settings.title }}
                    </h2>
                {% endunless %}
                {% unless section.settings.subtitle == blank %}
                    <h3 class="subtitle {{ section.settings.subtitle_size }} mb-3" style="color: {{ section.settings.subtitle_color}}">
                        {{ section.settings.subtitle }}
                    </h3>
                {% endunless %}
                {% unless section.settings.description == blank %}
                    <div class="description rte mb-6 {{ section.settings.description_size }}">
                        {{ section.settings.description }}
                    </div>
                {% endunless %}
                {% unless section.settings.btn_1_text == blank %}
                    <a href="{{ section.settings.btn_1_url }}" class="btn mb-1 rounded-pill px-6 {{ section.settings.btn_1_color }} {{ section.settings.btn_1_size }}">
                        {{ section.settings.btn_1_text }}
                    </a>
                {% endunless %}
                {% unless section.settings.btn_2_text == blank %}
                    <a href="{{ section.settings.btn_2_url }}" class="btn mb-1 rounded-pill px-6 {{ section.settings.btn_2_color }} {{ section.settings.btn_2_size }}">
                        {{ section.settings.btn_2_text }}
                    </a>
                {% endunless %}
            </div>
        </div>
    </div>
</section>

{% schema %}
{
    "name": "Youtube with text",
    "settings": [
        {
            "type": "header",
            "content": "General"
        },
        {
            "type": "select",
            "id": "bg_color",
            "label": "Background color",
            "default": "bg-white text-body",
            "options": [
                { "group": "Light", "value": "bg-white text-body", "label": "White" },
                { "group": "Light", "value": "bg-light text-body", "label": "Light" },
                { "group": "Dark", "value": "bg-primary text-white", "label": "Primary" },
                { "group": "Dark", "value": "bg-secondary text-white", "label": "Secondary" },
                { "group": "Dark", "value": "bg-dark text-white", "label": "Dark" },
                { "group": "Dark", "value": "bg-brand-gradient text-white", "label": "Brand gradient" }
            ]
        },
        {
            "type": "color",
            "id": "custom_bg_color",
            "label": "Custom background color"
        },
        {
            "type": "checkbox",
            "id": "container",
            "label": "Wrap in a container",
            "default": true
        },
        {
            "type": "select",
            "id": "media_align",
            "label": "Media alignment",
            "info": "Note: On mobile Media will always be on top and text on the bottom",
            "default": "flex-row",
            "options": [
                { "value": "flex-row", "label": "Left" },
                { "value": "flex-row-reverse", "label": "Right" }
            ]
        },
        {
            "type": "header",
            "content": "Video"
        },
        {
            "type": "video_url",
            "id": "video",
            "label": "Video link",
            "accept": [
                "youtube", "vimeo"
            ]
        },
        {
            "type": "text",
            "id": "youtube_start",
            "label": "Start (in seconds)",
            "info": "Leave empty to start from the beggining"
        },
        {
            "type": "checkbox",
            "id": "youtube_controls",
            "label": "Show player controls",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "youtube_privacy",
            "label": "Enable privacy-enhanced mode",
            "info": "When you turn on privacy-enhanced mode, YouTube won't store information about visitors on your website unless they play the video.",
            "default": true
        },
        {
            "type": "select",
            "id": "ratio",
            "label": "Video ratio",
            "default": "ratio-16x9",
            "options": [
                { "value": "ratio-1x1", "label": "1x1" },
                { "value": "ratio-4x3", "label": "4x3" },
                { "value": "ratio-16x9", "label": "16x9" },
                { "value": "ratio-21x9", "label": "21x9" }
            ]
        },

        {
            "type": "select",
            "id": "video_border",
            "label": "Video border",
            "default": "",
            "options": [
                { "value": "", "label": "Square" },
                { "value": "rounded", "label": "Rounded" },
                { "value": "img-thumbnail", "label": "Thumbnail" }
            ]
        },
        {
            "type": "header",
            "content": "Text"
        },
        {
            "type": "text",
            "id": "title",
            "label": "Title",
            "default": "Media with text"
        },
        {
            "type": "select",
            "id": "title_size",
            "label": "Title size",
            "default": "h3",
            "options": [
                { "group": "Display", "value": "display-1", "label": "Display1" },
                { "group": "Display", "value": "display-2", "label": "Display2" },
                { "group": "Display", "value": "display-3", "label": "Display3" },
                { "group": "Display", "value": "display-4", "label": "Display4" },
                { "group": "Display", "value": "display-5", "label": "Display5" },
                { "group": "Display", "value": "display-6", "label": "Display6" },
                { "group": "Heading", "value": "h1", "label": "H1" },
                { "group": "Heading", "value": "h2", "label": "H2" },
                { "group": "Heading", "value": "h3", "label": "H3" },
                { "group": "Heading", "value": "h4", "label": "H4" },
                { "group": "Heading", "value": "h5", "label": "H5" },
                { "group": "Heading", "value": "h6", "label": "H6" }
            ]
        },
        {
            "type": "text",
            "id": "subtitle",
            "label": "Subtitle"
        },
        {
            "type": "select",
            "id": "subtitle_size",
            "label": "Subtitle size",
            "default": "h5",
            "options": [
                { "group": "Heading", "value": "h1", "label": "H1" },
                { "group": "Heading", "value": "h2", "label": "H2" },
                { "group": "Heading", "value": "h3", "label": "H3" },
                { "group": "Heading", "value": "h4", "label": "H4" },
                { "group": "Heading", "value": "h5", "label": "H5" },
                { "group": "Heading", "value": "h6", "label": "H6" }
            ]
        },
        {
            "type": "color",
            "id": "subtitle_color",
            "label": "Subtitle color"
        },
        {
            "type": "richtext",
            "id": "description",
            "label": "Description",
            "default": "<p>Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
        },
        {
            "type": "select",
            "id": "description_size",
            "label": "Description size",
            "default": "fs-6",
            "options": [
                { "value": "fs-1", "label": "fs-1" },
                { "value": "fs-2", "label": "fs-2" },
                { "value": "fs-3", "label": "fs-3" },
                { "value": "fs-4", "label": "fs-4" },
                { "value": "fs-5", "label": "fs-5" },
                { "value": "fs-6", "label": "fs-6" }
            ]
        },
        {
            "type": "header",
            "content": "Button #1"
        },
        {
            "type": "text",
            "id": "btn_1_text",
            "label": "Button text",
            "info": "Leave empty to disable"
        },
        {
            "type": "url",
            "id": "btn_1_url",
            "label": "Button URL"
        },
        {
            "type": "select",
            "id": "btn_1_color",
            "label": "Button color",
            "default": "btn-outline-primary",
            "options": [
                { "group": "Normal", "value": "btn-link", "label": "Link" },
                { "group": "Normal", "value": "btn-light", "label": "Light" },
                { "group": "Normal", "value": "btn-dark", "label": "Dark" },
                { "group": "Normal", "value": "btn-primary", "label": "Primary" },
                { "group": "Normal", "value": "btn-secondary", "label": "Secondary" },
                { "group": "Normal", "value": "btn-success", "label": "Success" },
                { "group": "Normal", "value": "btn-danger", "label": "Danger" },
                { "group": "Normal", "value": "btn-warning", "label": "Warning" },
                { "group": "Normal", "value": "btn-info", "label": "Info" },
                { "group": "Outline", "value": "btn-outline-light", "label": "Light Outline" },
                { "group": "Outline", "value": "btn-outline-dark", "label": "Dark Outline" },
                { "group": "Outline", "value": "btn-outline-primary", "label": "Primary Outline" },
                { "group": "Outline", "value": "btn-outline-secondary", "label": "Secondary Outline" },
                { "group": "Outline", "value": "btn-outline-success", "label": "Success Outline" },
                { "group": "Outline", "value": "btn-outline-danger", "label": "Danger Outline" },
                { "group": "Outline", "value": "btn-outline-warning", "label": "Warning Outline" },
                { "group": "Outline", "value": "btn-outline-info", "label": "Info Outline" }
            ]
        },
        {
            "type": "select",
            "id": "btn_1_size",
            "label": "Button size",
            "default": "",
            "options": [
                { "value": "btn-sm", "label": "Small" },
                { "value": "", "label": "Normal" },
                { "value": "btn-lg", "label": "Large" }
            ]
        },
        {
            "type": "header",
            "content": "Button #2"
        },
        {
            "type": "text",
            "id": "btn_2_text",
            "label": "Button text",
            "info": "Leave empty to disable"
        },
        {
            "type": "url",
            "id": "btn_2_url",
            "label": "Button URL"
        },
        {
            "type": "select",
            "id": "btn_2_color",
            "label": "Button color",
            "default": "btn-outline-primary",
            "options": [
                { "group": "Normal", "value": "btn-link", "label": "Link" },
                { "group": "Normal", "value": "btn-light", "label": "Light" },
                { "group": "Normal", "value": "btn-dark", "label": "Dark" },
                { "group": "Normal", "value": "btn-primary", "label": "Primary" },
                { "group": "Normal", "value": "btn-secondary", "label": "Secondary" },
                { "group": "Normal", "value": "btn-success", "label": "Success" },
                { "group": "Normal", "value": "btn-danger", "label": "Danger" },
                { "group": "Normal", "value": "btn-warning", "label": "Warning" },
                { "group": "Normal", "value": "btn-info", "label": "Info" },
                { "group": "Outline", "value": "btn-outline-light", "label": "Light Outline" },
                { "group": "Outline", "value": "btn-outline-dark", "label": "Dark Outline" },
                { "group": "Outline", "value": "btn-outline-primary", "label": "Primary Outline" },
                { "group": "Outline", "value": "btn-outline-secondary", "label": "Secondary Outline" },
                { "group": "Outline", "value": "btn-outline-success", "label": "Success Outline" },
                { "group": "Outline", "value": "btn-outline-danger", "label": "Danger Outline" },
                { "group": "Outline", "value": "btn-outline-warning", "label": "Warning Outline" },
                { "group": "Outline", "value": "btn-outline-info", "label": "Info Outline" }
            ]
        },
        {
            "type": "select",
            "id": "btn_2_size",
            "label": "Button size",
            "default": "",
            "options": [
                { "value": "btn-sm", "label": "Small" },
                { "value": "", "label": "Normal" },
                { "value": "btn-lg", "label": "Large" }
            ]
        },
        {
            "type": "header",
            "content": "Spacing",
            "info": "Based on Bootstrap spacing utility classes [Learn more](https://getbootstrap.com/docs/5.0/utilities/spacing/)"
        },
        {
            "type": "range",
            "id": "pt",
            "label": "Padding top",
            "min": 0,
            "max": 12,
            "step": 1,
            "default": 0
        },
        {
            "type": "range",
            "id": "pb",
            "label": "Padding bottom",
            "min": 0,
            "max": 12,
            "step": 1,
            "default": 0
        },
        {
            "type": "range",
            "id": "mt",
            "label": "Margin top",
            "min": 0,
            "max": 12,
            "step": 1,
            "default": 0
        },
        {
            "type": "range",
            "id": "mb",
            "label": "Margin bottom",
            "min": 0,
            "max": 12,
            "step": 1,
            "default": 0
        }
    ],
    "presets": [
        {
            "name": "Youtube with text",
            "category": "Media"
        }
    ]
}
{% endschema %}
229 Views
0 Likes
Report
In response to Mike1974
dassk
Visitor
2 0 0
‎05-18-2022 05:11 PM

I dont know if i am doing anything wrong but , i added a  file to sections and the actual display is this one.

 

Screenshot of Vrilant _ Customize Dawn _ Shopify.jpg

228 Views
0 Likes
Report
In response to dassk
Webinauts
Shopify Partner
1 0 0
‎10-25-2023 11:54 PM

Same

50 Views
0 Likes
Report
Community Browser

Community Blog Articles

Jasonh_0-1701799488302.png
Community Connect: November Recap

Transform this holiday season into a shopping spree. Plus, learn how to effortlessly open ...

By Jasonh Dec 8, 2023
cropped-shutterstock_2285098703.jpg
Donations Before Discounts: The Greatest Incentive

Make the shift from discounts to donations, and witness your business not only thrive fina...

By Holly Dec 4, 2023
cropped-SYSO-okt23-GROW (1).png
Unlocking the Secrets of E-commerce Success: An Exclusive Interview with SY...

On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...

By Arno Nov 27, 2023
Terms of Service Privacy Policy