# Item Catalog (updated)

The Item Catalog row element is used to display your auction items. These items are generally taken from your "biddable" items (What Are Biddable Items?) although you can just as easily display Donation items or For Sale items or any combination of the above.

# Row Content - Item Catalog

Drag and drop the Item Catalog from the Website Editor Sidebar directly into the row space you want to use. This will insert a default Item Catalog into that row space.

img

You can also drag and drop the More Row Content element from the Website Editor Sidebar into the row space where you want to add the Item Catalog. Using the More Row Content element will open the Choose Row window.

img

Clicking the Item Catalog element will now drop it into the row space you selected.


A common configuration of the Item Catalog is to use the All Items condition which includes all item records (except those marked 'Exclude from catalog' in their Item Details dashboard). This may need to be modified to suit your auction needs. See Configure Items Displayed for more information.

img

The Item Catalog displays several components by default.

  • A Search for an item here... search field.
  • A Show Me... drop-down selector to filter items displayed (by group/category).
  • Page navigation bars to move through the catalog when multiple pages are available.
  • The item cards displaying the items configured to be shown in the catalog.

# Edit Item Catalog

Auctria Video 2020-01-11

# Catalog Style (updated)

One of the most commonly edited pieces of the Item Catalog will be its Item Card and the configuration used as this affects all of the Item Cards being displayed in the Item Catalog.

Auctria Video 2021-05-18

Catalog Styles are chosen from a drop-down selector of Item Card "templates".

img

Although the Item Cards generally perform similar functions, each having its own set of specific options, the card layout will use the options that are set specifically for that card. Setting an option in a different card will not have it applied across all cards.

# Item Card (A)

Replaces the Small Item Card "Catalog style".

img

  • Desktop Card Columns - a drop-down selector to set number of cards per row (mobile views are generally a single column only). Default: 2 across.
  • Allow immediate purchases - for use with For Sale Items only.
  • Show Item# - displays item# on right side of item title.
  • Show Description - toggles display of the description.
  • Show Image - toggles display of image on card only.
  • Show Quantity Remaining * - displays quantity available when value is set greater than 1.
  • Show Item Value - toggles display of item value.
  • Image Height - sets a maximum height for the card image. Default: 300px.
  • Body Height - sets a height for the card. Default: 320px.
  • Image Scaling - crops the card to fill the image space or displays the entire image within the card image space.

# Item Card (B)

img

  • Desktop Card Columns - a drop-down selector to set number of cards per row (mobile views are generally a single column only). Default: 2 across.
  • Allow immediate purchases - for use with For Sale Items only.
  • Show Item# - displays item# on right side of item title.
  • Show Description - toggles display of the description.
  • Show Quantity Remaining * - displays quantity available when value is set greater than 1.
  • Show Item Value - toggles display of item value.
  • Background Image Source - a drop-down selector to use the default Custom Image set for the card; or, the default Item image for the item itself. Default: Custom image.
  • Background Image - this option only applies when Background Image Source is set to Custom Image. This will not have any effect when the source is the Item image.
  • Background Image Blur - this is the value used to blur the background image. Default: 5px.
  • Background Image Scaling - this value affects the image size used in the card. Default: 200%.
  • Background Image Opacity - this value affects how transparent the image will be. Default: 0.8.
  • Body Height - sets a height for the card. Default: 320px.

# Item Card (C)

img

  • Desktop Card Columns - a drop-down selector to set number of cards per row (mobile views are generally a single column only). Default: 2 across.
  • Allow immediate purchases - for use with For Sale Items only.
  • Show Item# - displays item# on right side of item title.
  • Show Description - toggles display of the description.
  • Show Quantity Remaining * - displays quantity available when value is set greater than 1.
  • Show Item Value - toggles display of item value.
  • Background Image Source - a drop-down selector to use the default Custom Image set for the card; or, the default Item image for the item itself. Default: Custom image.
  • Background Image - this option only applies when Background Image Source is set to Custom Image. This will not have any effect when the source is the Item image.
  • Background Image Blur - this is the value used to blur the background image. Default: 5px.
  • Background Image Scaling - this value affects the image size used in the card. Default: 200%.
  • Background Image Opacity - this value affects how transparent the image will be. Default: 0.8.
  • Card Height - sets a height for the card. Default: 460px.

# Image Only Item Card

img

  • Desktop Card Columns - a drop-down selector to set number of cards per row (mobile views are generally a single column only). Default: 2 across.
  • Image Height - sets a maximum height for the card image. Default: 300px.
  • Image Scaling - crops the card to fill the image space or displays the entire image within the card image space.
  • Click to buy/donate - toggle to allow an immediate transaction for For Sale or Donation items only.

# Full Item Card

Replaces the Wide Item Card "Catalog style".

img

  • Allow immediate purchases - for use with For Sale Items only.
  • Show Item# - displays item# on right side of item title.
  • Show Description - toggles display of the description.
  • Show Image - toggles display of image on card only.
  • Show Quantity Remaining * - displays quantity available when value is set greater than 1.
  • Show Item Value - toggles display of item value.
  • Show Card Border - toggles the display of a border around the item card. This essentially provides a background the item card is displayed on.
  • Image Height - sets a maximum height for the card image. Default: 300px.
  • Image Scaling - crops the card to fill the image space or displays the entire image within the card image space.
  • Background Image Source - a drop-down selector to add a background image to the card using the default Custom Image set for the card; the default Item image for the item itself; or, No image. Default: No image.
  • Background Image - this option only applies when Background Image Source is set to Custom Image. This will not have any effect when the source is the Item image.
  • Background Image Blur - this is the value used to blur the background image. Default: 5px.
  • Background Image Scaling - this value affects the image size used in the card. Default: 200%.
  • Background Image Opacity - this value affects how transparent the image will be. Default: 0.8.

