Shopify themes, liquid, logos, and UX
Hi everyone I would like to add a new block to the Footer of the Dawn theme.
The type of block to be added is that of the Custom Liquid, which is the one already present in the Dawn theme but in the sections.
Who can explain to me how it is possible to do?
Thanks.
Solved! Go to the solution
Great @MARBLE-MADNESS I tried it and it works 😉
But now I have to do a new summary because otherwise those who come later will not understand much 🙂
So to recap it all ...
In order to add a liquid box in the footer with the header, these are the steps to do:
1
Open the footer.liquid file in the Edit Code section of the Shopify theme.
2
Add after this line of code
{% schema %}
{
"name": "t:sections.footer.name",
"blocks": [
Enter this:
{
"name": "custom liquid",
"type": "custom_liquid",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Custom Liquid",
"label": "t:sections.footer.blocks.text.settings.heading.label"
},
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},
3
Add after this line of code
{% case block.type %}
Enter this:
{% when 'custom_liquid' %}
{{block.settings.custom_liquid}}
Save everything and test the operation.
I hope I have not forgotten anything.
A special thanks to all those who participated in this conversation by "inventing" something useful for the community.
Hello, could ou be more specific where to add this code in footer.liquid?
Thanks for your nice feedback @Zens and your work. Hope everything is fine at your end.. Have a great day 🙂
Hi Joan, like @Zens has written in his comment above, insert the code directly after:
{% schema %}
{
"name": "t:sections.footer.name",
"blocks": [
Or just simple copy the following schema section and change it in your footer.liquid:
{% schema %}
{
"name": "t:sections.footer.name",
"blocks": [
/* Stefan: Added for custom HTML in footer */
{
"name": "custom liquid",
"type": "custom_liquid",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Custom Liquid",
"label": "t:sections.footer.blocks.text.settings.heading.label"
},
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},
/* Stefan: END */
{
"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",
"info": "t:sections.footer.blocks.link_list.settings.heading.info"
},
{
"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 store details, promotions, or 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.footer.settings.color_scheme.options__1.label"
},
{
"value": "accent-2",
"label": "t:sections.footer.settings.color_scheme.options__2.label"
},
{
"value": "background-1",
"label": "t:sections.footer.settings.color_scheme.options__3.label"
},
{
"value": "background-2",
"label": "t:sections.footer.settings.color_scheme.options__4.label"
},
{
"value": "inverse",
"label": "t:sections.footer.settings.color_scheme.options__5.label"
}
],
"default": "background-1",
"label": "t:sections.footer.settings.color_scheme.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"
}
],
"default": {
"blocks": [
{
"type": "link_list"
},
{
"type": "text"
}
]
}
}
{% endschema %}
Hi Joan, ok, understand it. After you have added a section during customizing your theme, here are two examples of code you can put into the filed customized-liquid:
Example graphics and text:
<p><img alt="Alternate Text Example 1" src="https://cdn.shopify.com/s/files/1/0603/7857/9134/files/haken_mm_color.png?v=1635323469" style="margin-right: 10px; float: left;" width="20" height="20">Example Text one for Joan</p>
<p>
</p><p><img alt="Alternate Text 2" src="https://cdn.shopify.com/s/files/1/0603/7857/9134/files/haken_mm_color.png?v=1635323469" style="margin-right: 10px; float: left;" width="20" height="20">Example Text two for Joan</p>
Other example for a Link:
<p>Text example for Joan includes also a <br><strong>bold text</strong>.<br>And here is a link to your <b><a href="/pages/contact" style="color: #00909B" title="Whatever">Contact-Page</a></b>.<br>And a little text after all.</p>
<p>
Hope that helps, best,
Stefan
Hi Joan, should work. If not there must be something else wrong in your theme....
Best....
Stefan
Hi Joan, don't really understand it for the moment and can't see any attachment. But maybe it's better if you're open a new thread for a new case. Ohterwise it get mixed here with the footer-solution... Best, Stefan
Hi, for a customer i developed a code for a popup like this:
https://supergsund.de/products/impfstoff-weisswein-6x-750ml
Visit the page and look for:
Incl. MwSt.. Versandkosten werden an der Kasse berechnet.
If you're on the page click on "Versandkosten".
A popup appears.
If you're looking for something like this, i can give you the code.
Stefan
User | RANK |
---|---|
188 | |
152 | |
69 | |
46 | |
36 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023