Wednesday, June 23, 2010

How to install a Pocket Shop Widget on Your Blogger Blog

Here is the step-by-step info on how to add a Pocket Shop widget to the sidebar on your Blogger (blogspot) blog!

  1. Click on Dashboard in the top bar to see your blog overview.

  2. Click Design for the blog to which you wish to add the Pocket Shop widget. The page should show a section called "Add and Arrange Page Elements" with a map of the visual layout of your blog.

  3. Click "Add a Gadget" in the section where you'd like for the widget to be placed.

  4. A new window titled "Add a Gadget" window will open.

  5. From the Basics section, select "HTML/JavaScript" by clicking the blue Plus symbol.

  6. The window now reads "Configure HTML/JavaScript". Paste the code supplied on the Craft Cult Get a Widget page into the 'Content' section. You may also optionally enter an title which will appear above the widget on your blog.

  7. Click the blue 'Save' button to finish creating the widget.

  8. You may then drag the new widget into the position you prefer in the layout.

68 comments:

  1. Thank you for these easy, step-by-step instructions!

    ReplyDelete
  2. This is such a great widget! Very easy to set up. Plus there's a tab that shows customer feedback. I love it! Thanks.

    ReplyDelete
  3. I'm having a problem with my widget getting cut off a bit. The widget is so pretty that I'd like to show it off in all it's glory... and I'm a bit of a perfectionist. It isn't cut off a lot, just enough to bug me. Any tips? I've already tried to add some centering html. That didn't work.

    http://nightowlcraftworks.blogspot.com/

    ReplyDelete
  4. Hi Night Owl, it looks like the sidebar area on your blog is 160 pixels wide, while the widget is 185 pixels. I experimented with the CSS a bit. It's being cut off by a declaration 'overflow:hidden' on the parent element, too.

    You could add this code to the widget HTML to fix it:


    < style>
    #rsidebar{ overflow:visible !important; }
    #html3{ margin-left:-12px; }
    < /style>


    This will move the widget over to the left 12 pixels so it wouldn't overshoot the right border, and also turn off the clipping so the whole thing is visible even though the width exceeds the container width.

    Be sure to take out the space after the opening < for the style tags, too - I had to add those so Blogger would let me post the comment. Hope that helps.

    ReplyDelete
  5. Oye! I'm not sure what I'm doing wrong. Do I put this first? After? In between the script tags? I tried working it in a bunch of different ways. I took out the spaces in the style tags, and the space in the rsidebar line & html line.

    Any other suggestions? I wish I was better at code. You have been so helpful & I hate being a bother for something so small :P

    ReplyDelete
  6. How do we add widgets to our web sites?
    Thanks.
    Arlene

    ReplyDelete
  7. holy crap, i am pretty much IN LOVE with this thing!! THANK YOU so much craft cult!

    ReplyDelete
  8. Hi Night Owl,

    I'm not sure, is there a page-wide place to put extra CSS on blogger? That would be the best. I don't know if putting it in the sidebar itself would work, actually. once you start modifying themes it can get a bit tricky. Adding a separate HTL/JavaScript Gadget with just that style code, and putting it above the other one, might do the trick. I'll check on this for you.

    Arlene, it depends a lot on how your website is set up! How do you usually edit your site? it can vary a lot. If you have access to the HTML, pasting in the code anywhere you'd like the widget to appear should work fine. If you'd like to show me your website or more specifics, you may also send an email to julian -@- craftcult.com.

    And thanks to who is enjoying it, you're quite welcome!

    ReplyDelete
  9. Hello,
    This is a great addition to my blog, thanks! I'm having the same issue as Night Owl. It's cut off a little. I am clueless when it comes to HTML so I'd appreciate the help too. I've tried the suggestion but didn't get any results and not sure what the extra CSS means in the last post.
    Thanks

    ReplyDelete
  10. I think I found where to go just not sure what to type in the add CSS area. Here are the steps to get there through blogger - Click on Design Tab, Template Designer (new), Advanced scroll to the bottom and you'll find add CSS. Hope that's helpful.?

    ReplyDelete
  11. iS THIS A FREE WIDGET OR IS THERE A CHARGE?
    i LOVE THE CONCEPT AND WOULD LOVE TO ADD TO MY BLOG .... IF IT IS A FREEBIE !!

    TELL ME, SOMEONE WHO HAS IT!!
    MAURINE

    ReplyDelete
  12. Hi Stitchinprim - yes, it's completely free of charge. Simply go to to http://craftcult.com/shop_widget.php and you can make one and embed it in your site anytime you're ready!

    ReplyDelete
  13. Hi, I'm having problems with the shop widget too. I think, at least in my case, it's because I'm using a 3-column template. Can you give me a work-around? I tried the code you gave NightOwl, but that didn't work (I tried it in the same HTML box as the script, both before and after the script, and in the template (where it caused a bunch of code to show across the very top of my blog, above the banner). I love the lined paper one because it's old-fashioned looking and that fits my primitive style to a T! Thanks if you can help me!

    http://prairieprimitivesfolkart.blogspot.com

    ReplyDelete
  14. Hi Prarie Primitives - in some cases, the widget is simply going to be too wide to fit in a Sidebar. Integrating it in those cases requires a good knowledge of CSS and your template. The necessary code is different for every single layout, though the same principles usually apply.

    (as far as pasting in the code above - you must remove the space between the < and style in the style tags, or it won't be parsed as
    a CSS style block - I put that in there so blogger would handle it right).

    Unfortunately, your Sidebar is only 133 px wide, and the widget is 185px.

    It's possible to make it all visible, by disabling overflow:hidden on the #newsidebar-wrapper element, and changing #HTML2 to have a left margin of -30px. But, then you have the left Sidebar overlapping the central content. I can fidget with it a bit later on and see if I can come up with something that works, but it's fairly difficult when your Sidebar is too narrow!

    ReplyDelete
  15. Thank you, Craftcult! Awesome that "Feedback" appears!! (Actually, the whole thing is awesome!)

    ReplyDelete
  16. LOVE this widget -- especially the option to show only one shop section. Thank you! One request, though -- any chance it could be made so we can select the specific items to show (i.e. all of my Fall items)? Just a wish ... :-)

    ReplyDelete
  17. Any reason why I wouldn't be able to move the widget around?

    ReplyDelete
  18. Thanks mLindvall!

    Hi Susan, the best way to show specific items (other than a section) is to select them as featured items in your Etsy shop. You can select an unlimited number of items as Featured on Etsy, and the first 4 will show in the top of your shop there. But then, say you select 50 items as featured,and configure your widget to show the featured items - your Pocket Shop will show all 50 items, in the order you select in Etsy.

    Hi 10yen - no, there isn't any reason I know of for that. It should appear where ever you place the code block. Are you putting it on a blogspot blog?

    October 2, 2010 4:53 AM

    ReplyDelete
  19. yes I am I've taken the widget down temporarily and haven't had the chance to try again. ever time I click to move the widget it just stays there. 0o

    ReplyDelete
  20. I see - so, in the Blogger design panel, draggin the HTML/JavaScript Gadget with the widget code to reposition it isn't working?

    ReplyDelete
  21. Help! I've followed all the steps and I get nothing! How come? My site is gellybeanstitches.blogspot.com. Something must be seet up wrong. Thanks in advance!

    ReplyDelete
  22. Looks like you got it now, Gellybean!

    I should also note to everyone that another way to get assistance is to email me at info (@) craftcult.com. I'll probably see an email sooner than posts on here. Of course posting here works great, too.

    ReplyDelete
  23. It work!!! I like it. I onle do my blog, becouse it Widget is useful. Welcome http://baymut.blogspot.com/

    ReplyDelete
  24. Oh this is soooo sweet! Thanks for your help!
    xoxox~Poe~

    ReplyDelete
  25. Thanks for making this widget it's super rad!

    ReplyDelete
  26. I have a problem with the widget coming up in Internet Explorer. I haven't checked other browsers, but it looks great in Firefox. Any solutions?

    ReplyDelete
  27. Hi Heather, I tested it in all IE versions, so it should work okay. Which IE are you viewing it in?

    ReplyDelete
  28. I think I might have figured it out. Something about widgetizing my sidebar in wordpress?

    ReplyDelete
  29. That's good, I hope it works! If the ones on this page show up for you in IE, it should work everywhere else that allows JavaScript widgets, too.

    ReplyDelete
  30. Thank you, I am not really computer savy, but I was able to put a widget on my blog too. Your directions were easy to follow.

    ReplyDelete
  31. I have a question about google analytics and the blogger widget. Will the widget show as a 'visitor' on my google analytics? I keep getting a number of visits that are only a few seconds and I don't understand. I have filtered my IP from the google analytics, so I know it's not me visiting my page. Any comments are appreciated!! Gary

    ReplyDelete
  32. BTW, your directions were great. You have a wonderful product/service and thank you very much for making it free!!!!! -gary

    ReplyDelete
  33. Thanks Gary and LJLS.

    Google Analytics only counts actual visits from browsers, and including a widget on your page won't affect your GA info.

    ReplyDelete
  34. thanks J! It's nice to be able to post a question on a forum type page and actually get a response! I appreciate it!

    ReplyDelete
  35. Thank you so much for these clear instructions! I'm so excited that I *finally* have my shop widget on my blog! :D

    ReplyDelete
  36. Thanks so much! I was wondering how the heck to do this for the past couple of weeks. I'm so happy I stumbled upon your blog :)

    Thanks again!

    ReplyDelete
  37. WOW, that is so amazing. I am really not good with this computer stuff and I did it with your clear instructions. Thankyou so much!!

    ReplyDelete
  38. This is great - I followed your instructions and it works perfectly. Took me like five minutes. What a great tool you have developed for people. Thank you so much.

    - Nina
    Natural Gorgeous
    http://www.etsy.com/shop/NaturalGorgeous

    ReplyDelete
  39. Wow, took me awhile b/c I couldn't find the Blue Plus sign next to anything that said "HTML/Java". I looked and looked and looked -- finally, there it was, right in front of me, DUH.

    Thanks! Now if only someone could tell me what the heck I'm supposed to "blog" about, I'd be in good shape :-O

    ReplyDelete
  40. I think the widget is great but I don`t have an Etsy shop, I am on Folksy. Any chance of a Folksy one?
    Linda

    ReplyDelete
  41. Thank you very much! I now have your widget on my blog. And without tearing out too much hair. Actually - without tearing out ANY hair. Crikey!

    ReplyDelete
  42. Hi, I love this widget and I really appreciate the work you have put into it to make it so accessible! I always look forward to updating my favorites widget. Is there a way to make the background black? thanks again! Heather

    ReplyDelete
  43. So awesome! Now that I finally have a blog, I love that I can have my shop shown! Thanks so much, Craftcult!

    ReplyDelete
  44. Wow! So amazing and so simple to do! Your instructions made it very easy. Is there a way I can center the widget in my column? I've tried but can't find a way to do it. It would look so much better centered. Can you take a peek and see? Thanks again! This is wonderful!
    www.custommemoryblankets.com

    ReplyDelete
  45. Wow, thanks ever so much! This is a terrific tool!

    ReplyDelete
  46. Awesome, terrific tool and so easy to use at Blog Spot.

    ReplyDelete
  47. Thank for this! So useful. I thought I was quite knowledgeable about the techincal stuff, but since starting a Blog, I realise that I'm not! I've bookmarked your page!

    ReplyDelete
  48. SO FUN!!!! Thanks so much :)

    ReplyDelete
  49. Thank you, I will give this a try!
    Deb

    ReplyDelete
  50. I successfully added the Craft Cult Widget as a gadget, but the blogger gadget is still behind it. How can I get rid of that?

    frenchbz@aol.com

    ReplyDelete
  51. I would like so much it could work but didn't. I tried many times but failed. I can add the widget but it never appeared on my Blog.

    ReplyDelete
  52. This is interesting! I enjoyed reading your great post.Thanks for the valuable information and insights you have shared here. Portrait Of Maya With Her Doll

    ReplyDelete
  53. are you still doing this? I am not sure I understand how to do it or not, think not. duhhhh but am looking for ways that I can promote our store.
    Hope too hear from you,
    Sue

    ReplyDelete
  54. Craftcult.com is no longer working. Many of us have used this pocket widget for our Etsy blogs. Craftcult.com is not answering emails. Use of Etsy Mini is an alternative until we figure out what has happened to the shop widget.

    ReplyDelete
  55. Very efficiently written information. It will be valuable to everyone who uses it, including myself. Thanks a lot. Alloy wheel repair How to fix bent wheel using our wheel-shark.com wheel straightener tool.

    ReplyDelete
  56. I think you are right. I was pleased when I heard one of my student saying, "I like it here because you are not a bunch of eggheads." We definitely hire tutors who can develop a positive rapport with the student.

    Metal Zips

    ReplyDelete