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 three types of links:

  • a link to a product (e.g. hs://products/123)
  • a link to a category (e.g. hs://categories/123)
  • a link to a lookbook (e.g. hs://lookbooks/123)


The value "123" in the links above is just used as an example. In your content, you should replace it with the ID 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>