The Retailer: Adding a product

This article will explain you step-by-step how you can add products to your website based on The Retailer design.

  1. Login to your website
  2. Click in the menu on the left on Posts
  3. Click on “Add New” which appeared under Posts
  4. Fill the name of the product in the top field just under “Add New Post”
  5. Click on the add media button – the sun shaped icon right of Upload/Insert
    The add media button
  6. In the window that appears now, press “Select Files”
  7. Browse for the image file on your computer and double click it to select it – for best user experience and website performance only use images with a width of 634 pixels or less.
  8. After you’ve selected the image, a form appears in which you can add information about image. Doing makes your website better accessible for search engines such as Google.
    – The title is what appears in a yellow balloon when the mouse cursor is held on the image
    – The Alternate text is what the user sees if, for whatever reason, the image can not be displayed
    – Skip Caption
    – Skip Description
  9. The “Link URL”  is the important field here. It will display the internet address of the image you are adding. Select the entire address. There are 2 ways to select content:
    – Press the left mouse button at the beginning of the address and drag it all the way to the end while keeping the left mouse button pressed. Or
    – Click anywhere on the address and press the CTRL-button together with the A-button. Or if you’re a MAC user press the Command-button together with the A-button
  10. With the entire address being selected you now have to copy the address so you can use it again at a later stage. Copying means storing data temporarily in the computer’s memory. There are 2 ways to copy content:
    – Press the CTRL-button together with the C-button. Or if you are a MAC user press the Command-button together with the C-button. Or
    –  Press the right mouse button on the selected address and in the menu that appears click on Copy
    A screenshot of the Link URL field with the url selected=
  11. Now press the button that says “None” under the address you’ve just copied. Doing so will make the address disappear.
  12. Next to Alignment select None
  13. The Size selection depends on the size of the original image. Under “Full Size” it shows you the dimensions of the original image. The first number refers to the width of the image and the second number to the height. The option to go for here is the one where the first number comes closest but is lower than 635. So (635 x 320) is too big, but (632 x 230) would be perfect.
  14. Click “Insert into Post”
  15. Now with the image inserted into the post you can add text above or below the image which wil be shown on the individual product page
  16. Now scroll down a little bit to a box called Custom Fields
    A picture of the Custom Fields Box
  17. Here you are going to add 2 or 3 extra elements to your product: 1) A small picture, 2) The current price, 3) The previous price (optional).In the first field under Name type “photo” and in Value field next to it, paste the internet address of the image you have copied in step 10 and press “Add custom field”
  18. To add the current price of the product, you type “new-price” in the field under Name and the current price in the Value field and press “Add custom field”. Do not enter the currency symbol since that will be added automatically
  19. If you want to add an old price in case you want to emphasize a discount, you type “old-price” in the Name field and enter the previous price in the Value field. Now press “Add custom field” to add the old price to the product.When you’re finished this should look more or less like this. The Name fields are very important here, so make sure you’re using “photo“, “new-price” and “old-price“!
    A screenshot of the custom fields after they've been filled in
  20. Now we need to categorize the product. This makes it easier for your visitors to find what they are looking for. To add a category, you probably have to scroll up a bit to find the Categories box on the right side of your screen. To create a new category, click on “+ Add new category”, type the new category name and press “Add new category” button. If the category already exists just click in the box in front of it to select it. You can select as many categories for a product as you want.
  21. Now scroll up all the way to the top and press the big blue Update button on the right of your screen.

That’s it. Your product is now added to the front page of your site with a little image and it’s price.

The Retailer: Adding a product - Demonstration Video