Categorized Image Section

Categorized Image Section

 Compatibility: Compatible with all Shopify Themes.

Images are very important in a website. Presenting the images in the right and unique way is also crucial to provide a very good impression to customers. 

You can categorized your images to however you like. 

You can check the demo store here. Password: made4uo

I created several image galleries that you might like, see the following:

What are Categorized Image Sections?

Categorized image sections are customizable elements that allow you to display multiple images within a section on your Shopify store. Each image can be linked to a specific category or product collection, providing a visually appealing way to showcase your products and organize them by category.

Why Use Categorized Image Sections?

There are several advantages to incorporating categorized image sections on your homepage, product pages, or other key sections of your Shopify store:

  • Enhanced Product Presentation: These sections offer a dedicated space to showcase specific product categories or collections, potentially leading to increased product discovery and click-through rates.
  • Improved Design Flexibility: Categorized image sections offer a versatile design element that can be adapted to various marketing campaigns or product presentations.
  • Clear Category Navigation: By linking the images to categories, users can easily navigate to desired product collections within your store.

Additional Considerations:

While categorized image sections offer a visually appealing way to showcase your products by category, here are some additional factors to consider for successful implementation:

  • Image Selection and Quality:

    • High-Resolution Images: Use high-quality, visually compelling images that accurately represent your products. This will create a professional impression and entice users to click through to learn more.
    • Consistent Style: Maintain a consistent visual style across the images within a section and throughout your store. This creates a sense of cohesion and brand identity.
    • Consider Using Lifestyle Images: Incorporate lifestyle images alongside product images to showcase how your products might be used in real-world scenarios. This can help users visualize the benefits and potential applications of your products.

  • Content Strategy and User Experience:

    • Clear Category Hierarchy: Ensure the image categories align with your existing product categories for a clear and intuitive user experience.
    • Targeted Messaging: Consider including concise text overlays or captions within the image section to highlight key product features or benefits.
    • Call to Action: Incorporate clear calls to action within the section, such as "Shop Now" buttons or category links, to encourage users to take the desired action (e.g., visiting a product page or browsing a collection).
    • Mobile Responsiveness: Ensure the categorized image sections display and function flawlessly on mobile devices, considering the smaller screen size and potential touch interactions.

  • A/B Testing:

    • Test Different Layouts and Styles: Consider A/B testing different layouts and design variations for the categorized image sections. This can help you identify which versions resonate best with your audience and lead to higher click-through rates.
    • Image Optimization: Test loading times with different image sizes and formats to ensure the sections load quickly and don't slow down your store's overall page loading speed.

What you are buying:

  • Show/ hide  previous and next button 
  • Adjust how the image fit within the container using object-position. 
  • Upload multiple images (this might affect the loading time)
  • Apply image filters to every image, like brightness, contrast, grayscale, invert, opacity, saturate, sepia and none
  • Image are presented in an square but can be view in a modal
  • Assign single image to a category
  • No limit in the number of images

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

[]

Steps on how to add Categorized Image Sections to Your Shopify Store

Step #1. Open your code editor

From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code.

Step #2. Create a new section file

In Section folder, create a new section, name it whatever you want, then replace the default code with the code below. Make sure to SAVE.

 

