Shopify Widgets

Created by: - $5.00

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"


something you're selling, "Hanes Basic T-Shirt"


a specifically defined subset of products, "Summer-Themed T-Shirts"


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:

Three 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

Embed a Product

We'd like to rename this option "Embed a Product Badge," but who are we? We use this widget extensively with our 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.