0 - WA Smooth Bundles

General

Dashboard

Once the application is installed, you can access the dashboard through your store’s administrative panel. For example, if your store is called “store,” you can access the panel at this address: https://store.myshopify.com/admin

Select WA Simple Bundles from the left navigation bar under the Apps section.

If you can’t see the application, click the “>” button next to the Apps option to select it from the installed apps in your store.

This is the welcome screen of the application:

Creating a bundle

To create a bundle, select the “Bundles” option from the left navigation bar, then press the central “Create Bundle” button.

Enter the name you want to give to the bundle. This name may or may not be displayed in the store, depending on the block preferences (explained in the “Block” section)

Add the products you want to include in this bundle using the “Add items” button. Please note, draft, archive and hidden products are not shown in this list.

On this screen, you can change the order of the products by dragging the product with the product handle on the left.

If you want to remove a product from the bundle, you can do so by clicking on the delete button.

You can also modify the quantity of products you want to include in this bundle.

Press the “Save” button at the top right to save the changes, and your bundle will appear in the bundle listing. Copy the Bundle ID code; you will need it when you want to insert the bundle into the theme.

Block

We’ve created a bundle, now we’ll review how to insert the bundle to a shop’s page using Shopify’s theme customize editor.

Insert bundle

To insert a bundle into your theme, go to the Shopify theme editor, which you will find in the left navigation bar under “Sales channels” -> “Online Store.” Then press the “Customize” button next to the name of your store’s theme.

Locate the page template where you want to insert the bundle. Add a WA Simple Bundles app block by clicking the “Add Section” button in the left block scheme. In the dropdown, select the “Apps” tab and then the “WA Simple Bundles” option.

Once inserted, the block will appear with a text indicating that we should check the Bundle ID.

To display the bundle we created, type or paste the bundle ID into the text field and configure the appearance of the block to best suit your theme. Keep in mind that the bundle that will appear will always be the same in this template. If you want a different bundle for each product, page, or collection, you can use a dynamic field. Dynamic bundles get different IDs for the bundle via metafields. See how to do it in the dynamic bundles section.

Save the changes by pressing “Save” at the top right, and you’re ready!

Dynamic bundles

You can display a dynamic bundle using metafields. Follow this link to learn how to create a product metafield, so that each product can have a different associated bundle ID.

Then write or paste the bundle IDs into the metafield you created, for each product where bundle should be presented, using the Shopify product editor.

On the block editor, enter the metafield name in the Bundle ID field using the dynamic source button located to the right.

Custom Design

If desired, you can create a custom template and customize bundle presentation. This is for advanced users or agencies that need to have more control of the design in the theme.

Template design

To create a custom template design, insert the bundle (explained on “Block” section of the documentation) and enable the “Custom Design” checkbox. When “Custom design” option is active, app will use the design you provide to show the bundles, not the predefined template. So until a template is defined, nothing will be shown.

To create a template you can use some HTML elements with specific name and class attributes. At the end of this chapter, you’ll find the default template with styles that you can use as starting point, but for simplicity, the following instructions only include the elements that the app can use.

The main element is defined by the attribute name “wasb-list”. In this element we need to include these 3 data attributes:

“data-bundle-id” – ID of the bundle to be shown. You can set this field dynamically using metafields, for instance.

“data-shop-id” – ID of the shop, set it to {{ shop.id }}

“data-currency-fmt” – format for the prices. You can use Shopify’s currency format options or set it to {{ shop.money_with_currency_format }} to use shop’s settings format.

For example (don’t forget to include your bundle ID):

<div 
  name="wasb-list"
  class="wasb-loading"
  data-bundle-id="W2lyngqKGz"  
  data-shop-id="{{ shop.id }}"
  data-currency-fmt="{{ shop.money_with_currency_format }}"
>

Next elements must be defined as children of main element “wasb-list”. To define how each bundle item is presented we’ll use the “wasb-item-card-template” element and add a child element with the class=”was-item-card” where we define how each item is shown on the page:

  <template name="wasb-item-card-template">
    <div class="wasb-item-card">
      <input class="wasb-item-check" type="checkbox" checked>
      <img class="wasb-item-img" width="100" height="100">
      <p class="wasb-item-title"></p>
      <p class="wasb-item-variant-title"></p>
      <p class="wasb-item-variant-name"></p>
      <p class="wasb-item-price"></p>
      <input class="wasb-item-qty" type="number" value="1" min="0">
      <div style="display:none" class="wasb-item-property" name="Shape">Square</div>                
      <div style="display:none" class="wasb-item-property" name="Corners">Rounded/div>
    </div>
  </template>

