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*.
.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.
,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
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'
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
&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
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
,lick on the Dave all changes button. .his will bring you to the following 5neAt screenshot:'
<! 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'
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
&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.
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.
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 ':