Collection List Impact Theme - Remove Arrow & Text Animation on hover

Store Design
1

I am wanting to remove the arrow and text animation on hover for all my collection lists on the impact theme.

I was able to remove the arrow alone, however this ended up making the text slightly off centre and still animated on over instead of being fixed. What I am after is for there to just be fixed text in the middle centre, but still able to click through on the link.

This is the liquid below:

{%- render ‘section-spacing-collapsing’ -%}

{%- comment -%}

CSS

{%- endcomment -%}

#shopify-section-{{ section.id }} .collection-list { --collection-list-grid: {% if section.settings.stack_collections %}none{% else %}auto / auto-flow 73vw{% endif %}; } @media screen and (min-width: 700px) { #shopify-section-{{ section.id }} .collection-list { --collection-list-grid: {% if section.settings.stack_collections %}auto / repeat(2, minmax(0, 1fr)){% else %}auto / auto-flow 36vw{% endif %}; } } @media screen and (min-width: 1000px) { #shopify-section-{{ section.id }} .collection-list { --collection-list-grid: {% if section.settings.stack_collections %}auto / repeat({{ 3 | at_most: section.settings.collections_per_row }}, minmax(0, 1fr)){% else %}auto / auto-flow calc(var(--container-inner-width) / {{ section.settings.collections_per_row }} - (var(--grid-gutter) / 3 * 2)){% endif %}; } } @media screen and (min-width: 1400px) { #shopify-section-{{ section.id }} .collection-list { --collection-list-grid: {% if section.settings.stack_collections %}auto / repeat({{ section.settings.collections_per_row }}, minmax(0, 1fr)){% else %}auto / auto-flow calc(var(--container-inner-width) / {{ section.settings.collections_per_row }} - (var(--grid-gutter) / {{ section.settings.collections_per_row }} * {{ section.settings.collections_per_row | minus: 1 }})){% endif %}; } }

{%- comment -%}

LIQUID

{%- endcomment -%}

{%- assign link_url = section.settings.link_url | default: section.settings.collection.url -%} {%- render 'section-header', subheading: section.settings.subheading, heading: section.settings.title, heading_color: section.settings.heading_color, heading_gradient: section.settings.heading_gradient, content: section.settings.content, link_text: section.settings.link_text, link_url: link_url -%}
{%- assign scroll_area_id = 'scroll-area-' | append: section.id -%} {%- for block in section.blocks -%} {%- assign collection = block.settings.collection -%} {%- assign collection_url = block.settings.url | default: collection.url -%}

<a {% if collection_url != blank %}href=“{{ collection_url }}”{% endif %} class=“collection-card {% if block.settings.text_position contains ‘place-self-end’ %}collection-card–reverse-transition{% endif %} shadow” reveal-js>

{%- if collection != blank or block.settings.image != blank -%} {%- assign image = block.settings.image | default: collection.featured_image -%}

{%- if image != blank -%}
{%- capture sizes -%}(max-width: 699px) 73vw, {{ settings.page_width | divided_by: section.settings.collections_per_row }}px{%- endcapture -%}
{{- image | image_url: width: image.width | image_tag: loading: ‘lazy’, sizes: sizes, widths: ‘200,300,400,500,600,800,1000,1200,1400,1600’, class: ‘zoom-image’ -}}
{%- endif -%}

{%- if block.settings.text_position contains 'place-self-end' -%} {%- render 'icon' with 'circle-button-right-clipped', width: 40, height: 40 -%} {%- endif -%}
{%- if block.settings.subheading != blank -%}

{{ block.settings.subheading | escape }}

{%- endif -%}

{{ block.settings.title | default: collection.title | escape }}

{%- unless block.settings.text_position contains ‘place-self-end’ -%}
{%- render ‘icon’ with ‘circle-button-right-clipped’, width: 40, height: 40 -%}
{%- endunless -%}

{%- else -%} {%- capture collection_placeholder -%}{% cycle 'collection-1', 'collection-2', 'collection-3' %}{%- endcapture -%} {{- collection_placeholder | placeholder_svg_tag: 'placeholder zoom-image' -}}
{%- if block.settings.text_position contains 'place-self-end' -%} {%- render 'icon' with 'circle-button-right-clipped', width: 40, height: 40 -%} {%- endif -%}

{{- 'general.on_boarding.collection_title' | t -}}

{%- unless block.settings.text_position contains ‘place-self-end’ -%}
{%- render ‘icon’ with ‘circle-button-right-clipped’, width: 40, height: 40 -%}
{%- endunless -%}

{%- endif -%}
{%- endfor -%}

