Categorized Image Section

Categorized Image Section

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

 CompatibilityCompatible 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.



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.


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.


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.

Back to blog

Leave a comment