Skip to content

  • Home
  • About Us
  • Add-ons
  • Services
    • Shopify Development Services
    • Shopify Maintenance services
    • Shopify PageSpeed Optimization
    • Shopify Training
    • Shopify App Development
    • Shopify App Integration Services
    • Shopify Email Marketing
    • Shopify Web Design Agency
  • Blog
  • Contact Us
  • Search button

Add a List of Collections to the bottom

Jun 12, 2022Nov 15, 2022
Add a List of Collections to the bottom

Having the ability to show particular collections in a list or grid on any page of your store can be game-changing. It doesn’t have to be the full Dress or Shirt range just a small sub-collection that you have chosen to feature… Restocked items? Sale goods? and last chance bins all get a chance to see some of the limelight which your customers will not wait to explore.

Editing your theme code to add this feature

Required files: section [selected-collections.liquid];
  • In the Section directory, upload the following file:
{% unless section.settings.enable_featured_collections != true %}
<div class="page-width selected-collections">
{% assign fc_title = section.settings.title %}
{%- assign column = section.settings.column -%}
{%- assign img_max_height = '500x500' -%}
{%- assign column_class = " " -%}
{%- if column == 2 -%}
{%- assign img_max_height = '500x500' -%}
{%- assign column_class = " one-half " -%}
{%- elsif column == 3 -%}
{%- assign img_max_height = '400x400' -%}
{%- assign column_class = " medium-up--one-third " -%}
{%- elsif column == 4 -%}
{%- assign img_max_height = '300x300' -%}
{%- assign column_class = " medium-up--one-quarter " -%}
{%- endif -%}
{% if fc_title != blank %}<h3 class="title">{{fc_title}}</h3>{% endif %}
<div class="grid">
{% for block in section.blocks %}
{% if block.type == 'collection' %}
<div class="grid__item {{column_class}} small--one-whole">
<a href="{{collections[coll].url}}" class="collection-item">
{% assign coll = block.settings.collection %}
{%- assign featured_image = block.settings.image -%}
{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

<img class="feature-row__image lazyload"
src="{{ featured_image | img_url: img_max_height }}"
data-src="{{ img_url }}"
data-widths="[360, 480, 620, 740, 860, 980, 1100]"
data-aspectratio="{{ featured_image.aspect_ratio }}"
data-sizes="auto"
tabindex="-1"
alt="{{ featured_image.alt | escape }}">
<h4 class="title">{{block.settings.title}}</h4>
{{block.settings.text}}
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endunless %}
<style>
.selected-collections{
padding-top: 20px;
}
.selected-collections .feature-row__image{
width: 100%;
margin-bottom: 15px;
}
.selected-collections .grid .title{
margin: 0;
padding: 0;
}
.selected-collections .grid p{
margin: 0;
padding: 0 0 10px;
}
.selected-collections .collection-item{
display: block;
margin-bottom: 15px;
}
@media (min-width:600px) and (max-width:800px){
.selected-collections .medium-up--one-third,
.selected-collections .medium-up--one-quarter{
width: 50%;
}
.selected-collections .medium-up--one-third:nth-child(odd),
.selected-collections .medium-up--one-quarter:nth-child(odd){
clear: both;
}
}
@media (min-width:801px) and (max-width:992px){
.selected-collections .medium-up--one-quarter{
width: 33.33333%;
}
.selected-collections .medium-up--one-quarter:nth-child(odd){
clear: none;
}
.selected-collections .medium-up--one-quarter:nth-child(3n+4){
clear: both;
}
}
</style>
{% schema %}
{
"name": "Featured Collections",
"settings": [
{
"type": "checkbox",
"id": "enable_featured_collections",
"label": "Show Featured Collections",
"default": true
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Title"
},
{
"type": "range",
"id": "column",
"label": "Column",
"min": 2,
"max": 4,
"step": 1,
"default": 2
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "richtext",
"id": "text",
"label": "Short Description"
},
{
"type": "collection",
"id": "collection",
"label": "Select a collection"
},
{
"type": "image_picker",
"id": "image",
"label": "Featured image"
}
]
}
]
}
{% endschema %}
  • In the Layout directory, find theme.liquid and add the following code right above {% section 'footer' %} :
{% if template contains 'index' or template contains 'page' %}
{% section 'selected-collections' %}
{% endif %}
  • Congrats, You’ve completed the coding parts.
  • Now it’s available in Themes>customize theme section setting

Posted in Shopify TutorialsTagged shopify collection

Post navigation

Prev Add a size chart to product pages
Next Full width banner to all pages – Shopify

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Latest Posts

  • Shopify winter edition
    Understanding The Shopify Winter Edition 2023 UpdatesMar 14, 2023
  • Steps To Set Up Shopify Test Order For Quality Assurance
    Steps To Set Up Shopify Test Order For Quality AssuranceMar 1, 2023
  • Why You Should Implement Shopify Inventory Management for Increased EfficiencyFeb 16, 2023
  • Shopify theme detector
    Shopify Theme Detector: Uncover the Perfect Shopify Theme for Your StoreFeb 10, 2023

Subscribe Now

Follow Us

  • facebook
  • twitter
  • instagram
  • linkedin2

OriginateWeb.com is the realization of a dream. Our founder previously spent several years working for a large website development company.

Quick Links

  • Shopify Services
  • About Us
  • Shopify Theme Add-ons
  • Blog
  • Contact Us
  • Careers

Services

  • Shopify Theme Add-ons
  • Website Development
  • Page Speed Optimization
  • App Development
  • Maintenance
  • Training

Need Help?

  • Licensing Agreement
  • Terms and Conditions
  • Privacy Policy
  • Sitemap
  • facebook
  • twitter
  • instagram
  • linkedin2

© 2023 Originate Web. All Rights Reserved