Você está na página 1de 18

The Furniture Store WordPress Theme

= recommended tip = how to FAQs = = customize or special notes

Adding Content
I have taken a per page approach starting with the front page and going deeper in an efford to make this easy to follow. Each section is introduced with a screenshot followed by my comments on sections that need clarification, some how-to-F !s and some customi"ation notes. #ight, let$s begin%

If the screenshot above is not legible please open the one I provided in the &ocumentation folder here' &ocumentation ( help ( images

Product Categories
)se the )ncategori"ed category you have - rename it to serve as one of your shop$s main categories. In my case I renamed it to *+ain ,ategory -ne*.

The Furniture Store WordPress Theme


.he point is here to use it to represent one of your main categories. /ou can create as many main categories and subcategories as you want. How do I create categories? http://codex.wordpress.org/Manage_ ategories_Su!Pane"

Main Navigation and Logo


0lease don$t neglect to review your options under Appearance > TheFurniture tore !ptions > Appearance Ta" > Main Navi and Logo !ptions How do I rep"ace the "ogo? -pen the psd folder provided and use the logo#psd file you$ll find. +ake your ad1ustments and save it as logo#png 0lace it inside the child theme$s images folder to replace the original one. .he font I used is called 2apoleodoni and you can download it here' http'33www.dafont.com3napoleodoni.font 4ranted your logo graphic may have different dimmensions to mine. If yours is larger then $ou will need to ad%ust the css so open style.css of the activated child theme and find the following' 5 lines 67-89 in the light child theme:
3;logo;3 <branding =font-si"e'>.?em@margin-bottom'?@width'>7?pA@height'B?pA@teAt-indent'7777em@background'url5images3logo.png: no-repeat top left@C <branding a =float'left@display'block@width'>7?pA@height'B?pA@C

and ad1ust the width and height to match yours.

The Featured Area&


.he Featured rea on the Front 0age was created to display' main shop categories with a categor$ speci'ic image specific categories with a categor$ speci'ic image, or individual products with a Featured Image using the custom field' 'eatured(img /ou can set the option you like from your .heFurnitureDtore -ptions ( 4eneral - )our Front Page Featured ection How do I create categor# speci$ic images? -pen the psd 'older I provided for you and find the Categor$ peci'ic *mages folder. )se the psd template provided ,reate your images and save each after the corresponding category slug place them inside the folder' uploads3catEimgs5 see installing#pd': How do I $ind the s"ug? http://codex.wordpress.org/Manage_ ategories_Su!Pane"%&dd_ ategor#

The Furniture Store WordPress Theme


How a!out i$ I want to $eature indi'idua" products. Is there an#thing I need to watch out $or? +ake sure your image is large enough. It will be a good idea to use the psd template I provided for the ,ategory Dpecific Images. .hen upload your image on your server. I used the Ford0ress media uploader. ,opy it$s path and enter it as the value of the custom field' 'eatured(img

.here$s one more thing you need to do and that is to make the product + tic,$(ight) and how do I do that? s you are viewing your 0osts -verview .able click on !uick Edit your 0roduct 0ost and to the right you$ll see the option to make it sticky. .hat$s all you have to do to feature individual 0roduct posts. Easy rightG I don*t mind the custom $ont #ou are using in the side!ar !ut I want to use something di$$erent. How do I customi+e that? ,r m# target "anguage contains specia" characters -eg. .) / )01 Dee the using(cu'on#pd' document How a!out the widgets at the !ottom o$ the page and in the Side!ar? How do I use those? Dee the 2F (custom(widgets#pd' and page . in this document/

I want to change the !ac2ground co"our. How do I do that? an I a"so ha'e an image $or the !ac2ground? /ou$ll do this in the css. -pen your style.css and find the following line' 5line >> in the light child theme: body =background'<fdfdfd@font-family' rial, sans-serif@color'<666@C .he property you will want to change is the background. If you don$t know how there$s plenty of resources in the internet that can help you learn some basic css. simple google search will take you there. If you do not want to concern yourself with coding then please consider hiring someone to do it for you.

