
<!DOCTYPE html>
<html lang="{{site.dist.country}}">
<head><meta charset="UTF-8">
	<title>{{product.seo_title}}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="description" content="{{description}}" />
	<link rel="canonical" href="{{site.current_url}}/" />
	<meta property="og:locale" content="{{site.dist.country_alpha_2l}}" />
	<meta property="og:type" content="website" />
	<meta property="og:title" content="{{site.dist.company_name}}" />
	<meta property="og:description" content="{{description}}" />
	<meta property="og:url" content="{{site.current_url}}" />
	<meta property="og:site_name" content="{{site.dist.site_name}}" />
	<link rel='shortlink' href='{{site.current_url}}' />
	<link rel="stylesheet" href="{{ site.asset_base_url}}static/tpl/screenprotector/css/css.css?ver=0705">
	<link rel="stylesheet" href="{{ site.asset_base_url}}static/tpl/screenprotector/css/swiper-bundle.min.css?ver=0705">
	<script src="{{ site.asset_base_url}}static/tpl/screenprotector/js/jquery.min.js"></script>
	<script src="{{ site.asset_base_url}}static/tpl/screenprotector/js/swiper-bundle.min.js"></script>
	<script src="{{ site.asset_base_url}}static/tpl/screenprotector/js/main.js" defer></script>
	<script src="{{ site.asset_base_url}}static/tpl/screenprotector/js/thumbSlide.js" defer></script>
	<script>$(function(){$("#masterslider").thumbSlide();})</script>
</head>
<body>
{% include '_header_black.liquid' %}
<section class="product-page">
	<div class="section-wrapper">
		<div class="breadcrumb-wrapper"> {% for breadcrumb in breadcrumbs %}
                <a href="{{ breadcrumb.url }}">  {{ breadcrumb.name }} </a>
                {% if forloop.index != forloop.length %}
                    <span>/</span>
                {% endif %}
            {% endfor %}</div>
		<div class="product-header">
			<div class="product-gallery">
				<div class="zoom" id="masterslider">
					<ul class="slideList">

                        {% if product.images and product.images.size > 0 %}
                            {% for item in product.images %}
                                {% assign image_url = item.image_url %}
                                <li class="{% if forloop.index == 1 %}active{% endif %}"><img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_500,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_500,m_lfit{% endif %}" alt="{{product.title | strip_html }}"></li>
                            {% endfor %}

                        {% else %}
                            <li  class="active"><img src="/static/images/product_default.jpg" alt="{{product.title | strip_html }}"></li>
                        {% endif %}

					</ul>
				</div>
			</div>
			<div class="product-summary">
				<h1> {{product.title | strip_html }}</h1>
				<h2>{{ product.seo_description | strip_html }}</h2>
				<div class="specification">
					<div class="specification-title">Product Specification</div>
                    {% for item in product.parameters %}

                    <div class="specification-item">
					<div class="attribute-name"> {{ item.key }}</div>
					<div class="attribute-value">   {{ item.value }}</div>
					</div>
                    {% endfor %}
				</div>
				<div class="btn"><a href="https://api.whatsapp.com/send?phone={{site.dist.whats_app}}">Speak With Our Team</a></div>
			</div>
		</div>

		<div class="product-conent">
			<h3>Description</h3>
			<div >  {{product.content | raw }}</div>
		</div>

		<aside class="product-relate">
			<h3>Related products</h3>
			<p class="description">Find out more products similar to this</p>
			<div class="relate-grid">

                {% for item in relatedProducts %}

                    {% assign image_url = item.images[0].image_url %}

                    <div class="grid-item">
                        <div class="item-img"><a href="/products/{{ item.id }}">

                                {% if image_url %}
                                    {% if image_url contains 'http' %}
                                        <img src="{{ image_url }}" class="img-center default-image-thumbnail" alt="{{ item.title | strip_html }}">
                                    {% else %}
                                        <img src="{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_300,h_300' }}" class="img-center default-image-thumbnail" alt="{{ item.title | strip_html }}">
                                    {% endif %}
                                {% else %}
                                    <img src="/static/images/product_default.jpg" class="" alt="{{ item.title | strip_html }}">
                                {% endif %}

                            </a></div>
                        <div class="item-title"><a href="/products/{{ item.id }}" title="{{ item.title | strip_html }}">{{ item.title | strip_html }}</a></div>
                    </div>

                {% endfor %}


			</div>
		</aside>
	</div>
</section>

{% include '__contact.liquid' %}

{% include '_footer.liquid' %}
	</body>
</html>

