I want to create a hero banner with a background image and add another image on top of it. I duplicated my Image with Text Overlay file and attempted to make the changes in there but without success. I am using the OS2.0 version of the Boost theme.
Hi @SamyJ ,
Please send me the code of ‘Image with Text Overlay’ file. I will check and guide you in detail about it.
Hi LitExtension,
Thanks for your reply. I have included all code from that file below. It is just the image I am looking to overlay, I don’t need any text or products. The first thing I tried was systematically removing any references to the products but something happened along the way that no longer allowed me to make updates via the customizer.
{% style %}
{%- if section.settings.height == 'fixed' -%}
.section-{{ section.id }} .avoid-overlaps__mobile-container,
.section-{{ section.id }} .rimage-outer-wrapper {
height: {{ section.settings.height_mobile }}px;
}
@media (min-width: 840px) {
.section-{{ section.id }} .avoid-overlaps__mobile-container,
.section-{{ section.id }} .rimage-outer-wrapper {
height: {{ section.settings.height_desktop }}px;
}
}
{%- endif -%}
.section-{{ section.id }} .overlay {
top: {{ section.settings.overlay_position_y }}%;
left: {{ section.settings.overlay_position_x }}%;
}
{% for i in (1..2) %}
{% capture position_x %}label_position_x_{{ i }}{% endcapture %}
{% capture position_y %}label_position_y_{{ i }}{% endcapture %}
.section-{{ section.id }} .image-product-label-{{ i }} {
top: {{ section.settings[position_y] }}%;
left: {{ section.settings[position_x] }}%;
}
{% endfor %}
{% endstyle %}
{% if section.settings.image_link != blank %}{% endif %}
{% if section.settings.image == blank %}
{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% else %}
{% endif %}
{% if section.settings.image_link != blank %}{% endif %}
{% for i in (1..2) %}
{% capture current_label %}product_id_{{ i }}{% endcapture %}
{% capture chevron_position %}chevron_position_{{ i }}{% endcapture %}
{% if section.settings[current_label] != blank %}
{% assign product_label = all_products[section.settings[current_label]] %}
{% capture current_number %}{{ i }}{% endcapture %}
{% assign quickbuy_toggle = settings.quickbuy_labels_toggle %}
{% render 'image-product-label',
product_label: product_label,
current_number: current_number,
show_chevron: section.settings.show_chevron,
chevron: section.settings[chevron_position],
quickbuy: quickbuy_toggle,
color_bg: section.settings.color_label_background,
color_text: section.settings.color_label_text %}
{% endif %}
{% endfor %}
{% render 'image-overlay',
background_color: section.settings.color_overlay_bg,
background_opacity: section.settings.overlay_opacity,
text_color: section.settings.color_overlay_text,
title: section.settings.overlay_title,
enlarge_title: section.settings.enlarge_title,
text: section.settings.overlay_text,
enlarge_text: section.settings.enlarge_text,
url: section.settings.overlay_url_1,
url_2: section.settings.overlay_url_2,
url_text: section.settings.overlay_url_text_1,
url_text_2: section.settings.overlay_url_text_2,
url_style: section.settings.overlay_url_style,
mobile_text_below: section.settings.mobile_text_below,
extra_large_text: true %}
{% schema %}
{
"name": "Image with text overlay",
"tag": "section",
"class": "section-image-with-text-overlay",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "2048 x 1024px recommended"
},
{
"type": "url",
"id": "image_link",
"label": "Image link"
},
{
"type": "select",
"id": "image_position",
"label": "Image alignment",
"info": "Used to keep the subject of your image in view",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"type": "radio",
"id": "height",
"label": "Image height",
"options": [
{
"value": "adapt",
"label": "Natural"
},
{
"value": "fixed",
"label": "Fixed height"
}
],
"default": "adapt"
},
{
"type": "range",
"id": "height_desktop",
"min": 200,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Desktop fixed height",
"default": 600
},
{
"type": "range",
"id": "height_mobile",
"min": 100,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Mobile fixed height",
"default": 500
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "color",
"id": "color_overlay_bg",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "range",
"id": "overlay_opacity",
"min": 0,
"max": 100,
"step": 1,
"label": "Background opacity",
"default": 80,
"unit": "%",
"info": "Does not apply when the overlay is shown under the image on mobile."
},
{
"type": "color",
"id": "color_overlay_text",
"label": "Text color",
"default": "#333333"
},
{
"type": "textarea",
"id": "overlay_title",
"label": "Heading",
"default": "Full width image"
},
{
"type": "text",
"id": "overlay_text",
"label": "Text",
"default": "Show off your images, display a promotion with product links"
},
{
"type": "text",
"id": "overlay_url_text_1",
"label": "Button 1 text"
},
{
"type": "url",
"id": "overlay_url_1",
"label": "Button 1 link"
},
{
"type": "text",
"id": "overlay_url_text_2",
"label": "Button 2 text"
},
{
"type": "url",
"id": "overlay_url_2",
"label": "Button 2 link"
},
{
"type": "radio",
"id": "overlay_url_style",
"label": "Button style",
"options": [
{ "value": "button_1", "label": "Button - primary" },
{ "value": "button_2", "label": "Button - secondary" },
{ "value": "link_style", "label": "Link"}
],
"default": "button_1"
},
{
"type": "checkbox",
"id": "enlarge_title",
"label": "Enlarge heading",
"default": false
},
{
"type": "checkbox",
"id": "enlarge_text",
"label": "Enlarge text",
"default": false
},
{
"type": "range",
"id": "overlay_position_x",
"label": "Horizontal position",
"min": 0,
"max": 100,
"unit": "%",
"step": 1,
"default": 50
},
{
"type": "range",
"id": "overlay_position_y",
"label": "Vertical position",
"min": 0,
"max": 100,
"unit": "%",
"step": 1,
"default": 70
},
{
"type": "checkbox",
"id": "mobile_text_below",
"label": "Show overlay below image on mobile",
"info": "If not ticked product labels may not show on mobile"
},
{
"type": "header",
"content": "Product labels"
},
{
"type": "color",
"id": "color_label_background",
"label": "Background color",
"default": "#ffffff",
"info": "If transparent, a background will be applied on small screens to aid visibility"
},
{
"type": "color",
"id": "color_label_text",
"label": "Text color",
"default": "#333333"
},
{
"type": "checkbox",
"id": "show_chevron",
"label": "Show arrows",
"default": true
},
{
"type": "header",
"content": "Product label 1"
},
{
"type": "product",
"id": "product_id_1",
"label": "Product"
},
{
"type": "radio",
"id": "chevron_position_1",
"label": "Arrow position",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "right", "label": "Right" }
],
"default": "right"
},
{
"type": "range",
"id": "label_position_x_1",
"label": "Horizontal position",
"min": 0,
"max": 100,
"unit": "%",
"step": 1,
"default": 20
},
{
"type": "range",
"id": "label_position_y_1",
"label": "Vertical position",
"min": 0,
"max": 100,
"unit": "%",
"step": 1,
"default": 30
},
{
"type": "header",
"content": "Product label 2"
},
{
"type": "product",
"id": "product_id_2",
"label": "Product"
},
{
"type": "radio",
"id": "chevron_position_2",
"label": "Arrow position",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "right", "label": "Right" }
],
"default": "right"
},
{
"type": "range",
"id": "label_position_x_2",
"label": "Horizontal position",
"min": 0,
"max": 100,
"unit": "%",
"step": 1,
"default": 80
},
{
"type": "range",
"id": "label_position_y_2",
"label": "Vertical position",
"min": 0,
"max": 100,
"unit": "%",
"step": 1,
"default": 50
}
],
"templates": [
"404",
"article",
"blog",
"cart",
"collection",
"index",
"list-collections",
"page",
"product",
"search"
],
"presets": [
{
"name": "Image with text overlay"
}
]
}
{% endschema %}
Hi @SamyJ ,
Please change code:
{% style %}
{%- if section.settings.height == 'fixed' -%}
.section-{{ section.id }} .avoid-overlaps__mobile-container,
.section-{{ section.id }} .rimage-outer-wrapper {
height: {{ section.settings.height_mobile }}px;
}
@media (min-width: 840px) {
.section-{{ section.id }} .avoid-overlaps__mobile-container,
.section-{{ section.id }} .rimage-outer-wrapper {
height: {{ section.settings.height_desktop }}px;
}
}
{%- endif -%}
.section-{{ section.id }} .overlay {
top: {{ section.settings.overlay_position_y }}%;
left: {{ section.settings.overlay_position_x }}%;
}
{% for i in (1..2) %}
{% capture position_x %}label_position_x_{{ i }}{% endcapture %}
{% capture position_y %}label_position_y_{{ i }}{% endcapture %}
.section-{{ section.id }} .image-product-label-{{ i }} {
top: {{ section.settings[position_y] }}%;
left: {{ section.settings[position_x] }}%;
}
{% endfor %}
{% endstyle %}
{% if section.settings.image_link != blank %}{% endif %}
{% if section.settings.image == blank %}
{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% else %}
{% endif %}
{% if section.settings.image_link != blank %}{% endif %}
{% schema %}
{
"name": "Image with text overlay",
"tag": "section",
"class": "section-image-with-text-overlay",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "2048 x 1024px recommended"
},
{
"type": "image_picker",
"id": "caption",
"label": "Caption"
},
{
"type": "url",
"id": "image_link",
"label": "Image link"
},
{
"type": "select",
"id": "image_position",
"label": "Image alignment",
"info": "Used to keep the subject of your image in view",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"type": "radio",
"id": "height",
"label": "Image height",
"options": [
{
"value": "adapt",
"label": "Natural"
},
{
"value": "fixed",
"label": "Fixed height"
}
],
"default": "adapt"
},
{
"type": "range",
"id": "height_desktop",
"min": 200,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Desktop fixed height",
"default": 600
},
{
"type": "range",
"id": "height_mobile",
"min": 100,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Mobile fixed height",
"default": 500
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "color",
"id": "color_overlay_bg",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "range",
"id": "overlay_opacity",
"min": 0,
"max": 100,
"step": 1,
"label": "Background opacity",
"default": 80,
"unit": "%",
"info": "Does not apply when the overlay is shown under the image on mobile."
},
{
"type": "color",
"id": "color_overlay_text",
"label": "Text color",
"default": "#333333"
},
{
"type": "textarea",
"id": "overlay_title",
"label": "Heading",
"default": "Full width image"
},
{
"type": "text",
"id": "overlay_text",
"label": "Text",
"default": "Show off your images, display a promotion with product links"
},
{
"type": "text",
"id": "overlay_url_text_1",
"label": "Button 1 text"
},
{
"type": "url",
"id": "overlay_url_1",
"label": "Button 1 link"
},
{
"type": "text",
"id": "overlay_url_text_2",
"label": "Button 2 text"
},
{
"type": "url",
"id": "overlay_url_2",
"label": "Button 2 link"
},
{
"type": "radio",
"id": "overlay_url_style",
"label": "Button style",
"options": [
{ "value": "button_1", "label": "Button - primary" },
{ "value": "button_2", "label": "Button - secondary" },
{ "value": "link_style", "label": "Link"}
],
"default": "button_1"
},
{
"type": "checkbox",
"id": "enlarge_title",
"label": "Enlarge heading",
"default": false
},
{
"type": "checkbox",
"id": "enlarge_text",
"label": "Enlarge text",
"default": false
},
{
"type": "range",
"id": "overlay_position_x",
"label": "Horizontal position",
"min": 0,
"max": 100,
"unit": "%",
"step": 1,
"default": 50
},
{
"type": "range",
"id": "overlay_position_y",
"label": "Vertical position",
"min": 0,
"max": 100,
"unit": "%",
"step": 1,
"default": 70
},
{
"type": "checkbox",
"id": "mobile_text_below",
"label": "Show overlay below image on mobile",
"info": "If not ticked product labels may not show on mobile"
}
],
"templates": [
"404",
"article",
"blog",
"cart",
"collection",
"index",
"list-collections",
"page",
"product",
"search"
],
"presets": [
{
"name": "Image with text overlay"
}
]
}
{% endschema %}
Hope it helps!
Yes, it definitely helped, thank you!
After I added it, I tried to make a few style changes but I don’t know why they won’t work. The overlay image is pretty small and I wasn’t able to change the size or have it extend beyond the bottom of the background image. I was also thinking it might be a good idea to have the options for alignment and natural/fixed size for the overlay image available to use as well. I duplicated the schema for the background image and then changed the ids. I then changed it in the liquid but whenever I tried to use it in the customizer, it applied to the background image, not the overlay.
I started with the code you provided and tried to make my changes on top of that.
We are redesigning the site and the old version of the site is live so there is no link I can share with you. This is the link to the live site if you need it for reference: https://chunks.shop/
This is essentially what I am trying to do; the background/hero image will be the logo and the overlay image will be the actual photo.
Thank you again for all your help!
{% style %}
{%- if section.settings.height == 'fixed' -%}
.section-{{ section.id }} .avoid-overlaps__mobile-container,
.section-{{ section.id }} .rimage-outer-wrapper {
height: {{ section.settings.height_mobile }}px;
}
@media (min-width: 840px) {
.section-{{ section.id }} .avoid-overlaps__mobile-container,
.section-{{ section.id }} .rimage-outer-wrapper {
height: {{ section.settings.height_desktop }}px;
}
}
{%- endif -%}
.section-{{ section.id }} .overlay {
top: {{ section.settings.overlay_position_y }}%;
left: {{ section.settings.overlay_position_x }}%;
}
{% for i in (1..2) %}
{% capture position_x %}label_position_x_{{ i }}{% endcapture %}
{% capture position_y %}label_position_y_{{ i }}{% endcapture %}
.section-{{ section.id }} .image-product-label-{{ i }} {
top: {{ section.settings[position_y] }}%;
left: {{ section.settings[position_x] }}%;
}
{% endfor %}
{% endstyle %}
{% style %}
{%- if section.settings.overlay_height == 'fixed' -%}
.section-{{ section.id }} .avoid-overlaps__mobile-container,
.section-{{ section.id }} .rimage-outer-wrapper {
height: {{ section.settings.overlay_height_mobile }}px;
}
@media (min-width: 840px) {
.section-{{ section.id }} .avoid-overlaps__mobile-container,
.section-{{ section.id }} .rimage-outer-wrapper {
height: {{ section.settings.overlay_height_desktop }}px;
}
}
{%- endif -%}
.section-{{ section.id }} .overlay {
top: {{ section.settings.overlay_position_y }}%;
left: {{ section.settings.overlay_position_x }}%;
}
{% for i in (1..2) %}
{% capture position_x %}label_position_x_{{ i }}{% endcapture %}
{% capture position_y %}label_position_y_{{ i }}{% endcapture %}
.section-{{ section.id }} .image-product-label-{{ i }} {
top: {{ section.settings[position_y] }}%;
left: {{ section.settings[position_x] }}%;
}
{% endfor %}
{% endstyle %}
{% if section.settings.image_link != blank %}{% endif %}
{% if section.settings.image == blank %}
{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% else %}
{% endif %}
{% if section.settings.image_link != blank %}{% endif %}
{% schema %}
{
"name": "Image with Image Overlay",
"tag": "section",
"class": "section-image-with-image-overlay",
"settings": [
{
"type": "header",
"content": "Hero Image"
},
{
"type": "image_picker",
"id": "image",
"label": "Background",
"info": "2048 x 1024px recommended"
},
{
"type": "select",
"id": "image_position",
"label": "Hero Image Alignment",
"info": "Used to keep the subject of your image in view",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"type": "radio",
"id": "height",
"label": "Image height",
"options": [
{
"value": "adapt",
"label": "Natural"
},
{
"value": "fixed",
"label": "Fixed height"
}
],
"default": "adapt"
},
{
"type": "range",
"id": "height_desktop",
"min": 200,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Desktop fixed height",
"default": 600
},
{
"type": "range",
"id": "height_mobile",
"min": 100,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Mobile fixed height",
"default": 500
},
{
"type": "header",
"content": "Overlay Image"
},
{
"type": "image_picker",
"id": "overlay_image",
"label": "Overlayed Image"
},
{
"type": "url",
"id": "overlay_image_link",
"label": "Image link"
},
{
"type": "select",
"id": "overlay_image_position",
"label": "Overlay Image Alignment",
"info": "Used to keep the subject of your image in view",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"type": "radio",
"id": "overlay_height",
"label": "Image height",
"options": [
{
"value": "adapt",
"label": "Natural"
},
{
"value": "fixed",
"label": "Fixed height"
}
],
"default": "adapt"
},
{
"type": "range",
"id": "overlay_height_desktop",
"min": 200,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Desktop fixed height",
"default": 600
},
{
"type": "range",
"id": "overlay_height_mobile",
"min": 100,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Mobile fixed height",
"default": 500
},
{
"type": "header",
"content": "Overlay xx"
},
{
"type": "color",
"id": "color_overlay_bg",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "range",
"id": "overlay_opacity",
"min": 0,
"max": 100,
"step": 1,
"label": "Background opacity",
"default": 80,
"unit": "%",
"info": "Does not apply when the overlay is shown under the image on mobile."
},
{
"type": "color",
"id": "color_overlay_text",
"label": "Text color",
"default": "#333333"
},
{
"type": "textarea",
"id": "overlay_title",
"label": "Heading",
"default": "Full width image"
},
{
"type": "text",
"id": "overlay_text",
"label": "Text",
"default": "Show off your images, display a promotion with product links"
},
{
"type": "text",
"id": "overlay_url_text_1",
"label": "Button 1 text"
},
{
"type": "url",
"id": "overlay_url_1",
"label": "Button 1 link"
},
{
"type": "text",
"id": "overlay_url_text_2",
"label": "Button 2 text"
},
{
"type": "url",
"id": "overlay_url_2",
"label": "Button 2 link"
},
{
"type": "radio",
"id": "overlay_url_style",
"label": "Button style",
"options": [
{ "value": "button_1", "label": "Button - primary" },
{ "value": "button_2", "label": "Button - secondary" },
{ "value": "link_style", "label": "Link"}
],
"default": "button_1"
},
{
"type": "checkbox",
"id": "enlarge_title",
"label": "Enlarge heading",
"default": false
},
{
"type": "checkbox",
"id": "enlarge_text",
"label": "Enlarge text",
"default": false
},
{
"type": "range",
"id": "overlay_position_x",
"label": "Horizontal position",
"min": 0,
"max": 100,
"unit": "%",
"step": 1,
"default": 50
},
{
"type": "range",
"id": "overlay_position_y",
"label": "Vertical position",
"min": 0,
"max": 100,
"unit": "%",
"step": 1,
"default": 70
},
{
"type": "checkbox",
"id": "mobile_text_below",
"label": "Show overlay below image on mobile",
"info": "If not ticked product labels may not show on mobile"
}
],
"templates": [
"404",
"article",
"blog",
"cart",
"collection",
"index",
"list-collections",
"page",
"product",
"search"
],
"presets": [
{
"name": "Image with image overlay TEST"
}
]
}
{% endschema %}
Hi @SamyJ ,
Sorry, the file you sent is incorrect.
Can you describe what you want and a screenshot of how it looks in detail. If you want to increase the size of the caption image, you can change the code here:
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.