How to add a Business Catalyst shopping cart to your Muse site

How to add a Business Catalyst shopping cart to your Muse site


Tutorial Details

  • Difficulty: Beginner
  • Topic: eCommerce

Tutorial Downloads

Download PDF  View Demo Site


Introduction

This tutorial is written for Muse designers who want to design their site in Muse, but have it published on Business Catalyst. They also want to use the built-in Business Catalyst eCommerce capabilities.


Why Business Catalyst?

Business Catalyst (BC) includes all the main functions you need to run a successful online business. It includes Content Management System (CMS), Customer Database (CRM), eCommerce, blogging, email marketing, analytics and more. Check out the official Adobe Business Catalyst website for more details.

Why Muse?

Muse allows designers to quickly build websites, without writing any code. It's a tool built for designers who want to be able to design rich, interactive websites. It includes all the common Adobe interface elements you're familiar with from the eyedropper, to the layers panel and more. You can learn more at muse.adobe.com.


Step 1: Create a new page in Muse

The first step is to create the new page we are going to use as our Business Catalyst template. This page should have your site's header and footer but no content in the middle. This is where the shopping cart will be inserted.


Step 2: Hide the page from the Menu

The second step is to hide the new page from the menu.

Right-click on the page (command + click on a Mac) and scroll down to Menu Options > Exclude Page From Menus. Doing this will keep Muse from adding your template as a linked page on your menu.


Step 3: Add the “Magical” BC Tag

The third step is to add the special Business Catalyst tag that magically turns a page into a BC site-wide template.

From the Object menu choose 'Insert HTML'. The HTML Editor box will pop up with the text “Insert your HTML here”. Replace this text with the following tag: {tag_pagecontent}

Then hit Ok.

You’ll now see that Muse has added your tag on the page. Position the tag (by clicking and dragging it) where you’ll want your products to appear on the page.

If you accidentally mistype something in the HTML editor, you can bring up the editor again by right-clicking the HTML item (command + click on a Mac) and selecting Edit HTML…


Step 4: Publish your Muse site to BC

The fourth step is to publish the site to BC.

From the File menu, select Publish. Type in your site’s name. You can also click Options to bring up a form that lets publish to a New Site or choose from a list of your existing BC sites. Then hit Ok.

Keep in mind that if you are publishing to a new site, by default BC will publish your site on the Web Basics plan which doesn't include eCommerce capabilities. You must then make a support ticket and request for Adobe to upgrade your plan.

You can avoid that by going to our BC hosting website first and signing up for a trial account and choosing an eCommerce site as your starting point. Then when you want to publish from Muse, you can choose that site and Muse will publish your site to the new trial account you have created.


Step 5: Make the new template, your default template

The fifth step is to go to the BC admin (by clicking on the Manage tab in Muse) and setting the newly published template as the default template.

In the left side-bar menu go to Site Manager > Page Templates. From the list of page templates, open the template you created in Muse. Then, under the headline “Template Details”, select the check box marked “Default Template”. Then click Update at the bottom of the page.


Step 6: Apply the new Template to your Catalogs

The sixth step is to apply new template to your product catalogs.

While still in the BC admin, on left side-bar menu go to E-Commerce > Catalogs. Open your catalog. Under the headline “Catalog Details” set “Template:” as your new Muse template. Then hit Save.


Step 7: Preview the eCommerce Catalogs

The last step is to preview the new catalog and see how it appears within your Muse design. If you have more than one catalog, you need to repeat this step for each one. You should now see your catalog and products within your Muse designed site!


Conclusion

As you can see by following these simple steps, you can easily add a powerful shopping cart to your Muse designed website and manage it from an easy to use interface.


Resources

Here are some links to resources used or mentioned in this tutorial.


Feedback

Please post your comments and feedback about How to add a Business Catalyst shopping cart to your Muse site and any suggestions for future tutorials.

comments powered by Disqus
← Back

Karim was very helpful with answering my questions. He was clear and articulate and sent me links to videos about the subjects that we discussed. Very supportive.

Robbi M.