{%- if section.settings.stack_collections == false -%}
{%- if section.settings.show_progress_bar -%}
{%- assign default_progress = section.settings.collections_per_row | times: 1.0 | divided_by: section.blocks.size -%}
{%- render ‘scrollbar’, observes: scroll_area_id, default_progress: default_progress, show_buttons: true -%}
{%- else -%}

{{ ‘general.accessibility.previous’ | t }}

{{ 'general.accessibility.next' | t }} {%- endif -%} {%- endif -%}

{% schema %}
{
“name”: “Collection list”,
“class”: “shopify-section–collection-list”,
“tag”: “section”,
“disabled_on”: {
“templates”: [“password”],
“groups”: [“header”, “custom.overlay”]
},
“settings”: [
{
“type”: “checkbox”,
“id”: “full_width”,
“label”: “Full width”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “stack_collections”,
“label”: “Stack collections”,
“default”: true
},
{
“type”: “range”,
“id”: “collections_per_row”,
“min”: 2,
“max”: 5,
“label”: “Collections per row (desktop)”,
“default”: 3
},
{
“type”: “checkbox”,
“id”: “show_progress_bar”,
“label”: “Show carousel progress bar”,
“default”: false
},
{
“type”: “text”,
“id”: “subheading”,
“label”: “Subheading”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Collection list”
},
{
“type”: “richtext”,
“id”: “content”,
“label”: “Content”
},
{
“type”: “url”,
“id”: “link_url”,
“label”: “Link URL”
},
{
“type”: “text”,
“id”: “link_text”,
“label”: “Link text”,
“default”: “View all”
},
{
“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”
}
],
“blocks”: [
{
“type”: “collection”,
“name”: “Collection”,
“settings”: [
{
“type”: “collection”,
“id”: “collection”,
“label”: “Collection”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”,
“info”: “1500 x 1800px .jpg recommended. Default to collection image.”
},
{
“type”: “text”,
“id”: “subheading”,
“label”: “Subheading”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“info”: “Default to collection title.”
},
{
“type”: “url”,
“id”: “url”,
“label”: “Link”,
“info”: “Default to collection URL.”
},
{
“type”: “select”,
“id”: “heading_tag”,
“label”: “Heading style”,
“options”: [
{
“value”: “h1”,
“label”: “H1”
},
{
“value”: “h2”,
“label”: “H2”
},
{
“value”: “h3”,
“label”: “H3”
},
{
“value”: “h4”,
“label”: “H4”
},
{
“value”: “h5”,
“label”: “H5”
},
{
“value”: “h6”,
“label”: “H6”
}
],
“default”: “h2”
},
{
“type”: “select”,
“id”: “text_position”,
“label”: “Content position”,
“options”: [
{
“value”: “place-self-start text-start”,
“label”: “Top left”
},
{
“value”: “place-self-start-center text-center”,
“label”: “Top center”
},
{
“value”: “place-self-start-end text-end”,
“label”: “Top right”
},
{
“value”: “place-self-center-start text-start”,
“label”: “Middle left”
},
{
“value”: “place-self-center text-center”,
“label”: “Middle center”
},
{
“value”: “place-self-center-end text-end”,
“label”: “Middle right”
},
{
“value”: “place-self-end-start text-start”,
“label”: “Bottom left”
},
{
“value”: “place-self-end-center text-center”,
“label”: “Bottom center”
},
{
“value”: “place-self-end text-end”,
“label”: “Bottom right”
}
],
“default”: “place-self-center text-center”
},
{
“type”: “header”,
“content”: “Colors”
},
{
“type”: “color”,
“id”: “text_color”,
“label”: “Text”,
“default”: “#ffffff”
},
{
“type”: “color”,
“id”: “overlay_color”,
“label”: “Overlay”,
“default”: “#000000”
},
{
“type”: “range”,
“id”: “overlay_opacity”,
“label”: “Overlay opacity”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “%”,
“default”: 30
}
]
}
],
“presets”: [
{
“name”: “Collection list”,
“blocks”: [
{
“type”: “collection”
},
{
“type”: “collection”
},
{
“type”: “collection”
}
]
}
]
}
{% endschema %}

2

Hi @ryanf1 ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.image-link-blocks__item .icon-circle-button-right-clipped {
    display: none;
}
3

Unfortunately no success with this

4

Hi @ryanf1 ,

Please send me the page link, I will check it

5

This theme is currently not live and I don’t want it to be active yet.

6

Hi @ryanf1 ,

Can you try changing the entire liquid code:

{%- render 'section-spacing-collapsing' -%}

