ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How To Customize a Cafepress Store

Updated on January 6, 2014

I Want to Customize my Cafepress Store!

Before Zazzle tried to make shop owner into sheep by removing their design options, the internet used to be saturated with tips and tricks for changing, designing and customizing a Zazzle store, however even now, how to customize Cafepress articles are few and far between. Hence why I have spent a long time customizing all of my own Cafepress stores and have put many tips and tricks into this article.....

The changes that I have made to my Cafepress store uses CSS and HTML, but don't let that put you offer because my tips and tricks and designed to be easy to use, have screenshots and speak in plain English (where possible). Although, it is very helpful to have at least a basic knowledge, and you should always be careful about entering the custom design sections if you are not sure what you are doing. A badly design store at the back-end can have very negative effects on search engines listing your store and potential customers finding it.

Sooooo!!!, the reason I am writing this article is to provide:-

Some HTML basics for those who do not understand it!

Guidance for using colour in your text and backgrounds

How to choose your templates & size and align your Cafepress Header

How to use 'cpWrapper' for added effect (no...we have not jumped over to music!)

Changing style, font, position, placement, sidebar and main body of the Cafepress store

And as much more info as I can think of to help you out on your journey to customization........

Providing Custom Design Cafepress Stores - Before we start the tutorials.....

Before we get into the nitty gritty of how you can turn your plain or basic Cafepress store into one that looks professional and themed, it is important to mention that if you are a complete HTML novice or simply don't have the know how to follow this tutorial, help is still at hand.

This is not the obligatory 'hire me' plug, because you can already see that I have given you all of the tools and information you need to do this yourself. But if you don't understand it, don't have the time or would just rather someone else took care of it for you....please feel free to drop me a line for a low-cost quote. I work with my clients to ensure they get the store they want and love and there are unlimited revises included in my prices. My costs are very reasonable and are tiered depending on the type of design you are after.

These options included lower end prices for those just wanted some redesigning or basic HTML additions, middle prices for those wanting to revamp their store and have a custom, professional look and layout and the full monty for those wanting to bring their store in-line with an existing website theme or layout or those wanting complete shop setup and design if you haven't even started yet.

For queries or advice contact me at cathsam001@sky.com

The Basics - Templates Backgrounds and Fonts (Oh My!!!)

As you can see from the above picture of my Cafepress storefront, a bit of graphic design goes along way!!!

I started by choosing my store template, and this choice is not to be underestimated. What template you choose governs what, where and how much control you have to customize your store. Beware......Some templates do not even allow you to add a header!!

It is worth previewing several templates whilst keeping in mind what finished store layout you are looking for. The template you start with can look very different if you can access and use the correct HTML and CSS in the right places.

As I was looking for a clean finish with control of my categories and background, I opted for the Simple C template. You can still see some of the same detail and layout between the template picture and my finished store screenshot.

I had already designed my header using Corel Draw X5 for my Zazzle store and wanted to keep the same design for Cafepress. The Simple C template allowed me to add my own header....however, it insisted on keeping the header at the small size it wanted and refused to allow it to sit against the top of the page of against the main body of the store (both things that I wanted it to do.)

I also wanted some kind of design in the background on my storefront, however as most of us know, playing around with backgrounds is not easy due to the rest of the world's monitor resolution. What fits and looks great on your screen may not look good on someone elses, and when it comes to Cafepress and Zazzle stores fronts, chances are you are selling products, so you need your store to look good.

QUICKIE - HTML/CSS BASICS TUTORIAL FOR NOVICES

Why people who create tutorials for customizing online stores and setting up websites assume that everyone has a working knowledge of HTML and/or CSS is beyond me. If you do not understand what the coding you are typing onto the page actually does, you are not going to know what to do when it does not work or how to apply it to other scenarios.

The below pictures gives you some very basics that can be used without entering the actual HTML coding pages of your Cafepress and Zazzle stores. You can use it alongside the text in the store, category or product description for example.

DO NOT underestimate the basics.....a few colours here and bold fonts there can make the world of difference to an otherwise bland and 'not stand out ish' page!

HTML/CSS BASICS TUTORIAL FOR NOVICES

Where can you use this HTML/CSS coding:-

Store Description, Store Category description, Store Category Title, Product Description, Product Title, Featured Product Module & Title, About Me Page and Personal Info on both Zazzle and Cafepress.

Headache Headers

Remember, I used the Simple C template, so if you are using a different template the source info will be in a different place or may not even me accessible at all.)

NOTE: If you are stuck on another Cafepress template, leave me a message below with template and issue and I will take a look and try to solve it for you.

How to Customize

On the Manage Your Shop page, the most important section you will be using (regardless of your template choice) is Display Features & Custom HTML. (see above image)

