Written on: May 9, 2016
There are 4 different graphics you can use to jazz up your TpT store: the Store Banner (Leaderboard), the Column Banner, the Profile Photo and the Personal Quote box. This tutorial will show you how to install them, so Let’s get started!
If you come across any issues or confusion with this tutorial, please don’t hesitate to contact me.
Please note: If red or pink is used in your design, the image MAY appear a bit blurry on those colors. There isn’t anything I can do about this issue. It has something to do with the way TpT handles images in the upload, sorry for any inconvenience.
The TpT Store Banner
Step 1: Click on the drop down arrow on the MyTpT link, then click on Dashboard.
Step 2: Scroll down to the bottom of the page and in the second column under MARKETING & PROMOTIONS, click on Customize Your Store.
Step 3: Under Store Page Leaderboard, the first option is to click on browse to navigate to where your banner image is saved on your computer to upload it.
Step 4: The second option allows you to link the banner to one of your products or your TpT homepage. You will have to link to something, so if you don’t have any products to link to, just put your TpT homepage.
Step 5: Click on the green Save button. You will now notice a preview of your banner. You are done with this banner.
The TpT Store Page Column Banner
Step 1: Click on the drop down arrow on the MyTpT link, then click on Dashboard.
Step 2: Scroll down to the bottom of the page and in the second column under MARKETING & PROMOTIONS, click on Customize Your Store.
Step 3: Under Store Page Column Banner, the first option is to click on browse to navigate to where your column banner image is saved on your computer to upload it.
Step 4: The second option allows you to link the column banner to one of your products or your TpT homepage. You will have to link to something, so if you don’t have any products to link to, just put your TpT homepage.
Step 5: Click on the green Save button. You will now notice a preview of your banner. You are done with this banner.
The TpT Profile Picture
Step 1: Click on the drop down arrow on the MyTpT link, then click on My Account.
Step 2: Click on Store Profile.
Step 3: On the My Account: Store Profile page, click on the orange EDIT at the bottom of the page.
Step 4: Click on the add photo link.
Step 5: On this page, the first option is to click on browse to navigate to where your profile image is saved on your computer to upload it.
Step 6: The second option on this page is to click on the PREVIEW button to view your profile image and make sure it’s ok. You are done with this banner.
Step 7: Make sure the image is ok and click on the red SAVE PHOTO button. You are done with this banner.
The TpT Personal Quote Box
This image is the most challenging, which is why I placed it last. But don’t worry, I am giving you step by step instructions with screenshots so you shouldn’t have a problem.
There are 3 Parts for the Personal Quote Box. If you are using the Blogger Platform, complete Parts 1 and 3. If you are using the WordPress Platform, complete Parts 2 and 3.
Part 1: For Blogger Clients
Step 1: The quote image needs to be uploaded online “somewhere”. I like to upload all images for your blog onto a page that does NOT appear on your top navigation nor seen by any of your visitors. Normally, I will have created this page already named something like Images for your Blog. Hover over the page name and click on edit link beneath the page name.
If you do not have this page, more than likely your blog images are on your Photobucket account. But for the sake of following this tutorial, please create a new page and name it Images for your Blog.
Step 2: Click on the Insert image option box.
Step 3: Make sure you are on the Upload tab, click on Choose files to browse to find the quote image to upload. Once it uploads, you will see it, click on it so that a blue border appears, it is now selected, click on Add selected.
Step 4: The quote image is now in the text editor. Blogger uploads and shows a medium sized image if the image is somewhat large, we want it to show the original size. Click on the quote image and it will be highlighted in blue, you will notice text underneath the image, click on original size and you will see the image get larger to the original size. Wonderful. Now click on the orange Update button on the top right hand side.
Step 5: You are now back on the list of all your pages. Hover over the page name and click on the view link beneath the page name.
Step 6: That blog page will open in a new browser tab, and you will see the quote image. Right click on it and choose View Image.
Step 7: This will open that image. In the address box, you will see a link for that image that is now hosted on blogger. Please copy the full link.
Step 8: Open up a blank text editor document like Notepad, Wordpad, or any text editor. Type the following: Quote Image Link then double space. Now paste the image link under the heading your just typed. Save this document as quote links to save for later use.
Step 9: You can LINK this quote image to one of your TpT products or not. However, even if you aren’t going to link to one of your products, for the sake of this tutorial, link to your TpT homepage instead just so you know how to do it. Copy the full link of the product or the homepage and paste it into the quote links text document you just created. Label this link Product Link, double space and paste the product link. Save this document.
So now you have 2 links, one for the image itself and one to where it will be linked to, either a produt or your TpT homepage.
Step 10: Shortening links. In order to not exceed TpT’s quote character limits, the links need to be shortened.
a) Go to bitly.com. Paste the full Quote Image Link into the SHORTEN SHARE MEASURE box and click Shorten. You will then see a shortened version of the link in that same box, click on the orange COPY button.
b) In your text document double space after the link under Quote Image link and type a new heading: Shortened Quote Image Link. Double space again and paste the new shortened link under Shortened Quote Image Link. Do the same with the Product or Homepage Link so that your text document looks like this and you have a shortened link for both the quote image and the link to where you want it linked to, a product or the homepage:
Step 11: You are now going to use both the shortened links to prepare the CODE for your quote image.
a) On your text document double space after the last bit of content and add the following heading: Quote Code.
b) Double space again and copy the following code to your text document:
<a href="PRODUCT LINK"><img src="QUOTE IMAGE LINK"></a>
Your text document will now look like this:
Step 12: Now we are going to insert both shortened codes into the code you just copied and pasted into your text document.
a) IMPORTANT NOTE: Please be careful when you HIGHLIGHT as instructed in b below. Please do not delete any of the " quotes on either side of the shortened links or this code will not work, it has to look exactly shown to you below in the example below to work correctly in TpT.
b) From the text document, copy the shortened Product Link and highlight the words PRODUCT LINK and paste the shortened link. Copy the shortened Quote Image Link and highlight the words QUOTE IMAGE LINK and paste the shortened link. Be sure to save your text document.
The text document under Quote Code should now look like this:
c) Guess what? You are now ready to ADD this code to your TpT Account. YAAAAY! Go to PART 3 Below.
Part 2: For WordPress Clients
Step 1: The quote image needs to be uploaded to your Media Library. Under Media Library, click Add New and browse to find the quote image on your computer. Click on the edit link at the far right to view the added quote image.
Step 2: After clicking on the edit link, you will see a preview of the quote image and to the far right hand side, the full link for the quote image. Copy the FULL quote image link.
Step 3: Open up a blank text editor document like Notepad, Wordpad, or any text editor. Type the following: Quote Image Link then double space. Now paste the image link under the heading your just typed. Save this document as quote links to save for later use.
Step 4: You can LINK this quote image to one of your TpT products or not. However, even if you aren’t going to link to one of your products, for the sake of this tutorial, link to your TpT homepage instead just so you know how to do it. Copy the full link of the product or the homepage and paste it into the quote links text document you just created. Label this link Product Link, double space and paste the product link. Save this document.
So now you have 2 links, one for the image itself and one to where it will be linked to, either a produt or your TpT homepage.
Step 5: Shortening links. In order to not exceed TpT’s quote character limits, the links need to be shortened.
a) Go to bitly.com. Paste the full Quote Image Link into the SHORTEN SHARE MEASURE box and click Shorten. You will then see a shortened version of the link in that same box, click on the orange COPY button.
b) In your text document double space after the link under Quote Image link and type a new heading: Shortened Quote Image Link. Double space again and paste the new shortened link under Shortened Quote Image Link. Do the same with the Product or Homepage Link so that your text document looks like this and you have a shortened link for both the quote image and the link to where you want it linked to, a product or the homepage:
Step 6: You are now going to use both the shortened links to prepare the CODE for your quote image.
a) On your text document double space after the last bit of content and add the following heading: Quote Code.
b) Double space again and copy the following code to your text document:
<a href="PRODUCT LINK"><img src="QUOTE IMAGE LINK"></a>
Your text document will now look like this:
Step 7: Now we are going to insert both shortened codes into the code you just copied and pasted into your text document.
a) IMPORTANT NOTE: Please be careful when you HIGHLIGHT as instructed in b below. Please do not delete any of the " quotes on either side of the shortened links or this code will not work, it has to look exactly shown to you below in the example below to work correctly in TpT.
b) From the text document, copy the shortened Product Link and highlight the words PRODUCT LINK and paste the shortened link. Copy the shortened Quote Image Link and highlight the words QUOTE IMAGE LINK and paste the shortened link. Be sure to save your text document.
The text document under Quote Code should now look like this:
c) Guess what? You are now ready to ADD this code to your TpT Account. YAAAAY! Go to PART 3 Below.
Part 3: For Teachers pay Teachers
Step 1: Click on the drop down arrow on the MyTpT link, then click on My Account.
Step 2: Click on Store Profile.
Step 3: On the My Account: Store Profile page, click on the orange EDIT at the bottom of the page.
Step 4: Scroll down to the third option, Personal Quote.
Step 5: Copy and paste the quote code into this box and scroll down to the very bottom of the page and click on the orange SAVE button.
Step 6: After you save, you will see a preview of the quote image. You are done with this quote image.
