How can I add a 'Free Shipping' label to my products?

Shopify Discussion
1

Sin título-3.jpg
Sin título-3.jpg1280×720 66.9 KB

I can’t find an app or a way to add a “Free Shipping” label to my products.

2

Hello there Andres @AndresGomez A good app recommendation that immediately comes to mind is the Labeler- Product Labels app which you can find on the Shopify App Store.

3

Hi @AndresGomez ,

I hope you’re doing well!

Below are the steps to implement this:

  1. Access Your Shopify Admin Panel:

    • Navigate to Online Store → Themes → Customize → Product Grid.

  2. Locate the Product Card Template:

    • Find the product-card.liquid file (usually in sections/product-card.liquid).

  3. Add the CSS:

    • In your theme’s stylesheet (usually assets/theme.css), add the following code:

      .shipping-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #000;
  color: #fff;
  padding: 5px 15px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  z-index: 2;
}

  4. Integrate the Label into the Product Card:

    • Inside your product card template, right after the product image, insert:

      {% if product.available %}
  <span class="shipping-label">free shipping</span>
{% endif %}

  5. Optional – Show the Label for Specific Products:

    • To display the label only for certain products, use tags:

      {% if product.tags contains 'free-shipping' %}
  <span class="shipping-label">free shipping</span>
{% endif %}

These steps will create a clean black label with white text stating “free shipping” on your product cards.

If you’d like, I’d be happy to help implement this directly into your theme. I can ensure it perfectly matches your design and functions flawlessly across all product cards.

Let me know if you’d like to proceed with the implementation or if you have any questions about the steps above.

Best regards,

Shubham | Untechnickle

4

I see, are you referring to editing the theme’s code in the first steps?

5

Hey @AndresGomez ,

Yes, we’ll need to modify the theme’s code to add this functionality. The code above would create and add the free shipping badge for the products you’ve tagged with free-shipping.

Let me know if you want us to implement this for you, we’d love to. You can email or DM us your collaborator code and we’ll make the changes.

Best,
Shubham | hello@untechnickle.com