Our Content Extensions feature offers endless possibilities to enrich your app with your own content. You can integrate this content seamlessly into the app experience without any involvement of the Highstreet team.

Examples of Content Extensions are branded content pages about a new category or collection. Before Content Extensions customers were always sent directly to the category view in the app showing just products. Now however, you can create a special story about that new category and send your customers there from home. Then from that story, they still seamlessly end up in the app's category view or product views to buy the product.


Content Extensions allow you to:

  • Seamlessly integrate your new or existing web content with the Highstreet catalog experience
  • Promote that content from your home experience.
  • Promote that content from your product description or a product attribute.

You can easily convert existing web content into a Content Extension by adding a few simple tags to your HTML code.


How to setup your content extension?

In order to make sure that products or categories open from your web content, you need to add or modify anchor tags in your HTML. For example:

<a data-hs-link="hs://categories/women" href="<https://www.scotch-soda.com/nl/nl/dames>">Dames</a>

Regular browsers look at the href attribute and will open the 'dames' category on the Scotch & Soda website when the user taps the link. When loaded as a content extension however, our app will look at the data-hs-link attribute and recognise the value to be a link to a category with ID 'dames'. The app will then know to open the native category view for that category when the user taps the link. If the content is not used outside of the app, you can leave out the href.


Linking to specific products, categories or lookbooks

Content extensions support five types of links:

  • a link to a product (e.g. hs://products/:ID)
  • a link to a category (e.g. hs://categories/:ID)
  • a link to a lookbook (e.g. hs://lookbooks/:ID)
  • a link to the product search view (e.g hs://search/query%20goes%here) Note that the search query must be url encoded.
  • a link to a product lister view with filters (e.g hs://productlist?title={name_in_the_app}&category={category_id}&filters[0][attribute]={attribute_id}&filters[0][in][]={attribute_value}. See below for more details.

In your content, you should replace the relevant ID's of the product, category or lookbook you're trying to link to. The ID can consist of numbers, letters and some special characters.

The ID of products and categories can be found in your e-commerce back-end. The ID of lookbooks can be found in Highstreet Studio.


Example 1: linking to a product

In this example, we want to link to a specific product. In our e-commerce back-end, we learn that the ID of the product is commander-jeans. The link therefore becomes hs://products/commander-jeans. We add the link to the value of the data-hs-link attribute to arrive at the following HTML snippet:

<a data-hs-link="hs://products/commander-jeans">Commander Jeans</a>

Example 2: linking to a lookbook

In this example, we want to link to a specific lookbook. We can find out the ID of that lookbook by opening it in Highstreet Studio and looking at the URL (in the location bar of your browser). The URL will look like this:

<https://studio.highstreetmobile.com/#/lookbook/manager/881/editing> 

You can find the ID near the end of the URL. In this case it's 881. The link to this lookbook is hs://lookbooks/881.

We add the link to the value of the data-hs-link attribute to arrive at the following HTML snippet:

<a data-hs-link="hs://lookbooks/881">Commander Jeans</a>

Linking to a product list view with filters.

You can create deeplinks to a category with a filter. The user will be redirected to a new category with only products that correspond to those filters.

Example deeplink with filter:

hs://productlist?title={name_in_the_app}&category={category_id}&filters[0][attribute]={attribute_id}&filters[0][in][]={attribute_value}

Parameters

  • The title parameter will be the name of the resulting product list, that will be shown in the app. This parameter is optional, if omitted the name of the selected category will be shown.The title of the product list, will need to be url encoded. As you will see in one of the following examples a name as “Green and Blue” needs to be written as Green%20and%20Blue
  • The category parameter indicates the category on which the filter will be applied. This parameter is optional, if omitted the root category will be selected.
  • The first parameter filters[$i][attribute] describes the attribute being filtered on.
  • The additional parameters describe the acceptable value or values. At least one acceptable value is required: filters[$i][in][$j]=$valueFilters are numbered, starting from 0 ($i). Acceptable values {value} are also numbered, starting from 0 ($j).

Example

  1. Example: Only returns Adidas products of size 2. This will apply this filter on category with id 2 and the resulting product list will have the name Adidas.hs://productlist?title=Adidas&category=2&filters[0][attribute]=brand&filters[0][in][]=ADIDAS&filters[1][attribute]=size&filters[1][in][]=2
  2. Example: Only return green or blue products. This will apply this filter on category with id 12 and the resulting product list will have the name Green and Blue.hs://productlist?title=Green%20and%20Blue&category=12&filters[0][attribute]=color&filters[0][in][0]=green&filters[0][in][1]=blue