All Collections
Catalogs
Embedding a catalog into your website
Embedding a catalog into your website

Learn how to embed a catalog into your website page

Updated over a week ago

Display a catalog on your website page. The embedded catalog view can be configured for different height, width and type of navigation.

NOTE:  this feature is available for paid plans only.

There are few simple steps for embedding a product catalog into your website.

1. Navigate to your Catalog Publish page.
Copy HTML code. The code can be configured and copied from Publishing section in Catalog Properties.

Use following options for configuring HTML catalog view:

  • Width

  • Height

  • Page navigation – bullets; small, medium or large thumbnails.

Alternatively, you can directly edit the code without using our code generator if you have experience with HTML. Don’t forget to replace your namespace and catalog permalink in <iframe> src attribute.

Template for the code:

<iframe src="https://www.catalogmachine.com/{namespace}/embed/catalogs/{permalink}.html?nav=bullets" height="800" width="1000" allowfullscreen frameborder="0"></iframe>

2.  Paste the code into the HTML of your site. That is it, your catalog will be loaded and displayed on the page of your website in the spot where you wish with required size.

Considerations: 

  1. Test a small catalog view size. The catalog viewer will adjust page size to configured dimensions and add scrolling for small screen sizes. We recommend to test all your catalog pages in the embedded viewer if you decide to go with smaller sizes (below 800px).

  2. Consider ‘bullets’ navigation. We recommend to use ‘bullets’ as it is faster to render and navigate, especially for catalogs with many pages.

Did this answer your question?