Show Quantity Remaining

This property only applies to For Sale Items with the Online Purchase BehaviorImmediate Payment Only option selected.


# Desktop Card Column Examples

The Desktop Card Columns option is used with several Catalog styles in the Item Catalog. The default option for all styles using this property is 2 across (as seen above), below are examples of the 3 across, 4 across, and 6 across options.

img

An example of the 3 across layout.


img

An example of the 4 across layout.


img

An example of the 6 across layout.


# Video: Change Catalog Image Size

Auctria Video 2020-06-23

# Items Displayed

Clicking the Configure button for the "Items Displayed" setting will open the "Select Items" window.

img

See Configure Items Displayed for more details.

# Items Per Page

The Items Per Page sets the maximum number of cards to be displayed on a single item catalog page.

IMPORTANT
If Enable Pagination is disabled for the catalog, the Items Per Page value should be set to a minimum equal to, or greater than, the total number of items in the catalog or some items will not be displayed.

The Items Per Page value can be used to help with "filling" the rows of the Item Catalog when taken into consideration with the Catalog Style Desktop Card Columns options of "2 across", "3 across", "4 across", and "6 across".

# Sort Criteria

This option sets the Sort Criteria to use for the items displayed in the catalog. The default setting is for Item#. There are additional options available in a drop-down selector.

img

  • Item#
    This is the default option and sorts the items displayed by their Item#
  • Title
    This option sorts the items displayed in alphabetical order.
  • Value
    This option uses the value set in the Item Details Summary tab.
  • Created At
    This option will sort the items displayed based on their time they were created.
  • Modified At
    This option will use the time the items displayed were last modified.
  • Reference
    This option uses the Reference field from the Item Details Summary tab.
  • Location
    This option uses the Location field from the Item Details Summary tab.

INFORMATION

If the Sort Criteria option selected has duplicate entries, such as when using Location, or the field is empty the items displayed will default to using their respective Item# as a secondary criteria to complete the sort process.

# Sort Direction

This option sets the direction for the Sort Criteria to be displayed. The default is Ascending (lowest to highest) with an additional option of Descending (highest to lowest).

img

# Allow Drill To Details

This toggles the (more...) text link in the item's description as well as the ability to click on an item card to view the item details.

IMPORTANT
This option must be enabled for Biddable Items (What Are Biddable Items?) to receive bids through the auction catalog.

# Show groups

This toggles the "Show Me..." filter bar drop-down selector.

img

By default this will display all item categories that have been created for the event.

img

Configuring the Items Displayed using the condition Item Categories (see the Configure Items Displayed page for more details) will limit the drop-down selector to only display those specific categories selected in the condition.

img

An example based on the above screen captured list of categories.

img

Limited categories selected, limited categories displayed in the drop-down selector.

This toggles the Search bar

img

# Enable Paginations

This toggles the Page navigation bars at the top and bottom of the catalog.

img

# Tag Options

The Tag Options property allows you to set publicly visible tags in the Item Catalog allowing visitors to filter the displayed items based on the tag options they choose.

img

An example of what your tags may look like in the auction catalog if set.

Once tags are set, they appear across the top of the Item Catalog with checkboxes to choose and a drop-down selector to handle the "and/or" logic when filtering with these tags.

img

IMPORTANT
Tags are manually set (read: typed into the options text field). Although they will use existing Tags that have been set on the items they will not "auto-complete" when entering them into the Item Catalog properties. Remember to check your spellings.

NOTE
You can improve the tag "readability" by optionally setting their display text in the Tag Options text field. For example, myTag: My Tag, tagged: Tagged, Electronics will only display My Tag, Tagged, and Electronics respectively in the Item Catalog but will use the tags myTag, tagged, and Electronics when filtering items.

See Tags under the Using Auctria section for more information about how Tags can be used.


# Item Details

Clicking on an Item Card will access the Item Details page element.

img

# Bidding Controls

The Bidding Controls option handles how bids are made for the item on its details page. The default is Bid by amount.

img

  • Bid by amount provides an open field for the bidder to enter an amount to bid on the item.
  • QuickBid by default sets the next bid as the current bid plus the Bid Increment (or Starting Bid as the case may be -- see Items Details Bidding Rules for more information) in a button and provides an open field for the bidder to enter their own amount.
  • QuickBid only is the same as QuickBid by default without the open bidding field.

# Show Bid Notifications

This toggles if Bid Notifications are displayed on the Item Details element page. This option is mostly only used with Virtual Live Gala events.

# Show Item#

This toggles the display of the item number and the item description in the Item Details element.

# Show Item Value

This toggles the display of the item value in the Item Details element.

# Show Category

This toggles the display of the item's Category if one exists.

# Show Donor

This toggles the display of the Donor section under the item image carousel space.

# Donor Acknowledgement

This allows you to change the text used for the Donor Acknowledgement space.

This field is used as the heading for the section where the item's Images and Links appear.

# Show Donation Total Raised

This toggles the display of the "Total raised..." element displayed below the item title.

img

# Hide Sharing Buttons

This toggles the display of the social sharing icons, if they are configured, in the Item Details element. See Social Media Links for more information on adding these sharing icons.

NOTE
The Item Details element is typically found as a sub-component of the Item Catalog / Item Details Container element although it can be used as an individual element to highlight a single "focused" item.

See Item Details for more in-depth information on this component.


Also see Common Element Actions for more details on managing the Item Catalog.

Learn More

Footnotes

Show Quantity Remaining - This property only applies to For Sale Items with the Online Purchase Behavior - Immediate Payment Only option selected.


Last Revised: 2021-09-03
Last Updated: 9/3/2021, 8:11:35 PM