Home
Purchase
Origins
Gallery
Blog
▸Connect

Connect

Want to connect, have a question?

Fill out the form below

Marketing 360® Help Center home page Submit a request Marketing 360® Shop Getting Started Search Articles in this section How To Find Your Shop App Store ID Store Setup Video Walkthrough Building A Shop Page Configuring General Settings for Your Store Adding Products to Your Store Steps to Take to Finish Setting Up Your Store Changing the Look of Your Store Embed Your Shop App on Your Website Link to a Store Category on Your Website Managing Store Categories See more Related articles Advanced Form Styling Options Embed Your Shop App on Your Website Store Setup Video Walkthrough Accepting Custom Payment Amounts with the Websites 360 Shop App Add a Category Navigation to Your Shop Page Recently viewed articles Advanced Form Styling Options Building A Shop Page 3 months ago Updated 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. websites-360-product-grid-demo.gif 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:

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

Replace '69600530' 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. view-shop-id-profile.jpg The Store ID will be directly after '/store/' in the URL. 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. product-grid-example.jpg 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:

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. websites-360-bag-widget-demo.gif 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. category-navigation-example.jpg 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:

Replace '69600530' 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. websites-360-shop-app-product-search.jpg Navigate back to the Content section of the Websites 360 dashboard, then click the Shop Page created in Step number 7. Add an HTML block to the layout with the following code to display the Product Search widget:

Replace '69600530' 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. find-replace-shop-app-id.gif Copy / paste the '69600530' 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. Facebook Twitter LinkedIn Was this article helpful? 0 out of 0 found this helpful Have more questions? Submit a request Comments 0 comments Please sign in to leave a comment. © 2021 Marketing 360® | Legal

Created with Websites 360