Add button to collection list - Craft Theme

Store Design
1

Hi,

For our client’s work in progress (https://fd9fqdivu7mqpryl-64564789498.shopifypreview.com/) we use the collection list section (LIVING, SLEEPING, BATHING) on the frontpage. Next to the title of the collection, we would like to have a button on each collection image, linking to that specific collection. Please see desired layout here.

I’m sure that’s possible by editing the code somewhere (main-list-collections-liquid?) but I’m not sure how.

Help is much appreciated.

Best regards,

Steven

2

Please share the code of that section will add a button in it.

3

Hi,

Thanks for your reply. What code do you mean exactly. I guess you mean a certain liquid file?

Regards,

Steven

4

There should be file in section folder with the name same as section that you added

5

Hi,

I guess it has to be one of these? (in green): https://imgur.com/a/j3iByp0

6

send the last one. paste in this google doc file

https://docs.google.com/document/d/1lyP0S3lJJpr_olbUBtTccBGyz_CJFnJHayEQpgR53b8/edit?usp=sharing

7

Just did.

8

The solution thanks to Ahsan:

REMEMBER TO BACKUP THE ORIGINAL card-collection-liquid file FIRST

Then replace code with this and edit the CSS to taste:

{% style %}
.mybutton {
position: absolute;
bottom: 10px;
right: 10px;
padding: 13px 25px;
background: #509096;
border: none;
border-radius: 6px;
color: #fff;
text-decoration: none;
}
{% endstyle %}

{% comment %}
Renders a collection card

Accepts:

  • card_collection: {Object} Collection Liquid object
  • media_aspect_ratio: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
  • columns: {Number}
  • extend_height: {Boolean} Card height extends to available container space. Default: false (optional)

Usage:
{% render ‘card-collection’ %}
{% endcomment %}

{%- liquid
assign ratio = 1
if card_collection.featured_image and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_collection.featured_image and media_aspect_ratio == ‘adapt’
assign ratio = card_collection.featured_image.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}

{%- if card_collection.featured_image -%}
{%- endif -%}
SHOP NOW >>

{%- if card_collection.title != blank -%} {{- card_collection.title | escape -}} {%- else -%} {{ 'onboarding.collection_title' | t }} {%- endif -%} {%- if card_collection.description == blank -%}{% render 'icon-arrow' %}{% endif %}

{%- if card_collection.description != blank -%}

{{- card_collection.description | strip_html | truncatewords: 12 -}} {% render 'icon-arrow' %}

{%- endif -%}
{% if settings.card_style == 'card' or card_collection.featured_image %}

{%- if card_collection.title != blank -%} {{- card_collection.title | escape -}} {%- else -%} {{ 'onboarding.collection_title' | t }} {%- endif -%} {%- if card_collection.featured_image or card_collection.description == blank -%}{% render 'icon-arrow' %}{% endif %}

{%- if card_collection.featured_image == nil and card_collection.description != blank -%}

{{- card_collection.description | strip_html | truncatewords: 12 -}} {% render 'icon-arrow' %}

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