Designer Guidelines

Designer Guidelines

Design Notes


  • The designer should keep in mind that a seller may not make use of each section detailed below. A programmer will integrate the design into the BiggerBids template system. Therefore, the designer should layout the template in such a way that will lend itself to certain pieces being removed.
  • The aspect ratios for all images are never consistent. This applies to the main image(s), thumbnail images and any logo image.
  • Images are uploaded by template users and therefore the only types of image decoration (i.e. drop shadows, decorative corners, etc) that can be applied must be done so using inline CSS.
  • All of our templates need to hold areas for each of the sections described on this page. However, it is up to the designer to arrange those sections in an interesting and creative way. We have assembled some typical wireframes that many of our templates follow. The wireframe used for the sample template below is near the bottom of this page.

Sample Template

(See below for Template Section Details)


Designer Guidelines Template Reference

Designer Guidelines Template Reference

Template Sections


Each BiggerBids template must contain all of the sections outlined below. These sections are displayed in the order of importance that they should be communicated through the template. Please reference the notes at the bottom of this page, as they are extremely important. Each of the follow sections is also referenced in the sample template (shrunk for printing) that follows:

  1. Auction title. This is a maximum of 55 characters. It describes the item that is for sale.
  2. Main item image. All auctions can hold up to 12 images. The “main image” can be displayed more prominently within the layout. This will never be larger than 780 pixels x 780 pixels, however the aspect ratio for the images used here are never consistent.
  3. Remaining item images. All auctions can hold up to 12 images. These are generally displayed as thumbnails that can be clicked for a larger view. The aspect ratio for the images used here are never consistent.
  4. Auction description. This is a detailed description of the item being sold.
  5. Payment details. This section outlines what forms of payment the seller accepts as well as any other guidelines for receiving payment.
  6. Shipping details. This section outlines the details for how the seller will ship the item being sold.
  7. Additional information. This is a general section that allows a seller to discuss additional information that may be of interest to the buyer.
  8. Business logo. This is the seller’s company logo. It is never larger than 300 x 300 pixels.
  9. Business description. This is a description of the seller’s company. It generally accompanies the business logo.
  10. Selling policy 1. There are 5 custom selling policy sections. Each section consists of a policy heading and that policy’s details. Note: These headings must be textual. Although this text can be placed on background images, the text should be in a standard font. Note: graphic only shows 2 policies configured.
  11. Selling policy 2. There are 5 custom selling policy sections. Each section consists of a policy heading and that policy’s details. Note: These headings must be textual. Although this text can be placed on background images, the text should be in a standard font. Note: graphic only shows 2 policies configured.
  12. Selling policy 3. There are 5 custom selling policy sections. Each section consists of a policy heading and that policy’s details. Note: These headings must be textual. Although this text can be placed on background images, the text should be in a standard font. Note: graphic only shows 2 policies configured.
  13. Selling policy 4. There are 5 custom selling policy sections. Each section consists of a policy heading and that policy’s details. Note: These headings must be textual. Although this text can be placed on background images, the text should be in a standard font. Note: graphic only shows 2 policies configured.
  14. Selling policy 5. There are 5 custom selling policy sections. Each section consists of a policy heading and that policy’s details. Note: These headings must be textual. Although this text can be placed on background images, the text should be in a standard font. Note: graphic only shows 2 policies configured.
  15. Link to eBay feedback page. This is a link within the auction to the seller’s eBay feedback page.
  16. Link to other eBay auctions. This is a link within the auction to the seller’s other eBay auctions.
  17. Link to eBay ME page. This is a link within the auction to the seller’s eBay ME page.
  18. eBay store navigation. The eBay store navigation consists of a store name (generally the heading for the navigation) and links to the store categories. These links will be rendered as text, but can be placed on an imaged background.

Wireframes


All of our templates need to hold areas for each of the sections described on this page. However, it is up to the designer to arrange those sections in an interesting and creative way. We have assembled some typical wireframes that many of our templates follow. The wireframe used for the sample template above is pictured below.

Wireframe 5

 

Custom Auction Template Wireframes

This page shows a handful of wireframes that many of our designs follow. Please visit our designer guidelines page to get a better idea of how these wireframes translate to actual auction template designs.

Wireframe #1


Wireframe 1

Wireframe #2


Wireframe 2

Wireframe #3


Wireframe 3

Wireframe #4


Wireframe 4

Wireframe #5


Wireframe 5

Custom Auction Template Variables

BiggerBids auction templates are made up of 4 main components – Text-based variables, an array of seller’s policies, an array of links to specific sections of their eBay Stores, and a maximum of 12 images of the item they are selling. Although not all auctions use each of the available pieces of information, it is a good idea to have the placeholders for them available in your templates.

BiggerBids templates use the Smarty Template Engine for rendering layouts. To get a better feel for how to develop custom auction templates for the BiggerBids system, we recommend downloading the current Smarty Documentation and reading through our simple online tutorial.

NOTE: Smarty security is enabled for all templates.

Variables
Each of the following variables is available to all auction ads. Unless otherwise noted, these are string values.
Variable Description
$AUCTION_TITLE This is the title of the auction. It has a maximum character limit of 55.
$AUCTION_DESCRIPTION This is the detailed information that the user has entered to describe the item they are selling.
$AUCTION_SHIPPING This is the information that the user has enter to describe how an item’s shipping will be handled once the auction is complete.
$AUCTION_PAYMENT This is the information that the user has entered which describes how they handle receiving payment for the item being sold.
$AUCTION_ADD_INF This is a “catch all” section that allows the user to enter any type of information they wish. An appropriate headng for this section might be “Additional Information.”
$BUSINESS_DESCRIPTION This is description about the seller’s company or business.
$BUSINESS_LOGO_URL This is the URL of the seller’s business logo.
$EBAY_USERNAME This is the seller’s eBay username.
$EBAY_AUCTIONS_LINK This is the URL of the seller’s current auctions on eBay.
$EBAY_FEEDBACK_LINK This is the URL of the seller’s feedback on eBay.
$EBAY_ME_LINK This is the URL of the seller’s Me page on eBay.
$EBAY_STORE_NAME This is the name of the seller’s eBay Store
$EBAY_STORE_URL This is the URL of the seller’s eBay store.

