How to Jazz up your TpT store page: take it to the next level!

How to Jazz up your TpT store page: take it to the next level!

23/2/2015

A few weeks ago I was playing around with some html coding, and I figured out some cool ways to jazz up my TpT store page!

As you can see, I have a cool new banner where my "quote" used to be, and I have added some great visuals to my profile page too which link to some of my products, but these images can be of anything you like! Read more if you want to learn how to do it!

QUOTE BANNER:
1) Design your banner using any program you are comfortable with, I suggest making your banner maximum 8cm long. I have made a free template you use to make your own HERE!

2) Save it and upload it to anywhere you can access it online (I personally like to use Pinterest).

3) Go to your image, wherever it is online, and right click to 'copy image URL'.

4) Go to your accounts page where you edit your quote:
My TpT >My Account > Store profile > Edit

5) In your 'personal quote' section, type in the following:
<img src="https://whereveryousavedyourimage.jpg"/>
(Replace the website address with the one you copied in step 2!)

6) Hit save and then have a look at your store front! If your banner doesn't fit, go back and resize your image then repeat the steps again. If it does, do a happy dance and admire your new store!

Et voila, awesome new banner!

PROFILE PICTURES:
This is really unique and I've not seen anyone else do this yet! You're the first to hear about my little secrets!

1) Go to your accounts page where you edit your profile:
My TpT >My Account > Store profile > Edit

2) Simply copy your image URL in the same way as indicated above, and paste it within the <img src="....."</> link! (If you want to add an image of a product in your store, you won't need to upload your image to a website like Pinterest, as it is already online in your store! Simply copy image URL straight from TpT).

3) If you want your image to be 'clickable' so it links back to that product in your store, simply use this code:
<a href="https://teacherspayteachers.com/Product/YourProduct">
<img src="https://teacherspayteachers.com/YourProduct.jpg"</a>

P.S. This will also work with your banner if you want to make that clickable too! You should then get something that looks like this:

Pretty neat, huh! So there you have it, how to jazz up and add awesome images to your TpT store page to take it up to the next level!
If you have any questions or need some help, please leave me a comment below!

Melissa Soeltz link

23/2/2015 04:51:26 pm

This is fantastic! Thank you so much for sharing!

Reply

Teachers Resource Force link

24/2/2015 09:53:31 pm

Hi Melissa, you're welcome - I'm so glad you like it

Reply

Kacie Travis link

24/2/2015 05:51:17 pm

Hi TRF!

I tried inserting a picture in my profile and was semi-successful. It's there, but it's HUGE! Any ideas or suggestions? I just took an image from my blog and am not sure how to resize. My email is kacie_travis@yahoo.com if you would rather email me. Thanks!

Kacie
https://www.teacherspayteachers.com/Store/Kacie-Travis

Reply

Teachers Resource Force link

24/2/2015 10:04:58 pm

Hi Kacie! Sure, I can help you!

If you want to resize an existing image, you can use this code:

<img src="https://whereveryousavedyourimage.jpg" width="300" height="95"/>

I looked at the header on your blog and worked out the pixels above that might work - give them a go first. You can then always play around with the numbers!

I hope that helps!

Reply

Kacie Travis

28/2/2015 10:58:03 am

Thanks so much! It did help! Now, I am off to try to figure out this cool quote image! Thanks again!

MrTechnology on TpT link

2/2/2016 02:40:31 am

I had the same problem - I used http://ezgif.com/resize/ to resize my huge gif into something that would fit -- check out my store to see how it worked: www.teacherspayteachers.com/Store/Mrtechnology

Reply

Heather Renz link

27/2/2015 01:46:06 pm

Thank you so, so much for this tutorial! I got the image aded to my TpT store AND got it linked to the correct custom category!
Heather from <a href= http://mrsrenzclass.blogspot.com>Mrs. Renz Fourth Grade Class</a>
P.S. I'm your newest follower!

Reply

Teachers Resource Force link

28/2/2015 03:35:48 am

Hi Heather,

You're very welcome, I'm so glad it worked for you! Thanks for your support!

Reply

Gotta Luv It Creations link

1/3/2015 07:20:58 am

Hi -
My image is not loading successfully. I have tried two images that I uploaded to Pinterest:

https://www.pinterest.com/pin/523050944198871542/
https://www.pinterest.com/pin/523050944198871679/

Do you have any idea of what could be causing this? Pinterest link maybe?

Reply

Teachers Resource Force link

1/3/2015 07:25:58 am

Hi! It could be that you need to click on the image in it's own tab rather than taking it from the Pinterest preview, try using this link instead:

