Editing .liquid code in Motion 2.0 theme to restrict Age Verification Popup to one product page

tas121694 · September 30, 2025, 8:51pm

Hello!

Our site is built on the Motion 2.0 theme. Included in this theme is an Age Verification Popup option.

We would like to enable this popup, but only on one specific product page — not sitewide. Could someone please help me edit the .liquid code for the Age Verification Popup to restrict it to that one page? The default code is below in bold.

Thank you!

<age-verification-popup

id=“AgeVerificationPopup-{{ section.id }}”

class="

**age-verification-popup modal modal--square modal--mobile-friendly**

{% if section.settings.image != blank %}

  **age-verification-popup--image-true**

{% else %}

  **age-verification-popup--image-false**

{% endif %}

"

data-test-mode=“{{ section.settings.enable_test_mode }}”

data-section-id=“{{ section.id }}”

>

{% if section.settings.image != blank %}

{% comment %} Full width image so don’t need to adjust sizes attribute, fallback is 100vw {% endcomment %}

{%- render ‘image-element’,

img: section.settings.image,

img_width: 2400,

classes: ‘age-verification-popup__background-image’,

  **-%}**

{% style %}

.age-verification-popup__background-image {

{% if section.settings.blur_image %}

filter: blur(4px);

transform: scale(1.03);

{% endif %}

  **}**

{% endstyle %}

{% endif %}

<div

class="

      **modal__centered-content modal__centered-content--padded**

    **"**

>

<div

class=“age-verification-popup__content age-verification-popup__content–active”

data-age-verification-popup-content

>

{% if section.settings.heading != blank %}

{% endif %}

{% if section.settings.text != blank %}

{{ section.settings.text }}

{% endif %}

{% if section.settings.decline_button_label != blank and section.settings.approve_button_label != blank %}

{% endif %}

{% if section.settings.decline_button_label != blank %}

<button

class=“btn {% if section.settings.approve_button_label != blank %}btn–no-animate{% endif %}”

data-age-verification-popup-decline-button

>

{{ section.settings.decline_button_label }}

{% endif %}

{% if section.settings.approve_button_label != blank %}

<button

class=“btn btn–no-animate”

data-age-verification-popup-exit-button

>

{{ section.settings.approve_button_label }}

{% endif %}

{% if section.settings.decline_button_label != blank and section.settings.approve_button_label != blank %}

{% endif %}

<div

class=“age-verification-popup__decline-content age-verification-popup__decline-content–inactive”

data-age-verification-popup-decline-content

>

{% if section.settings.decline_heading != blank %}

{% endif %}

{% if section.settings.decline_text != blank %}

{{ section.settings.decline_text }}

{% endif %}

{% if section.settings.return_button_label != blank %}

<button

class=“btn”

data-age-verification-popup-return-button

>

{{ section.settings.return_button_label }}

{% endif %}

**
**

{% schema %}

{

“name”: “t:sections.age-verification-popup.name”,

“settings”: [

  **{**

“type”: “checkbox”,

“id”: “enable_test_mode”,

“label”: “t:sections.age-verification-popup.settings.enable_test_mode.label”,

“info”: “t:sections.age-verification-popup.settings.enable_test_mode.info”,

“default”: false

  **},**

  **{**

“type”: “header”,

“content”: “t:sections.age-verification-popup.settings.header_background_image”

  **},**

  **{**

“type”: “image_picker”,

“id”: “image”,

“label”: “t:sections.age-verification-popup.settings.image.label”,

“info”: “t:sections.age-verification-popup.settings.image.info”

  **},**

  **{**

“type”: “checkbox”,

“id”: “blur_image”,

“label”: “t:sections.age-verification-popup.settings.blur_image.label”,

“default”: false

  **},**

  **{**

“type”: “header”,

“content”: “t:sections.age-verification-popup.settings.header_age_verification_question”

  **},**

  **{**

“type”: “text”,

“id”: “heading”,

“label”: “t:sections.age-verification-popup.settings.heading.label”,

“default”: “Confirm your age”

  **},**

  **{**

“type”: “richtext”,

“id”: “text”,

“label”: “t:sections.age-verification-popup.settings.text.label”,

“default”: “

Are you 18 years old or older?

”

  **},**

  **{**

“type”: “text”,

“id”: “decline_button_label”,

“label”: “t:sections.age-verification-popup.settings.decline_button_label.label”,

“default”: “No I’m not”

  **},**

  **{**

“type”: “text”,

“id”: “approve_button_label”,

“label”: “t:sections.age-verification-popup.settings.approve_button_label.label”,

“default”: “Yes I am”

  **},**

  **{**

“type”: “header”,

“content”: “t:sections.age-verification-popup.settings.header_declined”

  **},**

  **{**

“type”: “paragraph”,

“content”: “t:sections.age-verification-popup.settings.content”

  **},**

  **{**

“type”: “text”,

“id”: “decline_heading”,

“label”: “t:sections.age-verification-popup.settings.decline_heading.label”,

“default”: “Come back when you’re older”

  **},**

  **{**

“type”: “richtext”,

“id”: “decline_text”,

“label”: “t:sections.age-verification-popup.settings.decline_text.label”,

“default”: “

Sorry, the content of this store can’t be seen by a younger audience. Come back when you’re older.

”

  **},**

  **{**

“type”: “text”,

“id”: “return_button_label”,

“label”: “t:sections.age-verification-popup.settings.return_button_label.label”,

“default”: “Oops, I entered incorrectly”

  **}**

**\]**

}

