Get all product variant with the same Product Title on Shopify

Question

So, it's like this. Even I am confused about how to explain this.

Situation:

All the products in our store regardless if it is the same styled product has only one Color Variant each. So meaning, all colors of the same product are separated (example: Mulan has 9 different colors, so we have listed each color as one product). If you get what I mean. Like this: http://prntscr.com/qnwygd

What I need:

We wanted to show all available variants/colors to all products with the same name/style. Like this: http://prntscr.com/qnwzf2

Question: How do we get to do this? Please give me some ideas. If you have any questions/confusion, please don't hesitate to ask.

Here's the code I currently have.

 {% capture form_id %}AddToCartForm-{{ section_id }}{% endcapture %}
{% form 'product', product, id: form_id, class: 'product-single__form' %}

   {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
    {% for option in product.options_with_values %}
      {% assign hide = false %}
      {% if option.name == 'color' and product.metafields.color.value %}
        {% assign hide = true %}
      {% endif %}
      {% if settings.variant_type == 'button' %}
        {% include 'variant-button', section_id: section_id, option_drop: option, hide: hide %}
      {% else %}
        {% include 'variant-dropdown', section_id: section_id, hide: hide %}
      {% endif %}
    {% endfor %}
  {% endunless %}

 <!--  {% comment %}
    [Custom Feature] Color swatches
  {% endcomment %}
  {% if product.metafields.color.value %}
    {% assign product_types = product.type | split: ',' %}
    {% assign product_type = product_types[3] | handle %}
    {% comment %} The most specific hierarchy = fourth field in product type {% endcomment %}
    {% if collections[product_type] %}
      <div class="color-swatches">
        <label class="variant__label">Colors</label>
        {% include 'swatch' with product_type %}
      </div>
    {% endif %}
  {% endif %}-->

  <select name="id" id="ProductSelect-{{ section_id }}" class="product-single__variants no-js">
    {% for variant in product.variants %}
      {% if variant.available %}
        <option {% if variant == product.selected_or_first_available_variant %}
          selected="selected" {% endif %}
          value="{{ variant.id }}">
          {{ variant.title }} - {{ variant.price | money_with_currency }}
        </option>
      {% else %}
        <option disabled="disabled">
          {{ variant.title }} - {{ 'products.product.sold_out' | t }}
        </option>
      {% endif %}
    {% endfor %}
  </select>

  {% if settings.quantity_enable %}
    <div class="product__quantity product__quantity--{{ settings.variant_type }} js-qty">
      <label for="Quantity-{{ section_id }}">{{ 'products.product.quantity' | t }}</label>
      <input type="number" hidden="hidden" id="Quantity-{{ section_id }}" name="quantity" value="1" min="1" class="js-qty__fallback">
    </div>
  {% endif %}

<!--   <div class="rte">
    <div class="product-outofstock-message">
      {{ 'products.product.outofstock_email_notify_html' | t }}
    </div>
  </div> -->

  {% if settings.enable_payment_button %}
    <div class="payment-buttons">
  {% endif %}

    <button
      {% if product.empty? %}type="button"{% else %}type="submit"{% endif %}
      name="add"
      id="AddToCart-{{ section_id }}"
      class="{% if settings.enable_payment_button %}btn--tertiary{% else %}btn{% endif %} btn--full add-to-cart"
      {% unless current_variant.available %} disabled="disabled"{% endunless %}>
      <span id="AddToCartText-{{ section_id }}">
        {% if current_variant.available %}
          {{ 'products.product.add_to_cart' | t }}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}
      </span>
    </button>
