Constructing subcategories of products

0

Constructing subcategories of products

In shopify, to create subcategories of products you can utilize product tags. The navigation link to a subcategory has the format:

M /collections/collection-handle/product-tag-handle

To construct and exhibit subcategories for your products, you require to:

In this piece of writing

Your categories & subcategories needs to be defined:

Exhibit your subcategories on your storefront

Avoid visitors from selecting numerous tags

Your categories & subcategories needs to be defined

The instance for this customization constructs subcategories for two chief categories of product (Men and women) every chief category will hold the subsequent subcategories:

  • Tops.
  • Pants.
  • Shoes.

To describe your categories and subcategories:

  1. Construct smart or custom sets for all your chief categories (Men and women in our illustration.)
  2. Go to every entity product page and insert a product tag subsequent to the subcategory to which the product fits in for instance, you might provide all your tops the tag tops, all your dresses the tag dresses, all accessories the tag accessories and so on.

When you have definite your categories and subcategories, you need to decide how you want to display them.

Display your subcategories on your storefront

When categories and subcategories have been defined, In several different ways, you can display them on your website. The most accepted comprise:

  • Drop-down menus.
  • Clickable buttons.
  • Employ a choose element as a submenu.

When the display have been configured you will require to prevent customer’s from selecting two subcategories at one time.

Drop-down menus

Not all themes support drop-down menus.

If your theme supports drop-down menus

Desktop                                                             iPhone                                                    Android

  1. Click online store and then click navigation (or press G W N) from your shopify admin.
  2. Click Edit menu after finding the Main Menu.

main-menu-linklist

3. To the main categories of products links are to be added, i.e. links to your collections (for instance Women and men). Our main menu will appear like this:

add-main-links

4. Return to the navigation page and insert menu for men first and then for women. Give a name to the menu after the name of the category (the parent link) so that both of them match. With links to filtered collections, populate those collections. Using the similar old examples, the women menu will appear like this:

subcategories-5

5. Click Save.

6. Take a look at your drop-down menu on the Collections page of your store.

Clickable buttons

Tip

If you wish for only single product tag to be clickable, pursue this tutorial: I desire only one product tag to be selectable

Desktop                                       iPhone                                          Android

  1. Click online store and then click themes or press G W T.
  2. Find the theme that needs to be edited click the button and the click edit HTML/ CSS.
  3. Below the template folder on the left, locate and in the online code editor, click the liquid link to open the collection.liquid template.

    collection-dot-liq

  4. On PC press ctrl+F and on MAC click command + F to search your collection description. Beneath your collection description or above it, if you desire paste the code beneath and save:

<ul class=”subnav clearfix”>

  <li{% unless current_tags %} class=”active”{% endunless %}>

    {% if collection.handle %}

    <a href=”/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %}”>All</a>

    {% elsif collection.current_type %}

    <a href=”{{ collection.current_type | url_for_type | sort_by: collection.sort_by }}”>All</a>

    {% elsif collection.current_vendor %}

    <a href=”{{ collection.current_vendor | url_for_vendor | sort_by: collection.sort_by }}”>All</a>

    {% endif %}

  </li>

  {% for tag in collection.all_tags %}

  {% if current_tags contains tag %}

  <li class=”active”>

    {{ tag | link_to_remove_tag: tag }}

  </li>

  {% else %}

  <li>

    {{ tag | link_to_tag: tag }}

  </li>

  {% endif %}

  {% endfor %}

</ul>

<style>

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */

.clearfix:before, .clearfix:after { content: “”; display: table; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

/* Subnavigation styles */

.subnav { clear: both; list-style-type: none; margin: 35px 0; padding: 0; }

.subnav li { display: block; float: left; }

.subnav li a {

  display: block;

  height: 28px;

  line-height: 28px;

  padding: 0 7px;

  -webkit-border-radius: 7px;

  -moz-border-radius: 7px;

  border-radius: 7px;

  background: #eee;

  margin: 0 7px 7px 0;

  color: #666;

}

.subnav li a:hover, .subnav li.active a {

  background: #666;

  color: #fff;

}

</style>

Take a glance at your clickable buttons on your set of page.

clickable-btn-4

As a submenu use a select element

Desktop                                     iPhone                                       Android

  1. Click Online Store and then click Themes (or press G W T), from your Shopify admin,
  2. Search for the theme that you need to edit, click the … button and then click Edit HTML/CSS.
  3. Below the template folder on the left, locate and in the online code editor, click the collection.liquid link to open the collection.liquid template.

    collection-dot-liq (1)

  4. On the MAC press command + F and on the PC press Ctrl + F to search for your collection description.
  5. Press ctrl + F on a PC or command + F on a Mac to find your collection description. Below your collection description — or above it, as you wish — paste this first code snippet:

<div class=”clearfix filter”>

  <p>Browse by tag:</p>

  <select class=”coll-filter”>

    <option value=””>All</option>

    {% for tag in collection.all_tags %}

    {% if current_tags contains tag %}

    <option value=”{{ tag | handle }}” selected>{{ tag }}</option>

    {% else %}

    <option value=”{{ tag | handle }}”>{{ tag }}</option>

    {% endif %}

    {% endfor %}

  </select>

</div>

Then, paste this second snippet at the very base of your collection.liquid template:

<script>

/* Product Tag Filters – Good for any number of filters on any type of collection page. */

Shopify.queryParams = {};

if (location.search.length) {

  for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split(‘&’); i < aCouples.length; i++) {

    aKeyValue = aCouples[i].split(‘=’);

    if (aKeyValue.length > 1) {

      Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);

    }

  }

}

var collFilters = jQuery(‘.coll-filter’);

collFilters.change(function() {

  var newTags = [];

  var newURL = ”;

  collFilters.each(function() {

    if (jQuery(this).val()) {

      newTags.push(jQuery(this).val());

    }

  });

  if (newTags.length) {

    Shopify.queryParams.constraint = newTags.join(‘+’);

  }

  else {

    delete Shopify.queryParams.constraint;

  }

  location.search = jQuery.param(Shopify.queryParams);

});

</script>

  1. Save your changes.

On your collection page take glance at your drop-down.

select

From choosing multiple tags, prevent the visitors:

Occasionally, a customer will filter a set by picking two or more product tags. If you don’t have product alternatives that are listed beneath both tags, the filters will create no outcomes.

You will require making a very little edit to your Shopify Theme to avoid this.

Desktop                                                  iPhone                                 Android

  1. Click Online Store and then click Themes (or press G W T), from your Shopify admin,
  2. Search for the theme that you need to edit, click the … button and then click Edit HTML/CSS.
  3. Beneath the Templates folder, situate and click on the collection.liquid to unlock it in the online code editor.
  4. Employ CTRL-F on Windows or CMD-F on MAC, In the online code editor, to find this piece of code:

{{ tag | link_to_add_tag: tag }}

Eliminate add_ so that the code turns out to be:

{{ tag | link_to_tag: tag }}

  1. Your template needs to be saved.

Share.

About Author

Leave A Reply