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,
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-'
%}
{% 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": "
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.
"
},
{
"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 %}
Same
