How to add a Collection List section with circular cropped images to a Shopify theme?

[jbslide]

I was using the Empire theme previously which includes a Collection List as shown below:

I'm using the Aero Theme (third party theme I paid for) now which I really like but is doesn't include a Collection List section like the Empire theme (with the circular image cropping as well)

I'm hoping this can be done with code without a lot of difficulty

Thank you in advance.

[Litos]

Hi @jbslide,

You can use section brands to display this, it will be similar, please send me the code of the section, I will edit it for you. You will find the file at: Actions > Edit code > Sections > brand.

[jbslide]

Litos,

Thank you. I've sent you the code.

[Litos]

Hi @jbslide,

Please follow the steps below:

- Step 1: Create a new section file named: featured-list-collections

- Step 2: Change all code:

<div class="main-row {% if section.settings.fullwidth == true %}full-width{% endif %}{% if section.settings.background == true %} layer-background {% endif %} {% if section.settings.top_margin %} margin-top{% endif %}" data-section-id="{{ section.id }}">
<div class="container">
<div class="row">
<div class="main-col col-sm-12 col-md-12">
<div class="row sub-row">
<div class="sub-col col-sm-12 col-md-12">
<div class="brands {% if section.settings.bottom_padding %} padding-bottom{% endif %}{% if section.settings.bottom_border %} border-bottom{% endif %}">
{% if section.settings.fullwidth == false %} <div class="container"> {% endif %}
{% if section.settings.heading != blank %}
<div class="module-title">
<h2>{{ section.settings.heading }}</h2>
</div>
{% endif %}
{% if section.blocks.size > 0 %}
<div id="banner{{section.id}}" class="owl-carousel owl-theme">
{% for block in section.blocks %}
{% assign aos_delay = forloop.index | times: 100 %}
<div class="item">
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}" {{ block.shopify_attributes }}>
{% endif %}
{% if block.settings.image != blank %}
<img {% if settings.lazyloading_enable %}data-{% endif %}src="{{ block.settings.image | img_url: 'master' }}" alt="{{ section.settings.heading }}" class="img-collection-list {% if settings.lazyloading_enable %}lazyload{% endif %} img-responsive" />
{% endif %}
{% if block.settings.title != blank %}
<p style="text-align: center;">{{ block.settings.title }}</p>
{% endif %}
{% if block.settings.link != blank %}
</a>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
{% if section.settings.fullwidth == false %} </div> {% endif %}
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#banner{{section.id}}").owlCarousel({
autoPlay : false ,
items : 5,
margin: 30,
loop: true,
navSpeed : 1000,
dotsSpeed : 1000,
autoplaySpeed : 1000,
nav : true ,
dots : false ,
navText : ['<i class="ion-chevron-left"></i>','<i class="ion-chevron-right"></i>'],
responsive:{
0:{
items: 1
},
480:{
items: 2
},
640:{
items: 3
},
991:{
items: 4
},
1200:{
items: 5
}
}
});
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
{% if section.settings.background == true %}
#shopify-section-{{section.id }} .layer-background,
#shopify-section-{{section.id }} .module-title.title2 h2,
#shopify-section-{{section.id }} .module-title.title2 h2:after, #shopify-section-{{section.id }} .module-title.title2 h2:before {
background: {{ section.settings.background_color }};
}
{%- endif %}
#shopify-section-{{section.id }} .img-collection-list {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  overflow: hidden;
}
</style>
{% schema %}
{
"name": "Collection List Section",
"class": "index-section index-section--flush",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Collection List"
},
{
"type": "checkbox",
"id": "fullwidth",
"label": "Set Div fullwidth?",
"default": false
},
{
"type": "checkbox",
"id": "background",
"label": "Add Background",
"default": false
},
{
"type": "color",
"id": "background_color",
"label": "Sections Background Color",
"info": "This option allows you to set different background color than default one for the section.",
"default": "#f8f8f8"
},
{
"type": "checkbox",
"id": "top_margin",
"label": "Add top margin?",
"info": "White empty space above section",
"default": false
},
{
"type": "checkbox",
"id": "bottom_padding",
"label": "Add bottom margin?",
"info": "White empty space below section",
"default": false
},
{
"type": "checkbox",
"id": "bottom_border",
"label": "Add bottom border?",
"info": "Border line below section",
"default": false
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Collection"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "brand image"
},
{
"type": "url",
"id": "link",
"label": "Link URL"
}
]
}
],
"presets": [{
"name": "Collection List Section",
"category": "Collection List Section",
"blocks": [
{
"type": "collection"
},
{
"type": "collection"
}
]
}]
}
{% endschema %}

- Step 3: Now you can go to Customize and add 'Collection List Section' it should display fine.

Hope it helps!

[jbslide]

Litos,

Thank you soooo much for this code, but what I want is to have 10 categories across the screen. It only shows 5 with the left /right direction arrow pointer:

When I select "Set Div Fullwidth" it still only shows 5 spread wide across the screen.

Thank you:

[Litos]

Hi @jbslide,

You can change its number here, it will display fine:

[jbslide]

Litos,

Thank you very much. I'm trying to understand what should be the next number after 1200 and how do you know? 

Thank you

[Litos · Accepted solution]

Hi @jbslide,

You just need to change the number at item, refer:

Hope it is clear to you.

[esiddhi]

Hi, I see list in vertical. But i need to display as horizontally. 

[hetdedhia]

I am seeing it in vertical. It needs to be displayed horizontally. Kindly help me where I need to make changes. Thanks

[TorontoJewelBox]

Hi Litos,

could you let me know if this same circular category can be used in crave theme? If you can help me out i will be really thankful.

[MRamzan]

Add circular collection slider: