Shopify offers an amazing ecommerce solution on its own, but you can also incorporate products and shops in your Adobe Muse site with our widgets. Here's how!Using these widgets assumes a few things:
You have set up a shopify shop, it's open and running, and the products you are embedding are visible.
You can use the widgets with a closed shop and/or hidden products, but the widgets will not display properly, leaving you with ugly, hateful code.Terminology Shop
your entire shopify account. "Muse T-Shirts"Product
something you're selling, "Hanes Basic T-Shirt"Collection
a specifically defined subset of products, "Summer-Themed T-Shirts"Variant
a version of a product, broken down by additional options, such as size or color " Hanes T-Shirt, Red, Large."
Step one: download our widgets that link to their code
Step two: Log in to your Shopify admin account and install the "Shopify Widgets" app:
https://apps.shopify.com/shopify-widgetsThree choices of widgets:
Buy Now Button
The "Buy Now Button" places a simple "Buy Now" Button on your Muse site, that links to a very specific variant from your shopify shop. Use this button when your Muse page has all the product information you want, and you just need a way for people to pay for it.
The Buy Now button has one tricky component, the need for a Variant ID. Chances are good that
http://docs.shopify.com/support/your-store/products/where-do-i-find-my-variant-idEmbed a Product
We'd like to rename this option "Embed a Product Badge," but who are we? We use this widget extensively with our musesupplyco.com site. Any time you go to a product and click "Preview Live," you'll find this widget in use on the resulting page. Look towards the right and you'll see our product placard and a "Back to Product Page" button. Here are the widget flyout panel settings we used to accomplish that:
Embed a Shop
We'd also like to rename this widget. In our mind, it's more of a "Embed a Link to a Lightbox" widget.
When we began playing with this feature, we were a little disappointed that the only thing that appeared on our page was plain text hyperlink:
To pretty it up a bit, we added the ability to customize the link either by text or by using your own button.
Regardless, the link points to a beautiful lightbox display of your store -- beautiful, depending on your product images, of course.
You will find your collection ID in the URL of the Collection.