Embed Your Shop or Product Category on Your Website

Once your Shop is set up within Marketing 360®, then you will want to embed your store and products on your website. You can embed your entire store on your site, or you can instead choose to embed individual categories.

Regardless of which method you choose, you will first need to follow the below steps to embed your entire store.

Embed your entire store on your website

1. Log in to your Websites 360® dashboard and navigate to the Content panel.
2. Add a new page by clicking Add New Pages and selecting the Generic page template.
3. Scroll to the bottom of the Content panel and click the newly added "Generic" page to edit it.
4. On the new page, click one of the green (+) icons and select HTML from the menu.
5. In the HTML block, paste the following code in the large text field to display the product grid. 
   

   <!--PRODUCT GRID-->
   <div id="my-store-xxxxxxxx"></div>
   <div>
   <script type='text/javascript' data-cfasync="false" src='https://app.shop.websites360.com/script.js?xxxxxxxx'></script>
   <script type='text/javascript'>xProductBrowser("id=my-store-xxxxxxxx","views=grid(5,3)");</script>
   </div>

6. Replace 'xxxxxxxx' with your Store ID. Pro Tip: Use the Find & Replace feature! 
   Click here to learn how to find your Store ID.
7. Click Save on the HTML block.
8. Next, add all the other necessary content blocks to the page. This will create the rest of the layout around the shopping functionality.

If you would like to move forward with your full store on the page, then click Publish at the top of the page to take your store live! If you would like to instead embed individual categories, then do not publish, and follow the steps below.

Embed only a single store category

To embed a specific Category on a page, first navigate to your Shop dashboard to find the Category ID.

1. Select Catalog > Categories on the left-hand sidebar.
2. In the Categories column, select the desired category, then navigate to the SEO settings. The Category ID is the string of numbers after the letter 'c' in the URL string.
   
3. Return to your Websites 360® dashboard and create an HTML Block (see steps 1-4 in the section above).
4. Paste the code below:
   

   <!--PRODUCT GRID-->
   <div>
   <script type='text/javascript' data-cfasync="false" src='https://app.shop.websites360.com/script.js?xxxxxxxx'></script>
   <script type='text/javascript'>
   xProductBrowser(
   "id=my-store-xxxxxxxx","defaultCategoryId=yyyyyyyy",
   "views=grid(5,3)"
   );
   </script>
   </div>

5. Replace 'xxxxxxxx' with your Store ID. Pro Tip: Use the Find & Replace feature! 
   Click here to learn how to find your Store ID.
6. Replace 'yyyyyyyy' with the desired Category ID. 
7. Click Save on the HTML block.

Click Publish at the top of the page to take your store live!