Help with adding a logo to my footer, please? (see screenshot)
first copy the CDN url and replace it with https://cdn.shopify.com/logo.cdn.url. then paste it between FOOTER SOCIAL MEDIA and FOOTER ASIDE, then I suggest you check it from the preview and move it to the part you want. You can use width and height with CSS and position it with layout codes.
Hi @Ellibelle
You can modify the footer.liquid code
{% schema %}
{
"name": "Footer",
"class": "shopify-section--footer",
"settings": [
{
"type": "checkbox",
"id": "show_payment_methods",
"label": "Show payment methods",
"info": "Payment method icons are automatically displayed based on your Shopify payment methods.",
"default": true
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "About the shop"
},
{
"type": "richtext",
"id": "content",
"label": "Text",
"default": "
Use this text area to tell your customers about your brand and vision. You can change it in the theme settings.
"
},
{
"type": "checkbox",
"id": "show_social_media",
"label": "Show social media",
"info": "Make sure to have properly configured your social media in the theme settings.",
"default": true
}
]
},
{
"type": "links",
"name": "Links",
"settings": [
{
"type": "link_list",
"id": "menu",
"label": "Menu",
"info": "This menu won't show dropdown items."
}
]
},
{
"type": "newsletter",
"name": "Newsletter",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Customers who subscribe will have their email address added to the \"accepts marketing\" [customer list](/admin/customers?query=&accepts_marketing=1)."
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Newsletter"
},
{
"type": "richtext",
"id": "content",
"label": "Text",
"default": "
A short sentence describing what someone will receive by subscribing
"
}
]
},
{
"type": "footer_logo",
"name": "Footer Logo",
"limit": 1,
"settings": [
{
"type": "image_picker",
"id": "footer_logo",
"label": "Add Footer Logo"
}
]
}
],
"default": {
"blocks": [
{
"type": "text",
"settings": {}
},
{
"type": "links",
"settings": {
"menu": "footer"
}
},
{
"type": "newsletter",
"settings": {}
},
{
"type": "footer_logo",
"settings": {}
}
]
}
}
{% endschema %}
To fetch image you can use below code and add it above {%- endcase -%}
{%- when 'footer_logo' -%}
{% if block.settings.footer_logo %}
<img src="{{ block.settings.footer_logo | img_url : '200x' }}" height="{{ block.settings.footer_logo.height }}" width="{{ block.settings.footer_logo.width }}" loading="lazy" />
{% endif %}
Then you have an option in the theme customizer like below
1 Like