|

Tutorial: How To Dress Up Your TpT Store!

ByChristi Fultz

Hey, fellow TeachersPayTeachers friends! I have a quick tutorial for you today that will show you how to dress up your store. Check this out:

Blogger Tutorial: How To Dress Up Your TeachersPayTeachers Store



Can you spot the difference? This was my before:

In the new version, instead of a text quote and a link to my digital paper section I’ve highlighted this area with a picture and it still links to my digital papers. This is a great way to feature a section of your store, your newsletter list, Facebook page, or blog. The best part? It’s really easy!

Blogger Tutorial: How To Dress Up Your TeachersPayTeachers Store



There’s a video below, but here are some helpful tips with a few more helpful details.

How To:
1. Use your picture editing program of choice to design your picture. You want your picture to be 450 pixels by 150 pixels. This is the same was 1.5 wide by 0.5 inches tall.

I know a lot of teacher-bloggers use PowerPoint for their graphics, so we’ll look at that. Make sure the proportions are 3 inches wide by 1 inch tall. The actual picture size I used in PhotoShop was 1.5 wide by .5 tall, but PowerPoint wouldn’t let me pick those dimensions so I doubled the size to keep the ratio. Here’s an easy way to resize your picture before saving it in PowerPoint.

-Choose “file/save as pictures”

-Click “options” in the bottom left corner.

step 1

-Then look down at the bottom and change the width and height to 450/150. Click OK.

step 2

 

2. Save your picture now that it’s the correct size. For best results, use the same gray background as TpT (gray #f1f1f1) or make your image a transparent .PNG (clear background). This will prevent you from having a white background/box around your pretty new graphic. 


3. Upload your graphic to the internet. Keep the file name short to stay under 120 characters total. Most people will use Photobucket, but you can also save the image to your blog, domain, etc. If you don’t use PhotoBucket, you can put your image into a blog post and grab the html code for the image there. You just need the URL of your image stored somewhere on the internet. If you need to use a URL shortener, use tinyurl.com. Bit.ly won’t work for this.

This is the link you want if you’re using PhotoBucket

 

4. Copy the link where you want the quote section to go. In my case, it leads to the digital paper section of my store. 


5. Shorten the link using a tinyurl or bit.ly. This will help keep you under the 120 character limit. 


6. Type this code with YOUR information. You’ll need to put your information in where it has capital letters. You can type this code into a blog post as HTML to get a preview of what it will look like before you try it in your TpT store if you want. Be sure you’re using straight (not stylized) quotation marks, which will happen when typing the code in a Word, PowerPoint, etc. For best results, I just type the code right into my TpT store.

<a href=”LINK”><img src=”PICTURE”></a>
TeachersPayTeachers Quote Box Example
 

7. Now head over to your TeachersPayTeachers account and edit your profile. You will need to past your code into the “quote” section. Once you click save, you’ll see the preview if you did it correctly.

Blogger Tutorial: How To Dress Up Your TeachersPayTeachers Store

8. If you get an error, double check your links and be sure you’ve carefully completed the code. Leaving anything out or making a typo will break the code, so you’ll have to start over.


9. Admire your hard work!

I made a video tutorial so you can get an idea of how it works too. 


If you need me to make your graphic, upload it, and write the code for you I can do that as part of my services with my design site Design by Christi as part of my branding options {you can see some of my examples here for inspiration}. Send me an email if you want to purchase one, but I know YOU can do it! =) 


