The first step in creating a Shop App store on iHeartSiteBuilder is to build a shop page. Once the Product Grid has been added to a iHeartSiteBuilder layout, that layout will be used for all shop-related pages like categories, single products, user account pages, and the entire checkout process.
Step 1: Adding a Shop Page
- Click Shop App from your iHeart Business dashboard or from the App Menu near the top left corner of the page.
- Next, login to the iHeartSiteBuilder 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:
xxxxxxxx"
OPTION 2: Embed only a single store category at a time:
- 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.
- 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 iHeartSiteBuilder 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:
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"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.
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 iHeartSiteBuilder 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:
xxxxxxxx" - 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 iHeartSiteBuilder 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:
xxxxxxxx" - 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 iHeartSiteBuilder 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 Shop App dashboard to customize the look and feel of the store.
Click here to learn how to use the 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.
Comments
0 comments
Please sign in to leave a comment.