How can I add "New" Label to products in Supply Theme

Solved
Highlighted
New Member
4 0 0

Hello,

I would like to automatically have "NEW" added to products that have been added to the website within a 30 day range then turn off again after 30days.

How can this be done in the Supply theme?

Cheers

Rachel

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1232 121 311

Hey there, Rachel! 

 

Bo here from Shopify Support.

 

That is a really great idea. How better to get your customers excited about new products than letting them know they're new. Adding labels like this is easiest achieved with the use of an app. Product Labels by Secomap would be the best-rated app with this functionality in our app store. While this app allows you to add labels such as "New" on to products, I am not sure if it would do so on a timer. I would recommend reaching out to the developer here support@secomapp.com to check! 

 

While displaying what products are new on your website is a great idea, emailing customers to let them know you have new products is even better as it brings people to your store. I would highly recommend taking a look at our guide to email marketing here.

 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
4 0 0

Ok Im really hoping for some sort of script that I can add so it will do it automatically.

I did find the script below 

 

{% assign date_created = product.created_at | date:'%s' %}
{% assign     date_now = 'now' | date:'%s' %}
{% assign   difference = date_now | minus: date_created %}

{% if difference < 2592000 %}
   <span class="badge-fresh">FRESH</span>
{% endif %}

 I added it to product-grid-item.liquid as per below