{% endschema %}

Michross · September 30, 2025, 9:19pm

Would you like someone to come in and aid, cause pasting the code, would definitely not allow the person to see the code in action.

The_ScriptFlow · September 30, 2025, 9:21pm

Hey @tas121694,

If you want to show the Age Verification popup for the one product only then you need to wrap the <age-verification-popup tag with the product handle.

Like see below.

{% if product.handle == "unit9-preorder" %}
<age-verification-popup>
Your Whole code here
</age-verification-popup>
Your Schema markup Here.

The above contain the condition to check the product by it’s handle. If the handle match then it will works otherwise not. Here is the blow updated code that you can copy paste into yours.

{% if product.handle == "unit9-preorder" %}
<age-verification-popup
  id="AgeVerificationPopup-{{ section.id }}"
  class="age-verification-popup modal modal--square modal--mobile-friendly {% if section.settings.image != blank %} age-verification-popup--image-true {% else %} age-verification-popup--image-false {% endif %}"
  data-test-mode="{{ section.settings.enable_test_mode }}"
  data-section-id="{{ section.id }}"
>

  {% if section.settings.image != blank %}
    {% comment %} Full width image so don’t need to adjust sizes attribute, fallback is 100vw {% endcomment %}
    {%- render 'image-element',
      img: section.settings.image,
      img_width: 2400,
      classes: 'age-verification-popup__background-image'
    -%}

    {% style %}
      .age-verification-popup__background-image {
        {% if section.settings.blur_image %}
          filter: blur(4px);
          transform: scale(1.03);
        {% endif %}
      }
    {% endstyle %}
  {% endif %}

  <div class="modal__centered-content modal__centered-content--padded">
    <div class="age-verification-popup__content age-verification-popup__content--active"
      data-age-verification-popup-content
    >

      {% if section.settings.heading != blank %}
        {{ section.settings.heading }}
      {% endif %}

      {% if section.settings.text != blank %}
        {{ section.settings.text }}
      {% endif %}

      {% if section.settings.decline_button_label != blank %}
        <button
          class="btn {% if section.settings.approve_button_label != blank %}btn--no-animate{% endif %}"
          data-age-verification-popup-decline-button
        >
          {{ section.settings.decline_button_label }}
        </button>
      {% endif %}

      {% if section.settings.approve_button_label != blank %}
        <button
          class="btn btn--no-animate"
          data-age-verification-popup-exit-button
        >
          {{ section.settings.approve_button_label }}
        </button>
      {% endif %}

      <div
        class="age-verification-popup__decline-content age-verification-popup__decline-content--inactive"
        data-age-verification-popup-decline-content
      >
        {% if section.settings.decline_heading != blank %}
          {{ section.settings.decline_heading }}
        {% endif %}

        {% if section.settings.decline_text != blank %}
          {{ section.settings.decline_text }}
        {% endif %}

        {% if section.settings.return_button_label != blank %}
          <button
            class="btn"
            data-age-verification-popup-return-button
          >
            {{ section.settings.return_button_label }}
          </button>
        {% endif %}
      </div>
    </div>
  </div>
