How can I fix 'No products found' issue and modify collection display setup?

Store Design
1

I am setting up my store and I set up the collections menu but now when I click each collection it says: “No products found Use fewer filters or remove all”. How can I fix that?

Also is there a way to add a text not below the collections image but overlay it?

Also how to change the background of the section?

2

@ME15 You can revert the code which you have added into the collection file by click on upper part where you can see

Ujjaval_0-1684302792287.png
Ujjaval_0-1684302792287.png1536×702 54.2 KB

by reverting to the original code . Might be your problem solved.

3

  1. “No products found” error: This message typically appears when there are no products assigned to a particular collection or when the applied filters don’t match any products. To fix this, make sure that you have products assigned to each collection and double-check the filters you have set. Ensure that the products in the collection meet the criteria defined by the filters.

  2. Overlay text on collection images: To overlay text on collection images, you can use CSS positioning and z-index properties. Here’s an example code snippet:

.collection-image-container {
  position: relative;
}

.collection-image-container::after {
  content: "Your Overlay Text";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: #ffffff; /* Customize the text color */
  font-size: 20px; /* Customize the font size */
  /* Add any additional styling you desire */
}
  1. Changing the background of the section: To change the background of a specific section, you can use CSS to target that section’s class or ID and modify its background properties. Here’s an example code snippet:
#your-section-id {
  background-color: #f0f0f0; /* Replace with your desired background color */
  /* Add any additional styling you desire */
}
​