Embed Your Shop or Product Category on Your Website

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 app and select the Pages tab at the top of the page.
  2. Click the + Add A Page button at the top of the page.

  3. On the menu that appears, check the box next to Generic, then click Add.
  4. Scroll to the bottom of the Pages view and click the newly added "Generic" page to edit it.
  5. Select the (+) button at the bottom of the page or in between the content blocks, where you'd like to add the HTML block.

  6. Select HTML from the menu that appears.

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

  8. Replace 'xxxxxxxx' with your Store ID. Pro Tip: Use the Find & Replace feature
    Click here to learn how to find your Store ID.
  9. Click Save on the HTML block.
  10. 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 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.
    Screen_Shot_2022-11-02_at_2.54.13_PM.png
  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!


    • Related Articles

    • Add a 'Category' Navigation Bar to Your Shop Page

      You can add a "Category" Navigation Bar to your Shop's page to make it easier for customers to browse the different products you offer. To get started, you will add an HTML block to the page on your Websites 360® site where your Shop is embedded. ...
    • Link to a Store Category on Your Website

      You can link directly to your store categories on your website. You may wish to link to your store categories on a dropdown menu on your website's top navigation, or perhaps on a linked image on your home page. The below instructions will open the ...
    • Import and Export Store Products

      You can import and export your store's catalog on your Shop app. This makes it easy to make bulk updates to products and categories. Import your products If you would like to bulk-upload products to your store, you can enter your product details in a ...
    • Import and Bulk-Upload Products to Your Store

      Products can always be added to your store one at a time using the + Add New Product button on your catalog page. However, there are times when adding many products at once is highly beneficial. You can add products in bulk by importing a CSV file ...
    • Changing the Look of Your Store

      Once your Websites 360® site is set up for basic shopping functionality, it's time to customize the look and feel of the contents of the store. From Marketing 360®, click Shop App from the dashboard or from the App Menu near the top left corner of ...