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.