This is where all standard and advanced changes are going to be made. Once in this section, you will have 3 tabs at the top. If you simply want to change the background, sidebar, body, link or text colour on your store, choose the Colors & Fonts tab, make your colour changes and job done. However, if your are reading this lens, chances are you want the tab called Custom HTML.

Re-sizing & Aligning Your Header

Three quarters of the way down the Custom HTML page there is a section called Header. For the Simple C template, this is where you will place your URL link to your header.

At this point your header image/logo will replace the default on at the top of the screen. However, you will probably notice it is not in the exact place you need it. This is not as much to do with the size of your header as the css styling associated with the above id="shopHeader"

To correct or amend the placement of your header, go to the next box up called HEAD. If you are unfamiliar with HTML and CSS, it is quite easy to read (easier to read than to write...). The id we mentioned above shopHeader is exactly what it says. It is identifying a section of HTML coding and has called it shopHeader. In the HEAD section there will now be a corresponding id with the same name and all styling applied to that part of the template comes underneath it.

The default matching CSS code sets the background colour of the header section to white (#ffffff is the hex code for white), it puts padding of 30 pixels around whatever image is uploaded (this is the reason you can't get your image to sit against the top of the screen or bottom of the main body) and it sets the width to 500px (the width of the main body in the Simple C template is 960px) so your image will always be half the size of the main body, regardless of what size you make it.

SOLUTION

It's actually very simple in this case. Delete the padding line and the width line. However, remember that the CSS stylng is not setting the width of your image anymore...you need to save your header image at the exact width and height you want t so that it looks snug on your storefront.

You can do exactly the same with your header on Zazzle dependant again on the template you choose. The HTML/CSS to change my header was located in the Beta!-Advanced section (which you have to turn on to access custom HTML in Zazzle) under Style (CSS) > Mantle. Simply add the same URL as in Cafepress to get the header you want.

Recent Client Design

Beach Towel Boutique
Beach Towel Boutique

Don't Get Colour (Color for my USA readers...) Envy

A quick note on using text colours in your store. When using HTML or CSS for adding colours to text or backgrounds, you are not confined to the standard red, blue and green words of the past.

Get yourself online and save a handy hex code page to your Google favourites. On most sections of the Zazzle and Cafepress stores, the # (which stand for the hex code precursor) is filled in for you and you just need to find the corresponding 6 digit code to assign your color. However, you can also use hex code colours in the HTML basic we went through above. Just replace the word red with #990000 (or the other 300 red options hex codes give you).

cpWrapper - Adding Background to your Background

I played around a lot with the backgrounds on both Cafepress and Zazzle stores and decoded due to resolution nightmares to stick with a single colour in the end as oppose to an image. However, a neat little trick I found in the coding of my Simple C template of the Cafepress store (which is possible on other templates also), was an id called #cpWrapper

As you can see from part of my Cafepress store front below, this takes whatever image you choose and puts it behind the main body. It is set as static so will show up on any resolution monitor and you can change how much is protrudes across the sides of the main body by setting the width. The width of the main body on Simple C is 960px so I set my wrapper to 1235px, which was perfect for the flower & butterfly scroll image I designed.

NOTE: The background-image:url is invaluable in designing your store as you use it to replace the colour of a background, sidebar or main page and set it as an image instead.

Another Client Project

Share and Share Alike.......

I learnt how to customise, design and create in HTML and CSS through self-teaching and the masses of information available that other people have written and shared.

If people share their tips, tricks and help each other.......we could all make our online endeavours much more interesting, profitable and enticing to prospective customers.

Please feel free to leave comments below about this article or with queries or tricks you have learnt that may help others.

New Guestbook Comments

    0 of 8192 characters used
    Post Comment

    • profile image

      Wswayneside 2 years ago

      Great info! Check our shop out on www.cafepress.com/wswayneside and tell us what you think.

    • profile image

      Ruth Logsdon 2 years ago

      THANK YOU! Yes, you are correct ANY information on this is few & far between.

      Yes, I am interested in having you help me with my Cafe Press shop. However, I have some organization issues to work out first and then I will be in touch. (If you would like to take a look at my current mess of a shop, see it at www.cafepress.com/militarylifesmoments)

      THANKS FOR SHARING THIS!

    • profile image

      Eleni 2 years ago

      eleni_tzima@hotmail.com is my e-mail and I am interested in a customization of my cafepress shop.

    • profile image

      Eleni 2 years ago

      Hello, I am wondering how much would it cost me a customization of my cafepress shop? Thank You

    • profile image

      Alisha 2 years ago

      Awesome instructions!!

      Thank you!!! :)