Shopify Ecommerce Widget

  1. Home
  2. Knowledge Base
  3. Shopify Ecommerce Widget

Marry your Without Code site with one of the most premier Ecommerce platforms on the web. Shopify offers industry-leading features and apps for stores of any size.

The Shopify widget allows highly customizable options for displaying products, including buy buttons, single products, collections, groups of products or an all-inclusive store. A persistent shopping cart is available with all options.

Learn how we transitioned a real business website from Shopify to Without Code in order to expand our design flexibility in our Business Case Study – Shopify to Without Code.

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

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 Link and Shopify. 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.

Back in the Without Code site builder, we’ll start by setting up the Shopify Link widget. This widget’s sole purpose is to link your Shopify store with your site. This widget is required.

  • Drop the Shopify Link widget anywhere on your page. Placement is not important, as this widget is just a placeholder that will not be seen on the published site.
  • 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.
  • 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.
  • 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

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. However, there are a few specific design settings that have unique functions, which we will explain below.

  • 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.
Join Now