Shopify Ecommerce Widget

Demo: https://demo.wocode.com/shopify

Current Version: 1.2

Tutorial Videos

Setup

Using the Shopify widget allows you to utilize Shopify’s excellent ecommerce platform on your Without Code website as a storefront displaying buy buttons, individual products or an entire store. Keep in mind that you will always have full access to all Shopify functionality at your Shopify backend (shopify.com). To do things like add products, adjust inventory or change pricing, you will always go to Shopify’s site – these things cannot be managed in the Without Code builder. Changes like price, description, variants, etc. will be updated on your Without Code site automatically. So remember, store management is always done at shopify.com.

Note that there are 2 Shopify widgets in the widget library: Shopify Cart and Shopify Store. Both widgets will be needed.

ACQUIRING SHOPIFY STOREFRONT ACCESS TOKEN

1. From your Shopify admin, select Apps.
2. Click Manage private apps.
   
3. Click Create a new private app.
   
4. Fill out the details of your private app.
5. In the Storefront API section, select Allow this app to access your storefront data using the Storefront API.
   
6. In the Storefront API permissions section, select which types of data you want to expose to the app.
   
   Four permissions are selected by default:
   • Read products, variants, and collections
   • Read and modify customer data
   • Read and modify checkouts
   • Read content like articles, blogs, and comments
7. Click Save.
8. After you save the app, you can find the generated storefront access token in the Storefront API section.
   
9. Copy the Storefront Access Token.

SHOPIFY CART WIDGET SETUP: CART PLACEMENT AND CART OPTIONS

Back in the Without Code site builder, we’ll start by setting up the Shopify Cart widget. This widget serves 2 primary purposes: linking your widget with your Shopify store, and setting up your cart. This widget is required.

• Drop the Shopify Cart widget on your page. When placing the widget, consider where you would like the cart to appear. There are 2 options for cart placement:

  Manual Cart Placement: Manual placement allows you to position the cart on the page manually. To do this, place the cart where you like on the page. Note that this with this method, the cart button will only appear on the page you place it in. When using manual placement, set to Manual Placement in Cart Settings > Cart Placement

  Pinned Placement: Pinned Placement will pin your cart to the side of the browser window. The cart will be visible as you scroll within a page. To use this positioning type, set to Pinned Placement in Cart Settings > Cart Placement.

• Persistent Cart: If you would like your cart to be persistent across your entire site, place the widget in the header or footer, and set to Pinned Placement. This will ensure that the cart will appear throughout the site, and continue to function regardless of whether the site visitor is on the shop page or not.
• If the Shopify Cart widget is set to Pinned Placement but not placed in the header or footer (i.e. it is placed somewhere on the page), it will not be persistent across the site.
• Currency Format: This section allows you to use whatever currency symbol you like, allowing for displaying currencies throughout the world. Use the Currency Format Prefix and Currency Format Suffix text fields to enter your desired currency format symbols.
  
• Cart Labels: This submenu gives you the ability to enter custom text for the Cart title, Empty label, Checkout label, Total label, Currency label, Notice label, and Note Description text.
• Cart Settings: This section allows you to set the title text for the cart. You can also enable or disable the cart Title, Product Count and Icon
• Checkout Styling > Cart Position: This setting allows you to set the side of the page in which the checkout will appear (left or right)
• Cart Styling > Cart Position: This determines which side of the page the cart will appear on. The cart can be pinned to the left or right.
• Cart Styling > Top Position: This determines the vertical position of the cart. This is a percentage-based setting, beginning with the top of the page. For example, a setting of about 5% will align the cart with a typical site header. A setting of about 90% will align the cart with a typical site footer.

SHOPIFY CART WIDGET SETUP: LINKING TO SHOPIFY

• Open the widget option panel.
• Enter your Shopify Store URL. This is the main URL of your Shopify store. It can be found in the address bar when logged into your Shopify store.
• Copy the root URL, before any “/”.
  
• Paste the URL into the Shopify Store URL.
• Shopify Storefront Token: Enter your Shopify Storefront Token. It can be acquired by following the steps in the Acquiring Shopify Store URL section above.

SHOPIFY STORE WIDGET SETUP

