Hello,
My website is using Impact version 6.2.0.
I’m trying to create a list of categories, where each category has an icon with text beneath it (for example, an icon of a heart with the text ‘Heart’ underneath).
I want both the icon and the text to be clickable, so users can click anywhere on the icon or the text to navigate to the relevant page. Although, this can be optional.
The closest I’ve gotten to achieving this is by using the Logo List feature, which allows me to upload an image and link it to a page. However, I can’t figure out how to add a title under the icons. I’ve tried to modify the HTML but, as I’m still relatively new to it, I haven’t had much success.
I know the feature collection list but this feature is not ideal for me.
This is the screenshot of logo list i have right now.
Also I would like to add some animation when mouse is hovered on the logo.
And this is link to the website.
https://mygenbio.com/pages/health-needs
The below is non-edited logo-list.liquid code.
{%- if section.blocks.size > 0 -%}
{%- render 'section-spacing-collapsing' -%}
{%- if section.settings.title != blank -%}
##
{%- render 'styled-text', content: section.settings.title, text_color: section.settings.heading_color, gradient: section.settings.heading_gradient -%}
{%- endif -%}
{{- section.settings.content -}}
{%- endif -%}
{% schema %}
{
"name": "Logo list",
"class": "shopify-section--logo-list",
"tag": "section",
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "Full width",
"default": true
},
{
"type": "checkbox",
"id": "stack_mobile",
"label": "Stack on mobile",
"default": true
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Logo list"
},
{
"type": "richtext",
"id": "content",
"label": "Content"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"options": [
{
"value": "start",
"label": "Left"
},
{
"value": "center",
"label": "Center"
}
],
"default": "start"
},
{
"type": "range",
"id": "items_per_row",
"min": 3,
"max": 7,
"label": "Items per row (desktop)",
"default": 5
},
{
"type": "header",
"content": "Colors",
"info": "Gradient replaces solid colors when set."
},
{
"type": "color",
"id": "background",
"label": "Background"
},
{
"type": "color_background",
"id": "background_gradient",
"label": "Background gradient"
},
{
"type": "color",
"id": "text_color",
"label": "Text"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading color"
},
{
"type": "color_background",
"id": "heading_gradient",
"label": "Heading gradient"
},
{
"type": "color",
"id": "logo_item_background",
"label": "Logo background"
},
{
"type": "color",
"id": "logo_item_border",
"label": "Logo border"
}
],
"blocks": [
{
"type": "logo",
"name": "Logo",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo",
"info": "300 x 90px .jpg recommended"
},
{
"type": "range",
"id": "logo_width",
"min": 50,
"max": 300,
"unit": "px",
"step": 10,
"label": "Logo width",
"default": 120
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]
}
],
"presets": [
{
"name": "Logo list",
"blocks": [
{
"type": "logo"
},
{
"type": "logo"
},
{
"type": "logo"
},
{
"type": "logo"
},
{
"type": "logo"
}
]
}
]
}
{% endschema %}
Any help will be appreciated.
Thank you!