The Furniture Store WordPress Theme


0ow categories displa$ on Categor$ Pages&
If the screenshot below is not legible please open the one I provided in the &ocumentation folder here' &ocumentation ( help ( images

,hoose the number of columns 5H or I:, place your sidebar to the left or to the right and customi"e the order your categories appear as you want. Dee the .heme -ptions for these settings. 0lease note the ,ategory Dpecific Image at the top. Follow the instructions on page > for creating it. How a!out the ategor# description that shows up on ho'er? How do I get m# description there? Dimply type in some teAt in the &escription .eAtarea as you create each category

The Furniture Store WordPress Theme


Categor$ Pages that displa$ Products

If the screenshot above is not legible please open the one I provided in the &ocumentation folder here' &ocumentation ( help ( images Dame comments as the previous page. gain please check your theme settings for your options here 5columns, sorting etc: How a!out the "itt"e teaser I see !e"ow? an I remo'e it? ,r I don*t see it with m# setup. It$s a setting you need to check. It displays the .itle, 0rice and an -ptional #emark-see 1.(product(customFields#pd'

The Furniture Store WordPress Theme


Tag and Custom Ta2onom$ Pages

If the screenshot above is not legible please open the one I provided in the &ocumentation folder here' &ocumentation ( help ( images s with the ,ategory pages, you have the option to choose between H or I columns. 0lease see the .heme -ptions for these settings. 0lease note the .erm3.ag Dpecific Image at the top. /ou create them much the same way you have created the ,ategory Dpecific Images. 0lease read on to see how. I don*t see an# o$ these pages. Where are the# in m# cop# o$ the theme? /ou will only access the tag or custom taAonomy pages if you use the Dhop by... custom built widgets. Ho"d on3 Taxo.. what? ,ustom taAonomies@ 1ust an intelligent way to label your product posts -use them as you use tags. JF/I 0ost-.ags is 1ust another taAonomy only a default oneK If you are new to tags please see here' http'33codeA.wordpress.org30ostsE.agsEDub0anel

The Furniture Store WordPress Theme


I don*t understand the point o$ the 4Shop !#...5 widgets. What are these widgets and how do I use them? -k, so you have categori"ed your products nicely but you are looking for an attractive way to bring out your product collection closer to your customers@ promoting this way other opportunities for people to stay on longer and perhaps buy more. .his was the idea behind the creation of the *Dhop by ...* widgets. o how do $ou use them3 Dimply said, like you have been using regular tags. .hat$s right. ll you have to do is fill in a tag term in the appropriate +eta LoA 5appears to the right when you Edit a post -if of course the desired Dhop by... widgets have been activated from the theme options: .ags may appear in a select drop down# )seful when having many tags% !r as *mages Fhatever you choose from the Fidget$s settings ,2 the drop down is c"ear. How do I create m# tag speci$ic images $or the side!ar or $or the main content page? .he same way you created your category specific images. /ou will save them after the corresponding tag slug. -pen the psd folder I provided for you and find the Tag peci'ic *mages folder. -pen the tagEimgs.psd you$ll find inside and use it as a template to create your own tag specific images. Dave each after the tag term slug. Do for a tag called *Dome Lrand* the image should be saved as *some-brand.1pg3gif3png* 5the file type is selected from the theme options: and place them inside the appropriate folder as shown below'

The Furniture Store WordPress Theme


For ll 0urpose tag images For Outfit tag images For Size tag images For Fit tag images For Colour tag images For Brand tag images For Selection tag images For Style tag images For Price tag images 4 uploads5tag6imgs 'older 4 uploads5out'it6imgs 'older M uploads5size6imgs 'older M uploads5'it6imgs 'older M uploads5colour6imgs 'older 4 uploads5"rand6imgs 'older M uploads5selection6imgs 'older M uploads5st$le6imgs 'older 4 uploads5price6imgs 'older

