Looking for solution to list ingredients with images on product page

[itspriyanka]

Hi,

We have a brand that sells organic hair care, face care etc products and we are looking to list their ingredients on the product page. The no. of ingredients on any product could vary from 3-16. The ingredients need to be listed with the image and name and on click, description would open up. We could have a master list somewhere of the ingredient image and detailed description based on the name (like themes insist that to use a custom swatch image, one must name the image exactly as color.jpg; we could do make sure ingredient image is named accordingly). This section could be a carousel or grid. A rough screenshot of the section might look like this:

Can someone help me write a snippet for this? or is there any app that can do this? I am using Mimimog theme from themeforest.

Thanks,

Priyanka

[Small_Task_Help]

Hi,

- Prepare your Ingredients Data
- Create a New Snippet and Integrate the Snippet in Product Template

Code will go to the new snippet as in the example below

{% assign ingredients = 
{
    "Ingredient1": {"image": "ingredient1.jpg", "description": "Description of Ingredient 1"},
    "Ingredient2": {"image": "ingredient2.jpg", "description": "Description of Ingredient 2"},
    "Ingredient3": {"image": "ingredient3.jpg", "description": "Description of Ingredient 3"},
    // Add more ingredients as needed
} %}

<div class="ingredients-list">
    <div class="grid">
        {% for ingredient in ingredients %}
            <div class="ingredient-item" data-description="{{ ingredient[1].description }}">
                <img src="{{ 'ingredients/' | append: ingredient[1].image }}" alt="{{ ingredient[0] }}" />
                <h4>{{ ingredient[0] }}</h4>
            </div>
        {% endfor %}
    </div>
</div>

<div id="ingredient-modal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h4 id="modal-title"></h4>
        <p id="modal-description"></p>
    </div>
</div>

<style>
    .ingredients-list { /* Add styles for grid layout */ }
    .ingredient-item { cursor: pointer; } /* Change cursor on hover */
    .modal { display: none; /* Hidden by default */ }
    .modal-content { /* Add styling for the modal */ }
</style>

<script>
    document.querySelectorAll('.ingredient-item').forEach(item => {
        item.addEventListener('click', function() {
            const title = this.querySelector('h4').innerText;
            const description = this.getAttribute('data-description');
            document.getElementById('modal-title').innerText = title;
            document.getElementById('modal-description').innerText = description;
            document.getElementById('ingredient-modal').style.display = 'block';
        });
    });

    document.querySelector('.close').onclick = function() {
        document.getElementById('ingredient-modal').style.display = 'none';
    }
</script>