Shopify/liquid snippet created in a page template isn't loading properly in a product template

Question

I've created a snippet that loads as expected in any page template. When I include that same snippet in a product template the stylings are altered and links have disappeared. Are there different rules for including snippets in page templates vs. product templates? Do product templates pull styling information from a different file than page templates do?

This is the snippet I've created, called "shop-world-nav"

<nav id="shop-world-nav" class="navbar navbar-expand-lg navbar-dark">
  

  
  <div class="shop-navbar-brand" class="navbar-brand" id="learn-logo">
              <h3 class="nav-title-shop-menu" style="color: #fff;">Shop Menu</h3>
            </div>
         
      
      <button id="learn-toggler" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="dropdown-toggle"></span>
      </button>

      <div class="collapse navbar-collapse shop-world-collapse sticky-top" id="navbarSupportedContent">
          <ul id="shop-world-navbar" class="w-100 navbar-nav mr-auto" style="margin-top: 0">
                

            
            {% for link in linklists.shop-world-nav.links %}
                {% if link.links != blank %}
                  <li class="nav-item dropdown">
                    <a href="{{ link.url }}" class="nav-link dropdown-toggle" href="#" role="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      {{ link.title }}
                     
                    </a>
                    <div class="dropdown-menu shop-world-nav-dropdown-menu" aria-labelledby="navbarDropdown">
                      {% for childlink in link.links %}
                          <a href="{{ childlink.url }}" class="dropdown-item shop-world-dropdown-item">
                            {{ childlink.title }}
                          </a>
                      {% endfor %}
                    </div>
                  </li>
                {% else %}
                  <li  class="nav-item">
                    <a href="{{ link.url }}" class="nav-link">
                      {{ link.title }}
                    </a> 
                  </li>
                {% endif %}
              {% endfor %}
            </ul>          
      </div>

  
        
</nav>

Included in a page template like so, and everything works as expected: (image of navbar as designed)

{% include 'shop-world-nav' %}


{% render 'shogun-products', content: page %}

<h1 class="page-title">{{ page.title }}</h1>

<!-- <p>testing</p> -->
<div class="rte">
  {{ page.content }}
</div>

But when included in the product page like so, the text has vanished: (image of navbar missing text, as rendered on a product page)

{% include 'shop-world-nav' %}


{% render 'shogun-products', content: page %}

<h1 class="page-title">{{ page.title }}</h1>

<!-- <p>testing</p> -->
<div class="rte">
  {{ page.content }}
</div>



{% render 'shogun-products', content: product %}


          {% include 'ba-po-params' %}
        
{% include 'shogun-products', content: product %}
{{product.metafields.shogun.above}}
{% include 'breadcrumbs' %}
{% section 'module-product' %}
{% section 'static-product-recommendations' %}


{{product.metafields.shogun.below}}

<!-- <p>testing</p> -->
{% render 'product_infox' %}

question from:https://stackoverflow.com/questions/65850766/shopify-liquid-snippet-created-in-a-page-template-isnt-loading-properly-in-a-pr

Answer 1

Let's start debugging: first, comment out this block of code to see if there is any differences. If error appears, there might be other codes that affect it.

It not move on to next step;

{% render 'shogun-products', content: product %}


          {% include 'ba-po-params' %}
        
{% include 'shogun-products', content: product %}
{{product.metafields.shogun.above}}
{% include 'breadcrumbs' %}
{% section 'module-product' %}
{% section 'static-product-recommendations' %}


{{product.metafields.shogun.below}}

<!-- <p>testing</p> -->
{% render 'product_infox' %}

I see that you use include and render inconsistently. They are, in fact, totally different.

The include tag works similarly to the render tag, but it lets the code inside of the snippet to access and overwrite the variables within its parent template. The include tag has been deprecated because the way that it handles variables reduces performance and makes theme code harder to both read and maintain.

with that said, change {% include 'ba-po-params' %} to {% render 'ba-po-params' %} and to the rest of the others to see if there is any differences.