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:

{% if section.settings.fullwidth == false %} 
 {% endif %}
{% if section.settings.heading != blank %}

## {{ section.settings.heading }}

{% endif %}
{% if section.blocks.size > 0 %}

{% for block in section.blocks %}
{% assign aos_delay = forloop.index | times: 100 %}

{% if block.settings.link != blank %}

{% endif %}
{% if block.settings.image != blank %}

{% endif %}
{% if block.settings.title != blank %}

{{ block.settings.title }}

{% endif %}
{% if block.settings.link != blank %}

{% endif %}

{% endfor %}

{% endif %}
{% if section.settings.fullwidth == false %} 
 {% endif %}

{% 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]

Hi @jbslide ,

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

Hope it is clear to you.

[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.

[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

[MRamzan]

Add circular collection slider:

How to Add Circular Collection Slider in Shopify Store | Without App [2024]