Tuesday, October 30, 2012

How To Brand Your Message and Landing Page

This post will show you how to add a personalized image to your CraftHub.me customer landing page.

Adding your Etsy Shop banner to all of your CraftHub.me materials, creates visual continuity for your brand. It will also help your customers to quickly understand that the email and link are related to their purchase and not unwanted spam.

Your customer notification e-mail message and download landing page can be customized using some simple html code.

In order to add your banner to your CraftHub.me landing page, you will first need to host your image online. There are many sites that offer this service. I’m going to use Imgur.com because they will host my image for free. After I create an Imgur.com log in, I am able to upload an image to their site.



As you can see, I have uploaded my shop banner to Imgur.com. Above my image there are six fields containing code. For today’s purpose, I am interested in the field labeled, HTML Image (websites / blogs). Copy the code from this field by clicking on the page icon to the left of the field.

Now return to your CraftHub.me dashboard. In the Content Tab, paste the image code into the "Email Body" field (make sure that you do not delete the existing code "[%files%]"). Next, paste the same code into the "Download Page" field. Make sure you save your changes.



Now that I have added my image html code to my "Email Body" field my customers will see my banner when they open the e-mail message that they receive after their purchase is complete. 


When your customer clicks on the link in the email, they will be taken to their personal landing page. Adding your image code the Download Page field will make your banner appear here as well.



If you haven't had any CraftHub.me transactions yet, I recommend asking a friend or family member to purchase something from your Etsy shop. **Note** some email providers do not show images unless the user requests it.
Once a purchase has been made, you can view your landing page by going to your reports tab and clicking on the Etsy receipt ID.

If you have followed the previous steps correctly, your image will be visible. If it doesn't show up, make sure you have copied your code correctly and saved your changes on the content tab. Refresh the landing page to see your changes (you do not need to repeat the purchase).

I hope this guide has been helpful. If you have any questions please feel free to leave a comment. Check back frequently for more CraftHub.me tutorials!

8 comments:

GraphicDivine said...

I wanted to mention if you have a Flickr account, you can upload your Etsy banner & get the html code from the (share tab) It worked great for me.

Pam D said...
This comment has been removed by a blog administrator.
Shoni said...

Thank you for this tutorial.

Pininkie said...

What size should the banner be (in px)?

New Leaf said...

Thanks for the tutorial. Would really like a way to check my download landing page without having to spend money though!

Sarah@Dolls And Daydreams said...

I used the same as my etsy and it worked fine Pininkie :)

Anonymous said...

My banner is 760 x 100 pixels and it seems to be a good size.

Linda Murray said...

I have dropbox, and it only gives me the actual url, not the html code. can anyone please help me figure out what code I need to add?

my banner file is https://www.dropbox.com/s/6s23b5a09993dgx/CC%20Banner.jpg

I typed in

is this correct?

Post a Comment