Behind Website Codes

For videos on product page and video page

<video controls="controls" style="max-width: 100%; height: auto;"> <source src="place video link here" type="video/mp4" /> Your browser does not support our video. </video>

 

 

 

For videos motion autoplay on homepage

<video controls autoplay loop playsinline muted><source src="place video link here" />
</video>

 

 For the video to be not so big, add:

 

<style>
video {
display: block;
margin: 0 auto;  - this 0 means, make it center
width:50%;        - this makes width of video 50%
}

 

Now you will have this:

 

<style>
video {
display: block;
margin: 0 auto;
width:50%;
}
</style>

<video controls autoplay loop playsinline muted><source src="https://cdn.shopify.com/videos/c/o/v/cf7be3bc34ba4fd785a162d2da9523c1.mp4" />
</video>

 

For mobile responsive and size, add media query:

 

@media screen and (max-width: 800px) {
video {
width: 90%; 
}                      - this means for mobile, the video will be larger at 90% or however size you want

 

 

 

Final code will be for desktop and mobile:

<style>
video {
display: block;
margin: 0 auto;
width:50%;
}

@media screen and (max-width: 800px) {
video {
width: 90%;
}
}
</style>

<video controls autoplay loop playsinline muted><source src="place video link here" />
</video>

 

 

How TO Make the product image smaller for Dawn Theme

 

Edit code

search - section-main-product.css

 GO to:

@media screen and (min-width: 990px) {
.product--large:not(.product--no-media) .product__media-wrapper {
max-width: 65%;
width: calc(65% - var(--grid-desktop-horizontal-spacing) / 2);
}

.product--large:not(.product--no-media) .product__info-wrapper {
padding: 0 0 0 4rem;
max-width: 35%;
width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2);

 

change these number as desired to make total of 100

then save

refresh website to see changes

 

 Clickable banner (best version) -

Edit code

Search - banner---> choose

image-banner.liquid

Searche    banner__media media

under tthe first banner__media media and before {%-liquid

paste

<div class="banner_full_link">
<a href="{{ block.settings.button_link_1 }}">Shop Now</a>
</div>

 

go back up to line 31 or with opacity } above 

paste code:

.banner_full_link{}
.banner_full_link a{
top:0;
bottom:0;
left:0;
right:0;
position:absolute;
z-index:100;
opacity:0;

 then  } below to close

make sure there is } above and below code

 

save and refresh web. set links 

refresh youtube video 

How to make Image Banner clickable on Shopify ✅ Shopify Clickable Banner Image [ NO APPS ] - YouTube

 

 

Clickable banner (rough trial version) - more infor onClickable Slideshow: Shopify Dawn Theme – Kai MFS

search - section-image-banner.css

 

Add the css code just beneath the .banner__box class at the top of the file as pictured below and click SAVE.

.opacity_banner {
  opacity: 1;
  border-radius: 0px;
}

save

search slideshow

add a new section titled - Linked-Slideshow.liquid

delete what is there and paste this:

 

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }} {{ 'component-slider.css' | asset_url | stylesheet_tag }} {{ 'component-slideshow.css' | asset_url | stylesheet_tag }} {%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%} {%- style -%} @media screen and (max-width: 749px) { #Slider-{{ section.id }}::before, #Slider-{{ section.id }} .media::before, #Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before { padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%; content: ''; display: block; } } @media screen and (min-width: 750px) { #Slider-{{ section.id }}::before, #Slider-{{ section.id }} .media::before { padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%; content: ''; display: block; } } {%- endstyle -%} {%- endif -%} <slideshow-component class="slider-mobile-gutter{% if section.settings.layout == 'grid' %} page-width{% endif %}{% if section.settings.show_text_below %} mobile-text-below{% endif %}" role="region" aria-roledescription="{{ 'sections.slideshow.carousel' | t }}" aria-label="{{ section.settings.accessibility_info | escape }}"> {%- if section.settings.auto_rotate and section.blocks.size > 1 -%} <div class="slideshow__controls slideshow__controls--top slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}"> <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button> <div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}"> {%- if section.settings.slider_visual == 'counter' -%} <span class="slider-counter--current">1</span> <span aria-hidden="true"> / </span> <span class="visually-hidden">{{ 'general.slider.of' | t }}</span> <span class="slider-counter--total">{{ section.blocks.size }}</span> {%- else-%} <div class="slideshow__control-wrapper"> {%- for block in section.blocks -%} <button class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link" aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}" aria-controls="Slider-{{ section.id }}"> {%- if section.settings.slider_visual == 'numbers' -%}{{ forloop.index }}{% else %}<span class="dot"></span>{%- endif -%} </button> {%- endfor -%} </div> {%- endif -%} </div> <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'sections.slideshow.next_slideshow' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button> {%- if section.settings.auto_rotate -%} <button type="button" class="slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}" aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"> {%- render 'icon-pause' -%} {%- render 'icon-play' -%} </button> {%- endif -%} </div> <noscript> <div class="slider-buttons"> <div class="slider-counter"> {%- for block in section.blocks -%} <a href="#Slide-{{ section.id }}-{{ forloop.index }}" class="slider-counter__link link" aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"> {{ forloop.index }} </a> {%- endfor -%} </div> </div> </noscript> {%- endif -%} <div class="slideshow banner banner--{{ section.settings.slide_height }} grid grid--1-col slider slider--everywhere{% if section.settings.show_text_below %} banner--mobile-bottom{% endif %}{% if section.blocks.first.settings.image == blank %} slideshow--placeholder{% endif %}" id="Slider-{{ section.id }}" aria-live="polite" aria-atomic="true" data-autoplay="{{ section.settings.auto_rotate }}" data-speed="{{ section.settings.change_slides_speed }}" > {%- for block in section.blocks -%} <style> #Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after { opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }}; } </style> <style> #Slide-{{ section.id }}-{{ forloop.index }} .opacity_banner { opacity: {{ block.settings.text_box_opacity | divided_by: 100.0 }}; } </style> <style> #Slide-{{ section.id }}-{{ forloop.index }} .opacity_banner { border-radius: {{ block.settings.text_box_radius }}px; } </style> <div class="slideshow__slide grid__item grid--1-col slider__slide" id="Slide-{{ section.id }}-{{ forloop.index }}" {{ block.shopify_attributes }} role="group" aria-roledescription="{{ 'sections.slideshow.slide' | t }}" aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}" tabindex="-1"> <div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}"> {%- if block.settings.image -%} {%- assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round -%} {{ block.settings.image | image_url: width: 3840 | image_tag: loading: 'lazy', height: height, sizes: "100vw", widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' }} {%- else -%} {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%} </div> {% if block.settings.image_link != blank %} <div style="height: 100%" class="slideshow__text slideshow__text-wrapper content-container"><a style="text-decoration: none" href="{{ block.settings.image_link }}"> {% endif %} <div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}"> <div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} gradient slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }} {% if block.settings.show_text_box != false %}opacity_banner{% endif %}"> {%- if block.settings.heading != blank -%} <h2 class="banner__heading {{ block.settings.heading_size }}">{{ block.settings.heading | escape }}</h2> {%- endif -%} {%- if block.settings.subheading != blank -%} <div class="banner__text" {{ block.shopify_attributes }}> <span><b>{{ block.settings.subheading | escape }}</b></span> </div> {%- endif -%} {%- if block.settings.button_label != blank -%} <div class="banner__buttons"> <a{% if block.settings.link %} href="{{ block.settings.link }}"{% else %} role="link" aria-disabled="true"{% endif %} class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}">{{ block.settings.button_label | escape }}</a> </div> {%- endif -%} </div> </div> {% if block.settings.image_link != blank %} </a></div> {% endif %} </div> {%- endfor -%} </div> {%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%} <div class="slideshow__controls slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}"> <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button> <div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}"> {%- if section.settings.slider_visual == 'counter' -%} <span class="slider-counter--current">1</span> <span aria-hidden="true"> / </span> <span class="visually-hidden">{{ 'general.slider.of' | t }}</span> <span class="slider-counter--total">{{ section.blocks.size }}</span> {%- else-%} <div class="slideshow__control-wrapper"> {%- for block in section.blocks -%} <button class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link" aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}" aria-controls="Slider-{{ section.id }}"> {%- if section.settings.slider_visual == 'numbers' -%}{{ forloop.index }}{% else %}<span class="dot"></span>{%- endif -%} </button> {%- endfor -%} </div> {%- endif -%} </div> <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'sections.slideshow.next_slideshow' | t }}" aria-controls="Slider-{{ section.id }}">{% render 'icon-caret' %}</button> {%- if section.settings.auto_rotate -%} <button type="button" class="slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}" aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"> {%- render 'icon-pause' -%} {%- render 'icon-play' -%} </button> {%- endif -%} </div> <noscript> <div class="slider-buttons"> <div class="slider-counter"> {%- for block in section.blocks -%} <a href="#Slide-{{ section.id }}-{{ forloop.index }}" class="slider-counter__link link" aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"> {{ forloop.index }} </a> {%- endfor -%} </div> </div> </noscript> {%- endif -%} </slideshow-component> {%- if request.design_mode -%} <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script> {%- endif -%} {% schema %} { "name": "t:sections.slideshow.name", "tag": "section", "class": "section", "settings": [ { "type": "select", "id": "layout", "options": [ { "value": "full_bleed", "label": "t:sections.slideshow.settings.layout.options__1.label" }, { "value": "grid", "label": "t:sections.slideshow.settings.layout.options__2.label" } ], "default": "full_bleed", "label": "t:sections.slideshow.settings.layout.label" }, { "type": "select", "id": "slide_height", "options": [ { "value": "adapt_image", "label": "t:sections.slideshow.settings.slide_height.options__1.label" }, { "value": "small", "label": "t:sections.slideshow.settings.slide_height.options__2.label" }, { "value": "medium", "label": "t:sections.slideshow.settings.slide_height.options__3.label" }, { "value": "large", "label": "t:sections.slideshow.settings.slide_height.options__4.label" } ], "default": "adapt_image", "label": "t:sections.slideshow.settings.slide_height.label" }, { "type": "select", "id": "slider_visual", "options": [ { "value": "dots", "label": "t:sections.slideshow.settings.slider_visual.options__2.label" }, { "value": "counter", "label": "t:sections.slideshow.settings.slider_visual.options__1.label" }, { "value": "numbers", "label": "t:sections.slideshow.settings.slider_visual.options__3.label" } ], "default": "counter", "label": "t:sections.slideshow.settings.slider_visual.label" }, { "type": "checkbox", "id": "auto_rotate", "label": "t:sections.slideshow.settings.auto_rotate.label", "default": false }, { "type": "range", "id": "change_slides_speed", "min": 3, "max": 9, "step": 2, "unit": "s", "label": "t:sections.slideshow.settings.change_slides_speed.label", "default": 5 }, { "type": "header", "content": "t:sections.slideshow.settings.mobile.content" }, { "type": "checkbox", "id": "show_text_below", "label": "t:sections.slideshow.settings.show_text_below.label", "default": true }, { "type": "header", "content": "t:sections.slideshow.settings.accessibility.content" }, { "type": "text", "id": "accessibility_info", "label": "t:sections.slideshow.settings.accessibility.label", "info": "t:sections.slideshow.settings.accessibility.info", "default": "Slideshow about our brand" } ], "blocks": [ { "type": "slide", "name": "t:sections.slideshow.blocks.slide.name", "limit": 5, "settings": [ { "type": "image_picker", "id": "image", "label": "t:sections.slideshow.blocks.slide.settings.image.label" }, { "type": "text", "id": "heading", "default": "Image slide", "label": "t:sections.slideshow.blocks.slide.settings.heading.label" }, { "type": "select", "id": "heading_size", "options": [ { "value": "h2", "label": "t:sections.all.heading_size.options__1.label" }, { "value": "h1", "label": "t:sections.all.heading_size.options__2.label" }, { "value": "h0", "label": "t:sections.all.heading_size.options__3.label" } ], "default": "h1", "label": "t:sections.all.heading_size.label" }, { "type": "text", "id": "subheading", "default": "Tell your brand's story through images", "label": "t:sections.slideshow.blocks.slide.settings.subheading.label" }, { "type": "text", "id": "button_label", "default": "Button label", "label": "t:sections.slideshow.blocks.slide.settings.button_label.label", "info": "t:sections.slideshow.blocks.slide.settings.button_label.info" }, { "type": "url", "id": "link", "label": "t:sections.slideshow.blocks.slide.settings.link.label" }, { "type": "checkbox", "id": "button_style_secondary", "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label", "default": false }, { "type": "range", "id": "image_overlay_opacity", "min": 0, "max": 100, "step": 10, "unit": "%", "label": "t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label", "default": 0 }, { "type": "select", "id": "color_scheme", "options": [ { "value": "accent-1", "label": "t:sections.all.colors.accent_1.label" }, { "value": "accent-2", "label": "t:sections.all.colors.accent_2.label" }, { "value": "background-1", "label": "t:sections.all.colors.background_1.label" }, { "value": "background-2", "label": "t:sections.all.colors.background_2.label" }, { "value": "inverse", "label": "t:sections.all.colors.inverse.label" } ], "default": "background-1", "label": "t:sections.all.colors.label", "info": "t:sections.slideshow.blocks.slide.settings.color_scheme.info" }, { "type": "select", "id": "box_align", "options": [ { "value": "top-left", "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label" }, { "value": "top-center", "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label" }, { "value": "top-right", "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label" }, { "value": "middle-left", "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label" }, { "value": "middle-center", "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label" }, { "value": "middle-right", "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label" }, { "value": "bottom-left", "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label" }, { "value": "bottom-center", "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label" }, { "value": "bottom-right", "label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label" } ], "default": "middle-center", "label": "t:sections.slideshow.blocks.slide.settings.box_align.label", "info": "t:sections.slideshow.blocks.slide.settings.box_align.info" }, { "type": "select", "id": "text_alignment", "options": [ { "value": "left", "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label" }, { "value": "center", "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label" }, { "value": "right", "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label" } ], "default": "center", "label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label" }, { "type": "checkbox", "id": "show_text_box", "label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label", "default": true }, { "type": "header", "content": "Clickable Slider" }, { "type": "url", "id": "image_link", "label": "Image Link", "info": "Leave blank to use the button" }, { "type": "range", "id": "text_box_opacity", "min": 0, "max": 100, "step": 5, "unit": "%", "label": "Container Opacity", "info": "Try turn this to 100 if you can't find the container", "default": 100 }, { "type": "range", "id": "text_box_radius", "min": 0, "max": 100, "step": 5, "unit": "px", "label": "Radius", "default": 0 }, { "type": "header", "content": "t:sections.slideshow.settings.mobile.content" }, { "type": "select", "id": "text_alignment_mobile", "options": [ { "value": "left", "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label" }, { "value": "center", "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label" }, { "value": "right", "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label" } ], "default": "center", "label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label" } ] } ], "presets": [ { "name": "t:sections.slideshow.presets.name", "blocks": [ { "type": "slide" }, { "type": "slide" } ] } ] } {% endschema %}

 

then save

 

go to admin section of website

add section

search slideshow

select linked slideshow and do forth