How to make featured collections section full width in Supply theme on homepage?

Solved
Highlighted
Explorer
167 2 8

Hi,

I was wondering how to make my featured collection section full width of the page? Like this:

 

Naamloos.png

 

Code looks like this:

<div data-section-id="{{ section.id }}" data-section-type="collections-list-template">
  <hr>
  <div class="section-header">
    <h2 class="h1  section-header--left">JOUW DOEL IN 2020</h2>
    <div class="section-header--right">
      <a href="{{ routes.collections_url }}">{{ 'homepage.featured_collections.more_categories' | t }} &rsaquo;</a>
    </div>
  </div>
  <div class="grid-uniform text-center">

    {%- assign index = 0 -%}
    {%- assign index = section.blocks.size -%}

    {% case index %}
      {% when 1 %}
        {%- assign featured_collection_width = 'one-whole' -%}
        {%- assign featured_collection_size = '1024x' -%}
        {%- assign width = '1000' %}
        {%- assign height = '1000' %}
      {% when 2 %}
        {%- assign featured_collection_width = 'one-half' -%}
        {%- assign featured_collection_size = '540x' -%}
        {%- assign width = '480' %}
        {%- assign height = '480' %}
      {% when 3 %}
        {%- assign featured_collection_width = 'small--one-whole one-third' -%}
        {%- assign featured_collection_size = '345x' -%}
        {%- assign width = '310' -%}
        {%- assign height = '310' -%}
      {% when 4 %}
        {%- assign featured_collection_width = 'small--one-half one-quarter' -%}
        {%- assign featured_collection_size = '250x' -%}
        {%- assign width = '225' -%}
        {%- assign height = '225' -%}
      {% when 5 %}
        {%- assign featured_collection_width = 'small--one-half medium--one-third large--one-fifth' -%}
        {%- assign featured_collection_size = '195x' -%}
        {%- assign width = '175' -%}
        {%- assign height = '175' -%}
      {% when 6 %}
        {%- assign featured_collection_width = 'small--one-half medium--one-third large--one-sixth' -%}
        {%- assign featured_collection_size = '195x' -%}
        {%- assign width = '140' -%}
        {%- assign height = '140' -%}
    {% endcase %}

    {% if index > 0 %}
     
          {% for block in section.blocks %}
            {%- assign featured = block.settings.collection %}
            {% include 'featured-collection-doel-slider' with width: width, height: height %}
          {% endfor %}

    {% comment %}
    {% else %}
      {%- assign index = 0 %}
      {% for collection in collections limit:7 %}
        {% unless index >= 6 %}
          {% unless collection.handle == 'frontpage' %}
            {%- assign featured = collection.handle %}
            {% include 'featured-collection' %}
            {%- assign index = index | plus: 1 %}
          {% endunless %}
        {% endunless %}
      {% endfor %}
      {% endcomment %}
    {% endif %}

    
    {% if index == 0 %}
      <div class="grid-item text-center">
        <p>{{ 'homepage.featured_collections.no_collections_html' | t }}</p>
      </div>
      <div class="grid-item">
        <div class="grid-uniform">
          {% for i in (1..6) %}
            <div class="grid-item small--one-half medium--one-third large--one-sixth text-center">
              {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
              {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
              <p><a href="/admin/collections">{{ 'homepage.featured_collections.example_collection' | t }}</a></p>
            </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}
    
  </div>
</div>



{% schema %}
{
  "name": {
    "da": "Kollektionsliste",
    "de": "Kategorien-Liste",
    "en": "Brands full width",
    "es": "Lista de colecciones",
    "fi": "Kokoelmaluettelo",
    "fr": "Page des collections",
    "hi": "कलेक्शन सूची",
    "it": "Elenco delle collezioni",
    "ja": "コレクションリスト",
    "ko": "컬렉션 목록",
    "nb": "Samlingsliste",
    "nl": "Collectielijst doel",
    "pt-BR": "Lista de coleções",
    "pt-PT": "Lista de coleções",
    "sv": "Kollektionslista",
    "th": "รายการคอลเลกชัน",
    "zh-CN": "产品系列列表",
    "zh-TW": "商品系列清單"
  },
  "class": "collection-list-section",
  "max_blocks": 6,
  "presets": [
    {
      "name": {
        "da": "Kollektionsliste",
        "de": "Kategorien-Liste",
        "en": "Brands full width",
        "es": "Lista de colecciones",
        "fi": "Kokoelmaluettelo",
        "fr": "Page des collections",
        "hi": "कलेक्शन सूची",
        "it": "Elenco delle collezioni",
        "ja": "コレクションリスト",
        "ko": "컬렉션 목록",
        "nb": "Samlingsliste",
        "nl": "Collectielijst doel",
        "pt-BR": "Lista de coleções",
        "pt-PT": "Lista de coleções",
        "sv": "Kollektionslista",
        "th": "รายการคอลเลกชัน",
        "zh-CN": "产品系列列表",
        "zh-TW": "商品系列清單"
      },
      "category": {
        "da": "Kollektioner",
        "de": "Sammlungen",
        "en": "Brands full width",
        "es": "Colecciones",
        "fi": "Kokoelmat",
        "fr": "Collections",
        "hi": "कलेक्शन",
        "it": "Collezioni",
        "ja": "コレクション",
        "ko": "컬렉션",
        "nb": "Samlinger",
        "nl": "Collecties doel",
        "pt-BR": "Coleções",
        "pt-PT": "Coleções",
        "sv": "Produktserier",
        "th": "คอลเลกชัน",
        "zh-CN": "产品系列",
        "zh-TW": "商品系列"
      },
      "blocks": [
        {
          "type": "collection"
        },
        {
          "type": "collection"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": {
        "da": "Kollektion",
        "de": "Kategorie",
        "en": "Brands full width",
        "es": "Colección",
        "fi": "Kokoelma",
        "fr": "Collection",
        "hi": "कलेक्शन",
        "it": "Collezione",
        "ja": "コレクション",
        "ko": "컬렉션",
        "nb": "Samling",
        "nl": "Collectie doel",
        "pt-BR": "Coleção",
        "pt-PT": "Coleção",
        "sv": "Produktserie",
        "th": "คอลเลกชัน",
        "zh-CN": "收藏",
        "zh-TW": "商品系列"
      },
      "settings": [
        {
          "id": "collection",
          "type": "collection",
          "label": {
            "da": "Kollektion",
            "de": "Kategorie",
            "en": "Brands full width",
            "es": "Colección",
            "fi": "Kokoelma",
            "fr": "Collection",
            "hi": "कलेक्शन",
            "it": "Collezione",
            "ja": "コレクション",
            "ko": "컬렉션",
            "nb": "Samling",
            "nl": "Collectie doel",
            "pt-BR": "Coleção",
            "pt-PT": "Coleção",
            "sv": "Produktserie",
            "th": "คอลเลกชัน",
            "zh-CN": "收藏",
            "zh-TW": "商品系列"
          }
        }
      ]
    }
  ]
}
{% endschema %}

 

 

URL: www.smartnutrition.nl

Pass: plazay

0 Likes
Highlighted
Shopify Partner
1023 214 463

This is an accepted solution.

@NielsSchutte 

 

Add the following css at the end of your theme.scss.liquid file:

.template-index .main-content div.shopify-section.collection-list-section {
    width: 100% !important;
    max-width: 100% !important;
}

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Highlighted
Tourist
5 0 0
How to limit max-block to 4 as well add multiple rows to the collection row??
0 Likes
Highlighted
Tourist
5 0 0
How to limit max-block to 4 as well add multiple rows to the collection row?? in which file is the code shown?
0 Likes