Nice to have you back again

Installation & Setup

Download MusexPress CMS

Download MusexPress CMS and install it.

Please keep in mind that if you wanna use the new version, you need to update all of the MusexPress widgets in your Muse project (to the new version) to be sure that everything will work correctly on your site.

Setup WooCommerce

As first we need to install Woocommerce. Log into your WordPress admin panel, go to the Plugins  menu and click on the “Add New” button. Search for WooCommerce and install the latest version.

Once it’s successfully installed, activate the Plugin. 

Then click on the “Run the setup wizard” button and it comes up a welcome window.

Ok, let’s go, let’s configure some settings for store, shipping and taxes, payment gateways and more. This is the pages setup. You don’t need to set this pages from here so you can press on skip.

In the next step you’re asked to enter information about your store location. In the dropdown you can start finding or typing the country and/or state. You next see the store currency field where you can set the currency you need for your store. The other fields regard the weight and dimensions units for your products. They are  automatically based on your store location but you can change if needed. We leave the page like this and go to the next step.

We now have Shipping and Tax setup check boxes. If you’re shipping phisycal goods, check this box. Four more fields appear: two for domestic shipping and two for international shipping. You can enter a cost for shipping for order and/or a cost for shipping for item. The last field is about tax setup. If you need to charge sales tax, check the box and you’ll be asked to indicate whether you will enter prices inclusive of tax or not. You can even import some standard taxes based on your store location.

Ok, let’s go to the next screen, the payments. You can select a few included gateways: paypal, bank transfer, cheque and cash on delivery. Just enable the ones you need and go to the last step.

Well done, Woocommerce is correctly installed.

Download WooCommerce for Muse

What we need to do now is to download the WooCommerce plugin for MusexPress from MuseGain.com. This allows to connect Woocommerce to Adobe Muse.

Once downloaded, unzip the file. You get 2 folders: widgets and plugin.

 

Install the WooCommerce Plugin

Now we need to install the plugin on WordPress. So, jump back to the WordPress admin panel and go to the “plugins” menu. Click on the “add new” button on the top and then upload the plugin.

Select the woocommerce.zip file from the plugin folder and then click on the “install now” button. Wait for installation, and then activate the plugin.

Install the WooCommerce Widgets

Back to the plugin menu and from the MusexPress – WooCommerce section you can download the Muse widgets.

Keep in mind that you’ll find an update notification here everytime we publish an update or a new release of our widgets.

Download the widgets and click on the mulib files: Shop Pages, Product Page, Product Template and Optional Widgets. Click on to have them installed in Adobe Muse.

 

Create the Muse Pages

Remember that you have to create 6 pages in your Muse project, they actually are the pages that any store requires to work:

Shop page

Product page

My Account page

Cart page

Checkout page

Terms and conditions page

MusexPress 3.2 allows to give to these pages the name you prefer. What we’re gonna do is to drag and drop the relating widget into each one of the pages we mentioned before. You can find all the widgets in the “MusexPress – WooCommerce Pages” folder.

 

Shop Page

Open the “Shop Pages” folder from the Library Panel and drag and drop the “Shop Page” widget into the page.

The new version no longer requires grid widgets.

If you wanna create a grid you can build it starting from our Sample Template widget (that you can find in the Product Template folder) and handle it to have the grid style you prefer. You just need to copy and paste your product template as many times as you want. Otherwise you can also place the Sample template as a masonry layout, simply by modifying the template style to have a totally customizable result.

Note: For a well-functioning Shop Page, don’t forget to set the exact number of products in the Shop Page widget menu and assign a different ID number to each product. You can change it in the Product Title widget menu. For further info, take a look at how it’s configured in our Møte template.

Remember that the product title style (that is a link) is editable from the Muse Hyperlink menu. You can change font and size directly with the Muse native tools.

The Shop Page widget is an unique widget that must be inserted only once in your project, because the new Woocommerce no longer requires the “hide in other breakpoints” option, (unless you want to create a totally different layout across the breakpoints) and you can assign the Base ID you prefer. You can finally use the WooCommerce widgets like the other Muse native widgets in the breakpoints of your project without no limits.

 

From the widget option panel you can set the number of products on the page. Note that you need to set this option in the larger breakpoint. You can also set the breadcrumb section that you want to show eventually. The Page Title Settings allows to assign the title of the Page, categories and tags.

You can also customize the “order select” settings from the dedicated options field.

Product Page

Open the Product Page Folder into the Library Panel. Here you can find all the widgets you need to build your single product page.

As first you need to put the Product Page Engine Widget off canvas.

The Single Product Featured Image acts the same way as Blog featured image: you can style and size it with the fill menu of Muse. So you can now have a product template with a product image that is not a square.

The Single Product Gallery widget allows to create a custom gallery of each single product in your store.

The Single Product Title widget: you need to set the Base ID and the product index inside the widget. Style font and size are editable from the Text Menu; colors through the Hyperlink Style.

The Single Product Summary widget contains all the info about the product. A lot of settings for a better customization of the short description content have been inserted, you can use icons from ionicons for the rating system. Don’t worry about the not centered preview: if you set it in center, it will be centered after conversion. You can use different font families for each header type of the content: you can use Google Font, or Typekit ones.

You can also find the Single Product Tabs widget with which you can customize the product tabs any way you’d like.

The Single Product Breadcrumb widget allows to style breadcrumb using hyperlinks style.

The new Woocommerce includes Upsell products and Related Products widgets. Remember that you need necessarily to put the Upsell widget before the products template, because it is dynamic and will disappear if there are no upsells. The same is for the Related products.