&nd how do I acti'ate m# 4Shop !#...5 widgets? Dimply drag the widget you need where you$d like it to appear 5in which sidebar:. What a!out the options I see? 0lease see 17(N8 (custom(widgets#pd' This is a"" nice !ut when I changed m# thum! width there was no change in the images on m# we!site*s $rontend. What*s happening? Fhen images are resi"ed they are also cached in their appropriate folders for better performance. If you had a different setting originaly and later on changed your mind and decided to ad1ust the width option inside the widget and have not seen any difference simply using an ftp program go inside the folder where the tag images are saved and delete what has been cached. #efresh your frontend and see the new images appear. )se the guide below to get to the right folders For All Purpose tag thumb images For !ut'it tag thumb images For Size tag thumb images For Fit tag thumb images For Brand tag thumb images For Selection tag thumb images thum"s5 For Style tag thumb images For Price tag thumb images M uploads5tag6imgs 'older5tag6imgs6thum"s5 4 uploads5out'it6imgs 'older5out'it6imgs6thum"s5 M uploads5size6imgs 'older5size6imgs6thum"s5 M uploads5'it6imgs 'older5'it6imgs6thum"s5 M uploads5"rand6imgs 'older5"rand6imgs6thum"s5 M uploads5selection6imgs 'older5selection6imgs6 M uploads5st$le6imgs 'older5st$le6imgs6thum"s5 4 uploads5price6imgs 'older5price6imgs6thum"s5

The Furniture Store WordPress Theme


Products

If the screenshot above is not legible please open the one I provided in the &ocumentation folder here' &ocumentation ( help ( images

.o create a product go to 0osts ( dd 2ew. .ype a title and a description and add your images. For the demo I have disabled comments but you can enable them if you want to 5they are already styled with .rackbacks separated%: 9er$ *mportant/ From $our ettings > Miscellaneous set : tore uploads in this 'older: wp6 content5uploads and do N!T :!rganize m$ uploads into month6 and $ear6"ased 'olders:# /ou have also the option' to use di''erent *mage e''ects on the 0roduct$s Dingle 0age. Dupports 1!"oom and FancyLoA as alternative options to +agic Noom. s well as no effect at all% to display an image thum"nail instead of the default numbered tab and finally to em"ed a video with simple custom shortcodes. Dupported sites include' Oimeo, /ou.ube, 4oogle Oideo, Llip .O, Oeoh, Oiddler, #evver see- ;1(em"edding(videos#pd'
The images !e"ow are $rom The "othes Shop !ut the $unctiona"it# is the same6

The Furniture Store WordPress Theme


,2) how do I add images? ,lick on the dd an image icon and a modal window will appear. Delect all the product images you need. Fhen Fordpress finishes uploading them you get the following'

,lick on the Dave all changes button. .his will bring you to the following 5neAt screenshot:'

The Furniture Store WordPress Theme

<! N!T *nsert galler$/ Finished ': .he image you ordered as *9* will appear first on your single product description and will also appear when the product is displayed on multible product post pages 5category pages, tag and custom taAonomy pages, search etc.: lso worth mentioning here is that the second product image 5as ordered in the media uploader: will appear behind the main 59st: product image when hovered 5on multible product post pages: ,ategori"e and add your .ags. If you decide later to add an image simply follow the same steps as above. Ford0ress will know what to do with it @: If you on the other hand like to delete one from the gallery set, open the dd an image lighboA click on 4allery to get to the current images associated with your product click on Dhow and at the bottom you$ll have the option to delete the image you do not need anymore. ,2 got it. How a!out the price and a"" the other product re"ated in$ormation? #ight, we will use custom 'ields for that. .here$s H basic custom fields that need to be present as all times. .hese are'

The Furniture Store WordPress Theme


