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

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ส.ค. 2024

ความคิดเห็น • 65

  • @JRFitnessPro
    @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
      @theprompted  หลายเดือนก่อน

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

    • @JRFitnessPro
      @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
      @theprompted  หลายเดือนก่อน

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

    • @theprompted
      @theprompted  25 วันที่ผ่านมา

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

  • @shaikhsaloarhussain4133
    @shaikhsaloarhussain4133 3 หลายเดือนก่อน

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

  • @JahinShahriar
    @JahinShahriar 6 หลายเดือนก่อน

    fantastic tutorial as always

  • @saminasachs1230
    @saminasachs1230 4 หลายเดือนก่อน +1

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

    • @theprompted
      @theprompted  4 หลายเดือนก่อน

      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.

  • @MK-Tech
    @MK-Tech 6 หลายเดือนก่อน +1

    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
      @theprompted  6 หลายเดือนก่อน

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

  • @santiagosilva7742
    @santiagosilva7742 5 หลายเดือนก่อน

    Wow! absolutly useful

  • @DesignElect
    @DesignElect 5 หลายเดือนก่อน

    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
      @theprompted  5 หลายเดือนก่อน

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

    • @DesignElect
      @DesignElect 5 หลายเดือนก่อน

      @@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
      @theprompted  5 หลายเดือนก่อน

      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.

  • @Swaziman040
    @Swaziman040 6 หลายเดือนก่อน

    Great tutorial again!! 💪

    • @theprompted
      @theprompted  6 หลายเดือนก่อน

      Glad you liked it!

  • @benediktsujan2306
    @benediktsujan2306 3 หลายเดือนก่อน

    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
      @theprompted  3 หลายเดือนก่อน

      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.

  • @duke3068
    @duke3068 6 หลายเดือนก่อน

    Thanks

  • @morrocantocador
    @morrocantocador 2 หลายเดือนก่อน

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

    • @theprompted
      @theprompted  2 หลายเดือนก่อน

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

    • @morrocantocador
      @morrocantocador 2 หลายเดือนก่อน

      @@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

  • @HamperPick
    @HamperPick 2 หลายเดือนก่อน

    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
      @HamperPick 2 หลายเดือนก่อน

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

    • @theprompted
      @theprompted  2 หลายเดือนก่อน

      Great! Glad you figured it out

    • @ZamidarOrganic
      @ZamidarOrganic หลายเดือนก่อน

      @@HamperPick Can you help me with that?

  • @JoyAnne.Boutique
    @JoyAnne.Boutique 2 หลายเดือนก่อน

    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
      @theprompted  2 หลายเดือนก่อน +1

      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.

  • @genius_maker
    @genius_maker 5 หลายเดือนก่อน

    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
      @theprompted  5 หลายเดือนก่อน

      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
      @genius_maker 5 หลายเดือนก่อน

      @@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
      @genius_maker 5 หลายเดือนก่อน

      @@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
      @theprompted  5 หลายเดือนก่อน

      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
    @MK-Tech 6 หลายเดือนก่อน

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

    • @theprompted
      @theprompted  6 หลายเดือนก่อน

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

  • @thetailgatefoodie5970
    @thetailgatefoodie5970 6 หลายเดือนก่อน

    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
      @theprompted  6 หลายเดือนก่อน +1

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

    • @thetailgatefoodie5970
      @thetailgatefoodie5970 6 หลายเดือนก่อน

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

    • @thetailgatefoodie5970
      @thetailgatefoodie5970 6 หลายเดือนก่อน

      @@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
      @theprompted  6 หลายเดือนก่อน +1

      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.

  • @jjaimemejia
    @jjaimemejia 2 หลายเดือนก่อน

    Hello reagards, Does works on a cell phone?

    • @theprompted
      @theprompted  2 หลายเดือนก่อน

      Yes, it should work on mobile devices as well

  • @wunnaaung1254
    @wunnaaung1254 3 หลายเดือนก่อน

    Does your code work on Vision Theme (Emerald)?

    • @theprompted
      @theprompted  3 หลายเดือนก่อน

      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!

  • @ljubishatrajkov8473
    @ljubishatrajkov8473 5 หลายเดือนก่อน

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

    • @theprompted
      @theprompted  5 หลายเดือนก่อน

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

    • @ljubishatrajkov8473
      @ljubishatrajkov8473 5 หลายเดือนก่อน

      @@theprompted Just checked and it's version 7

    • @theprompted
      @theprompted  5 หลายเดือนก่อน

      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.

  • @jakamocivnik3190
    @jakamocivnik3190 4 หลายเดือนก่อน

    How to use default icons but different on each product

    • @jakamocivnik3190
      @jakamocivnik3190 4 หลายเดือนก่อน

      help anyone please

    • @theprompted
      @theprompted  4 หลายเดือนก่อน

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

  • @vedicspoons7254
    @vedicspoons7254 5 หลายเดือนก่อน

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

    • @theprompted
      @theprompted  5 หลายเดือนก่อน

      What theme and theme version are you using?

  • @muharremkapucu5177
    @muharremkapucu5177 5 หลายเดือนก่อน

    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
      @theprompted  5 หลายเดือนก่อน +1

      Link is in the description

  • @filicarazvan9975
    @filicarazvan9975 4 หลายเดือนก่อน

    where can i found the code ?

    • @theprompted
      @theprompted  4 หลายเดือนก่อน

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

  • @idatta123
    @idatta123 4 หลายเดือนก่อน

    Getting error. Invalid JSON in main-product.liquid

    • @theprompted
      @theprompted  4 หลายเดือนก่อน

      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 {

  • @ashishgowdaa3796
    @ashishgowdaa3796 6 หลายเดือนก่อน

    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
      @ashishgowdaa3796 6 หลายเดือนก่อน

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

    • @theprompted
      @theprompted  6 หลายเดือนก่อน

      Glad you got it working!