Solved

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

jbslide
Explorer
50 7 7

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

jbslide_0-1671329896280.png

 

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.

Accepted Solution (1)
Litos
Globetrotter
688 169 143

This is an accepted solution.

Hi @jbslide,

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

Screenshot.png

Hope it is clear to you.

 

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.

View solution in original post

Replies 10 (10)

Litos
Globetrotter
688 169 143

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.

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
jbslide
Explorer
50 7 7

Litos,

Thank you. I've sent you the code.

Litos
Globetrotter
688 169 143

Hi @jbslide,

Please follow the steps below:

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

Screenshot.png

- 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!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
jbslide
Explorer
50 7 7

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:

jbslide_0-1671479155758.png

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

Thank you:

jbslide_1-1671479337308.png

 

 

 

 

Litos
Globetrotter
688 169 143

Hi @jbslide,

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

Screenshot.png

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
jbslide
Explorer
50 7 7

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
Globetrotter
688 169 143

This is an accepted solution.

Hi @jbslide,

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

Screenshot.png

Hope it is clear to you.

 

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
esiddhi
Visitor
1 0 1

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

hetdedhia
Excursionist
10 0 3

error.png

 

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

TorontoJewelBox
Visitor
1 0 0

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.