{%- comment -%}
------------------------------------------------------------------------------------------------------------------------
CSS
------------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- comment -%}
------------------------------------------------------------------------------------------------------------------------
LIQUID
------------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- assign link_url = section.settings.link_url | default: section.settings.collection.url -%}
{%- render 'section-header', subheading: section.settings.subheading, heading: section.settings.title, heading_color: section.settings.heading_color, heading_gradient: section.settings.heading_gradient, content: section.settings.content, link_text: section.settings.link_text, link_url: link_url -%}

{%- assign scroll_area_id = 'scroll-area-' | append: section.id -%}

{%- if section.settings.stack_collections == false -%}
{%- if section.settings.show_progress_bar -%}
{%- assign default_progress = section.settings.collections_per_row | times: 1.0 | divided_by: section.blocks.size -%}
{%- render 'scrollbar', observes: scroll_area_id, default_progress: default_progress, show_buttons: true -%}
{%- else -%}

{%- endif -%}
{%- endif -%}

{% schema %}
{
"name": "Collection list",
"class": "shopify-section--collection-list",
"tag": "section",
"disabled_on": {
"templates": ["password"],
"groups": ["header", "custom.overlay"]
},
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "Full width",
"default": true
},
{
"type": "checkbox",
"id": "stack_collections",
"label": "Stack collections",
"default": true
},
{
"type": "range",
"id": "collections_per_row",
"min": 2,
"max": 5,
"label": "Collections per row (desktop)",
"default": 3
},
{
"type": "checkbox",
"id": "show_progress_bar",
"label": "Show carousel progress bar",
"default": false
},
{
"type": "text",
"id": "subheading",
"label": "Subheading"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Collection list"
},
{
"type": "richtext",
"id": "content",
"label": "Content"
},
{
"type": "url",
"id": "link_url",
"label": "Link URL"
},
{
"type": "text",
"id": "link_text",
"label": "Link text",
"default": "View all"
},
{
"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"
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1500 x 1800px .jpg recommended. Default to collection image."
},
{
"type": "text",
"id": "subheading",
"label": "Subheading"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"info": "Default to collection title."
},
{
"type": "url",
"id": "url",
"label": "Link",
"info": "Default to collection URL."
},
{
"type": "select",
"id": "heading_tag",
"label": "Heading style",
"options": [
{
"value": "h1",
"label": "H1"
},
{
"value": "h2",
"label": "H2"
},
{
"value": "h3",
"label": "H3"
},
{
"value": "h4",
"label": "H4"
},
{
"value": "h5",
"label": "H5"
},
{
"value": "h6",
"label": "H6"
}
],
"default": "h2"
},
{
"type": "select",
"id": "text_position",
"label": "Content position",
"options": [
{
"value": "place-self-start text-start",
"label": "Top left"
},
{
"value": "place-self-start-center text-center",
"label": "Top center"
},
{
"value": "place-self-start-end text-end",
"label": "Top right"
},
{
"value": "place-self-center-start text-start",
"label": "Middle left"
},
{
"value": "place-self-center text-center",
"label": "Middle center"
},
{
"value": "place-self-center-end text-end",
"label": "Middle right"
},
{
"value": "place-self-end-start text-start",
"label": "Bottom left"
},
{
"value": "place-self-end-center text-center",
"label": "Bottom center"
},
{
"value": "place-self-end text-end",
"label": "Bottom right"
}
],
"default": "place-self-center text-center"
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#ffffff"
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay",
"default": "#000000"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Overlay opacity",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"default": 30
}
]
}
],
"presets": [
{
"name": "Collection list",
"blocks": [
{
"type": "collection"
},
{
"type": "collection"
},
{
"type": "collection"
}
]
}
]
}
{% endschema %}
7

This removes the arrows, however it makes the text sit below centre and still has animation in the text on hover. I had it at this point previously.

8

Hi @ryanf1 ,

This is difficult to check if you cannot see the site link. Can you send the preview link via private message? I will check it

9

Hi @ryanf1 ,

.collection-card:hover .collection-card__content {
      transform: none;
}
.collection-card:hover .collection-card__content+svg {
            display: none;
    }

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

10

Hi @ryanf1 ,

Please change code:

.collection-card:hover .collection-card__content {
      transform: none;
}
.collection-card__content+svg {
            display: none;
    }
11

Hi @ryanf1 ,

Please change code:

.collection-card:hover .collection-card__content {
      transform: none;
}
.collection-card__content {
          margin-block-end: 0 !important;
}
.collection-card__content+svg {
            display: none;
    }