You can change the number of upsells and related inside the widget.

You can also use the Sample Template widget to have the related/upsell feature. Just copy and paste it as many times as you want.

Cart Page

Let’s go to the “Cart” page of your Muse project. Drag and drop the “Cart Page” widget. You can easily resize it in each breakpoint of your page to have a perfect design on all devices. You can change the font directly from the widget menu and customize the style of each single part of the page directly from the widget menu.

Checkout Page

Go to the “Checkout” page and drag and drop the “Checkout Page” widget. You can have fully control of the style of this page too.

My Account Page

Repeat the same process for the My Account page (here you need to drag and drop the My Account Page widget)

Terms & Condition Page

Into the Terms and conditions page, you can insert a Muse text box with the binding terms and conditions applying to your store purchases.

Product Template

In the Product Template folder you’ll find all the widgets you need to get a totally customizable and complete product template for your shop page, for the index of your site (for example to show featured, recent or other products type) or in other pages of your project. You can find several widgets in this folder:

 

Sample Template: it’s a default Product Template inclusive of the most important widgets. You can decide to use it to save time instead of creating your own template. If you want create a product template from scratch, you can assemble all the single widgets in this folder.

Product Template Container: all the other widgets in this folder must be inserted inside this accordion to work.

Product Title: You need to set a Base ID and product index inside the widget menu. Style font and size are editable from the Text Menu, colors through the Hyperlink Style. Note that this widget is always necessary. Without this widget, the product doesn’t shown.

Product Thumbnail: it’s the image of the product and it is compatible with the Woocommerce plugin, but is limited in styling (usually will be cropped to square from Woocommerce) and gets the size from the WooCommerce settings. If you want a more flexible image for your product template, use the Featured Image widget.

Product Categories and Tags: you can choose to show categories or tags and select the separator. Style font and size are editable from Text Menu, colors through the Hyperlink Style.

Product Excerpt: it’s a text field in which you can change the paragraph length from MusexPress Dashboard, in Woocommerce settings.

On Sale badge: you can now style and place the on Sale badge independently from the image. It will be showed only when you have an active discount price on a product (added from the admin panel).

Product Featured Image: You can style and size it from the Muse fill menu. You can use it instead of the Product thumbnail if you need a more flexible image styling.

Product Variable Excerpt: You can choose the paragraph length inside the widget menu, in this way you can have a grid with masonry style and products template with different length.

Add to Cart Button: the text labels for different type of buttons can be set in MusexPress Dashboard- General Tab-Woocommerce.

Optional Widgets

If you want to show your recent/featured/on sale products, you just need to use the “Optional Products Engine” widget. Insert here an unique Base ID for each Sample Product Template you wanna show and select the type of products (recent, sale, featured etc..) from the widget menu.

The MiniCart widget is a classic minicart that allows to have a quick overview of the Cart. You can customize the font, icon, colours and button styles.

The Product Link widget allows to create dynamic links that redirect to a specific product page.

The Notices widget create an alert showing indications about Cart info. It is advisable to add it in the Master Page so that it appears in all the pages.

Finally there’s the Single Product Add to Cart widget that is useful if you wanna point only one product out (e.g. an on sale product page into your project). Remember to assign the correct ID to the featured product. It’s the ID that Woocommerce itself assigns to each single product.

Different Shop Categories Layout

With MusexPress 3.1 you can create different Shop Pages for different Shop Categories, just create a new page following the same steps used to create the Shop Page. Note: Don’t forget that the ID must be unique for each page and each breakpoint. 

This newly created page must have this name shop_categoryslug, you can find the slug for each category from your wordpress admin panel.

Note that the link pointing to your different category page, is not www.yourdomain.com/shop_categoryslug/, but it will depends on your permalink settings.

For example if you have a category with slug “my-category”, and in permalink settings you have as product category base “product-category”, the correct link to this blog category will be www.yourdomain.com/product-category/my-category/

Note that all the pages which name will start with shop_ will be set as private to not be indexed.

Upload the Muse Template

Once your website design is finished, click on the File menu and then “upload to FTP hosting”. We insert our FTP credentials and continue. Now we have to insert the site URL. Pay attention to the “folder on server section”. That’s a very important step to have MusexPress working properly. You need to insert here the same WordPress installation path as completed before (either in root folder or in subfolder) and add  /mxp_theme. We’re ready to go to the next steps. In the Upload section select “All files” if you’re uploading MusexPress for the first time. Then you can choose “only modified files”. Click ok. You will see an FTP validation alert. Don’t worry about that. Click on Ignore and wait for the website upload.

Convert all Pages

Once the upload is completed, go to your WordPress admin panel.

Go to MusexPress menu and click in the pages converter. Select all the pages and click on the convert button.

After conversion, don’t forget to properly set pages for Product Grid and Single Product, in our case “Shop” and “Product” and click on save.

 

Set the WooCommerce pages

Go to WooCommerce/Settings. Press on Checkout Tab and set the properly checkout pages (like cart, checkout and terms and conditions).

Then press on Accounts Page and set the My Account Page we have created in Muse.

 

SEO Optimization

For SEO optimization we suggest removing the Muse SEO and using the WordPress SEO only. To do this, go to the MusexPress menu and click on settings. Then go to the Pages converter tab. Check the Remove Muse SEO box and click on save. 

To have a perfect SEO friendly website we also suggest enabling the permalinks. Go to settings menu, then permalinks and select “post name”. Click on Save Button.

An alternative to Adobe Muse? Keep on building awesome websites visually with many design resources!
Explore Udesly