Shopify Ecommerce

http://www.muse-themes.com/products/shopify-ecommerce

Looking for an Ecommerce solution for Muse that let's you retain total styling control? Snipcart is the solution. Our widget uses your own buttons to give you 100% custom styling. This makes allows for an incredibly seamless storefront, and a consistent feel across your entire site.

Our Snipcart widget also allows you to place a persistent shopping cart on your site within seconds. Products details are actually set up right in Muse, and are automatically linked to the cart system. Manage your store from any web browser, any time, using the Snipcart website to track payments, inventory, customer info, and more.

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.0
  • Supported Devices: Desktop, Tablet, Phone

Release Log

  • 1.0: Initial Release




Setup

CREATE A STORE AT SHOPIFY.COM

  • Go to Shopify.com.
  • If you have an existing account and store, log in now.
  • If you're creating a new store, sign up now. A free 14 day trial is available.
  • Complete the signup process.

ACQUIRING YOUR STOREFRONT API KEY

To acquire the Storefront API key needed for your Shopify account to connect with the MuseThemes Shopify widget, you will need to create an app in Shopify.

  • Click on "Apps" in the sidebar menu.
  • Click the small "Manage private apps" link near the bottom of the page.
  • Click the "Create new app" button.
  • Enter your details. In the Admin API section, enable Read and write access in all dropdowns.
  • Once you've entered all details, click Save.
  • Go to the Storefront API section and copy the API key. Make sure the box that states "Allow this app to access your storefront data using the Storefront API" is checked.
  • You will enter this API key into the MuseThemes widget options shortly. You can access the API key any times in your Shopify private apps area.

Your Storefront API key should be kept secret


ACQUIRING YOUR STORE DOMAIN

  • While logged into your Shopify account, your Store Domain is always available in the address bar of your browser. Copy the xxxx.myshopify.com address seen in the URL. Only this section is needed.


CREATING PRODUCTS

This section is not meant as a tutorial for managing your Shopify store. However, it is a good time to create a few products in your store. This will allow you to confirm that your widget is functioning in Muse. The products you create can be demo products that can be deleted or disabled at any time.

  • Click Products in the sidebar menu.
  • Click the Add Product button.
  • Give a name to your product, add a description, and add an image.
  • Repeat this process a few more time. The duplicate function is great time saver.
  • After you've created a few demo products, you will see them listed on your Products page. You may complete a variety of bulk functions here. But for now, ensure that all of your products are available.


SETUP IN MUSE

  • Open the Shopify Ecommerce widget folder in your Library.
  • You will notice there are three widgets in the folder:
    • Buy Button: This widget places a simple Buy Button on your site. This is useful if you plan to build product pages individually, or have products arranged throughout your site, not located in one "store" section. Adding a Buy Button to a product area will give you control of other elements of the product like image size, description text, etc. This widget must be used along with the Cart widget in order to function.
    • Cart: This widget places a cart on your site. The Cart displays the total number of items in the cart, as well as the total value of the items. The Cart is required for the Buy Button or the Store widgets to function. So regardless of whether you choose to use Buy Buttons or a Store, you must utilize the cart.
    • Store: This widget places a Store on your site. The Store settings are mostly automatic, such as the layout, image and text. Some styling options are available, but this is a good solution for those that have a dedicated "store" area on their site, and do not have individual product pages. This widget must be used along with the Cart widget in order to function.
  • Drop the Shopify Ecommerce widgets you require into your site. Keep in mind the functionality of each widget, as described above. In most cases, you will use a combination of the Buy Button and a Cart, or a Store and a Cart. A Cart widget is always required for functionality.
  • Arrange the widgets on your page as you like.


CART WIDGET SETUP

The Cart widget is the main widget that requires information from Shopify to link your widget to your Shopify account. The Buy Button and Store widgets contain mostly styling options.

  • Store Domain: Paste your store domain here. See the "Acquiring Your Store Domain" section above for details.
  • Storefront API Key: Paste your Storefront API Key here. See the "Acquiring Your Storefront API Key" section above for details.
  • The remainder of the settings in this widget are styling options. Styling options will not be discussed in detail here, as the options are self-explanatory.


BUY BUTTON WIDGET SETUP

  • Product Handle: This ID links and individual Shopify product with the Buy Button. You may use as many Buy Buttons on your site as you like. Each Buy Button should be linked to products as needed. To acquire your product Handle, visit a Product page in Shopify. Scroll to the SEO section on the bottom of the page. Copy the very end of the product URL, and paste into the Product Handle field in the widget.
  • The remainder of the settings in this widget are styling options. Styling options will not be discussed in detail here, as the options are self-explanatory.


STORE WIDGET SETUP

  • Number of Columns: This setting determines the number of columns in your store. Note: The columns are affected by the double arrow buttons in Muse, that allow content to expand. If these buttons are enabled (pointing outward), allowing content to expand, the store columns will expand on larger browser widths. Please preview your store on a variety of widths to make sure your column spacing is proper. You may want to keep the double arrows pointing inward, to avoid gaps, depending on the width of your store.
  • The remainder of the settings in this widget are styling options. Styling options will not be discussed in detail here, as the options are self-explanatory.



Commonly Asked Questions

No frequently asked questions


Known Issues/Conflicts

No known issues or conflicts


Additional Info Links