https://s-media-cache-ak0.pinimg.com/736x/d4/a6/3b/d4a63b092a377303fa117b4f58291d3b.jpg

You can shorten it in bit.ly if you need to :) Let me know how you get on!

Reply

Teresa Besson

1/3/2015 07:09:50 pm

Just did the quote banner for my store. Thanks so much for this tutorial. So easy to do with your instructions.

Reply

Teachers Resource Force link

2/3/2015 12:10:00 pm

Aw thanks Teresa, I'm so glad you found my instructions easy to follow!

Reply

Erin Beers link

7/3/2015 04:33:50 am

Thanks so much for sharing this! I LOVE my new quote!

Reply

Teachers Resource Force link

8/3/2015 12:38:09 pm

You're welcome Erin, so happy it worked so well for you!

Reply

Classy Colleagues (Lee Ann) link

7/3/2015 08:24:56 pm

Thank you so much for sharing this information. I have now uploaded a quote banner. And I made it a clickable link! Wow! I am SOOO excited now.

Reply

Teachers Resource Force link

8/3/2015 12:38:58 pm

You're most welcome Lee Ann, so glad it worked so well for you - well done!

Reply

Lee Ann

14/9/2015 07:26:41 pm

I am enjoying making quote banners! Thank you! As I browse other TPT stores, I see some quote banners which flash a sequence of more than one banner. Do you have instructions on how to make that happen?

Colleen link

22/3/2015 04:54:41 am

Thank you so much!!! It took me twenty tries, but I did it!! Not sure what I did right the twentieth time... THANK YOU!!

Reply

Teachers Resource Force link

9/4/2015 03:24:04 am

Hooray, that's so great! 20th time's a charm.. ;)

Reply

Jackie Albright link

8/4/2015 07:49:49 pm

Hi, I have tried this several...many....OK hundreds of times and to no avail! Not sure what I am doing wrong. I uploaded my image to Pinterest and copied the URL, inserted it into your "code" and copied it over to our Quote section. After saving it all that showed up at our store was part of the image code I had inserted on the My Accounts page. Please advise....would be soooo appreciated! Jackie

My image URL is:

https://s-media-cache-ak0.pinimg.com/originals/ef/e8/7e/efe87e7387ae23c34377cb0f7297575d.jpg

Reply

Teachers Resource Force link

9/4/2015 03:33:25 am

Hi Jackie, I admire your persistence! We will do it, don't worry.

OK a few things first:

1) I notice that your image is a jpg but the background is white, if you'd rather not have a white background I think you're better off saving it as a png file with a transparent background. If you need a hand with this, please let me know.

2) So to clarify, what you should be typing in is:

< img src="https://s-media-cache-ak0.pinimg.com/originals/ef/e8/7e/efe87e7387ae23c34377cb0f7297575d.jpg"/ > (without the spaces) That should work!

Feel free to drop me an email if you need more help! teachersresourceforce@yahoo.com

Reply

Carla McLeod link

8/4/2015 09:02:28 pm

Thank you so much for sharing! I've been dying to know how sellers have been spiffing up their stores with these great quote banners. Now, thanks to you, I've got one of my own! Thank you so much again!

Carla McLeod

P.S. I am your newest subscriber!

Reply

Teachers Resource Force link

9/4/2015 03:37:19 am

Aw thank you so much Carla, I figured it out a while ago all by myself and was thrilled with the results! So happy you managed to do your own and thanks for subbing - I am following you on G+ too :)

Reply

Corinne

26/4/2015 06:35:32 pm

I'm so excited to try this. I can't thank you enough for sharing your tips and tricks! My shop will look so much cuter!! :)

Reply

Teachers Resource Force - Tea link

17/5/2015 03:11:13 pm

Yay Corinne, so happy to be able to help!

Reply

Matt Fuentes link

28/4/2015 09:31:28 am

This was a great help thanks!!

-Matt
https://www.teacherspayteachers.com/Store/Teach-2-Live

Reply

Teachers Resource Force link

17/5/2015 03:13:35 pm

You're most welcome Matt! If you want, you can make your background transparent and save as a png to get rid of the white background! Also, making it slightly smaller will fit in the box a little better :) Great job!

Reply

Lee Ann link

6/5/2015 07:35:35 am

What maximum dimensions should I be trying to get before I try uploading the image so that it will be the right size?

Reply

Teachers Resource Force link

17/5/2015 03:09:49 pm

I'd max out at 8cm width!

Reply

Print Path link

17/5/2015 11:20:27 am

It worked! I am absolutely thrilled with my quote. Thanks a billion!
https://www.teacherspayteachers.com/Store/Printpath

Reply

Teachers Resource Force link

