Add Custom Icons To Your Product Page Without Apps (Copy & Paste to Boost Shopify Conversion Rate)

[@JahinShahriar]

fantastic tutorial as always

[@JRFitnessPro]

Thank you so much for the excellent work and free content you provide. Thanks to your tutorials, my new website is turning out great. I will definitely follow more of your tutorials. It would be interesting to have a tutorial on how to create a marquee-style announcement bar with scrolling text, logos, and icons to promote sales and capture attention. Keep up the fantastic work-your contributions are incredibly valuable and appreciated. Looking forward to more of your amazing content!

[@theprompted]

Thanks for the kind words! And thanks for the suggestion!

[@JRFitnessPro]

@@theprompted I hope you're doing well. I wanted to let you know that I've got the code for the marquee style we discussed. If you'd like, I can send it over for you to review. Also, I sent you an email a few days ago requesting a quote for the project. I wanted to check if you've had a chance to see it and if you could get back to me with a response. Thank you, and I look forward to hearing from you! Best regards

[@theprompted]

Thanks - will check our inbox and get back to you asap.

[@theprompted]

fyi we responded to your email last week - let us know if you need anything else!

[@shaikhsaloarhussain4133]

amazing work. this is what i was finding on youtube. Do you also have tutorials on full customised theme

[@Swaziman040]

Great tutorial again!! 💪

[@theprompted]

Glad you liked it!

[@santiagosilva7742]

Wow! absolutly useful

[@dominik1233]

Hi, Thank you so much for your free Videos! I would love to change the Background-Color of the Section, but unfortunately I'm unable to do so, or at least it does not span the whole page width. Could you help me with that?

[@tinhluk]

Thank you for sharing.

[@davidteca_music4925]

Hey brother, could you make a video on how to put a section separator line in the shopify store?

[@MK-Tech]

