Re: add image to dawn header, I would like a small image put on the far right of my header
Hi BMW web artisan
https://4140azviibh06gfu-67083632914.shopifypreview.com
this is the website
I would like to add the maple leaf to the header. added the file to my photo files. but i dont know how to add it to the header.
Also I dont want it to appear in mobile, just on desktop and wide screen platforms.
Thanks.
Hi Litos,
Thank you so much!!
There has been a change of plan. I would like to put a different image in the footer instead
to look like this
Its the CICC logo on the bottom right.
Here is the link to the image file https://cdn.shopify.com/s/files/1/0670/8363/2914/files/CICC_1000x326_79c73299-c518-4032-a45c-6e337c9...
Here is the code for the footer
{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-payment.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-social.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'disclosure.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-social.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'disclosure.css' | asset_url | stylesheet_tag }}</noscript>
{%- style -%}
.footer {
margin-top: {{ section.settings.margin_top | times: 0.75 | round: 0 }}px;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.footer {
margin-top: {{ section.settings.margin_top }}px;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<footer class="footer color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding">
{%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social -%}
<div class="footer__content-top page-width">
{%- if section.blocks.size > 0 -%}
{%- liquid
if section.blocks.size == 9
assign footer_grid_class = 'grid--3-col-tablet'
elsif section.blocks.size > 6
assign footer_grid_class = 'grid--4-col-desktop'
elsif section.blocks.size > 4
assign footer_grid_class = 'grid--3-col-tablet'
endif
-%}
<div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
{%- for block in section.blocks -%}
<div class="footer-block grid__item{% if block.type == 'link_list' %} footer-block--menu{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.heading != blank -%}
<h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
{%- endif -%}
{%- case block.type -%}
{%- when 'text' -%}
<div class="footer-block__details-content rte">
{{ block.settings.subtext }}
</div>
{%- when 'link_list' -%}
{%- if block.settings.menu != blank -%}
<ul class="footer-block__details-content list-unstyled">
{%- for link in block.settings.menu.links -%}
<li>
<a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
{{ link.title }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- when 'image' -%}
<div class="footer-block__details-content footer-block-image {{ block.settings.alignment }}">
{%- if block.settings.image != blank -%}
{%- assign image_size_2x = block.settings.image_width | times: 2 | at_most: 5760 -%}
<img
srcset= "{{ block.settings.image | image_url: width: block.settings.image_width }}, {{ block.settings.image | image_url: width: image_size_2x }} 2x"
src="{{ block.settings.image | image_url: width: 400 }}"
alt="{{ block.settings.image.alt | escape }}"
loading="lazy"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.height }}"
style="max-width: min(100%, {{ block.settings.image_width }}px);"
>
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
</div>
{%- endcase -%}
</div>
{%- endfor -%}
</div>
{%- endif -%}
<div class="footer-block--newsletter">
{%- if section.settings.newsletter_enable -%}
<div class="footer-block__newsletter">
{%- if section.settings.newsletter_heading != blank -%}
<h2 class="footer-block__heading">{{ section.settings.newsletter_heading | escape }}</h2>
{%- endif -%}
{%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
<input type="hidden" name="contact[tags]" value="newsletter">
<div class="newsletter-form__field-wrapper">
<div class="field">
<input
id="NewsletterForm--{{ section.id }}"
type="email"
name="contact[email]"
class="field__input"
value="{{ form.email }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
autocomplete="email"
{% if form.errors %}
autofocus
aria-invalid="true"
aria-describedby="ContactFooter-error"
{% elsif form.posted_successfully? %}
aria-describedby="ContactFooter-success"
{% endif %}
placeholder="{{ 'newsletter.label' | t }}"
required
>
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.label' | t }}
</label>
<button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
{% render 'icon-arrow' %}
</button>
</div>
{%- if form.errors -%}
<small class="newsletter-form__message form__message" id="ContactFooter-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
{%- endif -%}
</div>
{%- if form.posted_successfully? -%}
<h3 class="newsletter-form__message newsletter-form__message--success form__message" id="ContactFooter-success" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
{%- endif -%}
{%- endform -%}
</div>
{%- endif -%}
{%- if section.settings.show_social -%}
<ul class="footer__list-social list-unstyled list-social" role="list">
{%- if settings.social_twitter_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_twitter_link }}" class="link list-social__link" >
{%- render 'icon-twitter' -%}
<span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_facebook_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_facebook_link }}" class="link list-social__link" >
{%- render 'icon-facebook' -%}
<span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_pinterest_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_pinterest_link }}" class="link list-social__link" >
{%- render 'icon-pinterest' -%}
<span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_instagram_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_instagram_link }}" class="link list-social__link" >
{%- render 'icon-instagram' -%}
<span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_tiktok_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_tiktok_link }}" class="link list-social__link" >
{%- render 'icon-tiktok' -%}
<span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_tumblr_link }}" class="link list-social__link" >
{%- render 'icon-tumblr' -%}
<span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_snapchat_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_snapchat_link }}" class="link list-social__link" >
{%- render 'icon-snapchat' -%}
<span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_youtube_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_youtube_link }}" class="link list-social__link" >
{%- render 'icon-youtube' -%}
<span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_vimeo_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_vimeo_link }}" class="link list-social__link" >
{%- render 'icon-vimeo' -%}
<span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
</a>
</li>
{%- endif -%}
</ul>
{%- endif -%}
</div>
</div>
{%- endif -%}
<div class="footer__content-bottom">
<div class="footer__content-bottom-wrapper page-width">
<div class="footer__column footer__localization isolate">
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
<noscript>
{%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="FooterCountryLabelNoScript">{{ 'localization.country_label' | t }}</h2>
<select class="localization-selector link" name="country_code" aria-labelledby="FooterCountryLabelNoScript">
{%- for country in localization.available_countries -%}
<option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
{{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
{%- endform -%}
</noscript>
<localization-form>
{%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}
<div class="no-js-hidden">
<h2 class="caption-large text-body" id="FooterCountryLabel">{{ 'localization.country_label' | t }}</h2>
<div class="disclosure">
<button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterCountryList" aria-describedby="FooterCountryLabel">
{{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
{% render 'icon-caret' %}
</button>
<div class="disclosure__list-wrapper" hidden>
<ul id="FooterCountryList" role="list" class="disclosure__list list-unstyled">
{%- for country in localization.available_countries -%}
<li class="disclosure__item" tabindex="-1">
<a class="link link--text disclosure__link caption-large{% if country.iso_code == localization.country.iso_code %} disclosure__link--active{% endif %} focus-inset" href="#"{% if country.iso_code == localization.country.iso_code %} aria-current="true"{% endif %} data-value="{{ country.iso_code }}">
{{ country.name }} <span class="localization-form__currency">({{ country.currency.iso_code }} {{ country.currency.symbol }})</span>
</a>
</li>
{%- endfor -%}
</ul>
</div>
</div>
<input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
<noscript>
{%- form 'localization', id: 'FooterLanguageFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="FooterLanguageLabelNoScript">{{ 'localization.language_label' | t }}</h2>
<select class="localization-selector link" name="locale_code" aria-labelledby="FooterLanguageLabelNoScript">
{%- for language in localization.available_languages -%}
<option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
{{ language.endonym_name | capitalize }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
{%- endform -%}
</noscript>
<localization-form>
{%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}
<div class="no-js-hidden">
<h2 class="caption-large text-body" id="FooterLanguageLabel">{{ 'localization.language_label' | t }}</h2>
<div class="disclosure">
<button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterLanguageList" aria-describedby="FooterLanguageLabel">
{{ localization.language.endonym_name | capitalize }}
{% render 'icon-caret' %}
</button>
<div class="disclosure__list-wrapper" hidden>
<ul id="FooterLanguageList" role="list" class="disclosure__list list-unstyled">
{%- for language in localization.available_languages -%}
<li class="disclosure__item" tabindex="-1">
<a class="link link--text disclosure__link caption-large{% if language.iso_code == localization.language.iso_code %} disclosure__link--active{% endif %} focus-inset" href="#" hreflang="{{ language.iso_code }}" lang="{{ language.iso_code }}"{% if language.iso_code == localization.language.iso_code %} aria-current="true"{% endif %} data-value="{{ language.iso_code }}">
{{ language.endonym_name | capitalize }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
</div>
<input type="hidden" name="locale_code" value="{{ localization.language.iso_code }}">
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
</div>
<div class="footer__column footer__column--info">
{%- if section.settings.payment_enable -%}
<div class="footer__payment">
<span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
<ul class="list list-payment" role="list">
{%- for type in shop.enabled_payment_types -%}
<li class="list-payment__item">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
<div class="footer__copyright caption">
<small class="copyright__content">© {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}</small>
<small class="copyright__content"></small>
</div>
</div>
</div>
</div>
</footer>
{% javascript %}
class LocalizationForm extends HTMLElement {
constructor() {
super();
this.elements = {
input: this.querySelector('input[name="locale_code"], input[name="country_code"]'),
button: this.querySelector('button'),
panel: this.querySelector('.disclosure__list-wrapper'),
};
this.elements.button.addEventListener('click', this.openSelector.bind(this));
this.elements.button.addEventListener('focusout', this.closeSelector.bind(this));
this.addEventListener('keyup', this.onContainerKeyUp.bind(this));
this.querySelectorAll('a').forEach(item => item.addEventListener('click', this.onItemClick.bind(this)));
}
hidePanel() {
this.elements.button.setAttribute('aria-expanded', 'false');
this.elements.panel.setAttribute('hidden', true);
}
onContainerKeyUp(event) {
if (event.code.toUpperCase() !== 'ESCAPE') return;
this.hidePanel();
this.elements.button.focus();
}
onItemClick(event) {
event.preventDefault();
const form = this.querySelector('form');
this.elements.input.value = event.currentTarget.dataset.value;
if (form) form.submit();
}
openSelector() {
this.elements.button.focus();
this.elements.panel.toggleAttribute('hidden');
this.elements.button.setAttribute('aria-expanded', (this.elements.button.getAttribute('aria-expanded') === 'false').toString());
}
closeSelector(event) {
const shouldClose = event.relatedTarget && event.relatedTarget.nodeName === 'BUTTON';
if (event.relatedTarget === null || shouldClose) {
this.hidePanel();
}
}
}
customElements.define('localization-form', LocalizationForm);
{% endjavascript %}
{% schema %}
{
"name": "t:sections.footer.name",
"blocks": [
{
"type": "link_list",
"name": "t:sections.footer.blocks.link_list.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Quick links",
"label": "t:sections.footer.blocks.link_list.settings.heading.label"
},
{
"type": "link_list",
"id": "menu",
"default": "footer",
"label": "t:sections.footer.blocks.link_list.settings.menu.label",
"info": "t:sections.footer.blocks.link_list.settings.menu.info"
}
]
},
{
"type": "text",
"name": "t:sections.footer.blocks.text.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Heading",
"label": "t:sections.footer.blocks.text.settings.heading.label"
},
{
"type": "richtext",
"id": "subtext",
"default": "<p>Share contact information, store details, and brand content with your customers.</p>",
"label": "t:sections.footer.blocks.text.settings.subtext.label"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_width",
"min": 50,
"max": 200,
"step": 5,
"unit": "px",
"label": "Image width",
"default": 100
},
{
"type": "select",
"id": "alignment",
"label": "Image alignment on large screen",
"options": [
{
"value": "",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
}
]
}
],
"settings": [
{
"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"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__1.content",
"info": "t:sections.footer.settings.header__1.info"
},
{
"type": "checkbox",
"id": "newsletter_enable",
"default": true,
"label": "t:sections.footer.settings.newsletter_enable.label"
},
{
"type": "text",
"id": "newsletter_heading",
"default": "Subscribe to our emails",
"label": "t:sections.footer.settings.newsletter_heading.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__2.content",
"info": "t:sections.footer.settings.header__2.info"
},
{
"type": "checkbox",
"id": "show_social",
"default": false,
"label": "t:sections.footer.settings.show_social.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__3.content",
"info": "t:sections.footer.settings.header__4.info"
},
{
"type": "checkbox",
"id": "enable_country_selector",
"default": true,
"label": "t:sections.footer.settings.enable_country_selector.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__5.content",
"info": "t:sections.footer.settings.header__6.info"
},
{
"type": "checkbox",
"id": "enable_language_selector",
"default": true,
"label": "t:sections.footer.settings.enable_language_selector.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__7.content"
},
{
"type": "checkbox",
"id": "payment_enable",
"default": true,
"label": "t:sections.footer.settings.payment_enable.label"
},
{
"type": "header",
"content": "t:sections.all.spacing"
},
{
"type": "range",
"id": "margin_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.footer.settings.margin_top.label",
"default": 0
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"default": {
"blocks": [
{
"type": "link_list"
},
{
"type": "text"
}
]
}
}
{% endschema %}
Community Blog Articles
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024