%,ase sensitive% ID_item -must be uniPue%

price - in the format ?.?? &- 2-. use any currency symbols here% .hey are set from the theme options image_thumb - the full path to the image file you have uploaded in the product -post description eg http33'yourwebsite3wp-content3uploads3yourImage.1pg

Qere$s how it will look like'

&nd how do I $ind the image $i"e path? Dcroll up to the post editor and click on dd an image then 4allery and you$ll see all the images you have previously uploaded. ,lick on the Dhow link neAt to the image you have ordered first as you see below

,opy it and paste it in the Oalue field for the imageEthumb custom field.

The Furniture Store WordPress Theme


What a!out adding se"ect drop down options "i2e Si+e and o"our etc? Fe$ll use custom 'ields again. .here$s > types of select drop downs. =egular attri"utes Price a''ecting attri"utes What *s the di$$erence? =egular attri"utes are selectable options that have no effect on the price. Dee eAample here' http'33theclothesshop.sarah-neuber.de3women3womens-tops3womens-tees-tankssweatshirts3womens-top-> Price a''ecting attri"utes are, as the name suggests, selectable options that affect the product$s final price. Dee eAample here' http'33theclothesshop.sarah-neuber.de3women3womens-tops3womens-tees-tanks-sweatshirts3womentop-9 Is there a "imit to how man# I can create? -nly the limits of your imagination ': How do I add them? dding =egular attri"utes' .o activate you must use the custom field with the name add_attributes and with the value' .hen simply add your attributes using the following format' item_attr_yourAttribute 5si"e3colour etc: ,hoose a !N> 8!=< name for the type of attribute you need. 2ote the value' each option M? T "e divided by a R 2- E+0./ D0 ,ED% dding Price a''ecting attri"utes' .o activate you must use the custom field with the name add_attributes and with the value' ! .hen as above add your attributes using the following format' item_attr_yourAttribute 5si"e3colour etc: ,hoose a !N> 8!=< name for the type of attribute you need. 2ote the difference in the way the value is entered' each option M? T "e divided by a R then a S 'ollowed "$ the price amount the option will add to the "asic price 2E+0./ D0 ,ED% *' one o' $our options does not add a price whereas other options do $ou still have to add a price onl$ as 1#11 Please remem"er that $ou cannot mi2 regular attri"utes with price a''ecting ones in the same product post/ Following are > screenshots@ the first with #egular attributes and the second with 0rice affecting attributes for your reference.

The Furniture Store WordPress Theme

What a!out when a product is on sa"e?

The Furniture Store WordPress Theme


Fhen a product is on Dale then you$ll add a new custom 'ield& ne"_price with the sales price as it$s value in the ?.?? format. gain no currency symbols please. Teep the old price don$t delete% /ou may like to create an additional Dales or ,learance category 5or both: for sale or clearance products. Please create these last/ In case you are using the weight shipping calculation method 5see .heme -ptions: you$ll need to add one more custom field item _"eight and the value in gramms%% 5eg.H??: If you are using the theme to sell digital products@ these products need only one eAtra custom field apart the basic ones 5I&Eitem, imageEthumb, price:. .his is the item_file custom field with the value the file name that your customers will download after purchase. The 'ile name $ou use should not contain an$ spaces// Do, something like this' some download."ip is wrong# It should be saved as some(download#zip .he moment a product has this custom field it is identified as a digital3downloadable product. For more details on how to store your digital files please see digital(products#pd' .o use the inventory tracking you simply need to add a final custom field with the name *currentl$(in(stoc,* and your product amount for the value. Dee also .heme -ptions * have created an e2tra pd'& product(customFields#pd' 'or @uic, re'erence to all the custom 'ields needed# I see an item_remar2s custom $ie"d there in the pre'ious screenshot. What*s that a!out? #ight, if you go to your theme options ppearance (-ptions for multible product pages and scroll all the way down to the end you$ll see the option to display a teaser. ,hecking this option will only affect products on multible product pages like category pages and you$ll have something like the screenshot to the right s you can see, the 0roduct$s title now appears, it$s price and a remark. /ou may on occation like to have a remark appear on some products eg when these are on Dale or the products are 2ew. .his is how you may use the optional item(remar,s custom field

