---
title: WooCommerce for Apple TV
date: 2015-09-09T18:20:46+00:00
modified: 2015-09-10T17:39:40+00:00
image:: https://kaspars.net/wp-content/uploads/2015/09/apple-tv-store-homepage.jpeg
permalink: https://kaspars.net/blog/woocommerce-apple-tv
post_type: post
author:
  name: Kaspars
  avatar: https://reverse.kaspars.net/gravatar/avatar/92bfcd3a8c3a21a033a6484d32c25a40b113ec6891f674336081513d5c98ef76?s=96&d=mm&r=g
category:
  - WordPress
---

# WooCommerce for Apple TV

![Store homepage and category browser on Apple TV](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-store-homepage.jpeg?strip=all&quality=90&resize=1000,563)See below for more screenshots of the Apple TV shopping experience



I wonder if it has to be a [tvOS](https://developer.apple.com/tvos/) app. Glad there is the [WooCommerce REST API](http://docs.woothemes.com/document/woocommerce-rest-api/). Apparently [it’s all HTML and Javascript with some Apple specific app magic on top](https://developer.apple.com/library/prerelease/tvos/documentation/General/Conceptual/AppleTV_PG/YourFirstAppleTVApp.html):

> You build these client-server apps using web technologies such as HTTPS, XMLHTTPRequest, DOM, and JavaScript. You use Apple’s custom markup language, TVML, to create interfaces, and you specify app behaviors in a TVML document using JavaScript. The TVMLKit framework provides the bridge between your native code and the JavaScript/TMVL code in your user interface.

Here is an illustration of the [Apple TV app client-server model](https://developer.apple.com/library/prerelease/tvos/documentation/General/Conceptual/AppleTV_PG/YourFirstAppleTVApp.html):

[![Apple TV App Flow](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-app-flow.png?strip=all&quality=90&resize=800,321)](https://developer.apple.com/library/prerelease/tvos/documentation/General/Conceptual/AppleTV_PG/YourFirstAppleTVApp.html)Source: [developer.apple.com](https://developer.apple.com/library/prerelease/tvos/documentation/General/Conceptual/AppleTV_PG/YourFirstAppleTVApp.html)



> Your JavaScript file loads TVML pages and pushes each page onto the navigation stack. As the user navigates through your app, TVML pages are pushed and popped from the stack. After the user closes your app, the Apple TV home screen appears.

Here are the [docs for the Apple’s Television Markup Language (TVML)](https://developer.apple.com/library/prerelease/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/index.html) with [an example of a product page](https://developer.apple.com/library/prerelease/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/ProductTemplate.html):

```
<productTemplate>
   <banner>
      <infoList>
      </infoList>
      <stack>
         <title>…</title>
         <subtitle>…<subtitle>
         <row>
         </row>
            <description>…</description>
            <buttonLockup>
            </buttonLockup>
      </stack>
      <heroImage src="…" />
   </banner>
   <shelf>
   </shelf>
   <!—- Everything following is under the fold —->
   <shelf>
   </shelf>
   <productInfo>
   </productInfo>
</productTemplate>
```

which results into something like this:

[![Apple TV Store Product Page Layout](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-product-page-layout-e1441906697619.png?strip=all&quality=90&resize=800,488)](https://developer.apple.com/library/prerelease/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/ProductTemplate.html)Source: [developer.apple.com](https://developer.apple.com/library/prerelease/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/ProductTemplate.html)



## Screenshots of the Apple TV Shopping Experience

 
			#gallery-1 {
				margin: auto;
			}
			#gallery-1 .gallery-item {
				float: left;
				margin-top: 10px;
				text-align: center;
				width: 100%;
			}
			#gallery-1 img {
				border: 2px solid #cfcfcf;
			}
			#gallery-1 .gallery-caption {
				margin-left: 0;
			}
			/* see gallery_shortcode() in wp-includes/media.php */
		  [![Store category browser and selector on Apple TV](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-store-category-browser.jpeg)](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-store-category-browser.jpeg)   Store category browser and selector   
  [![Shop product browser and picker](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-shop-product-browser-selector.jpeg)](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-shop-product-browser-selector.jpeg)   Shop product browser and picker   
  [![Apple TV store category product listing and selector](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-store-product-listings.jpeg)](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-store-product-listings.jpeg)   Store category product listing and selector   
  [![Single product page on Apple TV](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-single-product-page.jpeg)](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-single-product-page.jpeg)   Single product page on Apple TV   
  [![Inidividual product page with photo, price, description](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-product-page-multiple-product-images.jpeg)](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-product-page-multiple-product-images.jpeg)   Inidividual product page with photo, price, description   
  [![Large size product photo zoom](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-product-photo-detailed-view.jpeg)](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-product-photo-detailed-view.jpeg)   Large size product photo zoom   
  [![Buy now button on the single product page](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-product-buy-now.jpeg)](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-product-buy-now.jpeg)   Buy now button on the single product page   
  [![Product options and variations on Apple TV](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-product-options-variations-selector.jpeg)](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-product-options-variations-selector.jpeg)   Product options and variations on Apple TV   
  [![Store checkout page, payment and shipping details on Apple TV](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-shop-checkout-shipping-payment.jpeg)](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-shop-checkout-shipping-payment.jpeg)   Store checkout page, payment and shipping details on Apple TV   
  [![Purchase confirmation on Apple TV](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-shop-purchase-confirmation.jpeg)](https://kaspars.net/wp-content/uploads/2015/09/apple-tv-shop-purchase-confirmation.jpeg)   Purchase confirmation on Apple TV   
 

Screenshots from the [Apple Special Event](http://www.apple.com/apple-events/september-2015/) video.