DAWN THEME CUSTOMIZATION: Override .collection-list__item:only-child collection list sections.

Store Design
, ,
1

I have a page template with multiple collection list sections that dynamically display product selections. We use this because we have a lot of fluctuations in our product inventory but like having very specific collections for customers to navigate easily.

I’ve figured out the code I needed to hide the empty collections and display an out of stock message if all collections in a section are empty in my collection-list.liquid file. The last piece I need is to keep the column settings in the section even when there is only one collection to display. If there are two or more, after the custom check for products, the grid displays the 4 columns I have set in my section settings…but when all but one collection in the list is hidden, it displays a giant image with a width of 100% based on this CSS applied to the list item.

RG811_3-1724945163070.png

I can’t find where in the theme files “.collection-list__item:only-child” gets applied to my list items. Any devs here that can help me override this setting?

Here’s how the page is displaying. I want the Canada collection to display only in the far left column under the Burgenland column.

RG811_1-1724944818596.png
RG811_1-1724944818596.png1185×831 91.3 KB

These are my section settings for all collection lists on the page.

RG811_2-1724944922534.png
RG811_2-1724944922534.png206×783 29.1 KB

Here are my code changes in collection-list.liquid:


        {%- assign collections_shown = false -%}
        
        {%- for block in section.blocks -%}
          {%- assign collection = block.settings.collection -%}
          {%- if collection.products_count > 0 -%}
            
            {%- assign collections_shown = true -%}
            
            - {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
                {%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
                {% render 'card-collection',
                  card_collection: collection,
                  media_aspect_ratio: section.settings.image_ratio,
                  columns: columns,
                  placeholder_image: placeholder_image
                %}
            

          {%- endif -%}
        {%- endfor -%}

        {%- unless collections_shown -%}
          
          ## 
            This collection is currently out of stock, but we invite you to explore similar products while we restock.
          
        {%- endunless -%}
2

Without a site URL, I can’t say exactly, but from your screenshot, that CSS you’re trying to override lives in a file called “section-col…list.css” (the middle is truncated, but that should be enough to find it). Check your assets folder for a CSS file with this name.

As for its usage, I can see it in the snippet you provided. Search for “collection-list__item” and you’ll see it applied to the grid items. The “only-child” pseudo element isn’t part of the class name. It’s like a sort of dynamic selector which only applies to elements with no siblings.

Check the reference doc here: https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child