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