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
Hi @dreamtechzone_5
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
I added this way but not working.
I have added this way but the images look too big in desktop and mobile mode.
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:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code just above tag
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
1 Like
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?
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;
}
}
1 Like
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.
1 Like
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:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code just above tag
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