Solved

want to add text along with icon - Shopify Dawn Theme

dreamtechzone_5
Shopify Partner
266 1 32

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.

 

A23B7F7A-FEC3-4110-AF03-FEEBE8273CAB.png

Accepted Solutions (5)
Dan-From-Ryviu
Shopify Partner
7720 1501 1505

This is an 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>

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

theycallmemakka
Shopify Partner
1477 336 360

This is an 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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Dan-From-Ryviu
Shopify Partner
7720 1501 1505

This is an 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>

 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Dan-From-Ryviu
Shopify Partner
7720 1501 1505

This is an 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;
}
}

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

theycallmemakka
Shopify Partner
1477 336 360

This is an 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

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 21 (21)

theycallmemakka
Shopify Partner
1477 336 360

Hi @dreamtechzone_5 ,

 

You can use "Multicolumn" to create the mentioned section

makkaomakka_1-1701154384287.png

 

makkaomakka_0-1701154357232.png

 

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

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

dreamtechzone_5
Shopify Partner
266 1 32

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

Screenshot 2023-11-28 131805.png

theycallmemakka
Shopify Partner
1477 336 360

This is an 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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

dreamtechzone_5
Shopify Partner
266 1 32

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

 

370115206_667492522035456_7606897294652508497_n.jpg

Dan-From-Ryviu
Shopify Partner
7720 1501 1505

Hi @dreamtechzone_5 

Go to your Online store > Themes > Edit code > Snippets > + Add a new snippet, enter your snippet file name 

Screenshot 2023-11-28 at 14.00.20.png

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

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

dreamtechzone_5
Shopify Partner
266 1 32

I added this way but not working.

Screenshot 2023-11-28 132418.pngScreenshot 2023-11-28 132353.png

Dan-From-Ryviu
Shopify Partner
7720 1501 1505

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

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

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

dreamtechzone_5
Shopify Partner
266 1 32

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

 

Where can I get this code?

dreamtechzone_5
Shopify Partner
266 1 32

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.

 

Screenshot 2023-11-28 131805.png

Dan-From-Ryviu
Shopify Partner
7720 1501 1505

This is an 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>

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

dreamtechzone_5
Shopify Partner
266 1 32

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?

 

370125377_1053700982429388_3483620255938339332_n.jpg

Dan-From-Ryviu
Shopify Partner
7720 1501 1505

This is an 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>

 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

dreamtechzone_5
Shopify Partner
266 1 32

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
Shopify Partner
7720 1501 1505

This is an 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;
}
}

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

dreamtechzone_5
Shopify Partner
266 1 32

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

dreamtechzone_5
Shopify Partner
266 1 32

I understand now. Thank you so so much.

 

Dan-From-Ryviu
Shopify Partner
7720 1501 1505

Very welcome

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

dreamtechzone_5
Shopify Partner
266 1 32

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

406754724_1019393639140037_8933308365038820492_n.jpg

theycallmemakka
Shopify Partner
1477 336 360

This is an 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

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

dreamtechzone_5
Shopify Partner
266 1 32

Thank you.

Lorenapilla21
Tourist
8 0 3

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