Embed Your Shop App 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

1. After completing the steps above, click Design this page on the top-right corner of the page, then select the "eyeball" icon at the top of the design preview window. This will open a "preview" of the page in a new tab.
   
2. On the preview page, you will see your store appear on the page. Navigate to the category you'd like to embed on the site - highlight and copy the numerical string that follows the /c/ in the URL. That is your Category ID; save it to a clipboard for the next step.
   Note: If you'd like to embed multiple categories, then you should grab their respective Category IDs at this time.
   
3. Return to the HTML Block and remove the code you entered in Step 5 above. Replace it with 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>

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

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