17/5/2015 03:09:01 pm

Yay so happy it worked out! It looks fantastic!

Reply

Joyce link

17/5/2015 03:29:02 pm

I finally got it. It took over an hour, but I did it. Thanks!

Reply

Teachers Resource Force link

17/5/2015 03:32:40 pm

Hoorah! You're welcome, persistence pays off - well done you!

Jennifer

6/7/2015 10:33:07 am

Your banner is adorable! How did you do the rotating banner screens? That is so cute!

Reply

Teachers Resource Force link

11/7/2015 10:35:24 am

Thank you so much! I just rotated the images, you can do that in any software!

Joyce link

17/5/2015 03:01:41 pm

I am so frustrated. Like Jackie, I too am getting numbers instead of my image. I don't know how to put an image on Pinterest from my desktop, so I put it on FB and on my blog. From my blog I put it to Pinterest. Nothing works.

I deleted the post from my blog because I don't want this on there and it didn't work anyway. What am I doing wrong? I really want to make this work but have tried over a dozen times.

<img src="https://www.pinterest.com/pin/303570831109657449" alt="303570831109657449" />

Reply

Teachers Resource Force link

17/5/2015 03:07:37 pm

Hi Joyce, don't worry! We'll do it together!

From Pinterest you need to ensure you are clicking all the way until you get to the final image address, so actually the address you need to be typing is this one:

https://s-media-cache-ak0.pinimg.com/736x/97/8f/13/978f130559d4ff974eaac38b2bbba3ce.jpg

Ultimately it doesn't matter where you host the image originally, just ensure you open your image on its own in the browser!

To upload an image from your desktop to Pinterest, all you do is find the little cross on the bottom right of the page and click "upload pin".

Give it another go with the address I posted above, and let me know how you get on! :)

Reply

Pam Davidson link

30/5/2015 03:48:06 pm

Hi! Thanks so, so much for this wonderful information! I sent you a cup of tea to tell you thank you! Question - Now that I have added a graphic to my personal quote, how can I make it a clickable link? Thanks again!!
xo

Reply

Teachers Resource Force link

30/5/2015 03:57:07 pm

Pam, you're most welcome and you are so incredibly generous - thank you! I will really enjoy those cups of tea, you're so lovely! I had a look and your banner looks fabulous, great job! To add a clickable link:

<a href="https://teacherspayteachers.com/Product/YourProduct">
<img src="https://teacherspayteachers.com/YourProduct.jpg"</a>

Before your image link you need to add your destination link as seen in the example above. I hope this helps! Please let me know if you need any more help! :)

Reply

Pam Davidson link

30/5/2015 04:14:15 pm

Hi! Thanks so much for your quick response! I think I've got it! But - now there's a little box with a question mark in the space as well. How do I remove this?

Melissa ~ Teacher Treasure Hunter link

3/6/2015 05:22:10 am

Wow! Thanks for sharing. Your tutorial for adding the quote banner looks even easier than the one I followed and the template will be handy. I'm so excited about the idea of adding pictures to your profile. Genius! Thanks you so much for the great info!

Reply

Teachers Resource Force link

7/6/2015 05:45:52 am

Aw thank you for your very kind words Melissa, I'm so glad this was easy to follow! I had a look at your store, your banner looks fantastic, great work!

Reply

Spellbound in Second link

14/6/2015 08:53:00 pm

Thank you so much! Your step-by-step really helped me set up my quotes section!

Reply

Teachers Resource Force link

11/7/2015 10:36:00 am

You're most welcome, so happy to help!

Reply

Traci link

15/6/2015 06:32:49 pm

Hi, thank you so much for this tutorial. I've have been trying to figure how to do this. I did it successfully, but it's really small. Do you know why it came out so small? Here's the link to my storefront so you can see. Thanks for your help!
https://www.teacherspayteachers.com/Store/Traci-Bender-The-Bender-Bunch

Reply

Teachers Resource Force link

21/7/2015 03:58:25 am

Great job Traci, looks like you figured it out! :D

Reply

Katherin link

20/6/2015 05:56:34 pm

Hi thank you for your tutorial It took me a couple of tries but finally got it and sure am mighty pleased with the outcome

Reply

Teachers Resource Force link

11/7/2015 10:36:43 am

That's excellent, so pleased you managed it and are proud of yourself! :D

Reply

Roberta link

24/6/2015 03:12:55 pm

Thank you so much! It was very useful. You saved me! It worked great despite the fact that I had difficulties making this code in less than 120 characters.

Thanx!

FYI: I am your new follower!

Reply

Teachers Resource Force link

21/7/2015 03:59:43 am

