trouble integrating Rich Cards

New Member
4 0 0

Hi, I've been researching for a few hours now. Im not a coder by any means but I had the assumption that the markup added our product.liquid was OK for Rich Cards. The Strutured Data Testing tool seems to indicate that the values for "price" and "priceCurrency" (needs to be USD) is not set properly. What needs to be done so that values for each render properly and is there more outside of this that would be needed to set us up?

Our product.liquid >>

<div class="sixteen columns">
  <div class="clearfix breadcrumb">
    <div class="nav_arrows">
      {% if collection.previous_product %}
        <a href="{{ collection.previous_product }}" title="{{ 'products.general.previous_product_html' | t }}" class="ss-icon prev">&#x25C5;</a>
      {% endif %}

      {% if collection.next_product %}
        <a href="{{collection.next_product}}" title="{{ 'products.general.next_product_html' | t }}" class="ss-icon next">&#x25BB;</a>
      {% endif %}
    </div>

    {% if settings.product_breadcrumb %}
      <div class="breadcrumb_text" itemscope itemtype="http://schema.org/BreadcrumbList">
        <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="item"><span itemprop="name">{{ 'general.breadcrumbs.home' | t }}</span></a></span> 
        &nbsp;<span class="icon-right-arrow"></span>
        <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
          {% if collection %}
            <a href="{{ collection.url }}" title="{{ collection.title | escape }}" itemprop="item"><span itemprop="name">{{ collection.title }}</span></a>
          {% else %}
            <a href="/collections/all" title="{{ collections.all.title }}">{{ collections.all.title }}</a>     
          {% endif %}
        </span>
        &nbsp;<span class="icon-right-arrow"></span>
        {{ product.title }}
      </div>
    {% endif %}
  </div>
</div>