Custom Inputs / Custom Template Variables
You can create custom inputs in your account, which are then available in your own custom created templates. For each custom input you create, you assign that input a variable name. You can then call upon the value of that variable from within your custom template from the {$CUSTOM} array of values.
Example Variable Name How to call within your template
shipping_cost {$CUSTOM.shipping_cost}
HandlingDetails {$CUSTOM.HandlingDetails}
SOME_OTHER_VARIABLE_NAME {$CUSTOM.SOME_OTHER_VARIABLE_NAME}
Indexed Arrays
Each of the following arrays is actually a 2-dimensional array where the the first index holds an integer and the second holds a textual description of the data. The referenced “x” value represents the first index. It is recommended that the designer use a “foreach” loop to display each field. All arrays are indexed starting with 1 , not 0.
Array Name Available Indexes Description
$EBAY_STORE_CATS The seller can configure an unlimited number of categories from their eBay Store. This array is provided in alphabetical order based upon the name (e.g. title) of each category.
$EBAY_STORE_CATS.x.title This is the name of one of the seller’s eBay Store category.
$EBAY_STORE_CATS.x.url This is the URL of the corresponding eBay Store category.
$POLICIES The seller can configure a total of 5 selling policies. Some examples could be “Our Feedback Policy” or “When Making Your Payment…”  Each policy has a heading (60 character maximum) and a description.
$POLICIES.x.heading This is the heading of the policy. One could consider this to be the “title” or “name” of their policy.
$POLICIES.x.details This is the descriptive text that supports the corresponding heading.
Item Image Objects
The seller can upload a total of 12 images to any auction. The BiggerBids system stores both a thumbnailed and full-sized version of each image uploaded to every auction. The BiggerBids template system provides each of these images to the designer as a workable object that holds its own unique properties and methods. The methods are used to retrieve HTML and/or information about each image. Each image object resides within the $IMAGES array and is referenced by an index (seen below as “x”) from 1 to 12.
Available Properties
$IMAGES.x.image_height This is the height (in pixels) of the full-size image.
$IMAGES.x.image_width This is the width (in pixels) of the full-size image.
Available Methods
$IMAGES.x.getGalleryURL()
Each auction that a seller creates holds its own image gallery that can be viewed by prospective bidders. Within the gallery one image is highlighted and displayed full-size. This method returns the URL that will properly display the corresponding image within the gallery of the auction.
$IMAGES.x.getThumbTag(integer $max_width, integer $max_height, integer $hspace, integer $vspace, string $align, string $class, integer $border)
This method returns an HTML “img” tag based upon the thumbnailed image. All thumbnails have a maximum width and height of 200 pixels. If you need to reference an image larger than that, you should use the getURL() method for the full-size image. The “img” tag returned will reference the URL of the thumbnailed image within its “src” attribute. Most other tags can be manipulated via the method parameters.

Required parameters:

$max_width:  This is the value that will be returned in the “width” attribute of the “img” tag.
$max_height:  This is the value that will be returned in the “height” attribute of the “img” tag.

Optional parameters:

$hspace:  This is the value that will be returned in the “hspace” attribute of the “img” tag. If not passed this value will default to “1”.
$vspace:  This is the value that will be returned in the “vspace” attribute of the “img” tag. If not passed this value will default to “1”.
$align:  This is the value that will be returned in the “align” attribute of the “img” tag. If not passed this value will default to “1”.
$class:  This is the value that will be returned in the “class” attribute of the “img” tag. If not passed this value will default to “” (e.g. a blank value) .
$border:  This is the value that will be returned in the “border” attribute of the “img” tag. If not passed this value will default to “0”.

$IMAGES.x.getThumbURL()
This method returns the URL of the thumbnailed image.
$IMAGES.x.getThumbWithLink(integer $max_width, integer $max_height, integer $hspace, integer $vspace, string $align, string $class, integer $border)
This method returns a group of HTML tags based upon the thumbnailed image. The returned tags are an “a” (or hyperlink) tag wrapped around an “img” tag. When the image is clicked a new window will open to the proper location of the image gallery (see getGalleryURL()) for the auction. This method also calls upon getThumbTag() to retrieve the proper “img” tag.

Required parameters:

$max_width:  This is the value that will be returned in the “width” attribute of the “img” tag.
$max_height:  This is the value that will be returned in the “height” attribute of the “img” tag.

Optional parameters:

$hspace:  This is the value that will be returned in the “hspace” attribute of the “img” tag. If not passed this value will default to “1”.
$vspace:  This is the value that will be returned in the “vspace” attribute of the “img” tag. If not passed this value will default to “1”.
$align:  This is the value that will be returned in the “align” attribute of the “img” tag. If not passed this value will default to “1”.
$class:  This is the value that will be returned in the “class” attribute of the “img” tag. If not passed this value will default to “” (e.g. a blank value) .
$border:  This is the value that will be returned in the “border” attribute of the “img” tag. If not passed this value will default to “0”.

$IMAGES.x.getURL()
This method returns the URL of the full-size image.