How to Add an Image Banner Behind the Malomo Theme App Tracking Block
To add the tracking block over a banner image you will need to add some code to your theme setup.
1. Once you are logged into your Shopify admin, you will go to Customize Theme within the Online Store
2. From this next, page click on the 3 dots in the upper left hand corner, and then click Edit Code.
4. Once on the page you will want to click the Add new section button, and label it malomo-banner.liquid
5. Copy and paste the malomo-banner.liquid code from below into that section and Hit Save:
6. From here you will select the Customize Theme Button, and this will push the updated banner code into your theme in order to use.
7. You can then navigate back to the page editor within your Online Store, and you will then see the Malomo Banner available to add under Add Section on the order tracking page you have created.
8. You will then be able to add the Malomo shipment tracker and order lookup apps over the image banner.
9. Once that banner is added you can then customize the banner and add an image to spruce up the look and feel of the page.
As always, if you ever have any questions during this process, do not hesitate to reach out to our team at help@gomalomo.com.
malomo-banner.liquid
{%- style -%}
{% assign header_font = section.settings.header_font %}
{{ header_font | font_face }}
{% assign header_font_bold = header_font | font_modify: 'weight', 'bolder' %}
{% assign header_font_italic = header_font | font_modify: 'style', 'italic' %}
{% assign header_font_bold_and_italic = header_font_bold | font_modify: 'style', 'italic' %}
{{ header_font_bold | font_face }}
{{ header_font_italic | font_face }}
{{ header_font_bold_and_italic | font_face }}
.malomo-banner {
background-color: {{ section.settings.background_color }};
{%- if section.settings.background_image != blank -%}
background-image: url('{{ section.settings.background_image | image_url }}');
background-position: center;
background-repeat: {{ section.settings.background_repeat }};
background-size: {{ section.settings.background_size }};
{%- endif -%}
min-height: {{ section.settings.height }}px;
padding: {{ section.settings.padding }}px;
}
.malomo-banner-align--center {
justify-content: center;
text-align: center;
}
.malomo-banner-align--left {
justify-content: flex-start;
text-align: left;
}
.malomo-banner-align--right {
justify-content: flex-end;
text-align: right;
}
.malomo-banner-col {
align-items: center;
display: flex;
flex: 1;
justify-content: center;
}
.malomo-banner-col-img {
max-height: {{ section.settings.height }}px;
}
.malomo-banner-header {
font-family: {{ section.settings.header_font.family }};
font-size: {{ section.settings.header_font_size }}px;
font-style: {{ section.settings.header_font.style }};
font-weight: {{ section.settings.header_font.weight }};
margin: 0;
padding-bottom: {{ section.settings.header_padding_bottom }}px;
padding-top: {{ section.settings.header_padding_top }}px;
width: 100%;
}
.malomo-banner-header-row {
background-color: {{ section.settings.header_background_color }};
}
.malomo-banner-img {
display: block;
max-height: {{ section.settings.height }}px;
}
.malomo-banner .malomo-order-lookup,
.malomo-banner .malomo-shipment-tracker {
background-color: {{ section.settings.malomo_background_color }};
border-color: {{ section.settings.malomo_border_color }};
border-radius: {{ section.settings.malomo_border_radius }}px;
border-style: {{ section.settings.malomo_border_style }};
border-width: {{ section.settings.malomo_border_width }}px;
padding: {{ section.settings.malomo_padding }}px;
}
.malomo-banner-row {
display: flex;
}
@media only screen and (min-width : 320px) and (max-width : 480px) {
.malomo-banner-col {
flex-basis: auto;
width: 100%;
}
.malomo-banner-col-img,
.malomo-banner-img {
display: none;
}
}
{%- endstyle -%}
<div class="malomo-banner">
{%- if section.settings.header_text != blank -%}
<div class="malomo-banner-row malomo-banner-align--{{ section.settings.header_horizontal_alignment }} malomo-banner-header-row">
<{{section.settings.header_level}} class="malomo-banner-header">
{{section.settings.header_text}}
</{{section.settings.header_level}}>
</div>
{%- endif -%}
{%- if section.blocks.size > 0 -%}
<div class="malomo-banner-row">
{%- endif -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'image' -%}
{%- if block.settings.image != blank -%}
{%- if block.settings.image_width != blank -%}
{%- assign srcset = block.settings.image | image_url: width: block.settings.image_width -%}
{%- capture style -%}max-width: min(100%, {{ block.settings.image_width }}px);{%- endcapture -%}
{%- else -%}
{%- assign srcset = block.settings.image | image_url -%}
{%- endif -%}
<div class="malomo-banner-col malomo-banner-col-img malomo-banner-align--{{ block.settings.image_horizontal_alignment }}">
{%- if block.settings.image_link_url != blank -%}
<a href="{{block.settings.image_link_url}}" target="_blank">
{%- endif -%}
<img
alt="{{ block.settings.image.alt | escape }}"
class="malomo-banner-img"
loading="lazy"
src="{{ block.settings.image | image_url }}"
srcset="{{ srcset }}"
{%- if style -%}style="{{ style }}"{%- endif -%}
>
{%- if block.settings.image_link_url != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}
{%- when '@app' -%}
<div class="malomo-banner-col">
{% render block %}
</div>
{%- endcase -%}
{%- endfor -%}
{%- if section.blocks.size > 0 -%}
</div>
{%- endif -%}
</div>
{% schema %}
{
"name": "Malomo banner",
"blocks": [
{
"limit": 1,
"name": "Block",
"type": "block"
},
{
"limit": 1,
"name": "Image",
"settings": [
{
"id": "image",
"label": "Image",
"type": "image_picker"
},
{
"default": "center",
"id": "image_horizontal_alignment",
"label": "Horizontal Alignment",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
],
"type": "select"
},
{
"id": "image_link_url",
"label": "Image link URL",
"type": "url"
},
{
"id": "image_width",
"label": "Image width",
"type": "text"
}
],
"type": "image"
},
{
"type": "@app"
}
],
"presets": [
{
"name": "Malomo banner"
}
],
"settings": [
{
"default": "500",
"id": "height",
"label": "Height",
"type": "text"
},
{
"default": "0",
"id": "padding",
"label": "Padding",
"type": "text"
},
{
"content": "Header",
"type": "header"
},
{
"default": "transparent",
"id": "header_background_color",
"label": "Background Color",
"type": "color"
},
{
"default": "sans-serif",
"id": "header_font",
"label": "Font",
"type": "font_picker"
},
{
"default": "40",
"id": "header_font_size",
"label": "Font Size",
"type": "text"
},
{
"default": "center",
"id": "header_horizontal_alignment",
"label": "Horizontal Alignment",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
],
"type": "select"
},
{
"default": "20",
"id": "header_padding_top",
"label": "Padding - Top",
"type": "text"
},
{
"default": "20",
"id": "header_padding_bottom",
"label": "Padding - Bottom",
"type": "text"
},
{
"default": "h2",
"id": "header_level",
"label": "Level",
"options": [
{
"label": "1",
"value": "h1"
},
{
"label": "2",
"value": "h2"
},
{
"label": "3",
"value": "h3"
},
{
"label": "4",
"value": "h4"
},
{
"label": "5",
"value": "h5"
},
{
"label": "6",
"value": "h6"
}
],
"type": "select"
},
{
"id": "header_text",
"label": "Text",
"type": "text"
},
{
"content": "Background Color",
"type": "header"
},
{
"default": "transparent",
"id": "background_color",
"label": "Background color",
"type": "color"
},
{
"content": "Background Image",
"type": "header"
},
{
"id": "background_image",
"label": "Background image",
"type": "image_picker"
},
{
"default": "repeat",
"id": "background_repeat",
"label": "Background repeat",
"options": [
{
"label": "No Repeat",
"value": "no-repeat"
},
{
"label": "Repeat",
"value": "repeat"
},
{
"label": "Repeat X",
"value": "repeat-x"
},
{
"label": "Repeat Y",
"value": "repeat-y"
},
{
"label": "Round",
"value": "round"
},
{
"label": "Space",
"value": "space"
}
],
"type": "select"
},
{
"default": "auto",
"id": "background_size",
"label": "Background size",
"options": [
{
"label": "Auto",
"value": "auto"
},
{
"label": "Contain",
"value": "contain"
},
{
"label": "Cover",
"value": "cover"
}
],
"type": "select"
},
{
"content": "Malomo Tracking Block",
"type": "header"
},
{
"default": "transparent",
"id": "malomo_background_color",
"label": "Background color",
"type": "color"
},
{
"id": "malomo_border_color",
"label": "Border color",
"type": "color"
},
{
"default": "0",
"id": "malomo_border_radius",
"label": "Border radius",
"type": "text"
},
{
"default": "none",
"id": "malomo_border_style",
"label": "Border style",
"type": "text"
},
{
"default": "0",
"id": "malomo_border_width",
"label": "Border width",
"type": "text"
},
{
"default": "0",
"id": "malomo_padding",
"label": "Padding",
"type": "text"
}
]
}
{% endschema %}
CODE