How To Add An Icons Bar To Your Shopify Store (use different icons for different products)
Vložit
- čas přidán 24. 07. 2024
- Visually show your customers how great your product or brand is by adding this custom Icons section. You can use it anywhere on your Shopify store to highlight product features, trust badges, brand awards, and more.
Don't worry if you're not yet comfortable with code, all the steps you need are in this video.
----------------------------
📄 Code for this video can be found here: theprompted.co/blogs/tutorial...
🚀 Want a FREE personalized action plan to help increase your conversion rate? Complete this simple form: theprompted.co/free-action-plan
👉 Want to hire us for personalized help? Book a consult call: theprompted.co/pages/hire-us
▶️ Subscribe for more videos like this ➡ @theprompted
----------------------------
TIMESTAMPS
00:00 - Intro
00:35 - Default "icon with text" section and its limitations to be solved
03:53 - Create a new metaobject and metafield
07:42 - Edit code
10:00 - Exploring the settings for the custom icons
15:54 - Adding the icons to any page of your store
17:32 - Setting the icons to static vs dynamic
20:55 - Summary & Final Thoughts
----------------------------
#shopify #tutorial #ecommerce
Themes: Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight
----------------------------
Music track: lucid by massobeats
Source: freetouse.com/music
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!
fantastic tutorial as always
Wow! absolutly useful
Great tutorial again!! 💪
Glad you liked it!
Thanks
amazing work. this is what i was finding on youtube. Do you also have tutorials on full customised theme
Great tutorial! How complicated would it be to make a specific block of icons to show up depending on Product Tag or Vendor?
Great question. Not too complicated. I'll add this to the list to look into
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
You're welcome and thanks for the suggestion!
Do you have any examples of your request to help me visualize it?
@@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 ?
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.
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.
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.
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.... :(
Yes... can definitely be a headache especially if you've lost track of all your customizations.
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)?
Never mind. I figured that out. Thank you once again for your informative tutorials.
Great! Glad you figured it out
@@HamperPick Can you help me with that?
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)
Awesome! Let me know how it goes. Canva has a pretty large library of icons so you can check them out.
@@theprompted This couldn't have worked any faster or better! Really appreciate it
@@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!
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.
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
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?
@@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
@@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
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.
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
Link is in the description
Great tutorial as always. Why I can't find "icons with text" block on my Down theme?
That’s strange. Which version of Dawn are you using?
@@theprompted Just checked and it's version 7
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.
I created some icons using canva but they look kind of small. Is there a minimum size thay should be respected?
Is the icon size slider not working for you? That should be the best way to adjust the size.
@@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
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
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.
Does your code work on Vision Theme (Emerald)?
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!
Hello reagards, Does works on a cell phone?
Yes, it should work on mobile devices as well
When I type in icons grouping one, it says value is not the correct formula
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.
How to use default icons but different on each product
help anyone please
You can save an image of the ones you want to use and use it like any other icon
Tried your code but unfortunately it is not working for us, It just displays a black thing without any icons or text
What theme and theme version are you using?
where can i found the code ?
Link is in the description. At the bottom you can see the triangle toggle menus that can be opened to show the code
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
Solved by re-creating snippets thankyou 👍🏻 works perfectly ✌🏻
Glad you got it working!
Getting error. Invalid JSON in main-product.liquid
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 {