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.

To get started, log in to your Shop App.

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. You have two options for how to display your products:
   
   OPTION 1: Embed all store categories in one widget:
   

   <!--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>

   
   OPTION 2: Embed only a single store category at a time:
   

   <!--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=xxxxxxxx",
   "views=grid(5,3)"
   );
   </script>
   </div>

6. Replace 'xxxxxxxx' with the Store ID. Pro Tip: Use the Find & Replace feature! If you chose Option 2, then you will also want to copy the Category ID.
   
   To quickly view your Shop App Store ID, you can hover over the My Profile link in your dashboard and view the URL that's previewed in the bottom left corner of your browser.
   The Store ID will be directly after '/store/' in the URL. 
   
   
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.

When complete, click Publish at the top of the page to take your store live!