In this snippet of code, we created a “wasb-item-card”. This element will be used as template and cloned for each item in the bundle. Let’s decompose every child element and what it is for:

class=”wasb-item-check” – Optional: show a checkbox for each item element so customer can select or deselect an item.

class=”wasb-item-img” – Optional: show product featured image.

class=”wasb-item-title” – Optional: show product title, for example “Linner Comfort Cushions”.

class=”wasb-item-variant-name” – Optional: show product title and variant, for example “Linner Comfort Cushions – Beige”

class=”wasb-item-variant-title” – Optional: show product variant only, for example “Beige”

class=”wasb-item-price” – Required: show product price.

class=”wasb-item-qty” – Optional: quantity of items to add to cart

calss=”wasb-item-property” – Optional: add product properties. Please read “Product properties” section for more info.

Next, create a container element where bundle will be shown. In the example below we just create the container and show bundle title:

  <div class="wasb-list-container">
    <h2 class="wasb-bundle-title"></h2>
  </div>

class=”wasb-list-container” – Required: container where elements will be cloned to.

class=”wasb-bundle-title” – Optional: show bundle title.

Finally, create another element with class attribute “wasb-button-end” where we can add the “Add to cart” button:

  <div class="wasb-button-end">
    <div name="wasb-add-cart">Add to cart</div>
    <div class="wasb-bundle-total"></div>
  </div>

class=”wasb-button-end” – Required: container

name=”wasb-add-cart” – Required: add selected products to cart. This element will have a ‘click’ event listener to catch clicks.

class=”wasb-bundle-total” – Optional: show bundle total amount.

Now you should have a basic functional implementation running.

Default Template

For reference, below there is the default template that can be used as starting point:

Liquid Snippet:

{{ 'style-wa_smooth_bundles.css' | asset_url | stylesheet_tag }}
<div class="container">
  <div class="bundle--wrapper">
    <div 
      name="wasb-list"
      class="wasb-loading"
      data-bundle-id="W2lyngqKGz"  
      data-shop-id="{{ shop.id }}"
      data-currency-fmt="{{ shop.money_with_currency_format }}"
    > <!-- Required: This element defines where bundle will be shown. Here we need to define the "data-bundle-id", "data-shop-id" and "data-currency-format" attributes -->
      <div class="progress">
        <p>{{ 'Loading...' }}</p>
      </div>
      <div class="list-wrapper">
        <template name="wasb-item-card-template"> <!-- Required: defines bundle item card template -->
          <div class="wasb-item-card"> <!-- Required: card element definition -->
            <div class="item">
              <input class="wasb-item-check" type="checkbox" checked> <!-- Required: show checkbox add to card specific products. Can be type="hidden" if not needed -->
              <img class="wasb-item-img" width="100" height="100" loading="lazy"> <!-- Optional: show product image -->
            </div>
            <p class="wasb-item-title"></p> <!-- Optional: show product name -->
            <p class="wasb-item-variant-title"></p> <!-- Optional: show variant name only -->
            <p class="wasb-item-variant-name"></p> <!-- Optional: show product - variant title -->
            <p class="wasb-item-price"></p> <!-- Required: show item price -->

            <div class="wa-number-input"> 
              <button onclick="this.parentNode.querySelector('input[type=number]').stepDown();this.parentNode.querySelector('input[type=number]').dispatchEvent(new Event('change'));"></button>
              <input class="wasb-item-qty" type="number" value="1" min="0"> <!-- Required: quantity, can be a type="hidden" if not needed -->
              <button onclick="this.parentNode.querySelector('input[type=number]').stepUp();this.parentNode.querySelector('input[type=number]').dispatchEvent(new Event('change'));" class="plus"></button>
            </div>
          </div>
        </template>
        <div class="wasb-list-container">
          <h2 class="wasb-bundle-title"></h2> <!-- Optional: show bundle title -->
        </div>
        <div class="wasb-button-end">
          <div class="button-end__add" name="wasb-add-cart">{{ 'Add to cart' }}</div> <!-- Optional: add items to cart -->
          <div class="wasb-bundle-total"></div> <!-- Optional: show bundle total amount -->
        </div>
      </div>
    </div>
  </div>