{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-quarter medium-down--one-half' %}
{% endunless %}

{% unless image_size %}
  {%- assign image_size = '600x600' -%}
{% endunless %}

{% unless current_collection %}
  {% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available  %}
  {% assign sold_out = false %}
{% endif %}

{% assign date_created = product.created_at | date:'%s' %}
{% assign     date_now = 'now' | date:'%s' %}
{% assign   difference = date_now | minus: date_created %}

{% if difference < 2592000 %}
   <span class="badge-new">NEW!</span>
{% endif %}

<div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}{% if NEW %} NEW{% endif %}">

  <a href="{{ product.url | within: current_collection }}" class="product-grid-item">
    <div class="product-grid-image">
      <div class="product-grid-image--centered">
        {% if sold_out %}
          <div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>
        {% endif %}

        {% if product.featured_image %}
          {%- assign image = product.featured_image -%}
          {%- assign max_width = width | plus: 0 -%}
          {%- assign max_height = height | plus: 0 -%}

          {%- include 'image-logic' with width: max_width, height: max_height -%}

          {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          <div class="lazyload__image-wrapper no-js" style="max-width: {{ max_width }}px">
            <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
              <img
                class="lazyload no-js"
                data-src="{{ img_url }}"
                data-widths="[125, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                data-aspectratio="{{ image.aspect_ratio }}"
                data-sizes="auto"
                alt="{{ image.alt | escape }}"
                {% comment %}style="max-height: {{ height }}px;">{% endcomment %}>
            </div>
          </div>
          <noscript>
           <img src="{{ image | img_url: '580x' }}"
             srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
             alt="{{ image.alt }}" style="opacity:1;">
         </noscript>

        {% else %}
        {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
        <div>
        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {% endif %}
      </div>
    </div>

    <p>{{ product.title }}</p>

    <div class="product-item--price">
      <span class="h1 medium--left">
        {% if on_sale %}
          <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
        {% else %}
          <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
        {% endif %}
        {% include 'price' with product.price %}
        {% if on_sale and section.settings.product_show_compare_at_price %}
          <small>
            <s>
              <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
              {% include 'price' with product.compare_at_price %}
            </s>
          </small>
        {% endif %}
      </span>

      {% if on_sale and section.settings.product_show_saved_amount %}
        <span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
          {% assign compare_price = product.compare_at_price %}
          {% assign product_price = product.price %}
          {% include 'price-sale' %}
        </span>
      {% endif %}
    </div>

    {% if section.settings.product_reviews_enable %}
      <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
    {% endif %}
  </a>

</div>

It produces what you can see in Pic 2 in the attached doc. 

How can I get it to appear on all new products?

 
 
0 Likes
Highlighted
Shopify Staff
Shopify Staff
1232 121 311

Brilliant job on finding that code. This level of coding would fall outside of our Design Policy. If a member of our community is unable to offer some guidance I would recommend checking out to HeyCarson.

 

All the Best,

Bo

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted

@Pip_Berry_Store wrote:

Ok Im really hoping for some sort of script that I can add so it will do it automatically.

I did find the script below 

 

{% assign date_created = product.created_at | date:'%s' %}
{% assign     date_now = 'now' | date:'%s' %}
{% assign   difference = date_now | minus: date_created %}

{% if difference < 2592000 %}
   <span class="badge-fresh">FRESH</span>
{% endif %}

 I added it to product-grid-item.liquid as per below

{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-quarter medium-down--one-half' %}
{% endunless %}

{% unless image_size %}
  {%- assign image_size = '600x600' -%}
{% endunless %}

{% unless current_collection %}
  {% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available  %}
  {% assign sold_out = false %}
{% endif %}

{% assign date_created = product.created_at | date:'%s' %}
{% assign     date_now = 'now' | date:'%s' %}
{% assign   difference = date_now | minus: date_created %}

{% if difference < 2592000 %}
   <span class="badge-new">NEW!</span>
{% endif %}

<div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}{% if NEW %} NEW{% endif %}">

  <a href="{{ product.url | within: current_collection }}" class="product-grid-item">
    <div class="product-grid-image">
      <div class="product-grid-image--centered">
        {% if sold_out %}
          <div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>
        {% endif %}

        {% if product.featured_image %}
          {%- assign image = product.featured_image -%}
          {%- assign max_width = width | plus: 0 -%}
          {%- assign max_height = height | plus: 0 -%}

          {%- include 'image-logic' with width: max_width, height: max_height -%}

          {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          <div class="lazyload__image-wrapper no-js" style="max-width: {{ max_width }}px">
            <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
              <img
                class="lazyload no-js"
                data-src="{{ img_url }}"
                data-widths="[125, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                data-aspectratio="{{ image.aspect_ratio }}"
                data-sizes="auto"
                alt="{{ image.alt | escape }}"
                {% comment %}style="max-height: {{ height }}px;">{% endcomment %}>
            </div>
          </div>
          <noscript>
           <img src="{{ image | img_url: '580x' }}"
             srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
             alt="{{ image.alt }}" style="opacity:1;">
         </noscript>

        {% else %}
        {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
        <div>
        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {% endif %}
      </div>
    </div>

    <p>{{ product.title }}</p>

    <div class="product-item--price">
      <span class="h1 medium--left">
        {% if on_sale %}
          <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
        {% else %}
          <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
        {% endif %}
        {% include 'price' with product.price %}
        {% if on_sale and section.settings.product_show_compare_at_price %}
          <small>
            <s>
              <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
              {% include 'price' with product.compare_at_price %}
            </s>
          </small>
        {% endif %}
      </span>

      {% if on_sale and section.settings.product_show_saved_amount %}
        <span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
          {% assign compare_price = product.compare_at_price %}
          {% assign product_price = product.price %}
          {% include 'price-sale' %}
        </span>
      {% endif %}
    </div>

    {% if section.settings.product_reviews_enable %}
      <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
    {% endif %}
  </a>

</div>

It produces what you can see in Pic 2 in the attached doc. 

How can I get it to appear on all new products?

 
 

How can I get it to appear on all new products?

>>> if you added it to product-grid-item.liquid, it appears to all products news, why doesn't work ?

>>> For me it's work !

>>> Can you added somes products to test ? And send screenshots if the "New" don't show !

0 Likes
Highlighted

Add the code after(inside the block not after the block just after the open <div> on below)

<div class="grid-item..">

 

0 Likes
Highlighted

This is an accepted solution.

Like that

<div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}{% if NEW %} NEW{% endif %}">
	{% assign date_created = product.created_at | date:'%s' %}
{% assign     date_now = 'now' | date:'%s' %}
{% assign   difference = date_now | minus: date_created %}

{% if difference < 2592000 %}
   <span class="badge-new">NEW!</span>
{% endif %}
  <a href="{{ product.url | within: current_collection }}" class="product-grid-item">
   

 

0 Likes
Highlighted
New Member
4 0 0

Yes that has worked putting it a bit further down!! Awesome thanks for your help.

Next Question any ideas on making it red and bold?

0 Likes
Highlighted

@Pip_Berry_Store wrote:

Yes that has worked putting it a bit further down!! Awesome thanks for your help.

Next Question any ideas on making it red and bold?


Do you have an example?

0 Likes
Highlighted
New Member
2 0 1

Hi,

Most themes support this option. Its how it has been defined in the coding.

in shopify theme admin tag your products:  label_new  this will put new label on picture. label_sale = Sale label label_Sold out = sold out

Some themes have predefined new automated with adjustable times when you add product it puts new label and removes after the set time from admin, Gecko theme is great for this..

1 Like