</age-verification-popup>
{% endif %}

  {% schema %}
  {
    "name": "t:sections.age-verification-popup.name",
    "settings": [
      {
        "type": "checkbox",
        "id": "enable_test_mode",
        "label": "t:sections.age-verification-popup.settings.enable_test_mode.label",
        "info": "t:sections.age-verification-popup.settings.enable_test_mode.info",
        "default": false
      },
      {
        "type": "header",
        "content": "t:sections.age-verification-popup.settings.header_background_image"
      },
      {
        "type": "image_picker",
        "id": "image",
        "label": "t:sections.age-verification-popup.settings.image.label",
        "info": "t:sections.age-verification-popup.settings.image.info"
      },
      {
        "type": "checkbox",
        "id": "blur_image",
        "label": "t:sections.age-verification-popup.settings.blur_image.label",
        "default": false
      },
      {
        "type": "header",
        "content": "t:sections.age-verification-popup.settings.header_age_verification_question"
      },
      {
        "type": "text",
        "id": "heading",
        "label": "t:sections.age-verification-popup.settings.heading.label",
        "default": "Confirm your age"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "t:sections.age-verification-popup.settings.text.label",
        "default": "<p>Are you 18 years old or older?</p>"
      },
      {
        "type": "text",
        "id": "decline_button_label",
        "label": "t:sections.age-verification-popup.settings.decline_button_label.label",
        "default": "No I’m not"
      },
      {
        "type": "text",
        "id": "approve_button_label",
        "label": "t:sections.age-verification-popup.settings.approve_button_label.label",
        "default": "Yes I am"
      },
      {
        "type": "header",
        "content": "t:sections.age-verification-popup.settings.header_declined"
      },
      {
        "type": "paragraph",
        "content": "t:sections.age-verification-popup.settings.content"
      },
      {
        "type": "text",
        "id": "decline_heading",
        "label": "t:sections.age-verification-popup.settings.decline_heading.label",
        "default": "Come back when you’re older"
      },
      {
        "type": "richtext",
        "id": "decline_text",
        "label": "t:sections.age-verification-popup.settings.decline_text.label",
        "default": "<p>Sorry, the content of this store can’t be seen by a younger audience. Come back when you’re older.</p>"
      },
      {
        "type": "text",
        "id": "return_button_label",
        "label": "t:sections.age-verification-popup.settings.return_button_label.label",
        "default": "Oops, I entered incorrectly"
      }
    ]
  }
  {% endschema %}

By pasting this code make sure the checkbox for the Popup should be enabled and it should be workable.

If this was helpful mark as Solution and like it. Thanks

Hootman1 · September 30, 2025, 9:24pm

The easiest way to do this is by adding a simple condition in your theme code so the popup appears only when the visitor is on that exact product.

Here’s what you can do:

Find where the Age Verification Popup section is included. This might be in a product template like product.liquid, main-product.liquid, or sometimes in the theme layout files.
Wrap the popup code in this Liquid conditional to restrict it to your product’s handle:

{% if product.handle == 'your-product-handle' %}
  {% section 'age-verification-popup' %}
{% endif %}

Just replace 'your-product-handle' with the actual handle of your product (you can find this in your product URL, e.g., if your product page is yourstore.com/products/awesome-wine, then the handle is awesome-wine).

If you want to add this inside the popup section code itself, you can wrap the entire section content with:

{% if product.handle == 'your-product-handle' %}
  <!-- All your existing age verification popup code here -->
{% endif %}

This way, the popup will only render on that product page and nowhere else.

Let me know if you want me to help set this up for multiple products or based on tags or metafields

tas121694 · September 30, 2025, 9:31pm

Thank you. I tried this, but now, when I attempt to load the product page, it simply displays a fully white page (no content), without triggering the popup. Advice?

tas121694 · September 30, 2025, 9:31pm

Thank you. I tried this, but now, when I attempt to load the product page, it simply displays a fully white page (no content), without triggering the popup. Advice?

The_ScriptFlow · September 30, 2025, 9:32pm

By any chance can you please share your Store url so that I can take a look.

tas121694 · September 30, 2025, 9:47pm

The_ScriptFlow · September 30, 2025, 9:50pm

Thanks for sharing.

By any chance can I have a store collab code in the p/m? Because I found that I need to take a look in the theme structure.

Waiting to hear back from you.

Thanks

tim_1 · October 1, 2025, 7:53am

Since it looks like a section, then your easiest solution would be to create a separate template for this product and include this section only on this template.

If it’s not visible in the list of sections you can add in Customizer, then probably it misses presets in section schema.

I can’t quite see the code you’ve shared – next time when you share code, use the </> button to paste it properly.

Topic		Replies	Views
Site access - Add age verification to your online store Store Design	84	454	March 9, 2025
removing age verification code in unpublished theme Store Design css , shopify-theme	2	36	August 15, 2024
Why does my age verification pop-up persist on all pages despite confirming I'm over 18? Store Design shop-performance	2	20	September 20, 2021
How can I add a custom pop up image to my website? Technical Q&A design	28	77	December 4, 2023
Restricción de edad Preguntas y respuestas técnicas	3	18	September 8, 2020

Editing .liquid code in Motion 2.0 theme to restrict Age Verification Popup to one product page

Topic summary

{{ section.settings.heading }}

{{ section.settings.decline_heading }}

Here’s what you can do:

If you want to add this inside the popup section code itself, you can wrap the entire section content with:

Related topics