Hello,
I would like to change the appearance of my collections items within the Debut theme to display as circular images instead of square.
I clicked on manage themes and selected edit code on the drop down menu. I then edited the code by clicking on the sections tab, selecting add a new section and pasted the code below (Please see below attached photo). I then went back to the online store page & clicked on edit then proceeded to add a new section. I was able to add the images to my collections which are now circular like I wanted however they are showing up in a vertical row. Is there a way to change it to where I have circular collections images that are in a horizontal row and can display up to 8 circles in two horizontal rows with 4 circles on top and 4 circles on the bottom?
There is an option to add custom CSS, is there something that can be added here to adjust the appearance to where the circles are all aligned horizontally in two rows?
Any help would be greatly appreciated. Thank you! 
{% if section.settings.fullwidth == false %}
{% 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 %}
<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 %}
{{ block.settings.title }}
{% endif %}
{% if block.settings.link != blank %}
{% endif %}
{% endfor %}
{% endif %}
{% if section.settings.fullwidth == false %}
{% 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 %}