<style>
.category--hover-inner svg {
  width: 30px;
}
.category--container {
  width: 100%;
  min-height: 60vh;
  position: relative;
  transition: all 0.5s ease;
  margin: 0 auto;
}
.category--image-container {
  display: flex;
  width: 100%;
  height: max-content;
  position: relative;
  flex-wrap: wrap;
}
.category--text-container {
  display: flex;
  height: max-content;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  gap: 0.5rem;
}
.category--text-container label {
  cursor: pointer;
  border: 1px solid #e5e5e5;
  color: #000000;
  margin: 2px 4px;
  padding: 6px 18px;
  text-transform: capitalize;
  border-radius: 0;
  -webkit-border-radius: 0;
  -o-border-radius: 0;
  -moz-border-radius: 0;
  box-shadow: 2px 2px 4px rgb(0 0 0 / 9%);
  -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.09);
  -webkit-box-shadow: 2px 2px 4px rgb(0 0 0 / 9%);
}
.category--text-container input {
  display: none;
}
.category--text-container input:checked + label,
.category--text-container label:hover {
  background: #000000;
  border-color: #000000;
  color: #fff;
}
.category--image-wrapper {
  width: calc(100% / var(--num-columns-desktop));
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  position: relative;
}
.category--image {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  filter: var(--category-image-filter);
  background: #ececec;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0.5rem;
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
}
.category--show-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.8);
}
.category--image-wrapper .category--hover {
  background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
  bottom: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  -khtml-opacity: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  position: absolute;
  inset: 0;
  display: flex;
  text-align: center;
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  align-items: center;
  justify-content: center;
}
.category--image-wrapper:hover .category--hover {
  opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
}
.category--image-wrapper .category--hover-inner {
  width: 50px;
  height: 50px;
  background: var(--section-color);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.category--image-wrapper .category--hover-inner:hover {
  background: #fff;
  color: #000;
}
.category--show-container .category--image-show-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category--show-image {
  width: auto;
  height: 90%;
  object-fit: cover;
  filter: var(--category-image-filter);
  background: #ececec;
}
.category--show-buttons-container {
  position: absolute;
  bottom: 2rem;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.category--show-buttons-container button:not(:disabled):hover {
  background: #fff;
  color: #000;
}
.category--error {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 20vh;
}
.hide-category-image {
  width: max-content !important;
  height: max-content !important;
}
.hide-category-image img {
  width: 0 !important;
  height: 0 !important;
  overflow: hidden;
  opacity: 0;
  padding: 0 !important;
  visibility: hidden;
}
.hide-container {
  display: none !important;
}
@media only screen and (max-width: 950px) {
}
@media only screen and (max-width: 750px) {
  .category--container .category--image-wrapper {
    width: calc(100% / var(--num-columns-tablet));
  }
  .category--container .category--show-image {
    width: 80%;
    height: auto;
    max-height: 80vh;
  }
}
@media only screen and (max-width: 481px) {
  .category--container .category--image-wrapper {
    width: calc(100% / var(--num-columns-mobile));
  }
}
</style>
<div
  class="category--container"
  style="
    --section-color: {{ section.settings.section_color }};
    --num-columns-desktop: {{ section.settings.columns_desktop }};
    --num-columns-tablet: {{ section.settings.columns_tablet }}; --num-columns-mobile: {{ section.settings.columns_mobile }};
    padding-top: {{ section.settings.padding_top | append: "px" }}; padding-bottom: {{ section.settings.padding_bottom | append: "px" }};
    max-width: {{ section.settings.page_width | append: "px" }};
  "
>
  <category-image>
    {% assign image_size = '' %}
 
    {% for block in section.blocks %}
      {% if block.type == 'image' %}
        {% assign _index = forloop.index | append: ',' %}
        {% assign image_size = image_size | append: _index %}
      {% endif %}
    {% endfor %}
    {% assign image_size_length = image_size | split: ',' %}
    <div class="category--text-container">
      {% for block in section.blocks %}
        {% case block.type %}
          {% when 'category' %}
            <input
              type="radio"
              name="category-input"
              id="{{ section.id }}-{{ forloop.index }}"
              value="{{ block.settings.title | handleize }}"
              {% if forloop.first %}
                checked
              {% endif %}
            >
            <label data-category="{{ block.settings.title }}" for="{{ section.id }}-{{ forloop.index }}">
              {{ block.settings.title | escape }}
            </label>
        {% endcase %}
      {% endfor %}
    </div>
    <div
      class="category--image-container"
      style="{% unless section.settings.image_filter == 'none' %}--category-image-filter: {{ section.settings.image_filter}}({{ section.settings.filter_value | append: '%' }}){% endunless %}"
    >
      {% for block in section.blocks %}
        {% case block.type %}
          {% when 'image' %}
            <div
              class="category--image-wrapper"
              data-image="{{ block.settings.assigned_category | handleize }}"
            >
              {% if block.settings.image != blank %}
                {{
                  block.settings.image
                  | image_url: width: 1500
                  | image_tag:
                    loading: 'lazy',
                    width: block.settings.image.width,
                    height: block.settings.image.height,
                    class: 'category--image',
                    sizes: '30vw',
                    widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
                    alt: block.settings.image.alt
                  | escape
                }}
              {% endif %}
              <div class="category--hover">
                <div
                  class="category--hover-inner"
                  data-button="{{ block.settings.assigned_category | handleize }}"
                  data-category-button-index="{% increment imageIndex %}"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    aria-hidden="true"
                    focusable="false"
                    role="presentation"
                    class="icon icon-plus"
                    fill="none"
                    viewBox="0 0 10 10"
                  >
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M1 4.51a.5.5 0 000 1h3.5l.01 3.5a.5.5 0 001-.01V5.5l3.5-.01a.5.5 0 00-.01-1H5.5L5.49.99a.5.5 0 00-1 .01v3.5l-3.5.01H1z" fill="currentColor">
                  </svg>
                </div>
              </div>
            </div>
        {% endcase %}
      {% endfor %}
      <div class="category--error hide-container"></div>
    </div>
    <div class="category--show-container hide-container" data-image-length="{{ image_size_length.size }}">
      {% for block in section.blocks %}
        {% if block.type == 'image' %}
          <div class="category--image-show-wrapper"
            {% if section.settings.filter_show_image == true %}
              style="{% unless section.settings.image_filter == 'none' %}--category-image-filter: {{ section.settings.image_filter}}({{ section.settings.filter_value | append: '%' }});{% endunless %}"
            {% endif %}
            data-show="{{ block.settings.assigned_category | handleize }}"
            data-category-image-index="{% increment forloopIndex %}">
          {% capture image_link %} {% if block.settings.image_link != blank %}<a href="{{ block.settings.image_link }}" target="_blank">{% else %}<div>{% endif %}{% endcapture %}
         {% capture end_image_link %} {% if block.settings.image_link != blank %}</a>{% else %}</div>{% endif %}{% endcapture %}
          {{ image_link }}
            {% if block.settings.image != blank %}
              {{
                block.settings.image
                | image_url: width: 1500
                | image_tag:
                  loading: 'lazy',
                  width: block.settings.image.width,
                  height: block.settings.image.height,
                  class: 'category--show-image',
                  sizes: '30vw',
                  widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
                  alt: block.settings.image.alt
                | escape
              }}
            {% endif %}
            {{ end_image_link }}
          </div>
        {% endif %}
      {% endfor %}
      <div class="category--show-buttons-container">
        <button name="previous">{{ section.settings.prev_label }}</button>
        <button name="next">{{ section.settings.next_label }}</button>
        <button name="close">{{ section.settings.close_label }}</button>
      </div>
    </div>
  </category-image>
</div>
{% schema %}
{
  "name": "Categorized Image",
  "settings": [
    {
      "type": "color",
      "id": "section_color",
      "label": "Section theme color",
      "default": "#42ab9e"
    },
    {
      "type": "range",
      "id": "page_width",
      "min": 1000,
      "max": 2000,
      "step": 100,
      "unit": "px",
      "label": "Page width",
      "default": 1200
    },
    {
      "type": "header",
      "content": "Navigation buttons"
    },
    {
      "type": "text",
      "id": "prev_label",
      "label": "Previous button label",
      "default": "PREV"
    },
    {
      "type": "text",
      "id": "next_label",
      "label": "Next button label",
      "default": "NEXT"
    },
    {
      "type": "text",
      "id": "close_label",
      "label": "Close button label",
      "default": "CLOSE"
    },
    {
      "type": "header",
      "content": "Device responsiveness"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 0,
      "max": 10,
      "step": 1,
      "label": "Number of columns in desktop",
      "default": 5
    },
    {
      "type": "range",
      "id": "columns_tablet",
      "min": 0,
      "max": 10,
      "step": 1,
      "label": "Number of columns in tablet",
      "default": 3
    },
    {
      "type": "range",
      "id": "columns_mobile",
      "min": 0,
      "max": 10,
      "step": 1,
      "label": "Number of columns in mobile",
      "default": 2
    },
    {
      "type": "header",
      "content": "Container padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Padding top",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Padding bottom",
      "default": 0
    },
    {
      "type": "header",
      "content": "Image filter settings"
    },
    {
      "type": "select",
      "id": "image_filter",
      "options": [
        {
          "value": "brightness",
          "label": "Brightness"
        },
        {
          "value": "contrast",
          "label": "Contrast"
        },
        {
          "value": "grayscale",
          "label": "Grayscale"
        },
        {
          "value": "invert",
          "label": "Invert"
        },
        {
          "value": "opacity",
          "label": "Opacity"
        },
        {
          "value": "saturate",
          "label": "Saturate"
        },
        {
          "value": "sepia",
          "label": "Sepia"
        },
        {
          "value": "none",
          "label": "None"
        }
      ],
      "default": "none",
      "label": "Image filter",
      "info": "Choose the filter, and assign the value in the below settings"
    },
    {
      "type": "range",
      "id": "filter_value",
      "min": 0,
      "max": 100,
      "unit": " %",
      "step": 1,
      "label": "Filter value",
      "default": 0
    },
    {
      "type": "checkbox",
      "id": "filter_show_image",
      "label": "Filter the show image also",
      "default": false
    }
  ],
  "blocks": [
    {
      "name": "Category",
      "type": "category",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Category",
          "default": "Show All",
          "info": "Include Show All if you want to show all images"
        }
      ]
    },
    {
      "name": "Image",
      "type": "image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "You can also change the focal view by clicking the edit button on the image"
        },
        {
          "type": "text",
          "id": "assigned_category",
          "label": "Assigned category",
          "info": "Copy exactly what you have in the Category"
        },
        {
          "type": "url",
          "id": "image_link",
          "label": "Image link",
          "info": "Leave blank to make image not clickab;e"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Categorized Image",
      "blocks": [
        {
          "type": "category"
        }
      ]
    }
  ]
}
{% endschema %}

 

