Use add-ons to add a Shopify e-commerce store to your website.
add-ecommerce-store-muse_1408x792

1. Set up an e-commerce store

The first step in adding e-commerce to your site is to create a store with a third-party solution. In this tutorial you'll be using a Shopify store that we created for the Nomad Dreamers fan site

Download the nomad-dreamer-widget.zip and open the NomadDreamers-start.mu file. Switch to Design mode and scroll down to the section below the Shopify eCommerce Widget heading on the page.

Note: There are several other e-commerce solutions you can use like Ecwid, Gumroad, or Sellify.

Design mode

2. Install the free Shopify Button widget

Go to the Shopify Button widget on the Adobe Muse Widget directory. Click the Get this Widget button to download the Shopify_Button.mulib. Double-click the file to automatically install it in your Library panel.

Get the Shopify Button widget

3. Add the widget to your site

Open the Library panel, then open the Shopify Button folder and drag the the Shopify Button widget onto the area where you want the button to appear.

Add the widget

4. Add a Shopify collection to the widget

Select the widget and click the blue option icon to open the Shopify Options panel. Enter nomad-dreamer-fan-site in the Shopify Name field. Enter 32815617 in the Shopify Collection ID/IDs field.  

Tip: You can use the collection ID from any collection you've set up in your Shopify store. The ID is the last part of the collection URL. For example nomad-dreamer-fan-site.myshopify.com/admin/collections/32815617. See shopify.com for more on Collections. 

Add a Shopify collection

5. Complete the page

The Shopify Button widget uses a graphic style to link objects to the store. You can use the default button or you can apply the shopify-button style to any object on your page to link it to your store. 

To complete the page using the default button, select just the button object and use Copy/Paste to create duplicates and drag them into postion. 

Optional: Try using a different object as a button. Click the album image next to Americanized and apply the shopify-button graphic style.

Complete the page
06/15/2015

Contributors: 123Muse.com, Chris Kellet, Ali Pordeli

Was this page helpful?