
<!DOCTYPE html>
<html lang="{{site.dist.country}}">
<head><meta charset="UTF-8">
	<title>{{category.seo_title}}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="description" content="{{ site.dist.seo_description  | strip_html| strip_newlines }}" />
	<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="{{ site.dist.seo_description  | strip_html| strip_newlines }}" />
	<meta property="og:url" content="{{site.current_url}}" />
	<meta property="og:site_name" content="{{site.dist.site_name}}" />
	<meta name="twitter:card" content="summary_large_image" />
	<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?ver=0705"></script>
</head>
<body>
{% include '_header.liquid' %}
<section class="page-header">
	<div class="section-wrapper">
		<h1 class="page-title">{{category.name}}</h1>
		<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>
</section>
<section class="product-list-page">
	<div class="section-wrapper">
		<ul class="list-wrapper">
            {% for item in products %}
			<li class="product-item">
				<div class="product-image"><a href="/products/{{ item.id }}" alt="{{ item.title | strip_html }}">

                        {% if item.images and item.images[0].image_url %}
                            {% assign image_url = item.images[0].image_url %}
			     {% assign image_url_overlay = item.images[1].image_url %}
                            <img src="{% if image_url contains 'http' %}{{ image_url }}{% else %}{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_200,h_200' }}{% endif %}"
                            alt="{{ item.title | strip_html }}">
			     <div class="overlay">   <img src="{% if image_url_overlay %}{% if image_url_overlay contains 'http' %}{{ image_url_overlay }}{% else %}{{ site.image_base_url }}{{ image_url_overlay | append: '?x-oss-process=image/resize,m_pad,w_200,h_200' }}{% endif %}{% else %}{{ site.asset_base_url }}static/images/product_default.jpg{% endif %}"
                            alt="{{ item.title | strip_html }}"></div>
                        {% else %}
                            <img src="{{ site.asset_base_url}}/static/images/product_default.jpg" alt="{{ item.title | strip_html }}">
			    <div class="overlay"><img src="{{ site.asset_base_url}}/static/images/product_default.jpg" alt="{{ item.title | strip_html }}"></div>
                        {% endif %}

				</a></div>
				<div class="product-name"><a href="/products/{{ item.id }}" alt="{{ item.title | strip_html }}">{{ item.title | strip_html }}</a></div>
			</li>
			{% endfor %}
		</ul>
	</div>
</section>
<section class="extra-intro">
	<div class="section-wrapper">
		<div class="heading-title"><h2>{{category.name}}</h2></div>
		<div class="extra-text"> {{ category.remark }}</div>
	</div>
</section>

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