<!--     ADDITIONAL ADD TO WISHLIST    -->

      <div style="display: flex; flex-wrap: wrap">
        <div id="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}" style="outline:none;margin-top:15px; border:1px solid black;font-weight:100;flex-basis:0;flex-grow:1;max-width:50%"></div>
        <a onclick="justClick()" class="btn--secondary update-cart share-this-item" style="margin-top:15px; border:none;font-weight:100;flex-basis:0;flex-grow:1;max-width:50%">
          <span>
            Or, share this item
          </span>
        </a>
      </div>
      <script type="text/javascript">
        function justClick(){
          document.getElementById("ztb-sb-9abf1166-widget").style.display="block !important"
        }
      </script>
<!--  END -->


    {% if settings.enable_payment_button %}
      {{ form | payment_button }}
    {% endif %}

  {% if settings.enable_payment_button %}
    </div>
  {% endif %}
{% endform %}

Answer 1

You can use a Storefront GraphQL request for this.

{
    products(first: 40, query: "title:Mulan"){
    edges {
      node {
        handle
        variants(first: 1) {
          edges {
            node {
              selectedOptions{
                name
                value
              }
            }
          }
        }
      }
    }
  }
}

The response will be something like this:

{
  "data": {
    "products": {
      "edges": [
        {
          "node": {
            "handle": "mulan",
            "variants": {
              "edges": [
                {
                  "node": {
                    "selectedOptions": [
                      {
                        "name": "Color",
                        "value": "White"
                      }
                    ]
                  }
                }
              ]
            }
          }
        },
        {
          "node": {
            "handle": "mulan-1",
            "variants": {
              "edges": [
                {
                  "node": {
                    "selectedOptions": [
                      {
                        "name": "Color",
                        "value": "Black"
                      }
                    ]
                  }
                }
              ]
            }
          }
        }
      ]
    }
  }
}

I will provide a description step by step if you are not aware how to use it.

---

Create a Private App

You need to create a Private App located in your store: https://YOUR_STORE.myshopify.com/admin/apps/private

And enter the Private app name:

After that you need to check the box Allow this app to access your storefront data using the Storefront API located to the bottom of the app screen and check the Read products, variants, and collections checkbox.

After you save the app you will see the following:

Where the important part is the Storefront access token. You will need this token in order to make GraphQL requests.

Create a basic GraphQL request

Make a basic GraphQL request in order to test if this works, for example:

fetch('/api/graphql',{
  method: 'POST',
  headers: {
      'X-Shopify-Storefront-Access-Token': 'ENTER YOUR STOREFRONT ACCESS TOKEN HEER',
      'Content-Type': 'application/graphql',
  },
  body: `query {
    shop {name}
  }`
}).then(res => res.json()).then(data => {
  console.log(data)
})

It should return something like so:

{
  "data": {
    "shop": {
      "name": "YOUR STORE NAME"
    }
  }
}

Create your GraphQL request

Lets create a function in which you can pass the product title and the token we generated:

function getProducts(title, token) {
  return fetch('/api/graphql',{
    method: 'POST',
    headers: {
        'X-Shopify-Storefront-Access-Token': `${token}`,
        'Content-Type': 'application/graphql',
    },
    body: `query {
      products(first: 40, query: "title:${title}"){
      edges {
        node {
          handle
          variants(first: 1) {
            edges {
              node {
                selectedOptions{
                  name
                  value
                }
              }
            }
          }
        }
      }
    }
  }`
  }).then(res => res.json())
}

Then we call the function like so:

getProducts('Mulan', 'Your Access Token').then(res => console.log(res))

And you will get a JS object with array of items with their handle and the first variant option name and value.

That's all.

Answer 2

If each different color of the same style was created in the Shopify admin as an individual product, rather than as variants of one product, then it seems like you'd be able to achieve what you're seeking by constructing a simple loop:

<!-- Replace ".all" below with the name of the associated collection -->
{% assign collection = collections.all %}
<!-- This creates a variable to restrict the loop to return products with the same name as the product on the page visited -->
{% assign productName = product.title %}

{% for product in collection.products %}
  {% if product.title == productName %}
    <!-- Your HTML elements go here, for example the featured image of each product -->
  {% endif %}
{% endfor %}