</div>

Asset Style File:

.bundle--wrapper{
    position: relative;
}

.wasb-progress {
    display: none;
}

.wasb-loading .wasb-progress {
    display: block;
}

.wasb-loading .list-wrapper{
    display: none;
}

.wasb-progress {
    text-align: center;
}

.wasb-list-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px;
    @media (max-width: 1280px) {
        margin: 0 calc(-100vw * 20 / 1280);
    }
    @media (max-width: 768px) {
        margin: 0 calc(-100vw * 15 / 768);
    }
    @media (max-width: 640px) {
        margin: 0 -10px;
    }
}

.wasb-bundle-title {
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

.wasb-item-card {
    width: calc(100% / 5);
    padding: 0 20px 40px;
    @media (max-width: 1280px) {
        padding: 0 calc(100vw * 20 / 1280) calc(100vw * 40 / 1280);
    }
    @media (max-width: 1080px) {
        width: calc(100% / 4);
    }
    @media (max-width: 768px) {
        width: calc(100% / 3);
        padding: 0 calc(100vw * 15 / 768) 35px;
    }
    @media (max-width: 640px) {
        width: calc(100% / 2);
        padding: 0 10px 35px;
    }
}

.wasb-item-title,
.wasb-item-variant-title,
.wasb-item-variant-name,
.wasb-item-price {
    padding: 0;
    margin: 0;
    text-align: center;
}

.wasb-item-card .item {
    position: relative;
    margin-bottom: 10px;
}

.wasb-item-card .item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

input.wasb-item-check {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 1px solid black;
    width: 20px;
    height: 20px;
    position: absolute;
    padding: 0;
    margin: 10px;
    cursor: pointer;
    background-color: white;
}

input.wasb-item-check:checked:before,
input.wasb-item-check:checked:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background-color: #000;
    transform: translateX(-50%);
}

input.wasb-item-check:checked:before {
    transform: translateX(-50%) rotate(45deg);
}

input.wasb-item-check:checked:after {
    transform: translateX(-50%) rotate(-45deg);
}

/*---------------------------
INPUT QUANTITY
---------------------------*/
input.wasb-item-qty {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 0;
    text-align: center;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    width: 33px;
    height: 33px;
    border: 1px solid;
    font-family: inherit;
    color: inherit;
}

input.wasb-item-qty::-webkit-inner-spin-button,
input.wasb-item-qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.wa-number-input {
    border: 0;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.wa-number-input,
.wa-number-input * {
    box-sizing: border-box;
}

.wa-number-input button {
    outline: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    cursor: pointer;
    margin: 0;
    position: relative;
}

.wa-number-input button:before,
.wa-number-input button:after {
    display: inline-block;
    position: absolute;
    content: "";
    width: 1rem;
    height: 1px;
    background-color: black;
    transform: translate(-50%, -50%);
}
.wa-number-input button.plus:after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.wasb-button-end {
    position: sticky;
    bottom: 20px;
    display: flex;
    border: 1px solid black;
    padding: 12px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    justify-content: space-between;
    background-color: black;
    color: white;
    &:hover {
        background-color: black;
        color: white;
    }
}

Product properties

If needed, custom product properties can be added to each product. To add a property, use the class=”wasb-item-property” inside the template. The name attribute defines the property name, while the value is inserted in the innerHTML. For example:

<div style="display:none" class="wasb-item-property" name="Shape">Square</div>                
<div style="display:none" class="wasb-item-property" name="Corners">Rounded/div>

Then once we press the “Add to cart” bundle’s button, will add properties to the product. Example of added product on checkout with variant Beige:

Closing

Thank you for using our WA Smooth Bundles app. We hope this guide has been helpful. If you have any questions or need further assistance, please don’t hesitate to contact our support team. Good luck with your Shopify store!

WA Smooth Bundles