The Furniture Store WordPress Theme

Pages&
.he following pages 5or their ePuivalents as created by you: will need to use the following custom templates' ,ustomer Dervice and it$s subpages Dearch Uogin #egister ,ustomer rea #ecover 0assword M $,ustomer Dervice$ M $+y Dearch$ M $ ccount Uogin$ M $ ccount #egister$ M $ ccount ,ustomer rea$ M $#ecover 0assword$

Customer ervice

If the screenshot above is not legible please open the one I provided in the &ocumentation folder here' &ocumentation ( help ( images

.he ,ustomer Dervice custom template is designed to pull the >nd and Hrd level subpages of your ,ustomer Dervice page and display them as you see in the image above. ll you have to do is create your subpages 5>nd and Hrd level: and fill in their content. .he first level page 5,ustomer Dervice: also has it$s own widget ready area below the main content as you see on the demo here' http'33thefurniturestore.sarah-neuber.de3customer-service &irect child pages 5>nd level: then appear as you see here' http'33thefurniturestore.sarahneuber.de3customer-service3using-the-website 0.D If you only have >nd level subpages then your customer service page will also appear as the above link shows. In other words you will not get the previous screenshot layout.

The Furniture Store WordPress Theme


s you can see I took care to make sure users have easy access to other content in the current section so related pages are displayed in the sidebar. )seful for orientation purposes and good for usability.

Customer Area
/our customers have the opportunity create an account that enables them to create and save a Fishlist, save their information for a faster checkout etc. .his area is new to our ecommerce system and not fully completed with all the featues we had in mind for it. -ne reason is, we did not want to delay the release any further and also wanted to have your feedback as to what you eApect from a membership area. Fe hope you may communicate your thoughts with us on this ':

Adding a Alog to $our hop


ll you need to do is create a Llog category, you may also create subcategories under it for better organi"ation. +ake sure you look through and set your theme settings accordingly for the Llog to appear as it should. A word on Tagging. Dince Ford0ress .ags are not 5at the point of creating this theme: hierarchical you can only use them either for your Dhop 0roduct 0osts or your Llog 0osts not both% 0lease make sure you check your theme options for this. A word on earch# &ue to styling issues I had to decide between searching either 0roducts or Llog 0osts. s the theme is meant to be a Dhop I decided for the 0roduct 0osts. .his means you need to eAclude the Llog ,ategory and all Llog Dub,ategories from being searched and there$s a theme option where you can set this. lso I am working on a solution to allow searching through the custom fields so that customers may enter a product Item I& or a product price and get results. Dtay tuned% A word on Comments# I have created a custom vatar for people that do not have one so you may like to ad1ust the image to match your custom colour scheme. Dimply create your image and save it as noAvatar#%pg inside the activated child theme$s image folder. .his way it will overwrite the one that came with the theme.

The Furniture Store WordPress Theme


This concludes the +Adding Content- part o' the help 'ile#
For setting up the shop please see shop(settings#pd' For instructions on translating or on correcting5ad%usting the english words and e2pressions in the theme and emails send by the shop see translations#pd' ,heck out the product(customFields#pd' for a @uic, overview o' all the custom 'ields you will need when setting up your products. N8 (custom(widgets#pd' goes through each of the 9V custom widgets so look into that if you need help on using them and plugins(to(use#pd' takes you through the recomended plugins for the theme If you sell digital goods please review the information in digital(products#pd' 0lease make sure your review the intro(and(support#pd' before you re@uest an$ support% nd finally for error trou"leshooting please see the common(errors(trou"leshooting#pd'

Você também pode gostar