Another idea. How to update to a new theme... Just thinking about the new 13.01. that was just released. As soon as you install it all your custom code is long gone except the CSS added to the Theme editor section.... :(

[@theprompted]

Yes... can definitely be a headache especially if you've lost track of all your customizations.

[@duke3068]

Thanks

[@kylesbeck]

any way to do a 2x5 layout like horizontaly? like 2 rows and 2 collums

[@CocoaCandleco]

when at the adding a metafield object with the icons it says unable to save entery as value is not the correct format

[@HamperPick]

You are legend! Thank you. Is there a way to make those icons(under a section) clickable? Say, when I click on an icon, it directs use to a collection page (may be in a new window or in the same window)?

[@HamperPick]

Never mind. I figured that out. Thank you once again for your informative tutorials.

[@theprompted]

Great! Glad you figured it out

[@ZamidarOrganic]

@@HamperPick Can you help me with that?

[@ljubishatrajkov8473]

Great tutorial as always. Why I can't find "icons with text" block on my Down theme?

[@theprompted]

That’s strange. Which version of Dawn are you using?

[@ljubishatrajkov8473]

@@theprompted Just checked and it's version 7

[@theprompted]

That's probably why. I can't remember what features are available in Version 7, but Dawn is now up to Version 13.0.1. If you follow the tutorial, it might still work even if you don't have the original Icons With Text block, but if you want the default one, then you'll have to consider upgrading.

[@jahazielechenique]

Can you edit this to have two product metafields? We would like to use it multiple times in our page.

[@thetailgatefoodie]

This is perfection! I will be implementing this into our site today. Do you have any suggestions for where to get sets of free icons? (colored prefered)

[@theprompted]

Awesome! Let me know how it goes. Canva has a pretty large library of icons so you can check them out.

[@thetailgatefoodie]

@@theprompted This couldn't have worked any faster or better! Really appreciate it

[@thetailgatefoodie]

@@theprompted is there a way to make the sections dynamic? We operate a seasoning and sauce company. We have quite a few recipes that we would like to use different icons for the difficulty, main product used, and cooking method at the top of every page. Obviously, those change with every recipe. Thanks!

[@theprompted]

Is it on the product page? If so, then the section is already dynamic with the "product metafield" option. If it's not the product page or you want multiple different dynamic icons blocks/sections on your product page, then some code edits and new metafields will be required.

[@LanceArthurGelogo]

Does this work on Trade Theme??

[@romb1975]

how to get that codes at 8:09?

[@theprompted]

You can follow the link in the description to sign up for our free newsletter and we’ll send it over to you

[@MelodyTees]

Thanks, this is what i was actually needed. Can this be also used on the homepage? If no? what modification does it need to be done?

[@theprompted]

Yes, it can be added to the homepage. You can add it in as a section like we showed with the collection pages.

[@genius_maker]

Hello Sir...A big shout out to you...I have one question...Actually the icons are going outside the buy now buttons but in the video they are perfectly aligned with the buttons...Please guide what I'm not doing right...Thanks

[@theprompted]

I'm assuming by "outside" you mean that the icons extend farther to the right than the buttons and other content do. This would be a css/styling issue. Hard to know exactly what your issue is without getting into your theme code. What theme are you using?

[@genius_maker]

@@theprompted Sir I'm using Refresh theme...and yes the icons are going outside the buttons...Sir please guide me... And more thing I want to share with you... You have seen a surge in subscribers these days so congrats and I too am promoting your channel by referencing your codes and videos in my own channel... Thank you so much sir... I wanted to do a video on this topic also with your permission and in every video I share your channel link and I tell the viewers that I took it from you... Because sir you are the real creator behind these customer codes... Thanks once again....Please reply me

[@genius_maker]

@@theprompted Sir the icons show properly on small screens like mobile but the icons go outside the buttons on big screens laptop and especially desktop screen. Can you please guide me regarding this...Thanks sir

[@theprompted]

Thanks for the support and letting me know. I appreciate that you are referencing where you got the instructions from. I would also appreciate it if your code links referenced my videos as well. As for your question, you can see on the Refresh theme that the buttons don't actually span the entire width of the block but all other elements do (ex: longer titles and text will extend beyond the button length as well). So this is expected behavior. The Dawn theme is different in that the buttons take the entire width of the block. If you want to modify the width, then you can inspect the buttons to get their max width (looks like 44rem), and add the css max-width: 44rem to the .icon-with-text.icon-with-text-custom--{{ block_or_section_id }} style.

[@MK-Tech]

Great tutorial! How complicated would it be to make a specific block of icons to show up depending on Product Tag or Vendor?

[@theprompted]

Great question. Not too complicated. I'll add this to the list to look into

[@JoyAnne.Boutique]

Hello, thanks so much for providing the info & the code. It helped me alot :) I tried & followed your instruction, and it worked perfectly when i select product metafield as the source. However, when i select metaobject entry, nothing is displayed at the homepage template. Do you know how to fix it? Thanks.

[@theprompted]

What I suggest is to install a brand new version of your theme (ex: Dawn) as a sandbox troubleshooting testing area, and try the customization again. If you get a different result, then you can work backwards to see what might have gone wrong.

[@morrocantocador]

I created some icons using canva but they look kind of small. Is there a minimum size thay should be respected?

[@theprompted]

Is the icon size slider not working for you? That should be the best way to adjust the size.

[@morrocantocador]

@@theprompted thanks for you answer. I finished by using your full tutorial of making custom icons with meta objects and the results are stunning. Keep up like this, you are imo the only shopify tutorial content creator who knows what he's doing

[@DesignElect]

Wooow this so amazing! All this valable info just for free !?! its amazing what you are doing i request the shoppable image or lookbook i mean with a text block that goes over it

[@theprompted]

You're welcome and thanks for the suggestion! Do you have any examples of your request to help me visualize it?

[@DesignElect]

