The Widgets
There are 11 different parts of the Shopify Store Widget. Each individual part is highly customizable using Muse styling panels like the Fill and Stroke and Style panels in addition to further styling properties within the widgets Option Panels. The information that is displayed on your previewed and live pages is updated through Shopify. Any changes you make to, for example, images, descriptions and prices are immediately updated once saved in Shopify.
A. Image
The Image widget displays the selected variant image on your page. To view the image, preview your page in the browser. The image box can also be styled using Graphic Styles and the Fill and Stroke panel.
B. Title
The Title widget carries the name of your product as it appears within your Shopify Store. Style this text using Paragraph Styles and the Fill and Stroke panel. The text line-height and letter spacing can be adjusted within the Option Panel.
C. Price
The Price widget displays the price of the selected product as it appears in your Shopify Store. Use the Option panel to change the currency size and the color of individual parts of the price like the decimal. Easily style the price of your product using the Paragraph Styles and the Fill and Stroke panel.
D. Button
This widget creates one of two buttons for your product. Using the dropdown within the Option panel can make it a Checkout or Add to Cart button. If you would like to make another object a button for your product, use the same name within the Option Panel and Graphic Style.
E. Single Variation
The Single Variation widget allows for each individual variation to have its own selection button. The single variation can be styled to your liking and allows for different selection states using the Option Panel. Use the Fill and Stroke panel to customize the Normal State of the variation button.
F. Variation
The Variation widget provides a dropdown menu for the variations of the inputed product. Style this responsive dropdown using Graphic Styles and the Fill and Stroke panel. Further customize the variation dropdown using the Option Panel.
G. Main
The Shopify Store Main widget hosts your Shopify Store. Make sure to input your store name and API key verbatim to ensure a smooth transfer of data. Use the Option Panel to customize and style how your cart opens and appears when corresponding buttons are clicked.
H. Cart Trigger
The Cart Trigger is most effectively placed within the master page of the template and will open your shops cart. Use the Fill and Stroke and States panel to customize this button or assign the Graphic Style to another button on the page using the Graphic Style panel and the Main widget option panel.
I. Cart Number
Use the Cart Number widget to display how many items are within the users cart for your shop. Using the Option Panel, select the checkbox to make this number animate when an item is added to the cart.
J. Cart
This widget hosts your shopping cart. Using the Option Panel, select what is included in your cart by checking their respective boxes. Each dropdown section gives you full control of your carts appearance and function for users. Use the Fill and Stroke panel for further customization of your carts appearance.