Hi,
I’m using Broadcast theme. I would like to replace the heading on my hero image banner with a logotype. Thanks!
Website: www.qori.nyc
Password: thauld
Hi @Winhac3 ,
Please send me the code of section-hero.liquid file, I will check it for you
Hi, tysm!
{%- liquid
assign bg_color = section.settings.bg_color
assign text_color = section.settings.color
assign animation_anchor = '#Hero--' | append: section.id
assign show_text_shadow = settings.show_text_shadow
assign color_brightness = text_color | color_brightness
assign text_color_class = ''
assign hero_transparent = false
if bg_color == 'rgba(0,0,0,0)' or bg_color == blank
assign hero_transparent = true
endif
if color_brightness > 127
assign text_color_class = 'text-light'
else
assign text_color_class = 'text-dark'
endif
-%}
{%- style -%}
#Hero--{{ section.id }} {
{%- unless bg_color == 'rgba(0,0,0,0)' or bg_color == blank -%}
--bg: {{ bg_color }};
{%- endunless -%}
{%- unless text_color == 'rgba(0,0,0,0)' or text_color == blank -%}
--text: {{ text_color }};
{%- endunless -%}
}
{%- endstyle -%}
{%- unless section.settings.title == '' -%}
{%- assign font_size_class = section.settings.heading_size | prepend: 'heading-size-' -%}
##
{{ section.settings.title | escape }}{%- endunless -%}
{%- unless section.settings.description == '' -%}
{%- assign font_size_class = section.settings.text_size | prepend: 'body-size-' -%}
{{ section.settings.description }}
{%- endunless -%}
{%- unless section.settings.link_text == '' -%}
{{ section.settings.link_text | escape }}
{%- endunless -%}
{%- if section.settings.link != blank -%}
{%- unless section.settings.link_text != blank -%}
{%- endunless -%}
{%- endif -%}
{%- assign overlay_opacity = section.settings.overlay_opacity | times: 0.01 -%}
{%- assign desktop_image_modifier = '' -%}
{%- assign mobile_image = '' -%}
{%- if section.settings.mobile_image != blank -%}
{%- assign desktop_image_modifier = 'desktop' -%}
{%- capture mobile_image -%}
{%- render 'image-background', img_object: section.settings.mobile_image, frame_height_class: section.settings.height, bg_position: section.settings.bg_position, modifier: 'mobile' -%}
{%- endcapture -%}
{%- endif -%}
{%- render 'image-background', img_object: section.settings.image, frame_height_class: section.settings.height, bg_position: section.settings.bg_position, modifier: desktop_image_modifier -%}
{{ mobile_image }}
{% schema %}
{
"name": "Image banner",
"class": "section-fullscreen",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile image"
},
{
"type": "select",
"id": "bg_position",
"label": "Position",
"default": "center-center",
"options": [
{ "label": "Top", "value": "center-top" },
{ "label": "Right", "value": "right-center" },
{ "label": "Center", "value": "center-center" },
{ "label": "Left", "value": "left-center" },
{ "label": "Bottom", "value": "center-bottom" }
]
},
{
"type": "select",
"id": "height",
"label": "Height",
"default": "screen-height-three-quarters",
"options": [
{ "value": "screen-height-full", "label": "Full screen height"},
{ "value": "screen-height-three-quarters", "label": "3/4 of screen"},
{ "value": "screen-height-two-thirds", "label": "2/3 of screen"},
{ "value": "screen-height-one-half", "label": "1/2 of screen"},
{ "value": "screen-height-one-third", "label": "1/3 of screen"},
{ "value": "seven-fifty-height-hero", "label": "750px" },
{ "value": "sixty-fifty-height-hero", "label": "650px" },
{ "value": "five-fifty-height-hero ", "label": "550px" },
{ "value": "four-fifty-height-hero", "label": "450px" },
{ "value": "image-height", "label": "Image height" }
]
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Opacity",
"info": "Increase contrast for legible text.",
"min": 0,
"max": 100,
"step": 5,
"unit": "%",
"default":0
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#000"
},
{
"type": "header",
"content": "Text"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image banner"
},
{
"type": "range",
"id": "heading_size",
"label": "Heading size",
"min": 1,
"max": 15,
"step": 1,
"default":11
},
{
"type": "textarea",
"id": "description",
"label": "Text",
"default": "Tell your brand's story through images."
},
{
"type": "range",
"id": "text_size",
"label": "Text size",
"min": 1,
"max": 15,
"step": 1,
"default":5
},
{
"type": "select",
"id": "flex_align",
"label": "Block alignment",
"default": "align--middle-center",
"options": [
{ "value": "align--top-left", "label": "Top left"},
{ "value": "align--top-center", "label": "Top center"},
{ "value": "align--top-right", "label": "Top right"},
{ "value": "align--middle-left", "label": "Middle left"},
{ "value": "align--middle-center", "label": "Absolute center"},
{ "value": "align--middle-right", "label": "Middle right"},
{ "value": "align--bottom-left", "label": "Bottom left"},
{ "value": "align--bottom-center", "label": "Bottom center"},
{ "value": "align--bottom-right", "label": "Bottom right"}
]
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "bg_color",
"label": "Background"
},
{
"type": "color",
"id": "color",
"label": "Text",
"default": "#FFFFFF"
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "link_text",
"label": "Text",
"default": "View products",
"info": "Leave blank to link entire image"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "select",
"id": "button_color",
"label": "Color",
"default": "btn--white",
"options": [
{"value": "btn--primary", "label": "Bright accent"},
{"value": "btn--secondary", "label": "Secondary accent"},
{"value": "btn--link", "label": "Link color"},
{"value": "btn--neutral", "label": "Text color"},
{"value": "btn--black", "label": "Black"},
{"value": "btn--white", "label": "White"}
]
},
{
"type": "select",
"id": "button_style",
"label": "Style",
"default": "hero__btn btn btn--large btn--outline caps",
"options": [
{"value": "caps--large", "label": "Capitalized text"},
{"value": "hero__btn btn btn--input caps", "label": "Small button"},
{"value": "hero__btn btn btn--large caps", "label": "Large button"},
{"value": "hero__btn btn btn--input btn--outline caps", "label": "Small outline button"},
{"value": "hero__btn btn btn--large btn--outline caps", "label": "Large outline button"}
]
}
],
"presets": [
{
"name": "Image banner",
"category": "Image"
}
]
}
{% endschema %}
Hi @Winhac3
- Step 1: Go to Admin => Online Store => Theme => Edit Code. Then, go to Templates folder => select Add new template => and name it as you want. In our example, you can set it as hero-banner-with-logo => then paste the following code into the newly created liquid file:
{%- style -%}
.banner_with_logo{
position:relative;
width:100vw;
}
.banner_with_logo>img{
height:700px;
width:100vw;
object-fit:cover;
object-position:center;
}
.baner_content{
position: absolute;
bottom: 60px;
right: 80px;
display: flex;
flex-direction: column;
}
.baner_content>a{
min-width: 110px;
height: 38px;
padding: 9px 16px;
text-transform: uppercase;
font-size: 12px;
border-radius: none;
border: none;
text-decoration: none;
color: #fff;
background: #212121;
display: flex;
cursor: pointer;
transition: all linear 0.2s;
margin-top: 24px;
justify-content: center;
}
}
.baner_content>a:hover{
background: #c5aa76
}
{%- endstyle -%}
{% schema %}
{
"name": "Banner With Logo",
"settings": [
{
"type": "image_picker",
"id": "banner",
"label": "Chose your image"
},
{
"type": "image_picker",
"id": "logo",
"label": "Chose your logo"
},
{
"type":"text",
"id":"btn_name",
"label":"button's name",
"default":"Shop now"
},
{
"type": "url",
"id": "button_link",
"label": "Link Of Button"
}
],
"presets": [
{
"name": "Banner With Logo",
"category": "ADVANCED LAYOUT"
}
]
}
{% endschema %}
- Step 2: Go to Customize Theme => then select add new section => select the newly created section named: “Baner with logo”
- As a result, it will appear interface for you to upload a banner image and logo image as well as the link of a button. Here, you can customize it as you like. For the sizes and spacing, you can fully customize in the style section of the liquid file at first:
I hope that it will work for you.
that worked perfect, thank you so so much!
1 Like