|
When someone performs a search for any topic on Google, the search result page will display a main headline link at the top of the search listing and a few lines of what's on the page directly below the link. These few lines of page information are called the search result's "snippet."
Google further refined their snippet results to introduce what's known as a "rich snippet." This is a method by which - depending on the content of your pages - the snippet can provide searchers with more detailed information with their search queries. For example, search listings for a restaurant may show average reviews and price ranges, while a search result for a recipe may show information like average prep time and caloric information. More information on this Google feature can be found here.
So can I use Rich Snippets on my Shift4Shop store?
Yes! Shift4Shop has added coding to our available product listing templates that help you include Rich Snippet data on your products!
If your listing pages are not custom designed and your store is still using the listing templates served from the common folder, you already have the coding enabled. You may test your rich snippets by using Google's testing tool.
But what if I have custom designed listing templates?
Well, due to Shift4Shop's template structure, edited templates are not served from the common folder. Therefore, if you have any customizations on your listing pages or if your product listing templates are served from your site's specific theme folder (instead of the common folder), you may have to add the rich snippet coding to your specific page templates in order to use this feature. We've prepared this article to help you do this.
Note
The following information is provided as a courtesy for individuals who would like to add the Rich Snippet coding to their customized listing pages. Please understand that Shift4Shop's technical support staff is neither trained nor qualified to assist in the editing of Shift4Shop templates nor does it fall within our scope of technical support. The simplest approach to getting your store ready for Rich Snippets would be to remove your custom listing templates from your theme folder and favor the template from the common folder. However, if that is not a favorable option for you, then you will need to include the following coding onto your existing templates.
Before making any changes to yourlisting templates, please be sure to make backups first.
In order to use Rich Snippets properly, your listing pages must have Structured Data present in its coding. Google's Structured Data test tool will test for the following:
- @type
- @id
- image
- name
- description
- aggregateRating
- offers
- review
In turn, some of these will have additional data points below them such as pricing, review count and other pieces of information. In the following sections, we'll share the HTML coding form the common listing template that is responsible for displaying the product's structured data listed above. Typically, several of these code blocks may already exist in your customized template, but may not be updated to the latest schema. Therefore, pay close attention to the start and end tags or the [variable] brackets to locate these sections in your customized listing template, and replace it with the information below. In the examples below, coding marked in red will indicate that it is HTML unique to Rich Snippets.
@type & @id
First, be sure the page's display coding is contained within the following <section> tags. Be aware that the listing template will typically contain <script> coding at the top and bottom portions of the template, while your display coding will be sandwiched in between. The following <section> tags will need to envelope the display coding.
<section id="listing0" itemscope itemtype="http://schema.org/Product">
...listing template's display coding...
</section>
image
<!--START: image1->
<div class="main-image">
<a href="[image1]" class="[3dzoom_class]" id="listing_main_image_link"><img itemprop="image" src="thumbnail.asp?file=[image1]&maxx=[image_medium_w]&maxy=0" align="middle" id="large" name="large" alt="[name]" /></div>
<!--END: image1->
name
<h1 itemprop="name" class="page_headers">[name]</h1>
description
<div class="item" itemprop="description">[extended_description]</div>
aggreagateRating
<!--START: totalrating->
<div class="totalrating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<div class="stars">[totalrating]</div>
<div class="review-count" itemprop="reviewCount"><a href="javascript:void(0);" onclick="viewTabs();jQuery('#rTabs').responsiveTabs('activate', 1);">[review_count] Review(s)</a></div>
<div class="review_average" itemprop="ratingValue">[review_average]</div>
<div itemprop="worstRating" style="display: none;">0</div>
<div itemprop="bestRating" style="display: none;">5</div>
</div>
<!--END: totalrating->
offers
<!--START: pricing->
<div class="pricingBlock" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition" />
<meta itemprop="availability" href="http://schema.org/[availability_snippet]" />
<h3 class="hidden">[product_Header-price]</h3>
<div class="clear"></div>
<div class="yourprice price">
[product_yourprice]
<!--START: ITEMPRICE->
<span id="price">[price]</span>
<meta itemprop="price" content="[price_without_currency]" />
<meta itemprop="priceCurrency" content="[priceCurrency]" />
<!--END: ITEMPRICE->
</div>
<!--START: SALEPRICE->
<div class="saleprice price">[product_onsale]
<span id="price">[saleprice]</span>
<meta itemprop="price" content="[price_without_currency]" />
<meta itemprop="priceCurrency" content="[priceCurrency]" />
</div>
<!--END: SALEPRICE->
<!--START: price2->
<div class="retailprice">[product_retailprice]<span>[price2]</span></div>
<!--START: SAVINGS->
<div class="savings">[product_savings]<span>[savings]</span><span>([savings_percentage]%)</span></div>
<!--END: SAVINGS->
<!--END: price2->
<div class="clear"></div>
</div>
<!--END: pricing->
review
<!--START: reviews->
<div id="tab-2">
<script type="text/javascript">
jQuery(function() {
jQuery('#reviewsTab').show();
});
</script>
<div class="button right">[review_link]</div>
<div class="clear"></div>
<div class="reviewsBlock" itemprop="review" itemscope itemtype="http://schema.org/Review">
<!--START: user_reviews->
<div class="user_reviews">
<div class="star-rating"><img src="assets/templates/common-html5/images/star[rating].png" alt="[rating] Stars" /></div>
<div class="review-info">
<div class="review-shortDesc" itemprop="name">[short_review]</div>
<div class="review-longDesc" itemprop="description">[long_review]</div>
<!--START: rev_allowratings->
<div class="rev_allowratings">
[reviews_helpful]
<input type="button" value="[reviews_helpyes]" onclick="updateRevStats('[r_id]',[rev_id], 1)" />
<input type="button" value="[reviews_helpno]" onclick="updateRevStats('[r_id]',[rev_id],-1)" />
<span id="spnReview[rev_id]"><!--START: rev_helpcount-><strong>[rev_helpful] [reviews_of] [rev_votes]</strong> <em>[reviews_found-helpful]</em><!--END: rev_helpcount-></span>
</div>
<!--END: rev_allowratings->
<div class="clear"></div>
<em class="reviewed-by">
Reviewed by: <!--START: review_verified-><span class="verified-buyer">[reviews_verified-buyer]</span> <!--END: review_verified-><span itemprop="author">[user_name]</span> from [user_city].
<!--START: user_email->
<a href="mailto:[user_email]">[user_email]</a>
<!--END: user_email->
on [review_date]
</em>
<div style="display: none;" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <span itemprop="ratingValue">[rating]</span></div>
</div>
<div class="clear"></div>
</div>
<!--END: user_reviews->
</div>
</div>
<!--END: reviews->
Once you've added this coding and edited your template, simply upload the chages back to your store's theme folder via FTP (or save your edits if you're using the Shift4Shop Template Editor) and your pages should have rich snippet capability right away. Be sure to use Google's Rich Snippet testing tool to fine tune any changes
|