Building a Shop Page – Marketing 360®

The first step in creating a Websites 360® Shop App store on Websites 360® is to build a shop page. Once the Product Grid has been added to a Websites 360® layout, that layout will be used for all shop-related pages like categories, single products, user account pages, and the entire checkout process.

In the example above, notice the four black Call to Action blocks below the Product Grid. As the user progresses through the checkout process, the same layout is used for each step.

Step 1: Adding a Shop Page

Click Shop App from your Marketing 360® dashboard or from the App Menu near the top left corner of the page.
Next, login to the Websites 360® dashboard and click Content at the top of the page.
Add a new page by clicking Add New Pages and selecting the Generic page template.
Scroll to the bottom of the page and click the newly added "Generic" page to edit.
Click the green (+) button and select HTML from the menu to create a new HTML Block.

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

Replace 'xxxxxxxx' with the Store ID. Pro Tip: Use the Find & Replace feature! If you chose Option 2, then you will also want to replace 'yyyyyyyy' the Category ID.
- Find your Store ID by hovering 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.
- Find your Category ID by navigating to Catalog > Categories on the left-hand sidebar, select the category, then navigate to the SEO settings. The Category ID is the string of numbers after the letter 'c' in the URL string.
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!

When the layout is complete and the Product Grid has been added to the HTML block, the result will be a page displaying a grid of the top level store categories, as well as a Featured Products grid that displays all products in the 'store front' category.

How to Change the Amount of Products Per Page

If the Product Grid code left as-is, the product grid will display 5 columns and 3 rows. To change the amount of products displayed per page, edit the '5' and '3' values.

Step 2: Adding the Shopping Bag Widget

Next, add the Shopping Bag widget to the site so users can navigate to their cart and check out after adding products, regardless of the page they're viewing.
Navigate back to the Content section on the Websites 360® dashboard, then click Footer in the Global Content right column.

Add an HTML block to the footer with the following code to display the Shopping Bag widget:

<!--SHOPPING BAG-->
<div data-responsive="TRUE" 
 data-show-buy-animation="TRUE" 
 data-layout="MEDIUM_ICON_COUNTER" 
 data-fixed="TRUE" 
 data-fixed-position="BOTTOM_RIGHT" 
 data-fixed-shape="PILL" 
 data-horizontal-indent="20" 
 data-vertical-indent="20" 
 data-icon="CART" 
 data-show-empty-cart="TRUE" 
 class="ec-cart-widget">
</div>
<div>
<script data-cfasync="false" type="text/javascript" src="https://app.shop.websites360.com/script.js?xxxxxxxx&data_platform=code" charset="utf-8"></script>
<script>Ecwid.init();</script>
</div>

Note: You can change the location of your Shopping Bag icon by changing the information in the data-fixed-position field to "BOTTOM_LEFT", "TOP_LEFT", or "TOP_RIGHT", as well as adjust the icon's padding by editing the numerical values in the data-horizontal-indent and data-vertical-indent fields.

Replace 'xxxxxxx' with the store ID from step 7 above. Pro Tip: Use the Find & Replace feature!

The result will be a 'floating' widget in the top right corner of the browser that displays once the user adds a product to their shopping bag.
Save the HTML block.

Note: It's important to make sure that all pages on the site use the global footer. This allows the Shopping Bag widget to be displayed on all pages.

Step 3: (Optional) Adding Category Navigation

Depending on how many categories are in the store, a dedicated category navigation could be needed. If necessary, add another HTML block to the Shop Page layout to display category navigation. This will display a horizontal category list on all pages, making navigation through larger stores more user-friendly.

Navigate back to the Content section on the Websites 360® dashboard, then click the Shop Page created in step 7 above.

Add an HTML block to the layout with the following code to display the Category Navigation widget:

<!--CATEGORY NAVIGATION-->
<div id="my-categories-xxxxxxxx"></div>
<div>
<script data-cfasync="false" type="text/javascript" src="https://app.shop.websites360.com/script.js?xxxxxxxx&data_platform=code" charset="utf-8"></script>
<script type="text/javascript"> xCategoriesV2("id=my-categories-xxxxxxxx"); </script>
</div>

Replace 'xxxxxxxx' with the store ID from step 1. Pro Tip: Use the Find & Replace feature!
Save the HTML block.

Step 4: (Optional) Adding Product Search

If you'd like to give customers the option to search products, embed a product search widget.

Navigate back to the Content section of the Websites 360® dashboard, then click the Shop Page created in step 7.

Add an HTML block to the layout with the following code to display the Product Search widget:

<!--PRODUCT SEARCH-->
<div id="my-search-xxxxxxxx"></div>
<div>
<script data-cfasync="false" type="text/javascript" src="https://app.shop.websites360.com/script.js?xxxxxxx&data_platform=code" charset="utf-8"></script>
<script type="text/javascript"> xSearch("id=my-search-xxxxxxxx"); </script>
</div>

Replace 'xxxxxxxx' with the store ID from step 1. Pro Tip: Use the Find & Replace feature!
Save the HTML block.

Step 5: Customize the Look & Feel of the Store Layout

Once the Shop page layout has all the required widgets and all blocks are saved, use the Websites 360® Design editor to add styles.

Click Design This Page in the right column of the Shop page.
In the Design editor, add row styles, borders, padding, etc as needed.
Want to learn more about using the Design tools? Click here to learn more!

Once the Shop page has all necessary styles added, navigate back to the Websites 360® Shop App dashboard to customize the look and feel of the store.

Click here to learn how to use the Websites 360® Shop App Design editor!

Pro Tip: How to Find & Replace IDs

To quickly update the HTML block with your store ID, use the Find & Replace All option after pasting any of the code snippets into an HTML block.

Copy / paste the 'xxxxxxxx' portion of the code snippet into the Find field.
Copy / paste your store ID into the Replace field.
Click Replace All.
Double check that both IDs were properly replaced
Save the HTML block.