Adding schema.org to availibility

Highlighted
Excursionist
38 1 2

Hi 

On our product page ex. https://www.homebarista.dk/products/guatemala-capulin-medium-roast

Our products availibility is an image that reads "På lager" IN STOCK in danish. Wich is not very Seo friendly, and I would like to change it to something that the search engine can read and identify as the products availibility.

Now my question is this. 

Can i change old code

<div class="uspbox">
{% if product.available %}
<span style="display:block; margin-bottom:6px;" class="lagerstatus"><img style="max-height:20px;" src="https://cdn.shopify.com/s/files/1/0815/4425/files/PA_lager.png?7655828677679464031"></span>

{% endif %}

To this, with out any trouble? And is there a way to markup the new code with schema.org?

<div class="uspbox">
{% if product.available %}
<span style="display:block; margin-bottom:6px;" class="lagerstatus"><img style="max-height:20px;" src="https://cdn.shopify.com/s/files/1/0815/4425/files/checkcheck.png?6185449508697307661"><span>På lager</span></span>

{% endif %}

 

 

Here is the entire code from the product-description-buttom-liqued, and i have found where the "instock - image in code and highligted it with red.

<div class="sixteen columns">
<div class="clearfix breadcrumb">
<div class="right mobile_hidden">
{% if collection.previous_product %}
{% capture prev_url %}{{ collection.previous_product }}{% endcapture %}
{{ 'products.general.previous_product_html' | t | link_to: prev_url }}
{% if collection.next_product %}&nbsp; | &nbsp;{% endif %}
{% endif %}

{% if collection.next_product %}
{% capture next_url %}{{ collection.next_product }}{% endcapture %}
{{ 'products.general.next_product_html' | t | link_to: next_url }}
{% endif %}
</div>

<div class="breadcrumb_text">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="url"><span itemprop="title">{{ 'general.breadcrumbs.home' | t }}</span></a></span>
&nbsp; / &nbsp;
<span title="{{ product.title }}" url="{{ shop.url }}{{ product.url }}">
{% if collection %}
<a href="{{ collection.url }}" title="{{ collection.title | escape }}">{{ collection.title }}</a>
{% else %}
<a href="/collections/all" title="{{ collections.all.title }}">{{ collections.all.title }}</a>
{% endif %}
</span>
&nbsp; / &nbsp;
{{ product.title }}
</div>
</div>
</div>

{% if settings.product_gsidebar %}
{% include 'sidebar' %}
<div class="twelve columns" itemscope itemtype="http://data-vocabulary.org/Product">
<div id="product-{{ product.id }}">
{% else %}
<div class="sixteen columns" itemscope itemtype="http://data-vocabulary.org/Product">
<div id="product-{{ product.id }}">
{% endif %}


<div class="section product_section clearfix">

{% if settings.product_images_position == 'left' %}
<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 %}">
{% include 'product-images' %}
</div>
{% endif %}

<div class="{% if settings.prodduct_sidebar %}five{% else %}nine{% endif %} columns {%if settings.product_images_position == 'left' %}omega{% else %}alpha{% endif %}">
<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 %}

<div class='judgeme-preview-badge' data-id='{{product.id}}'>{{ shop.metafields.judgeme.badge_settings }}{{ product.metafields.judgeme.badge }}</div>

{% assign variant = product.selected_or_first_available_variant %}
<p class="modal_price" itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">
<meta itemprop="currency" content="{{ shop.currency }}" />
<meta itemprop="seller" content="{{ shop.name | escape }}" />
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

