Skip to main content

How to add a Product to the Store

Updated

Detailed guide on how to add a Physical Product add images, options and shipping locations and how this will look on the live site.

Access the Store Products area

  1. From the left sidebar toggle open Portfolio and click 'Store'

  2. 'Products' panel visible (default)

  3. Click 'Add Product'

Set Product Name

  1. Enter the Product Name

  2. 'Add Product'

Product Details entry area

  1. Product Availability (see table below for options)

  2. Product Type: Select from Physical Product (sell prints, t-shirts or other items), Digital Product (sell downloadable digital files) or Service (receive payments or deposits)

  3. Add Cover Image: This cover image thumbnail represents the product when displayed in your store.

  4. Scroll down…

Product Availability Options

Product Availability  
Unlisted This product will not be listed in your store, but will be available for purchase (it would require you providing your buyer with a direct URL link to view).
Coming Soon This product will be coming soon.
Available in Store This product will be listed in your store and available for purchase.
Sold Out This product will be listed as sold out.
 

Adding a Cover Image

  1. Click 'Add Cover Image' for the image uploader window to appear

  2. 'Upload Image' you can drag & drop a file or use the button to navigate to your image file

  3. 'Import from Format' allows you to copy an image already added to a page, see our guide here

  4. 'Import from Dropbox'

Select Cover Image file

  1. Navigate to the file you want to use as the Cover Image and select

  2. Click 'Open' to start uploading

Crop Cover Image and Add Description options

When the image has finished uploading and processing you will see the Crop Cover Image window

  1. Magnification slider allows you to change the size of the Cover Image (this is not always used, so may display at the full crop

  2. Click-and-drag on the image thumbnail to move its position within the rectangular shape

  3. 'Change Cover Image' to replace

  4. 'Add Description' for adding the Image Description (alt-text)

  5. Click 'Done' when finished here

Add Image Description

Image descriptions are not displayed on your website. Effective descriptions improve your SEO and enable browsing with a screen reader. See our guide here.

  1. Words that describe the image, in the same way you would explain what you were seeing

  2. Click 'Save'

Add Product Images

At least one Product Image must be added. These are the large images that will appear on your product page, when viewing your live Store.

  1. Click 'Add Images' and select the same way you did for the Cover Image

  2. Scroll down…

The images will start uploading and processing

Product Images options

Once processed the image thumbnails will appear

  1. Hover an individual image thumbnail to activate a mini-toolbar

  2. 'Add Image Description'

  3. 'Delete Image'

Change image thumbnail order

You can click-and-drag an image thumbnail to change the order they appear in.

Product Name, Description and Price

  1. Product Name: (editing here will update at the very top of the page as well

  2. Product Description: include as much information here as you need as this is what viewers will use to help them decide whether to buy or not

  3. A Price must be set here, the minimum is 1.00 in your set currency

  4. Scroll down…

Product Options

  1. Select from Unlimited Quantity or Limited Quantity

  2. If Limited, set the number available

  3. Add Product Options: for more than one style/size of the same Product (see below)

  4. Checkbox to allow item to be Shipped, if not selected, no Shipping options can be set and you would need to organize directly with your buyer either to pick-up or other means

  5. Shipping (see more below)

Add More Product Options

This is useful if you have different sizes, colors or other options available.

  1. Dropdown Label: e.g. Choose a size

  2. Option 1 label

  3. Option 1 is the Default price and Quantity set as 'Unlimited'

  4. Option 2 has Quantity set as 'Limited' to 10 (example only)

  5. Add Another Product Option

  6. Scroll down…

Shipping

When viewing the Product for sale, customers will not see the shipping cost for their specific country until they have gotten to the PayPal Checkout area and added their address details.

  1. This item can be shipped (when checked)

  2. Your Country will appear first, based on the 'Shipping Country' you set (this can be changed, see our Store Settings guide)

  3. 'Everywhere Else' can not be disabled. If you only want to ship locally, set a higher price here or you will need to refund and cancel an order if placed, OR Add a message in the Product Description area to say something similar to: "Currently Shipping is only available within the USA, please email if you are interested and live in another country"

  4. Set 'Shipped Alone' rate

  5. Set 'With Others' rate

  6. Delete row

  7. '+ Add Destination' for more countries

How 'Shipped Alone' and 'With Others' Works

When a customer orders only a single copy of a product the 'Shipped Alone' rate is used.

When a customer orders more than one product (or quantity of one product), the highest 'Shipped Alone' rate on the order is combined with the 'With Others' rates for the rest of the products on the order.

For example:

You sell a print where 'Shipped Alone' is $8 and 'With Others' is $6. And you are also selling postcards where 'Shipped Alone' is $7 and 'With Others' is $5.

Someone orders 1 print and 1 postcard. The shipping total would be $8 + $5 = $13

Or, if someone orders 1 print and 4 postcards. The shipping total would be $8 + $5 x 4 = $28.

For lighter items, you may want to set the 'With Others' rate low or zero. For heavier items, you may want to price this a bit higher.

Flat rate shipping

You can set up 'flat rate' shipping by setting the 'With Others' rate for every product in your Store to $0.00

Then your customers' shipping total is just the highest 'Shipped Alone' price in the order.

Things to be aware of

  • We are not able to provide a 'weight/size' calculation option.

  • If you are unsure of what you need to charge for shipping please discuss with your delivery service provider.

  • Disabling the 'This item can be shipped' option does not stop a customer from ordering the product but it means any shipping costs would need to be included in the Product Price, or you organizing this cost later directly with them once discussed.

Access the Product Settings area

  1. Every Product has its own Settings that you can edit

  2. 'Edit Design' affects the overall Store Design (not an individual Product), see our Store Design Options guide here

Individual Product Settings

  1. Shows Settings panel is active

  2. Product Visibility (default is online) use dropdown to change

  3. Product Path: match to the Product Name, all lowercase with hyphen between words

  4. SEO warning showing as 'Incomplete'

  5. Scroll down…

Product SEO Complete

  1. SEO showing as 'Complete'

  2. Search Preview shows how the page will appear in search engine results

  3. SEO Product Title (usually same as Product Name)

  4. SEO Product Description added

  5. Scroll down…

Edit Cover Image, Out of Stock or Delete Product

  1. Edit Cover Image

  2. Out of Stock: dropdown

  3. Options are 'Sold Out when Out of Stock' (default), 'Unlisted when Out of Stock' or 'Coming Soon when Out of Stock' these options only work when set Quantity has been set to Limited with a number

  4. Delete Product

  5. Always 'Save Changes'

Change the order Store Products appear in

When your Store is viewed, the topmost Product in the Products List view will appear first.

When you Add Product, it goes to the bottom of the list, to change this order click and drag the Product thumbnail up and release in the position you want it to appear in.

Live Site view of all Products

  1. New Physical Product added and appearing first

  2. Service Product (Coming Soon)

  3. Digital Download Product

  4. Cart icon appears top-right corner

Live Site Product detail

Animation showing thumbnails down left edge changing image and Size/Quantity dropdowns being changed and 'Add to Cart'.

Ensure your PayPal Business Account is connected so that your Format Store is accessible and add to your Site Menu.

Reach us online at our live chat or via our email info@format.com if you have any more questions. We’re happy to help!

Related to

Related articles