Skip to main content

How to add the nudge on your shopify store ?

(via Tags or Metafields)

Vineeta Pendse avatar
Written by Vineeta Pendse
Updated over 2 weeks ago

GetNudge allows you to guide your customers on sizing by displaying a simple visual nudge directly on the product page. This helps improve customer confidence and reduce returns.

This guide explains how to display a “Size Up” or “Size Down” nudge below your size selector or near your add to cart button.


Option 1: Using Product Tags

If you're using product tags to indicate nudges, you can use the following code snippet. The template below assumes the tag naming convention shown; be sure to replace these with your custom tag names as defined in Nudge Settings > Configurations.

  • yayloh_size_up → to recommend sizing up

  • yayloh_size_down → to recommend sizing down

  • yayloh_remove → to hide the recommendation (if needed)

Code Snippet (Tag-based)

Paste this Liquid snippet below the size selector or Buy button in your product template:

{% assign tags = product.tags %}
{% unless tags contains 'yayloh_remove' %}
{% if tags contains 'yayloh_size_down' %}
<div style="display: flex; align-items: center; gap: 8px; margin-top: 8px;">
<img src="https://cdn.shopify.com/s/files/1/0583/5508/9562/files/Ellipse_333.png?v=1747647903" alt="Size down" style="width: 10px; height: 10px;">
<span style="font-size: 12px;">We recommend sizing down.</span>
</div>
{% elsif tags contains 'yayloh_size_up' %}
<div style="display: flex; align-items: center; gap: 8px; margin-top: 8px;">
<img src="https://cdn.shopify.com/s/files/1/0583/5508/9562/files/Polygon_1.png?v=1747647917" alt="Size up" style="width: 10px; height: 10px;">
<span style="font-size: 12px;">We recommend sizing up.</span>
</div>
{% endif %}
{% endunless %}

Option 2: Using Metafields

For merchants using Shopify metafields instead of tags, you will find a custom product metafield like the one below. The values can be customized in Settings > Configurations as needed. The code snippet assumes the following values — be sure to update them to match your setup so the Liquid code functions correctly:

Namespace: yayloh.product

Key: yayloh size recommendation

Values: yayloh_size_up, yayloh_size_down, or remove

Code Snippet (Metafield-based):

Paste this Liquid snippet below the size selector or Buy button in your product template:

{% assign size_nudge = product.metafields.yayloh.product.yayloh_size_recommendation.value %}
{% unless size_nudge == 'remove' %}
{% if size_nudge == 'yayloh_size_down' %}
<div style="display: flex; align-items: center; gap: 8px; margin-top: 8px;">
<img src="https://cdn.shopify.com/s/files/1/0583/5508/9562/files/Ellipse_333.png?v=1747647903" alt="Size down" style="width: 10px; height: 10px;">
<span style="font-size: 12px;">We recommend sizing down.</span>
</div>
{% elsif size_nudge == 'yayloh_size_up' %}
<div style="display: flex; align-items: center; gap: 8px; margin-top: 8px;">
<img src="https://cdn.shopify.com/s/files/1/0583/5508/9562/files/Polygon_1.png?v=1747647917" alt="Size up" style="width: 10px; height: 10px;">
<span style="font-size: 12px;">We recommend sizing up.</span>
</div>
{% endif %}
{% endunless %}

Customize the Look and Feel

You’re free to:

  • Rename the tag and metafield names from Nudge backoffice as required and update it within the snippet.

  • Change the text (e.g., “Try a size up for comfort”)

  • Adjust icon position, spacing, or font size

  • Use your own icons if preferred


📍Where to Place the Snippet

We recommend placing the snippet between the size selector (variant picker) and the Buy/Add to Cart button section in your product template. This ensures the nudge appears close to the size choice, helping your customers make the best decision.

To work correctly, the snippet must be added directly in your Shopify theme code, specifically:

  • Inside your product template (main-product.liquid or product-form.liquid)

  • Placed between the size selector and the Buy button

To do this:

  1. Go to Online Store > Themes > Edit Code

  2. Find your product template or relevant section

  3. Paste the snippet where needed

This ensures the nudge appears only when relevant and in the right place.


Did this answer your question?