skip to Main Content

By default, you can have only one image for Collection (see screenshot). How do I add 2 images for each collection page? This will be desktop and mobile banner images.

https://www.screencast.com/t/MeznxdQATv

The problem is if I add image field to Collection page schema, the same uploaded image is applied for each Collection page.

2

Answers


  1. You can upload an image that you want to show on mobile in asset folder. Then you can get collection class name, and can add this code

    @media only screen and (max-width: 767px) {
       .collection_element_name {
           background-image: url({{ "your_image.png" | asset_url }});
       }
    }
    
    Login or Signup to reply.
  2. You can use Collection Description and add image directly using HTML, so it will be placed on each collection page separately

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search