{% if settings.product_sidebar %}
  {% include 'sidebar' %}
  <div class="twelve columns">
    <div class="product-{{ product.id }}">
{% else %}
  <div class="sixteen columns">
    <div class="product-{{ product.id }}">
{% endif %}

    <div class="section product_section clearfix" itemscope itemtype="http://schema.org/Product">
                 
    <div class="{% if settings.product_sidebar %}seven{% else %}nine{% endif %} columns {% if product-images == blank %}{% if settings.product_images_position == 'left' %}alpha{% else %}omega{% endif %}{% endif %} {% if settings.product_images_position == 'right' %}mobile_only{% endif %}">
      {% include 'product-images' %}
    </div>

    <div class="{% if settings.product_sidebar %}five{% else %}seven{% endif %} columns {% if settings.product_images_position == 'left' %}omega{% else %}alpha{% endif %}">
      
      {% assign collection_handles = product.collections | map: 'handle' %}
      {% assign variant = product.selected_or_first_available_variant %}
      <h1 class="product_name" itemprop="name">{{ product.title }}</h1>
      {% if settings.display_vendor %}
        <p class="vendor">
          <span itemprop="brand">{{ product.vendor | link_to_vendor }}</span>
        </p>
      {% endif %}

      {% if variant.sku != blank and settings.display_sku %}
        <p class="sku">
          <span itemprop="sku">{{ variant.sku }}</span>
        </p>
      {% endif %}
      
      {% if settings.size_chart != blank %}
        <a href="#size-chart" class="lightbox size_chart">{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
      {% endif %}

      {% unless collection_handles contains 'coming-soon' %}
        <p class="modal_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
          <meta itemprop="seller" content="{{ shop.name | escape }}" />
          <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
          <meta itemprop="itemCondition" content="New" />

          <span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
          <span itemprop="price" content="{{ variant.price | money_without_currency }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
            <span class="current_price {% if product.available == false %}hidden{% endif %}">              
              {% if variant.price > 0 %} 
                {{ variant.price | money }} 
              {% else %}
                {{ settings.free_price_text }}
              {% endif %}
            </span>
          </span>
          <span class="was_price">
          {% if variant.price < variant.compare_at_price and variant.available %}
            {{ variant.compare_at_price | money }}
          {% endif %}
          </span>
        </p>
        
        {% include 'product-notify-me' %}
      {% endunless %}

      {% if settings.product_description_position == "top" %}
        {% if product.description != blank %}
         <div class="description" itemprop="description">
           {{ product.description | split: '<!-- split -->' | first }}
         </div>
       {% endif %}
      {% endif %}

      {% unless collection_handles contains 'coming-soon' %}
        {% include 'product-form' with 'product' %}
      {% endunless %}  

      {% if settings.product_description_position == "bottom" %}
        {% if product.description != blank %}
         <div class="description" itemprop="description">
          {{ product.description | split: '<!-- split -->' | first }}
         </div>
        {% endif %}
      {% endif %}

      {% if settings.display_collections or settings.display_tags or settings.display_type %}
       <hr />
      {% endif %}
     
      <div class="meta">
        {% if settings.display_social_buttons %}
          <div class="share-button"></div>
        {% endif %}
        
        {% if settings.display_collections %}
          <p>
            <span class="label">{{ 'products.product.collections' | t }}:</span> 
            <span>
             {% for col in product.collections %}
               <a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %} 
             {% endfor %}
           </span>
         </p>
        {% endif %}
      
        {% if settings.display_tags %}
           <p>
             {% for tag in product.tags %}
               {% if forloop.first %}
                 <span class="label">{{ 'products.product.tags' | t }}:</span> 
               {% endif %}

               {% unless tag contains 'meta-related-collection-' %}
                 <span>
                   <a href="/collections/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>{% unless forloop.last %},{% endunless %}
                 </span>
               {% endunless %} 
             {% endfor %}
           </p>
        {% endif %}
      
       {% if settings.display_type %}
          <p>
            <span class="label">{{ 'products.product.product_types' | t }}:</span> 
            <span>{{ product.type | link_to_type }}</span>
          </p>
       {% endif %}
      </div>
    </div>
    
    {% if settings.product_images_position == 'right' %}   
      <div class="{% if settings.product_sidebar %}seven{% else %}nine{% endif %} columns {% if product-images == blank %}{% if settings.product_images_position == 'left' %}alpha{% else %}omega{% endif %}{% endif %} mobile_hidden">          
        {% include 'product-images' %}
      </div>
    {% endif %}
  </div>

  {% if product.description contains "<!-- split -->"  %}
    <br class="clear" />
    <div class="section clearfix">
      <div class="description">
        {{ product.description | split: '<!-- split -->' | last }}
      </div>
    </div>
  {% endif %}
  </div>


  {% if settings.display_related_products %}
    {% capture limit %}{{ settings.products_per_row | plus: 1 }}{% endcapture %}

    {% if collection and collection.all_products_count > 1 %}
      {% assign col = collection.handle %}
    {% else %}
      {% assign col = product.collections.last.handle %}
    {% endif %}

    {% for tag in product.tags %}
      {% if tag contains 'meta-related-collection-' %}
        {% assign related_collection_handle = tag | remove: 'meta-related-collection-' %}
        {% if collections[related_collection_handle].all_products_count > 0 %}
          {% assign col = related_collection_handle %}
          {% assign collection = collections[col] %}
          {% capture limit %}{{ collection.products_count | plus: 1 }}{% endcapture %}        
        {% endif %}
      {% endif %}
    {% endfor %}
      
    {% if col and collections[col].all_products_count > 0 %}
      {% if collections[col].all_products_count != 1 or collections[col].products.first.id != product.id %}
        <br class="clear" />
        <h4 class="title center">{{ 'products.product.related_items' | t }}</h4>
        <div class="feature_divider"></div>

        {% assign skip_product = product %}
        {% assign products = collections[col].products %}
        {% assign products_per_row = settings.products_per_row %}
        {% include 'product-loop' with settings.product_sidebar %}
      {% endif %}
    {% endif %}
  {% endif %}
</div>
<div id="infiniteoptions-container"></div>

 

 

Thank You, Vik

0 Likes
Highlighted
Shopify Expert
246 0 38

You have Products marked up 4 times. 

The first one is valid and based on the code you shared.

The other three are your related items. They contain an offer but the price part is not marked up.

I'd suggest you remove all the markup for the related items. Done wrong and it will cause confusion about which entity the page is about. Done right, which needs a lot of work, and you gain nothing of current significance.

Also, currently you can't get Product based Rich Cards. What you can get are Rich Snippets.

Technical SEO Consultant - Specialising in setting up Structured Data for Rich Snippets, Google Analytics for advanced reports and the Google Search Console for efficient crawling.
1 Like
New Member
1 0 0

It works with me, because i've installed two instances, one from the store's theme and another one from the SEO Manager... and so i've noted thar its all okies, but in Products always appears 2 in the snippets. Definitively this is the right thing to do, but the worst part is that the thrird part apps did not mention this to us.

 

Cheers!

0 Likes