求助：Shopify店铺仅隐藏桌面端collection-image，保留移动端显示

Hey there! No stress at all—this is a really common adjustment, and we can get it sorted with just a bit of CSS (no messy template code changes that might break things, perfect for folks who aren't code-savvy). Here's exactly what to do:

• Step 1: Open your Shopify theme's custom CSS editor
  Go to your Shopify admin, head to Online Store > Themes, click the Customize button on your active theme. Then look for the Settings icon (usually a gear) in the top right, select Custom CSS from the menu that pops up. This is where we'll add our code safely.

• Step 2: Paste this CSS code into the custom CSS box

  /* Hide collection-image on desktop screens */
  @media screen and (min-width: 768px) {
    .collection-image {
      display: none !important;
    }
  }
  

  Let me break this down so you know what's happening:

  • @media screen and (min-width: 768px): This targets any screen larger than 768px (standard desktop/tablet breakpoints—you can adjust the number if your theme uses a different one, but 768px works for most).
  • .collection-image: This targets the element with the class name "collection-image" (make sure this matches the exact class used in your theme—if it doesn't, we'll fix that next).
  • display: none !important;: This tells the browser to completely hide that element on the targeted screen sizes.

• Step 3: Save and preview
  Click Save in the top right, then open your store on a desktop browser to check if the image is gone. Pop over to mobile (or use your browser's dev tools to simulate mobile) to confirm the image still shows up like it should.

Quick troubleshooting if it doesn't work: #

If the image is still showing on desktop, the class name might be slightly different in your theme. Here's how to check:

1. On your desktop store, right-click the collection image and select Inspect (this opens your browser's developer tools).
2. Look in the HTML panel for the element's class name—it might be something like collection__image or collection-image-wrapper.
3. Replace .collection-image in the code above with the exact class name you found, then save again.

That's it! This method is safe because it only adds custom CSS, so you won't mess up your theme's core code.

内容的提问来源于stack exchange，提问作者Zouh