Shopify Development

I was recently tasked with adding a dropdown on the PDP of a Shopify store that links to similar products. My first hope was to have the dropdown use the collections product list, but alas, this didn’t satisfy the merchant’s demands. It needed to be more flexible, reliable, and controlled by a non-developer store owner with simple clicks and typing. I narrowed it down to four options:

1. Use product tags: You can create a custom product tag (e.g., “group”) and tag each product with the same group tag.
2. Use product metafields: You can create a custom metafield for each product that stores the group ID of the product. Then, you can use Liquid code to display a dropdown button on the product page that shows all products with the same group ID.
3. Use a Shopify app: There are many third-party Shopify apps that allow you to add grouped products to your store. Some of these apps may offer the ability to display a dropdown button with similar grouped products on the product page.
4. Use Shopify sections: You can create a custom section in your theme that allows the merchant to select which products should be grouped together. The section could include a dropdown button on the product page that shows all products in the selected group.

I opted for option #1 because I thought it would provide an easy way for the merchant to control and be the fastest to implement.

Using Product Tags to Create a Dropdown List

It starts with adding a tag in the product listing for any products you want to associate. For my sample snowboard site, I added the tag “sandboarding” to a few boards.

Next, you can implement the following Liquid, JavaScript and CSS code in your template file:

<!-- Liquid in product file -->
{% assign sandboards = collections.all.products %}
{% if sandboards.size > 1 %}
  <div class="dropdown">
    <button
      class="btn dropdown-toggle"
      type="button"
      id="collectionDropdown"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false">
      Other Sandboard Options
    </button>
    <div class="dropdown-menu" aria-labelledby="collectionDropdown">
      {% for prod in sandboards %}
        {% if prod.tags contains "Sandboarding" %}
          <a class="dropdown-item" href="{{ prod.url }}">{{ prod.title }}</a>
        {% endif %}
      {% endfor %}
    </div>
  </div>
{% endif %}

<script>
  // JavaScript
// Get the dropdown button and menu elements
  const dropdownButton = document.querySelector('.dropdown-toggle');
  const dropdownMenu = document.querySelector('.dropdown-menu');

// Close the dropdown menu if the user clicks outside of it
  document.addEventListener('click', function(event) {
    if (!event.target.closest('.dropdown')) {
      dropdownMenu.classList.remove('show');
    }
  });

// Show the dropdown menu when the button is clicked
  dropdownButton.addEventListener('click', function() {
    dropdownMenu.classList.toggle('show');
  });
</script>

/* CSS */
{%- style -%}
  .dropdown-menu {
    display: none;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }
  .dropdown-item {
    display: block;
    padding: 8px 16px;
    color: #333333;
    font-size: 16px;
    text-decoration: none;
    border-bottom: 1px solid #777;
  }

  /* Show the dropdown menu when the button is clicked */
  .show {
    display: block;
  }
{%- endstyle -%}

Phew, that seems like a lot. But You can always go simpler with less style or even use a <select> input to go without styles and JavaScript altogether. Let’s take a look at this button in action:

One important thing to remember is that I have sandboarding hard coded in the liquid code. This can be added via the schema settings so the user can add custom functionality. However to make things entirely merchant customizable with no “hard coded” values necessary — see my follow up blog post here using custom liquid code to check for the presence of a dropdown-list grouping.

How have you solved this problem before?