On some themes, the product message appears over the product image on product cards, such as those in product lists on the home page.
With custom CSS in the theme, you can hide the product message only on product cards and keep it on the product page.
This app shows the product message near the cart button. On some themes, product cards also have a cart button (quick add), so the product message appears on those cards too. For example, it appears on product cards in a product list on the home page of the Horizon theme.
The code in this article is a sample for the Horizon theme. It may not work on other themes. If it does not work, contact our customer support through the contact form.
(1) Open the theme editor
From Shopify admin, go to Online Store → Themes, then select "Edit theme" for the target theme.
Tip: You can also duplicate the published theme and check the result in the copy's preview first.
(2) Open Custom CSS
Select the gear icon (theme settings) in the upper-left corner, then open "Custom CSS" at the bottom.
(3) Enter the code
In the "CSS" field, enter the following sample code (for the Horizon theme).
The following image shows the code entered in "Custom CSS" in the Horizon theme settings.
(4) Save
Select "Save" in the upper-right corner.
After you save, check the following two points on a product that has a product message.
The product message does not appear on product cards in the product list on the home page
The product message appears on the product page
Note: This code hides the product message on every product card in the store, including the home page, collection pages, and recommended products. It does not affect the product message on the product page.