want to add text along with icon - Shopify Dawn Theme

[dreamtechzone_5]

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.

[Dan-From-Ryviu · Accepted solution]

Please add this code to your theme.liquid file, before </body> tag

<style>
#shopify-section-template--20524623659287__0babba14-3259-4b44-8cbb-2b87aacbf5b2 .multicolumn-card__image-wrapper { max-width: 100px; margin: 0 auto; }
</style>

[theycallmemakka · Accepted solution]

Hi @dreamtechzone_5 ,

As you have already added the section, you can now add below CSS to resize the image.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
#shopify-section-template--20524623659287__0babba14-3259-4b44-8cbb-2b87aacbf5b2 .multicolumn-card__image-wrapper { 
    max-width: 55px; 
    margin: 0 auto; 
}
</style>

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

[Dan-From-Ryviu · Accepted solution]

Code updated 

<style>
#shopify-section-template--20524623659287__0babba14-3259-4b44-8cbb-2b87aacbf5b2 .multicolumn-card__image-wrapper { max-width: 100px; margin: 0 auto; }
@media (max-width: 767px) {
#shopify-section-template--20524623659287__0babba14-3259-4b44-8cbb-2b87aacbf5b2 .multicolumn-card__image-wrapper { max-width: 55px !important; }
#shopify-section-template--20524623659287__0babba14-3259-4b44-8cbb-2b87aacbf5b2 .multicolumn-card__info {
padding-left: 4px !important;
padding-right: 4px !important;
}
}
</style>

[Dan-From-Ryviu · Accepted solution]

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;
}
}

[theycallmemakka]

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

[dreamtechzone_5]

I have added this way but the images look too big in desktop and mobile mode.

[theycallmemakka · Accepted solution]

Hi @dreamtechzone_5 ,

As you have already added the section, you can now add below CSS to resize the image.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
#shopify-section-template--20524623659287__0babba14-3259-4b44-8cbb-2b87aacbf5b2 .multicolumn-card__image-wrapper { 
    max-width: 55px; 
    margin: 0 auto; 
}
</style>

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

[dreamtechzone_5]

Looks great on desktop mode.  In mobile mode, the texts can be kept in such a way that they look better?

[Dan-From-Ryviu]

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

[dreamtechzone_5]

I added this way but not working.

[Dan-From-Ryviu]

You file name is icons-all-pages, so you must add code is 

{%- render 'icons-all-pages' -%)

[dreamtechzone_5]

{%- render 'icons-all-pages' -%)

Where can I get this code?

[dreamtechzone_5]

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.

[Dan-From-Ryviu · Accepted solution]

Please add this code to your theme.liquid file, before </body> tag

<style>
#shopify-section-template--20524623659287__0babba14-3259-4b44-8cbb-2b87aacbf5b2 .multicolumn-card__image-wrapper { max-width: 100px; margin: 0 auto; }
</style>

[dreamtechzone_5]

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?

[Dan-From-Ryviu · Accepted solution]

Code updated 

<style>
#shopify-section-template--20524623659287__0babba14-3259-4b44-8cbb-2b87aacbf5b2 .multicolumn-card__image-wrapper { max-width: 100px; margin: 0 auto; }
@media (max-width: 767px) {
#shopify-section-template--20524623659287__0babba14-3259-4b44-8cbb-2b87aacbf5b2 .multicolumn-card__image-wrapper { max-width: 55px !important; }
#shopify-section-template--20524623659287__0babba14-3259-4b44-8cbb-2b87aacbf5b2 .multicolumn-card__info {
padding-left: 4px !important;
padding-right: 4px !important;
}
}
</style>

[dreamtechzone_5]

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.

[Dan-From-Ryviu · Accepted solution]

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;
}
}

[dreamtechzone_5]

Great. Suppose i want to add it to the product page, then where should I put this code?

[dreamtechzone_5]

I understand now. Thank you so so much.

[Dan-From-Ryviu]

Very welcome

[dreamtechzone_5]

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

[theycallmemakka · Accepted solution]

Hi @dreamtechzone_5 ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>

@media only screen and (max-width: 989px) {
  ul#Slider-template--20915865518399__ce5383bc-e64e-442a-afe5-49ee2bb30640 {
    justify-content: center;
}
}
</style>

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

[dreamtechzone_5]

Thank you.

[Lorenapilla21]

Guten Tag, ich habe diesen Artikel gefunden, weil ich genau so eine Icon-Section programmieren will. Könnten Sie mir vielleicht den ganze Code geben, damit ich eine neue Section erstellen kann? Vielen Dank