Hi, i’m trying to add custom logos into my header. like this:
you can find the code inside the theme files
Online Store > Edit Code > header.liquid file and find the above code and add below code right after
tag
thanks
@Breaward Hope you are doing well.
Could you please share your store URL?
could you add the pause logo onto the first video I have?
@Breaward Could you please share the password to check your frontend?
breaward66
@Breaward Would you like to add it like this?
If yes then open your theme file of video and add the “controls” attribute in the last of video tag. Please see below
I just want the play/pause and volume button to be shown but also changing the icon
this is the video code i’m using
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- assign img_url = block.settings.image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}
{% if block.type == ‘video’ %}
{%- if block.settings.video_link != blank -%}
<video class=“video-js” loop autoplay preload=“none” muted playsinline
poster=“https:{{ block.settings.video_image | img_url: ‘master’ }}”>
{% endif %}
{% if block.settings.title != blank %}
{{ block.settings.title | escape }}
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% else %}
{% if block.settings.title != blank %}
{{ block.settings.title | escape }}
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% endif %}
{%- endfor -%}
{% else %}
This section doesn’t currently include any content. Add content to this section using the sidebar.
{%- endif -%}
.main-content .videoBackground { margin-top: -55px; } .videoBackground { height: 1000%; position: relative; } .videoBackground .fullscreen-video-wrap { position: absolute; top: 0; left: 0; min-width: 100%; width: 100%; height: 100%; overflow: hidden; } .videoBackground .fullscreen-video-wrap .video-js { position: absolute; top: 0; left: 0; min-height: 100%; min-width: 100%; width: 100%; height: 100%; object-fit: cover; } .videoBackground .fullscreen-video-wrap video { min-height: 100%; min-width: 100%; object-fit: cover; } .videoBackground .videoBox { display: flex; align-items: center; justify-content: flex-end; flex-direction: column; padding: 100px 20px 80px; background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 500px; max-height: 800px; height: calc(100vh - 165px); position: relative; } .videoBackground .imageBox { display: flex; align-items: center; justify-content: flex-end; flex-direction: column; padding: 100px 20px 80px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; min-height: calc(100vh - 165px); height: auto; } .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo { z-index: 2; text-align: center; } .videoBackground .overlay { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; z-index: 1; } .videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; width: auto; text-decoration: none; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 2px; padding: 8px 15px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; white-space: normal; font-size: 14px; margin-top: 20px; } .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle { color: #FFF; font-size: 30px; line-height: 40px; } .videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription { max-width: 500px; margin: 0 auto; } .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p { font-size: 18px; line-height: 28px; } .videoBackground .placeholderNoblocks { text-align: center; max-width: 500px; margin: 0 auto; } @media screen and (max-width: 767px) { .main-content .videoBackground { margin-top: -35px; } .videoBackground .fullscreen-video-wrap { z-index: 3; } .videoBackground .videoBox { min-height: 500px; height: 100%; position: relative; padding: 0; } .videoBackground .fullscreen-video-wrap { position: relative; min-height: 300px; } .videoBackground .videoBoxInfo { padding: 40px 20px; background: #000; width: 100%; } }{% schema %}
{
“name”: {
“en”: “Video Background”
},
“class”: “videoBackground”,
“max_blocks”: 1,
“blocks”: [
{
“type”: “video”,
“name”: “Video”,
“settings”: [
{
“type”: “url”,
“id”: “video_link”,
“label”: {
“en”: “Video link”
}
},
{
“type”: “image_picker”,
“id”: “video_image”,
“label”: {
“en”: “Cover image”
}
},
{
“type”: “range”,
“id”: “overlay_opacity”,
“label”: {
“en”: “Overlay opacity”
},
“min”: 0,
“max”: 99,
“step”: 1,
“unit”: {
“en”: “%”
},
“default”: 0
},
{
“type”: “header”,
“content”: {
“en”: “Text”
}
},
{
“type”: “text”,
“id”: “title”,
“label”: {
“en”: “Heading”
},
“default”: “Video slide”
},
{
“type”: “richtext”,
“id”: “text”,
“label”: {
“en”: “Description”
},
“default”: {
“en”: “
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
”}
},
{
“type”: “color”,
“id”: “color_text”,
“label”: {
“en”: “Text color”
},
“default”: “#ffffff”
},
{
“type”: “text”,
“id”: “button_label”,
“label”: {
“en”: “Button label”
}
},
{
“type”: “url”,
“id”: “button_link”,
“label”: {
“en”: “Button link”
}
},
{
“type”: “color”,
“id”: “color_btn_bg”,
“label”: {
“en”: “Background button color”
},
“default”: “#ffffff”
},
{
“type”: “color”,
“id”: “color_btn_text”,
“label”: {
“en”: “Button text color”
},
“default”: “#ffffff”
}
]
},
{
“type”: “image”,
“name”: “Image”,
“settings”: [
{
“type”: “color”,
“id”: “color_bg”,
“label”: {
“en”: “Background color (optional)”
},
“default”: “#16165b”
},
{
“type”: “image_picker”,
“id”: “image_bg”,
“label”: {
“en”: “or use an image (required)”
}
},
{
“type”: “range”,
“id”: “overlay_opacity”,
“label”: {
“en”: “Overlay opacity”
},
“min”: 0,
“max”: 99,
“step”: 1,
“unit”: {
“en”: “%”
},
“default”: 0
},
{
“type”: “header”,
“content”: {
“en”: “Text”
}
},
{
“type”: “text”,
“id”: “title”,
“default”: “Image slide”,
“label”: {
“en”: “Heading”
}
},
{
“type”: “richtext”,
“id”: “text”,
“label”: {
“en”: “Description”
},
“default”: {
“en”: “
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
”}
},
{
“type”: “color”,
“id”: “color_text”,
“label”: {
“en”: “Text color”
},
“default”: “#ffffff”
},
{
“type”: “text”,
“id”: “button_label”,
“label”: {
“en”: “Button label”
}
},
{
“type”: “url”,
“id”: “button_link”,
“label”: {
“en”: “Button link”
}
},
{
“type”: “color”,
“id”: “color_btn_bg”,
“label”: {
“en”: “Background button color”
},
“default”: “#ffffff”
},
{
“type”: “color”,
“id”: “color_btn_text”,
“label”: {
“en”: “Button text color”
},
“default”: “#ffffff”
}
]
}
],
“presets”: [
{
“name”: {
“en”: “Video Background”
},
“category”: {
“en”: “Main”
},
“blocks”: [
{
“type”: “video”
}
]
}
]
}
{% endschema %}
@Breaward It is possible.
But to achieve, need to add some custom code,CSS and JS.
DO you have knowledge of liquid, CSS andjs?
No, I don’t
Is there a way for you to help me with that?
@Breaward Yes, for that need to access your theme code.
You can give collaborator access for that
Oka,y you can send a collaborator request