Step #3. Add javascript code

Add the javascript code at the very bottom of your global.js or theme.js under the Asset folder and SAVE.

class CategoryImage extends HTMLElement {
  constructor() {
    super();
    this.categories = this.querySelector(".category--text-container");
    this.categories.addEventListener("change", this.inputFunction.bind(this));
    this.showContainer = this.querySelector(".category--show-container");
    this.show_buttons = this.querySelectorAll(".category--hover-inner");
    this.nav_buttons = this.querySelectorAll(
      ".category--show-buttons-container > button"
    );
    this.nextBtn = this.querySelector('button[name="next"]');
    this.prevtBtn = this.querySelector('button[name="previous"]');
    this.nav_buttons.forEach((btn) =>
      btn.addEventListener("click", this.navigate.bind(this))
    );
    this.show_buttons.forEach((btn) =>
      btn.addEventListener("click", this.showContainerFx.bind(this))
    );
  this.initCategory();
  }

  initCategory() {
    const activeRadio = this.categories.querySelector("input:checked");
    if (activeRadio) {
      const defaultValue = activeRadio.value;
      if (defaultValue !== "show-all") {
        this.renderImages(defaultValue);
      }
    }
  }

  showContainerFx(e) {
    const index = e.currentTarget.dataset.categoryButtonIndex;
    index == 0
      ? (this.prevtBtn.disabled = true)
      : (this.prevtBtn.disabled = false);
    this.showContainer.classList.remove("hide-container");
    this.showIndexedImage(index);
  }
  navigate(e) {
    let activeIndex =
      this.querySelector(".active-show").dataset.categoryImageIndex * 1;
    const totalIndex = this.showContainer.dataset.imageLength - 1;
    switch (e.currentTarget.name) {
      case "next":
        if (activeIndex < totalIndex) {
          activeIndex++;
          this.prevtBtn.disabled = false;
        }
        if (activeIndex == totalIndex) {
          this.nextBtn.disabled = true;
        }
        break;
      case "previous":
        if (activeIndex > 0) {
          activeIndex--;
          this.nextBtn.disabled = false;
        }
        if (activeIndex == 0) {
          this.prevtBtn.disabled = true;
        }
        break;
      case "close":
        this.showContainer.classList.add("hide-container");
        break;
    }
    this.showIndexedImage(activeIndex);
  }
  showIndexedImage(index) {
    this.showContainer
      .querySelectorAll(".category--image-show-wrapper")
      .forEach((box) => box.classList.add("hide-category-image"));
    this.showContainer
      .querySelectorAll(".category--image-show-wrapper")
      .forEach((box) => box.classList.remove("active-show"));
    this.showContainer
      .querySelector(`[data-category-image-index="${index}"]`)
      .classList.remove("hide-category-image");
    this.showContainer
      .querySelector(`[data-category-image-index="${index}"]`)
      .classList.add("active-show");
  }
  inputFunction(e) {
    this.options = Array.from(e.currentTarget.querySelectorAll("input")).find(
      (radio) => radio.checked
    ).value;
    if (this.options == "show-all") {
      this.querySelectorAll(".category--image-wrapper").forEach((image) =>
        image.classList.remove("hide-category-image")
      );
    } else {
      this.renderImages(this.options);
    }
  }
  renderImages(category) {
    this.querySelectorAll(".category--image-wrapper").forEach((image) =>
      image.classList.add("hide-category-image")
    );
    this.querySelectorAll(`[data-image="${category}"]`).forEach((image) =>
      image.classList.remove("hide-category-image")
    );
    const arrayLength = Array.from(
      this.querySelectorAll(`[data-image="${category}"]`)
    ).length;
    if (arrayLength <= 0) {
      this.querySelector(".category--error").classList.remove("hide-container");
      this.querySelector(".category--error").innerHTML =
        "<h2>No image matched</h2>";
    } else {
      this.querySelector(".category--error").classList.add("hide-container");
      this.querySelector(".category--error").innerHTML = "";
    }
  }
}
customElements.define("category-image", CategoryImage);

 

Step #4. Customize theme

Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Add the section, named Categorized Image in your Theme Editor. Make sure to SAVE once you are done customizing.

Conclusion

By incorporating categorized image sections on your Shopify store, you can create a visually engaging way to showcase your products and organize them by category. This can enhance product presentation, improve navigation, and potentially lead to increased click-through rates and product discovery.

0 comments

Leave a comment