• Unique ID: Enter a unique ID for the widget here if you intend to use multiple instances of the widget on the same page.
• Display Mode: This is an important option that allows you to select which display mode to utilize. The available display modes are:All Products: your entire store in one grid.
  Single Product: a single product display
  Collection: a collection of products (collections are defined at shopify.com)
  Products Set: a custom-defined set of products
  Buy Button: a simple buy buttonEach display mode offers a unique set of options. Each display mode will be covered in individual sections below.

DISPLAY MODE: ALL PRODUCTS

This is the display mode of choice for easily adding a complete store to your site. All of your products are displayed in a grid gallery.

• Select “All Products” from the Display Mode dropdown.
• Number of Products to Fetch: This determines the number of products to display in the store.
• Number of columns: As the name implies, this determines the number of columns that are used to display the products.
• Product Button Action: There are 3 choices for what happens when the site visitor clicks the product button. These are self-explanatory and do as the title states:
  – Add to cart
  – Opens modal
  – Redirect to checkout
• Checkout in Popup: When this option is enabled, the checkout process will take place in a new popup window, instead of the redirect to Shopify.
• Product Display Elements: This important feature allows you to custom select each element that will be displayed for products.Note that when you first begin to add elements, your products will go blank. This is because certain Display Modes (All Products and Single Product) have pre-selected elements that are shown. By adding the first custom-chosen element, you are starting over.
• Click “Add Product Element“.
  
• You will see a new element appear: Title.
• Click on Title. A new window will appear. This element can be changed in the dropdown in the new window.
• If you do not see the dropdown, scroll up to the top in the new window.
  
• Repeat this process until you’ve added all the elements you want.

DISPLAY MODE: SINGLE PRODUCT

This display mode is perfect for a single product. Like the All Products display mode discussed above, you may custom-select the elements you would like to be displayed

• Select “Single Product” in the Display Mode dropdown.
• Product ID: Enter your Shopify product ID. This can be found by navigating to the product page in Shopify, and copying the unique code found in the URL.
  
• Center Product: By default, the elements will appear aligned to the left side of the widget container. If you would like the elements to be centered, enable this option.
• Checkout in Popup: When this option is enabled, the checkout process will take place in a new popup window, instead of the redirect to Shopify.
• Like the All Products display mode, you may custom-select the elements you wish to display. Review that section above for detail.

DISPLAY MODE: COLLECTION

Shopify uses collections to group products of your choosing. Use the Collection Display Mode in the Shopify widget to display products from a specific collection. Note that collections are created and managed at shopify.com.

• Select “Collection” in the Display Mode dropdown.
• At shopify.com, navigate to Products > Collections.
• Copy the unique code in the URL.
  
• Paste the Collection code into the Collection ID field.
• The widget will now display just the products within your Shopify Collection.
• The remaining settings for the Collection display mode are the same as the “All Products” mode. See the All Products instructions above for details.

DISPLAY MODE: PRODUCTS SET

The Products Set display mode allows you to display multiple products of your choosing. These products are displayed within a grid gallery like the “All Products” display mode. This provides an alternative to using multiple instances of widgets in the Single Product display mode (although you can do this if you like).

• Select “Products Set” in the Display Mode dropdown.
• Click the Add Product ID button.
• Enter a Shopify product ID in this field. See the Display Mode: Single Product section above for details on acquiring a Shopify product ID.
• Once you’ve entered the product ID, you will see that product appear in the gallery.
• Repeat the above steps as needed.

DISPLAY MODE: BUY BUTTON

This is the simplest way to use the Shopify widget. This display mode displays a simple button that you can place anywhere you like. If you prefer to build your own product page layout, the Buy Button display mode is a good choice.

• Select “Buy Button” in the Display Mode dropdown.
• Product ID: Enter a Shopify product ID in this field. See the Display Mode: Single Product section above for details on acquiring a Shopify product ID.
• You will now see a buy button displayed in the widget.
• Keep in mind that the Button With Quantity setting allows your buy button to display a quantity. This allows site visitors to buy greater quantities than 1.

ADDITIONAL WIDGET OPTIONS

• Product Labels: This submenu gives you the ability to enter custom text for the Button label, Out of Stock label, and the Unavailable label.

STYLING OPTIONS

There are extensive styling options available that allow you to style most every aspect of the Shopify store. These settings can be found in the Design portion of the widget, and are labeled with their exact function. These settings are self-explanatory and will not be described individually.