Need Help Adjusting Collection Code For Mobile- Removing Collection Description- Leaving Just Image

Store Design
, ,

Topic summary

A user is seeking help to restructure their Shopify collection page code to:

Primary Goals:

  • Reorder elements so the collection image displays before the description
  • Make the layout mobile-responsive, showing only the image on mobile devices (hiding the description)
  • On desktop, keep both image and description on the same line

Current Issue:
The original code snippet appears corrupted or improperly formatted with reversed/garbled text, making it difficult to read the exact structure.

Proposed Solution:
A respondent (ReturnPrime) provided:

  • Restructured Liquid code that moves the image block above the description block
  • CSS media query targeting screens up to 767px width to hide the .collection-description element on mobile (display: none)

Remaining Problem:
The user clarified that the provided solution only stacks the description below the image, but they need both elements displayed side-by-side on desktop while maintaining mobile-only image visibility. The discussion remains open with this layout requirement unresolved.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

I need assistance rewriting this code section so that the image appears first, and the description second. I also need it to be mobile-friendly with only the image appearing on mobile, not the description.

                  <div class="collection-img-wrap">
              {%- if section.settings.collection_info_enable -%} 
                <div class="collection-info">
{%- if section.settings.collection_desc_enable -%}
                <div class="collection-description">
                  {% if collection.description != '' %}
                  {{ collection.description }}
                  {% else %}
                  <p>{{ section.settings.collection_desc | truncate: 190 }}</p>
                  {% endif %}
                </div>                
              {%- endif -%}
                {%- if section.settings.collection_image_enable -%}
                <div class="collection-image">
                  {% if collection.image %}
                    {%- if collection.image != blank -%}
                      {{ collection.image | image_url: width: 800 | image_tag:
                        loading: 'lazy',
                        width: collection.image.width,
                        height: collection.image.height,
                        class: "img-fluid lazyload",
                        alt: collection.image.alt | escape }}
                    {%- else -%}
                    {{ 'hero-apparel-1' | placeholder_svg_tag }}
                    {%- endif -%}
                  {% else %}
                  {%- if section.settings.collection_image != blank -%}
                      {{ section.settings.collection_image | image_url: width: 800 | image_tag:
                        loading: 'lazy',
                        width: section.settings.collection_image.width,
                        height: section.settings.collection_image.height,
                        class: "img-fluid lazyload",
                        alt: section.settings.collection_image.alt | escape }}
                    {%- else -%}
                    {{ 'hero-apparel-1' | placeholder_svg_tag }}
                    {%- endif -%}
                  {% endif %}
                </div>
                {%- endif -%}
                {%- endif -%}
              </div>               
            </div>
2

Hi @Katstormphoto ,

To modify the code so that the image appears first, followed by the description, and to ensure it is mobile-friendly (only displaying the image on mobile), follow these steps:

Rearrange the Code: Move the image code above the description code.
Use CSS Media Queries: Hide the description on mobile screens.
Here’s the revised code:

liquid

Copy

{%- if section.settings.collection_info_enable -%}

{%- if section.settings.collection_image_enable -%}

{% if collection.image %} {%- if collection.image != blank -%} {{ collection.image | image_url: width: 800 | image_tag: loading: 'lazy', width: collection.image.width, height: collection.image.height, class: "img-fluid lazyload", alt: collection.image.alt | escape }} {%- else -%} {{ 'hero-apparel-1' | placeholder_svg_tag }} {%- endif -%} {% else %} {%- if section.settings.collection_image != blank -%} {{ section.settings.collection_image | image_url: width: 800 | image_tag: loading: 'lazy', width: section.settings.collection_image.width, height: section.settings.collection_image.height, class: "img-fluid lazyload", alt: section.settings.collection_image.alt | escape }} {%- else -%} {{ 'hero-apparel-1' | placeholder_svg_tag }} {%- endif -%} {% endif %}
{%- endif -%}

{%- if section.settings.collection_desc_enable -%}

{% if collection.description != '' %} {{ collection.description }} {% else %}

{{ section.settings.collection_desc | truncate: 190 }}

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

{%- endif -%}

Mobile-Friendly CSS To hide the description on mobile devices, apply the following CSS:

css

Copy
/* Hide description on mobile */
@media only screen and (max-width: 767px) {
.collection-description {
display: none;
}
}

3

On desktop, I need the image and description to be on the same line. This code just places the description below the image.