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:
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).
Consider ‘bullets’ navigation. We recommend to use ‘bullets’ as it is faster to render and navigate, especially for catalogs with many pages.