Product Catalog
What’s on this page?
- Catalog Structure
- Catalog Image Size Recommendations
- Shop Everything
- Product Grid View
- Catalog Languages
- Video display
- Available Configurations
Product Catalog enables store associates to view product details such as images, description, availability, price, variants and much more to provide the most informed sales experience to their customers.
Catalog Structure
After completing the login process, store associates and store managers arrive on a landing screen. Typically this landing screen is the top of the Catalog category tree which displays all the root categories.
Root categories are the first level of parent categories under which all products are organized either directly or under sub-categories. Users can browse the catalog by following the navigation laid out by the catalog structure.
Some common examples of root categories include men, women, clothing, handbags, footwear, jewelry, or accessories.
The catalog tables do not pose any technical limitations on the:
- Number of root categories
- Number of sub-categories
- Number of sub-category levels
- Number of products displayed in a category or sub-category
However, to deliver a good user experience, Tulip recommends not exceeding 10 root categories, 10 sub-categories per root category, and 3 sub-category levels per root category.
Some catalogs can be more complex than others. For example: department stores vs. mono-brand boutique. Tulip implementation teams can help identify the best approach for each case.
Catalog Data Structure
The data model for a category in Tulip is described in the Tulip API documentation. Some important fields and descriptions include:
| Field | Description |
|---|---|
| is_root | States whether this is a root category with true or false. |
| name | The short display name of the category. |
| parent_category_id | A reference to the internal Tulip ID of the parent category in the category tree. Set to 0 for root categories (where is_root = true). |
| hidden | States whether this category should be hidden. If it is, it will not be displayed in the application but products within the category will still appear in search. |
| image | A reference to the image that is displayed to represent this category in the catalog. |
| sort_order | Can be used to sort a specific category before or after other categories. |
Catalog Image Size Recommendations
Product catalog images that are ~ 2000 x 800 pixels in size includes a central region of ~ 600 x 600 pixels that’s always visible on Tulip-enabled devices.
For best results, follow these recommendations:
Square images: Allow for the follosing possibilities:
- 10% of the image being cropped from both the left and right sides of the image.
- Up to 35% of the image being cropped from both the top and bottom of the image.
- Catalog home page category images, ensure that each category image is at least
1824 x 1524 pixelsto achieve 3x optimization. - Sub-category images, ensure that each category image is at least
216 x 216 pixelsto achieve 3x optimization. - Product images, ensure that image width is at least
2048 pixels. Note: Square images are recommended.
About Pixel Density and Image Optimization
The coordinate system that iOS devices use to place content onscreen is based on measurements in points that map to pixels. A display that uses a standard-resolution has a 1:1 pixel density that equals a scale of 1x. This means that one pixel is equal to one point.
Unlike standard-resolution displays, high-resolution displays, such as retina iPad and iPhone devices, have a higher pixel density that offers a scale factor of 2x or 3x. This means that high-resolution device displays, including Tulip-enabled devices, require high-resolution images that contain more pixels to ensure that the images appear as intended with high quality.
If you attempt to display a standard resolution image that is 10 × 10 pixels on a high-resolution display, the image will appear blurry with lower quality because high-resolution displays require more pixels. The same image at a scale of 2x would be 20 × 20 pixels, and the image at a scale of 3x would be 30 × 30 pixels:
You can multiply the number of pixels by a specific scale factor based on the device’s display capabilities. For example, the scale factor for an iPhone 8 is 2x and the scale factor for an iPhone X is 3x.
Images that will be viewed on high-resolution devices must be exported with the correct optimization correctly in order to display as intended. When designing high-resolution artwork for product catalogs, there are a number of factors to consider, such as the file format, file optimization, and color palette choices.
For more information, see Apple’s Human Interface Guidelines on Image Size and Resolution.
Shop Everything
The Shop Everything option is a view all feature that allows quick access to all the products under a category or sub-category.
Shop Everything will display products as long as at least 1 sub category on the level you are on has products.
If all sub categories on the level you are on has further sub categories, then Shop Everything does not display any products.
Product Grid View
The product grid displays product cards in an easy to scan view.
Key product grid view features include:
- Count of products in the selected sub-category (top left)
- Three products per row
- Product image size, title, variant swatch size, price format are shown
- Variant swatches are truncated
- Sale price is displayed in red font next to the old price that is struck-through
- List view
- List icon on top right (next to Refine) allows the grid UI to become a product list, allowing a user to scroll through many more products per scroll
- Hero image
- The display image on the product grid is called a Hero Image.
- Customers can select the hero image by assigning a sort id to the images sent via product feed (product id
<>image id<>sort id)
Configurability for the items above is being discussed for an upcoming Tulip release.
Catalog Languages
Tulip enables retailers to import their products into Catalog in multiple languages. For example, a retailer that operates in Quebec would like to have their Catalog available in both English and French.
When the application loads, it automatically loads the catalog in the language that the catalog is being used in. However, if there is no catalog available in the language the app is being used in, it will continue to show the catalog in the default language configured for the retailer.
Video display
URLs of videos provided by the retailer are loaded by the app and the videos are then displayed through a WebView.
Note: Videos must be specified in a separate array.
Available Configurations
Retailers can configure this feature in the following ways:
| Field Name | Configuration |
|---|---|
| Landing Screen | Typically set to the top Catalog category. Can be: Search, Settings or Orders (requires Checkout) |
| Shop Everything |
|
| App Settings |
|