<span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
<span itemprop="price" content="{{ variant.price | divided_by: 100 }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
<span class="current_price">
{% if variant.available %}
{{ variant.price | money }}
{% 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' %}
{% include 'product-form' with 'product' %}



<div class="uspbox">
{% if product.available %}
<span style="display:block; margin-bottom:6px;" class="lagerstatus"><img style="max-height:20px;" src="https://cdn.shopify.com/s/files/1/0815/4425/files/PA_lager.png?7655828677679464031"></span>

{% endif %}

<ul class="usper">
<li><img src="https://cdn.shopify.com/s/files/1/0815/4425/files/checkcheck.png?6185449508697307661"> <span>Levering fra dag til dag</span> </li>
<li><img src="https://cdn.shopify.com/s/files/1/0815/4425/files/checkcheck.png?6185449508697307661"> <span>30 dages returret</span></li>


</ul>
</div>

<div class="leborder"></div>


<div class="tabsunder">
<ul class="tabs">
<li class="tbx1"><a href="#tab-1">Beskrivelse</a></li>
<li class="tbx2"><a href="#tab-2">Levering</a></li>
<li class="tbx3" ><a href="#tab-3">Returret</a></li>
<li class="tbx4"><a href="#tab-4">Anmeldelser</a></li>
</ul>
<div id="tab-1">
{{ product.description }}
</div>
<div id="tab-2">
<p><strong>Leveringstid</strong><br>Hos <strong>homebarista</strong> bestræber vi os på en hurtig levering, hvis du bestiller en lagervare inden kl. 12.00 så sendes pakken samme dag. Hvis varen ikke er på lager vil vi så vidt muligt underrette dig om forventet leveringstid. Skulle der imod forventning opstå forsinkelser hos PostNord kan&nbsp;<strong>homebarista</strong> dog ikke drages til ansvar. Vær opmærksom på, at leverancer til Bornholm og andre småøer i visse tilfælde kan vare op til 4 dage.</p>
</div>
<div id="tab-3">
<p><strong>Returnering</strong><br>Vi giver 30 dages fuld returret gældende fra den dag du modtager dine varer. Varerne skal returneres ubrugte og i samme stand som ved modtagelsen samt i original emballage med originale tags og mærker. Varer som ikke opfylder førnævnte krav tages ikke retur. Pakken skal sendes direkte til vores adresse, og vi anbefaler at sende pakken eksempelvis med PostNord som pakkepost, således at denne skal spores. Når vi har modtaget varen og godkendt returneringen, vil vi hurtigst muligt overføre købsbeløbet til din konto. Vi tilbagebetaler kun til det kreditkort som varerne er blevet købt med. Dette er for at undgå ulovlig brug af stjålne kreditkort. Husk at vedlægge registrerings- og kontonummer til evt. bankoverførsel. Og husk at gemme din postkvittering som dokumentation for at varen er afsendt. Returnering af varer står for egen regning.</p>
</div>
<div id="tab-4">
<div class='span12'><div id='judgeme_product_reviews' data-product-title='{{product.title}}' data-id='{{product.id}}'>{{ shop.metafields.judgeme.settings }}{{ product.metafields.judgeme.widget }}</div></div>
</div>
</div>








{% if settings.display_collections or settings.display_tags or settings.display_type %}
<hr />
{% endif %}

<div class="meta">
{% 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 itemprop="category">{{ product.type | link_to_type }}</span>
</p>
{% endif %}
</div>

{% include "social-buttons" with "product" %}
</div>

{% if settings.product_images_position == 'right' %}
<div class="{% if settings.product_sidebar %}six{% else %}eight{% endif %} columns {% if product-images == blank %}{% if settings.product_images_position == 'left' %}alpha{% else %}omega{% endif %}{% endif %}">
{% include 'product-images' %}
{% include "social-buttons" with "product" %}
</div>
{% endif %}
</div>

<br class="clear" />

</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 col = tag | remove: 'meta-related-collection-' %}
{% assign collection = collections[col] %}
{% capture limit %}{{ collection.products_count | plus: 1 }}{% endcapture %}
{% endif %}
{% endfor %}

{% if col and collections[col].all_products_count > 0 %}
<br class="clear" />
<br class="clear" />
<h4 class="title center">{{ 'products.product.related_items' | t }}</h4>

{% 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 %}

</div>



<style>
.current_price, .was_price, .product_name, .vendor a, .add_to_cart {
font-family: 'PT Sans', sans-serif;
}
@media screen and (max-width:900px) {
ul.tabs li { width:50%!important; }
.tbx3, .tbx4 { margin-bottom:0x!Important; }
}

@media screen and (min-width:900px) {
.thumbnail {
width: calc((100% / 4) - 20px)!important;
}

}
.modal_price { margin-bottom:0px!important; }

.was_price { margin-left: 8px;
font-size: 16px;
text-transform: uppercase;
font-style: normal; }

.current_price { font-weight: 700;
color: #000;
font-size: 26px;
text-transform: uppercase; }
.vendor a { font-weight: 600;
letter-spacing: 0.5px;
color: #404040;
font-size: 17px; }

.product_name { padding-top:0px; font-size:29px; margin-bottom:10px; }

.add_to_cart { margin-top:4px!important; font-size: 22px!important;
background-color: #3db67f!important;
padding: 11px 45px!important;
letter-spacing: 0.5px; }


.inline_purchase { margin-left:10px;}

input.quantity {
width: 50px;
display: inline;
margin-bottom: 0;
padding: 17px 5px;
text-align: center;

}


.leborder { height: 1px;
background-color: #ded6c7;
float: left;
width: 100%;
margin-top: 20px; margin-bottom:20px; }

.usper li span { margin-left:5px; vertical-align: top;}

.usper { list-style:none; margin-left:0; }
.usper li img { max-height:17px; }
.tabsunder {
float:left;
width:100%;
display:block;
}
.usper li { margin-bottom:6px; }
.thumbnail .price { font-size:20px; }
.thumbnail .sale, .sale {
color: #000;
}
.thumbnail .title { font-size:17px; }
</style>


<script>
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
</script>
<style>
ul.tabs {
border-bottom: 1px solid #DDDDDD;
display: block;
margin: 0 0 20px;
background-color: #f3f4f4;
padding: 18px 10px 10px 10px;

}
@media screen and (max-width:700px) {
.tbx1, .tbx2 {
margin-bottom:25px!important;
}
}
ul.tabs li {
display: block;
float: left;
height: 30px;
margin-bottom: 0;
padding: 0;
width: auto;
border:none!important;

}
ul.tabs li a {

display: block;
font-size: 14px!important;
height: 29px;
line-height: 30px;
margin: 0;
padding: 0 20px;
text-decoration: none;
width: auto;
color: #303030;
border:none!important;
}
ul.tabs li a.active {
font-weight:600;

background-color:#fafafa!important;
color: #000;
height: 30px;
margin: 0 0 0 -1px;
padding-top: 4px;
position: relative;
border-radius: 0!important;
top: -4px;
border:none!important;
margin-bottom: -10px!important;
padding-bottom: 11px!important;
}
ul.tabs li:first-child a.active {
margin-left: 0;
}
ul.tabs li:first-child a {
border-top-left-radius: 2px;
border-width: 1px 1px 0;
}
ul.tabs li:last-child a {
border-top-right-radius: 2px;
}
ul.tabs:before, ul.tabs:after {
content: " ";
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
width: 0;
}
ul.tabs:after {
clear: both;
}
</style>

0 Likes