134 Comments

  6. This tutorial is AWESOME! I ended up having to save my pic at 1" x 1.5" to make it fit into the box on my TpT store page for some reason (I'm not techie, so I'm sure I messed something up), but everything else worked perfectly. Thank you so much!!!

    Heather @ Fun for Learning

  17. Wow! Thank you so much! You are so creative! I am having a slight problem, my picture is not clickable for some reason. Could you please tell me what I did wrong? Thank you for your time!
    Scarlett, Speech Is Sweet

  18. I thought that I left a comment this morning, but I guess it didn't post! This idea is GENIUS!! I've shared it with a bunch of TpT friends and we all agree. YOU ROCK!!

  20. Thank you SO MUCH for sharing this awesome tip! Not only are you so generous to share it here, but you were super helpful when I emailed you with a question! THANK YOU! 🙂 Krista

  22. YOU are Amazing, thank YOU for sharing this knowledge. I had no trouble following your instructions and now my store is looking fantastic. Thanks once again…… RebeccaB Designs

  26. Amazing! I played with the dimensions a little until I was happy with it! It still wants to be slightly blurry, but I think that is going to be part of the learning curve for this! What a fabulous tool! Thanks so much for posting about this!
    Carol
    Teachers Are Terrific!

  29. Hey Christi – I've had my tagline graphic updated for a few weeks. I saw today that you had written a tutorial for it. One thing that you might mention to your readers is if the size of the graphic is too tall (larger than the 450 x 150) that it pushes down the store content. I've seen several TPT Sellers that have followed your tutorial either miss the part about the sizing or just made it bigger. What this does is mess up the alignment of the top of the store. So instead of it looking pretty, it looks a bit wonky. So I thought I'd mention it. Best wishes,

    Danielle

    1. I moved the video down to the bottom so they'd see the written directions with tips right up top, but I definitely can't be responsible for everyone's sizing. No way I'm touching that one with a 10 foot pole!

  32. There are no words!!! This is amazing!! After a bit of trial and error (I may or may not be "photobucket-link-challenged") I finally figured it out. Love it! Thanks so much for sharing your knowledge so generously!!

  34. Thank you so much Christi! This is such a great way to dress up our stores! Do you know how to match the gray in Power Point? I'm not sure how to use the code referenced in the body of the post and although I made my image with a transparent background, it posted as a white background. I love how yours blends in with the TPT gray. Thank you so much for sharing your tutorial with us!

    Aimee
    Primarily Speaking

  41. This is mind blowing! I never knew you could put an image there. Thank you so much for this tutorial! I will definitely be adding this to my to-do list 🙂

  46. Amazing! This also appears to work in the other sections of the store profile as well! What a great tip, especially before the big site-wide sale. Thank you for sharing!

  58. When I tell you I was able to follow your directions and fix my store, you have no idea how AMAZING that is. Thank you so much for the step-by-step,

  65. Thank you so much! I so want to make mine beautiful like yours! Thanks for offering to look at code that doesn't work! I am emailing you with my code – I cannot get it to work 😐

  67. AWESOME!!
    Some people might not know that the image is "clickable" so you might want to put some sort of call to action such as "click here" in the image so people know that they can click on it.

    Awesome idea, thanks for sharing!

  71. Hey Christi!
    I just wanted you to know what a great tutorial you have and I mentioned it in my most recent blog post about GIF images. You inspired me to extend your tutorial and use a GIF image instead of a JPEG (or any other still image) in the quote section of my TpT Store.
    Here's the post about it: http://sciencegirllessons.blogspot.com/2015/02/techno-help-adding-more-gif-to-your.html

    Let me know what you think and if you like it!
    Rebecca
    Science Girl Lessons

  74. Thank you so much! It worked. I had put the url's in the wrong place on the code but I worked it out. What a difference his will make when I'm promoting my products. Sandy

  76. Thanks so much for these excellent directions, Christi! I got turned around in circles for a while because I tried to upload the image to Google Drive, but as soon as I put it on Photobucket, it worked like a charm!
    I love the "new look" that so many TpT stores now have, thanks to you and your generous sharing of your talent!
    Linda Nelson
    Primary Inspiration

  80. Thank you so much!!! I love that I got to hear your voice too, I feel like I know you since I follow you on IG! Hope to meet you in LV 🙂 Christina

  85. Many Thanks for Sharing This! One more great post on here.
    Love your blog, valuable and inspiring!
    I am just a newbie blogger and thanks to you I already got my TpT Store Widget Working 😉

    1. The gray box will automatically adjust in height to fit a taller image. I don't recommend it, only because TpT has worked on that consistency for each store.

  95. Hi there, I’m having trouble… when I copy the link from Photobucket
    my url is long I’ve used Bitly to shorten the link but the picture link is too long please can you help me?
    Little Birdy

  96. Hi,

    Ive tried so hard but cant get it to work…can you take a look at my code? I used bit.ly for the link and tiny url for the photo….

    I just get a question mark 🙁

    Thank you,

    cindy

  97. Amazing!!!!!!!! I tried one and I obviously wrote my note too small… OR somehow when I saved it, it shrunk like Honey I shrunk the kids?!! Any advise?

    1. You can add a code to resize it, which might be easier than trying to do it in a photo editor. Simply add a width code beside your image and adjust the number until you’re happy with the size.
      img src=”PICTURE” width=”450″

  98. I loved this tutorial and did it a couple months ago. I decided to change the image and now it is not working. I used tiny url, followed your exact instructions and it won’t upload to my TPT store anymore 🙁 Needless to say, I am super frustrated and have been trying for about an hour to make it work. I would like to pay you the $15 to make it but can’t find that option on your other blog. Could you send me the direct link? Thanks!

    1. I don’t have a direct purchase link because I like to discuss the project first to make sure we’re a good match. You can email me at msfultzscorner AT gmail DOT com if you’d like to get started.

      Also, try clearing your internet browsing history/cache. Sometimes that helps when graphics that were previously working become glitchy.

  101. I saw a few people who had done this so I googled it not knowing how to word my question. Your blog was the first to come up! You are genius! Thank you so much for taking the time to explain this.

  102. I bow to your awesomeness queen of the helpful tutorial! Your tutorial on the quote banner was so clear and easy to understand! THANK YOU for making me feel so much better about my storefront!! I am no longer ashamed and starting down the road toward proud! THANKS for ‘paying it forward’ and sharing your knowledge!

  103. It took me a LONG time – but I am new at all this html coding and hyperlinks. Great directions & video. My issue was those silly curved quotation marks! All I did was re-type them and it worked just right. THANKS SO MUCH!!!

  104. Thank you! I have been wanting to do this forever but was worried that it was too difficult for me. It was actually super easy! Great tutorial.

    Angelia

  106. I have done this successfully several times and am SO grateful for your help and expertise but always mess up one step because I hardly ever change my banner. I am not sure what I did wrong this time but am wondering if it is related to what I am supposed to insert where it says “PICTURE” in the coding. I know that you said in the video yours links somewhere else but for myself in photo bucket am I supposed to do a tiny url of the coding for IMAGE or HTML and insert that in where it says “PICTURE” – I feel slightly dumb as I have done this before and can’t figure out what I am doing wrong:) Thanks for any help. When I post to my TPT store it is just showing up as a little box with a tiny blue question mark inside of it.

  108. When I do this the image is small – it doesn’t fill the box like yours does. Any suggestions?? Thank you for the help and tutorial!!

  110. I’m having the same issue as Beck! I used this tutorial in the past and it worked beautifully… All I did was change to a different photo hosted on photobucket and the box just shows up blank. It won’t even show me the preview. Did TPT change something on their site? 🙁

  112. Thank you! I spent hours on this and your “pixel” step that was missing from so many other tutorials solved it all! Thank you so much! 🙂

    Kristine
    @whatiwishilearnedinschool

  114. I’ve been saving the link to your tutorial for what seems like forever! I finally got around to it today and have such a feeling of accomplishment! Thank you so much for this helpful blog tutorial!!

Comments are closed.