Adding a text-with-icons section at the top of the footer in the Shopify Dawn theme across all pages.
Approaches suggested: use the built-in “Multicolumn” section, or create a new snippet and render it above the footer in theme.liquid (render tag with the snippet’s exact name).
Issues encountered: snippet initially didn’t appear (likely due to render name/syntax); images in Multicolumn appeared too large on desktop and mobile; several shared code blocks were empty in the thread.
Solutions provided: add custom CSS to theme.liquid or the section’s Custom CSS to constrain image size and improve mobile layout:
• Desktop: .multicolumn-card__image-wrapper max-width ~100px
• Mobile (≤767px): wrapper max-width ~55px, adjust .multicolumn-card__info padding
Placement guidance: to show on all pages, render the snippet above the footer-group in theme.liquid; for product or other pages, add the CSS within that page’s section Custom CSS.
Centering request: advised to add CSS before to center the column, but the exact CSS was not included.
Outcomes: Desktop sizing looks good; mobile improved after CSS updates; OP confirmed understanding.
Latest update: another user (German) requests the complete code to create a new section.
Status: Partially resolved (sizing and placement). Open items: detailed centering CSS and a full section code example. Images/screenshots were central to diagnosing sizing.
Hello Everyone!
How do I add a section of text with icons to my Shopify theme? I want to place this section at the top of the footer of all pages on my website. Please help me. Thank you.
Store Url: https://dream-tech-zone.myshopify.com/
Password: Admin
I want to keep it like this image.
Hi @dreamtechzone_5 ,
You can use “Multicolumn” to create the mentioned section
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
Go to your Online store > Themes > Edit code > Snippets > + Add a new snippet, enter your snippet file name
Copy HTML of example section in your image above, paste to file your just created.
Open your theme.liquid file, find this line of code
{% sections 'footer-group' %}
Paste this code above
{%- render 'your-icon-with-tex-file-name' -%)
Then this section will appear on all page right above footer
You file name is icons-all-pages, so you must add code is
{%- render 'icons-all-pages' -%)
{%- render ‘icons-all-pages’ -%)
Where can I get this code?
I’m trying to add it through Multicolumn section but the images look too big in desktop and mobile mode. Can you reduce the image size?
Please help me. Thank you.
Please add this code to your theme.liquid file, before tag
Hi @dreamtechzone_5 ,
As you have already added the section, you can now add below CSS to resize the image.
Follow these Steps:
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
Wow, It’s ok on desktop mode. Can you make the icons smaller? In mobile mode, the texts can be kept in such a way that they look better?
Looks great on desktop mode. In mobile mode, the texts can be kept in such a way that they look better?
Code updated
I want to put it at the top of the footer on all pages. But when I add it to another page the image size gets bigger.
Please add this code to Custom CSS of section that you added to another page
.multicolumn-card__image-wrapper { max-width: 100px; margin: 0 auto; }
@media (max-width: 767px) {
.multicolumn-card__image-wrapper { max-width: 55px !important; }
.multicolumn-card__info {
padding-left: 4px !important;
padding-right: 4px !important;
}
}
Great. Suppose i want to add it to the product page, then where should I put this code?
I understand now. Thank you so so much.
Very welcome
Hello Sir!
I want to center this column. Can it be kept in the center?
Store Url: https://blue-chic-clothes.myshopify.com/
Password: Admin
Hi @dreamtechzone_5 ,
Follow these Steps:
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka