Categorized Image Section

Categorized Image Section

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.

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

To start:

1. Go to Admin Shopify store > Themes > Actions > Edit Code

2. In Section folder, create a new section. You can name whatever you want.

3. Replace the default code with the code below. Make sure to SAVE.

<

 

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

<

 

5. Add the section, named Categorized Image in your Theme Editor. Click the three dots and customize your theme.

 

That's it (",)

 

 

Copied!
Back to blog

Leave a comment