How to hide a Shopify Collection Description Mobile

How to hide a Shopify Collection Description Mobile

To hide the the description on mobile you need to find out what class it has (for example .collection-hero__description). Once you've identified the class, you can use CSS media queries to hide the element. These queries apply styles based on the device's screen size. For mobile devices, a common practice is to target screens smaller than 768px. Here's the CSS you can use:

@media only screen and (max-width: 768px) {
    .collection-hero__description {
        display: none;
    }
}

This code snippet ensures that any element with the class .collection-hero__description will be hidden when the screen size is 768 pixels wide or less, which typically covers most mobile devices.

To add CSS to your Shopify template, follow these steps:

  1. Log into your Shopify Admin Panel:

    • Go to your Shopify store's admin panel by logging in at yourstorename.myshopify.com/admin.
  2. Navigate to the Theme Editor:

    • Once in the admin panel, click on 'Online Store' which is usually found in the left-hand side menu.
    • This will show you a list of your themes. Find the theme you want to edit and click on the 'Actions' dropdown next to it.
    • Select 'Edit code' from the dropdown menu.
  3. Find or Add the Relevant CSS File:

    • In the theme editor, under the 'Assets' folder, look for your main CSS file. This could be named something like theme.scss.liquid or styles.scss.liquid.
    • If you don't have a main CSS file, you can create one by clicking 'Add a new asset', then 'Create a new asset', name it (like custom.css), and click 'Create asset'.
  4. Add the CSS Code:

    • Open the CSS file (either the existing one or the one you just created).
    • Paste the CSS code at the end of the file:
      @media only screen and (max-width: 768px) {
          .collection-hero__description {
              display: none;
          }
      }
      
    • This will ensure that the .collection-hero__description class is hidden on mobile devices.
  5. Save Your Changes:

    • Click 'Save' in the top right corner after you've added the CSS.
  6. Check Your Work:

    • It's a good practice to preview your changes. You can do this by clicking on the 'Preview' button in the theme editor.
    • Check the site on a mobile device or use the device toolbar in Chrome DevTools (by right-clicking on your site in the browser, selecting 'Inspect', and then toggling the device toolbar) to simulate a mobile view.

By following these steps, you should be able to add the necessary CSS to your Shopify template to hide the .collection-hero__description class on mobile devices. Remember, after making changes to your theme, always check your website's functionality across different devices to ensure everything works as expected.

Back to blog