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. Once logged in to the Shop App, scroll to the bottom of the page to find your store ID. This ID will be necessary to set up the store on the Websites 360 site.

2. Next, log in to your Websites 360 dashboard and navigate to the Content panel.

3. Add a new page by clicking Add New Pages and selecting the Generic page template.

4. Scroll to the bottom of the Content panel and click the newly added "Generic" page to edit it.

5. On the new page, click one of the green (+) icons and select HTML from the menu.

6. 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>

7. Replace 'xxxxxxxx' with the Store ID from step 1. Pro Tip: Use the Find & Replace feature! If you chose Option 2, then you will also want to copy the Category ID.

8. Click Save on the HTML block.

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!