How to make collection list circle - debut -help with existing code

Store Design
1

Hi,

I came across this code which allows me to create a customized collection slider with shapes and other options. I was able to create a collection slider block in my customize page, but for some reason, the images won’t show. Instead, it is showing this on the website

"Liquid error (sections/collection-slider line 133): Could not find asset snippets/card-collection.liquid "

Here is the code for reference:

{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign columns_mobile_int = section.settings.columns_mobile | plus: 1
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
    assign show_mobile_slider = true
  endif
-%}

  

    
  

{% schema %}
{
  "name": "Collection slider",
  "tag": "section",
  "class": "section section-collection-list",
  "max_blocks": 15,
  "settings": [
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "adapt"
        },
        {
          "value": "portrait",
          "label": "Portrait"
        },
        {
          "value": "square",
          "label": "Square"
        },
        {
          "value": "circle",
          "label": "Circle"
        }
      ],
      "default": "circle",
      "label": "Image ratio"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 8,
      "step": 1,
      "default": 4,
      "label": "Number of columns on desktop"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 2"
        },
        {
          "value": "accent-2",
          "label": "Accent 1"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "inverse"
        }
      ],
      "default": "background-1",
      "label": "Color scheme",
      "info": "To change the card color scheme, update your theme settings."
    },
    {
      "type": "header",
      "content": "Mobile Layout"
    },
    {
      "type": "range",
      "id": "columns_mobile",
      "min": 1,
      "max": 8,
      "step": 1,
      "default": 4,
      "label": "Number of columns on mobile"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": true,
      "label": "Enable swipe on mobile"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "featured_collection",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collection slider",
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}

Hope you could help me out! Credits to mrdigitals.com for the code.

Thank you!

2

Hi @kay_png ,

It means You need to create file *snippets/*card-collection.liquid

EBOOST_0-1717656165360.png
EBOOST_0-1717656165360.png1407×697 44.5 KB

Add content to this file.

3

Hi!

Thank you for replying. May I know what specific content should I put in the *snippets/*card-collection.liquid section?

Thank you!

4

Hi,

You can refer code below( this is code of dawn theme):

{% 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)
  - wrapper_class: {String} Wrapper class for card (optional)
  - placeholder_image: {String} Placeholder image when collection is empty (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 == null
    assign ratio = 1
  endif
  assign card_color_scheme = settings.card_color_scheme
  assign card_style = settings.card_style
  if wrapper_class == null or wrapper_class == 'none'
    assign card_color_scheme = settings.collection_card_color_scheme
    assign card_style = settings.collection_card_style
  endif
-%}

  

    

      {%- if card_collection.featured_image -%}
        

          

            
          

        

      {%- endif -%}
      {%- if card_collection == blank -%}
        
          {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
        

      {%- else -%}
        
          

            ### 
              
                {%- 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 -%}
          

        

      {%- endif -%}
    

    {%- if card_collection != blank and 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 == null and card_collection.description != blank -%}
            

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

          {%- endif -%}
        

      

    {%- endif -%}
    {%- if card_collection == blank -%}
      
        

          ### 
            
              {{ 'onboarding.collection_title' | t }}
              {% render 'icon-arrow' %}
            
          
        

      

    {%- endif -%}