How can I replace the Sold Out button with Sold Out text below with Brooklyn Theme

Shopify Discussion
1

I’m using Brooklyn theme. Could someone please tell me how I can remove the ‘sold out’ banner in the top corner of the product image? I’d like to have “sold out” appear as text underneath the product image instead. Thank you in advance!

2

Hello Ginyvanopstal,

To remove the “Sold Out” banner from the top corner of the product image in the Brooklyn theme of your Shopify store, you can follow these steps:

  1. Go to your Shopify Admin and select “Online Store” from the left-hand menu.

  2. Click on “Themes” and then click on “Actions” next to the Brooklyn theme.

  3. Select “Edit code” from the drop-down menu.

  4. In the left-hand menu, navigate to “Snippets” and click on “product-card-grid.liquid”.

  5. Find the code that looks like this:

    cssCopy code
    {% if sold_out %} <div class="grid-product__label">Sold Out</div> {% endif %}

  6. Comment out or delete this code to remove the “Sold Out” banner.

  7. Save your changes and check your store to confirm that the banner has been removed.

To display “Sold Out” as text underneath the product image, you can add the following code below the product image code:

cssCopy code

 

You can style the text in the “grid-product__sold-out” class to match the rest of your store’s design.

Remember to save your changes and check your store to confirm that the “Sold Out” text is displaying correctly.

Best Regards

Olivia devid