@@theprompted for sure i can give you the code that i have so far and then you can see. and probably make it better. how can i email you ?

[@theprompted]

Can you add it to a google doc and share the link here? Also - an image or website that shows the final result you're hoping to achieve would be helpful.

[@weloveindiaourcountry]

it is not taking metaobject entry what to do

[@joewang5883]

Hey, thanks for sharing. However, it is not showing on my flex V5 theme. Can you please give me some advice? Thanks.

[@theprompted]

This customization was designed for the free Shopify themes (ex: Dawn, Sense, Refresh, etc), and we haven't tested it on Flex. It's possible that it would need some further customization to adapt it to work with your theme.

[@jjaimemejia]

Hello reagards, Does works on a cell phone?

[@theprompted]

Yes, it should work on mobile devices as well

[@weloveindiaourcountry]

when i create a custom icon on home page it does not show,even when i try to change from product to metafield as you told but still not working

[@letterea4zampe]

Hi it's possible to add 5 icon for row?

[@theprompted]

Yes! We explain how to do that in the video

[@Fgg184]

Where do I get copy this code from?

[@theprompted]

Link is in the description

[@benedikt_sjn]

Hi, I have a problem. For some reason the icons are to big and changing the icon size with slider does not change the size

[@theprompted]

That's strange. You may want to install a fresh theme (ex: Dawn) and try it again. This way you can verify if there was a step that was missed that can be found by starting from scratch.

[@romb1975]

at the adding iamges at icons gruoping 1 i somehow can only put 1 imagge in instead 3 as u do. Thoughts?

[@codewithsabri]

When creating the Metaobject's Icons file field make sure to select "List of files" instead of "One file"

[@saminasachs1230]

When I type in icons grouping one, it says value is not the correct formula

[@theprompted]

Is this when you're trying to create the metaobject entry? If so, then the name format cannot have any spaces. It accepts letters, numbers, dashes, and underscores only. See 04:30 for the explanation.

[@muharremkapucu5177]

i cant find the code on your side which you are using for "icon-with-text-custom", where i can find the code which you enter there

[@theprompted]

Link is in the description

[@Jeffreyvanschoten]

can't find the icon things in main product liquid

[@theprompted]

Are you using a Shopify developed theme or a third party theme?

[@wunnaaung1254]

Does your code work on Vision Theme (Emerald)?

[@theprompted]

I haven't personally tested it on this theme, but the code was designed for the free Shopify themes like Dawn, Refresh, Sense, etc. Third-party themes are often structured differently so my guess is that it may not be compatible if you simply copy and paste. But you can test it out and/or adapt it to work with your theme. Let me know how it goes!

[@jakamocivnik3190]

How to use default icons but different on each product

[@jakamocivnik3190]

help anyone please

[@theprompted]

You can save an image of the ones you want to use and use it like any other icon

[@abdullahnaveed1928]

It was an amazing video. But you haven't shared the code for this.

[@theprompted]

It's in the library after hopping on the newsletter.

[@filicarazvan9975]

where can i found the code ?

[@theprompted]

Link is in the description. At the bottom you can see the triangle toggle menus that can be opened to show the code

[@vedicspoons7254]

Tried your code but unfortunately it is not working for us, It just displays a black thing without any icons or text

[@theprompted]

What theme and theme version are you using?

[@CocoaCandleco]

you dont make adding the code very clear at all

[@ashishgowdaa3796]

After changing codes, following your instructions it's not displaying. Showing "could not find asset snippets/icon-with-text-custom.liquid" Can anyone help me

[@ashishgowdaa3796]

Solved by re-creating snippets thankyou 👍🏻 works perfectly ✌🏻

[@theprompted]

Glad you got it working!

[@idatta123]

Getting error. Invalid JSON in main-product.liquid

[@theprompted]

Check for commas. If you're pasting in the settings, you'll need a comma before and/or after. A comma is needed between when a curly bracket ends } and before one begins {