Yay, so glad I was able to help and well done for figuring it out! :) Thanks for following and showing your support!

Reply

Amanda link

11/7/2015 09:42:59 am

Thank you so much for this great tutorial! I got my quote banner up in no time! However, when I tried adding a link to my banner it gave me an error message saying the code was too long. Do you have to add a link to TpT or can you add a link to your blog in the banner?

Reply

Amanda

11/7/2015 10:52:10 am

I got it to work. :) Thanks!

Reply

Teachers Resource Force link

21/7/2015 04:00:11 am

Yay, well done!

Lisa Robles link

11/7/2015 09:39:23 pm

Thanks so much! I used the template and it was super easy! Just got the back from the TPT conference and they mentioned this. I just needed to figure it out. Thanks so much!!!
Here's what it looks like now!
https://www.teacherspayteachers.com/Store/Lisateachrs-Classroom

Reply

Teachers Resource Force link

21/7/2015 04:01:36 am

Awesome Lisa, so cool that this was mentioned in the conference as well! It looks great, and if you want the transparent background save the image as a png ;)

Reply

Tami link

20/7/2015 12:40:59 am

Thank you for sharing this! I have read so many tutorials on this and it NEVER seemed to work. Finally, with your help, I managed to get it to work but I can not get it larger. It is very small and the pictures turn blurry the minute I save. I didn't know if this has something to do with my being on a PC or not. It seems most of the tutorials are for Mac. Can you help me? Thanks

Reply

Teachers Resource Force link

21/7/2015 04:06:23 am

HI Tami, I'm so glad you found my tutorial so helpful! I'm a PC user as well so I'd be delighted to help you out. Feel free to email me at teachersresourceforce@yahoo.com!

Reply

Cassie

21/7/2015 11:25:49 am

Hi, is there away to link the header picture to your facebook?

Reply

Teachers Resource Force link

21/7/2015 12:39:09 pm

Hi Cassie!

It sure is, simply use the coding below!

<a href="https://facebook.com/yourlink">
<img src="https://whereyousavedyourimage.com"</a>

Remember you can use bitly.com to shorten any links if they are too long! Hope that helps!

Reply

melissa link

21/7/2015 09:48:39 pm

WOW! What a wonderful tutorial! This was exactly what I was looking for! Thank you so much for posting this! :)

Reply

Teachers Resource Force link

30/7/2015 10:51:01 am

Yay, so glad you found this helpful Melissa!

Reply

Renee Dawn link

29/7/2015 01:44:49 pm

You're wonderful!!!
Thanks so much for spreading the love, and beautiful quote-spaces everywhere!!

Reply

Teachers Resource Force link

30/7/2015 10:56:36 am

Aw Renee, thanks for your very kind words! I'm just happy I was able to do my bit to help others :)

Reply

Emily link

5/8/2015 09:43:34 pm

I have tried and tried this and CAN NOT get it to work. I uploaded my original image to flickr and used that address but only get the name of the image showing on my storefront. I can click successfully through to what I want it to link to but the image just will not show up. Can you help? https://www.teacherspayteachers.com/Store/Thesmartstudio

Reply

Teachers Resource Force link

6/8/2015 10:06:05 am

I see you managed to do it, yay! Looks great and well done :D

Reply

Bia link

29/11/2015 01:19:32 am

Thanks! It took me a few tries to get the image to look like what I wanted it to look like! But it worked!!

Reply

Teachers Resource Force link

4/2/2016 09:13:47 pm

Yay, glad you got it working - well done!

Reply

Cristina

28/2/2016 01:26:37 pm

Thank you, very useful.

Reply

BJ and Amna link

11/3/2016 04:57:09 pm

Thank you for your tutorial! I got it to work for our banner!
Thank you for sharing with us!

https://www.teacherspayteachers.com/Store/Grrade-A-Lessons

BJ and Amna

Reply

Lauren Winter link

19/5/2016 03:22:18 am

THANK YOU!!!!! I have tried several tutorials that did not work for me. Yours has been the easiest, quickest, and it worked!! Thank you again and again :)

Reply

Teachers Resource Force link

21/5/2016 09:17:17 am

Aww you're most welcome Lauren, it makes me so happy to know you found my tutorial so helpful! Well done!

Reply

Ashley T link

25/8/2016 05:38:45 pm

Ok I tried this probably 20 times before I got it right. My quote box kept coming out too large. If anyone is having the same problem copy and past this link in your quote box section and enter your image URL where prompted. Adjust the width and height numbers if needed but, this should fit on your TPT site.

<img src="ENTER IMAGE URL HERE" width="450" height="250" alt="2bJ3ncF" />

Reply

Leave a Reply.