解决合并冲突

.env.prod

@@ -0,0 +1,83 @@
+APP_NAME=Laravel
+APP_ENV=prod
+APP_KEY=base64:bdomFa+r6S774rRyFNeb4pCBxVe4WbuzAzk+LyP86+k=
+#上线时需要改成false
+APP_DEBUG=true
+#暂时未用到
+APP_URL=http://localhost
+#是否https
+ADMIN_HTTPS=true
+
+#网站主域名，不含http://www.
+TOP_DOMAIN=mietubl.com.cn
+#分销商前端站点IP,用于提醒分销商绑定域名IP
+DIST_SITE_IP = 127.0.0.1
+#分销商前端站点端口，用于访问站点
+DIST_SITE_PORT = 80
+
+LOG_CHANNEL=stack
+LOG_DEPRECATIONS_CHANNEL=null
+LOG_LEVEL=debug
+
+DB_CONNECTION=mysql
+DB_HOST=127.0.0.1
+DB_PORT=3306
+DB_DATABASE=dcatplus_dev
+DB_USERNAME=dcatadmin_dev
+DB_PASSWORD=123456
+
+BROADCAST_DRIVER=log
+CACHE_DRIVER=file
+FILESYSTEM_DISK=local
+QUEUE_CONNECTION=sync
+SESSION_DRIVER=file
+SESSION_LIFETIME=120
+
+MEMCACHED_HOST=127.0.0.1
+
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=smtp
+MAIL_HOST=mailpit
+MAIL_PORT=1025
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_ENCRYPTION=null
+MAIL_FROM_ADDRESS="hello@example.com"
+MAIL_FROM_NAME="${APP_NAME}"
+
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=us-east-1
+AWS_BUCKET=
+AWS_USE_PATH_STYLE_ENDPOINT=false
+
+PUSHER_APP_ID=
+PUSHER_APP_KEY=
+PUSHER_APP_SECRET=
+PUSHER_HOST=
+PUSHER_PORT=443
+PUSHER_SCHEME=https
+PUSHER_APP_CLUSTER=mt1
+
+VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+VITE_PUSHER_HOST="${PUSHER_HOST}"
+VITE_PUSHER_PORT="${PUSHER_PORT}"
+VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
+VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+
+OSS_ACCESS_KEY_ID=LTAI5tCYd6zdBrSN9W9hZRUd
+OSS_ACCESS_KEY_SECRET=q0pp2qlDXdxi490qMDbDuWBd7SPMNn
+OSS_BUCKET=mietubl-dev
+OSS_ENDPOINT=oss-cn-hongkong.aliyuncs.com
+#内网上传，上线时开
+#OSS_INTERNAL=oss-cn-hongkong-internal.aliyuncs.com
+#加速域名，上线时开
+OSS_DOMAIN=mietubl-dev.oss-accelerate.aliyuncs.com
+
+#相册系统RPC调用配置
+ALBUM_RPC_URL=https://album-prime-control.mietubl.com.cn/rpc
+ALBUM_RPC_SECRET=MtbSecretVBUC
+ALBUM_OSS_URL=https://mietublcom.oss-cn-hongkong.aliyuncs.com

.env.test

@@ -0,0 +1,78 @@
+APP_NAME=Laravel
+APP_ENV=test
+APP_KEY=base64:bdomFa+r6S774rRyFNeb4pCBxVe4WbuzAzk+LyP86+k=
+#上线时需要改成false
+APP_DEBUG=true
+#暂时未用到
+APP_URL=http://localhost
+#是否https
+ADMIN_HTTPS=false
+
+#网站主域名，不含http://www.
+TOP_DOMAIN=mietubl.com.cn
+#分销商前端站点IP,用于提醒分销商绑定域名IP
+DIST_SITE_IP = 127.0.0.1
+#分销商前端站点端口，用于访问站点
+DIST_SITE_PORT = 8888
+
+LOG_CHANNEL=stack
+LOG_DEPRECATIONS_CHANNEL=null
+LOG_LEVEL=debug
+
+DB_CONNECTION=mysql
+DB_HOST=127.0.0.1
+DB_PORT=3306
+DB_DATABASE=dcatplus_dev
+DB_USERNAME=dcatadmin_dev
+DB_PASSWORD=123456
+
+BROADCAST_DRIVER=log
+CACHE_DRIVER=file
+FILESYSTEM_DISK=local
+QUEUE_CONNECTION=sync
+SESSION_DRIVER=file
+SESSION_LIFETIME=120
+
+MEMCACHED_HOST=127.0.0.1
+
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=smtp
+MAIL_HOST=mailpit
+MAIL_PORT=1025
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_ENCRYPTION=null
+MAIL_FROM_ADDRESS="hello@example.com"
+MAIL_FROM_NAME="${APP_NAME}"
+
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=us-east-1
+AWS_BUCKET=
+AWS_USE_PATH_STYLE_ENDPOINT=false
+
+PUSHER_APP_ID=
+PUSHER_APP_KEY=
+PUSHER_APP_SECRET=
+PUSHER_HOST=
+PUSHER_PORT=443
+PUSHER_SCHEME=https
+PUSHER_APP_CLUSTER=mt1
+
+VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+VITE_PUSHER_HOST="${PUSHER_HOST}"
+VITE_PUSHER_PORT="${PUSHER_PORT}"
+VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
+VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+
+OSS_ACCESS_KEY_ID=LTAI5tCYd6zdBrSN9W9hZRUd
+OSS_ACCESS_KEY_SECRET=q0pp2qlDXdxi490qMDbDuWBd7SPMNn
+OSS_BUCKET=mietubl-dev
+OSS_ENDPOINT=oss-cn-hongkong.aliyuncs.com
+#内网上传，上线时开
+#OSS_INTERNAL=oss-cn-hongkong-internal.aliyuncs.com
+#加速域名，上线时开
+#OSS_DOMAIN=mietubl-dev.oss-accelerate.aliyuncs.com

public/1.php

@@ -0,0 +1,21 @@
+<?php
+$ch = curl_init();
+curl_setopt($ch, CURLOPT_URL, "http://example.com");
+curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 3); // 设置连接超时时间为3秒
+curl_setopt($ch, CURLOPT_TIMEOUT, 5); // 设置总超时时间为10秒
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+
+$response = curl_exec($ch);
+
+if (curl_errno($ch)) {
+    echo 'cURL error: ' . curl_error($ch);
+} else {
+    // 获取请求的详细信息
+    $info = curl_getinfo($ch);
+    echo "Connection time: " . $info['connect_time'] . " seconds\n";
+    echo "Total time: " . $info['total_time'] . " seconds\n";
+    echo "Name lookup time: " . $info['namelookup_time'] . " seconds\n";
+    echo "Pre-transfer time: " . $info['pretransfer_time'] . " seconds\n";
+}
+
+curl_close($ch);

resources/appearance/screen_protector_solutions/__banner_list.liquid

@@ -0,0 +1,20 @@
+
+<section class="hero d-flex align-items-center">
+    <div class="container swiper-container">
+        <div class="swiper-wrapper">
+            {% for item in banners %}
+            <div class="row swiper-slide">
+                <div class="col-md-6 text-center text-md-start">
+                    <h1 class="display-4">{{ item.title }}</h1>
+                    <p class="lead">{{ item.subtitle }}</p>
+                    <a href="{{ item.banner_url }}" class="btn btn-dark">Mais Informações</a>
+                </div>
+                <div class="col-md-6 text-center">
+                    <img src="{{ site.image_base_url }}{{ item.image_url }}" alt="{{ item.title }}" class="img-fluid mt-4">
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+        <div class="swiper-pagination"></div>
+    </div>
+</section>

resources/appearance/screen_protector_solutions/__banner_list_2.liquid

@@ -0,0 +1,11 @@
+<section class="additional-products py-5">
+    <div class="container swiper-container-bottom">
+        <div class="row swiper-wrapper">
+            {% for item in banners %}
+            <div class="col-md-3 mb-4 swiper-slide">
+                <div  class="card border-orange" > <a href="{{ item.banner_url }}"><img src="{{ site.image_base_url }}{{ item.image_url }}" alt="{{ item.title }}" class="card-img-top"/></a></div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</section>

resources/appearance/screen_protector_solutions/__collection_list_1.liquid

@@ -0,0 +1,37 @@
+
+<!-- FAQ Section -->
+<section class="py-5 bg-light">
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-12 col-lg-12">
+                <h2 class="mb-4 text-center fs-1 ">Perguntas frequentes</h2>
+
+                <!-- FAQ Accordion -->
+                <div class="accordion" id="faqAccordion">
+
+                    <!-- Item 1 -->
+                    {% for item in pages %}
+                    <div class="accordion-item border-0 mb-3">
+                        <h3 class="accordion-header">
+                            <button class="accordion-button bg-white shadow-sm rounded-3"
+                                    type="button"
+                                    data-bs-toggle="collapse"
+                                    data-bs-target="#collapseOne">
+                                {{ item.title | decode_html_entities | strip_html }}
+                            </button>
+                        </h3>
+                        <div id="collapseOne" class="accordion-collapse collapse show"
+                             data-bs-parent="#faqAccordion">
+                            <div class="accordion-body text-secondary">
+                                {{ item.content | strip_html}}
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+
+
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

resources/appearance/screen_protector_solutions/_footer.liquid

@@ -0,0 +1,54 @@
+
+<!-- Rodapé -->
+<footer class="bg-dark text-white py-4 footer">
+    <!-- 品牌标识区 -->
+    <div class="container mb-4">
+        <div class="row align-items-center">
+            <h2 class="h4 mb-0 text-center">
+                <img  src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/logo2.svg" class="logo" mtb_edit="2">
+            </h2>
+        </div>
+        <div class="row">
+            <p class="mb-0 text-center logo-txt" mtb_edit="2">Make It Easier To Use, Better Life</p>
+        </div>
+    </div>
+
+    <div class="container footer-links">
+        <div class="row">
+            <div class="col-md-4 footer-contact">
+                <h5>Contato</h5>
+                <a href="tel:123-456-7890">
+                    <p>{{ site.dist.company_name }}</p>
+                    <p>{{ site.dist.company_address }}</p>
+                    <p>Telefone {{ site.dist.service_hotline }}</p>
+                    <p mtb_edit="2">Horário de Atendimento:<br /> Segunda a Sexta das 9 às 17 horas</p>
+                </a>
+                <a href="{{ site.dist.facebook }}" class="text-white me-2"><i class="fab fa-facebook"></i></a>
+                <a href="{{ site.dist.instagram }}" class="text-white"><i class="fab fa-instagram"></i></a>
+            </div>
+
+            {% for menu in site.menus_footer %}
+                {% if menu.show %}
+                    <div class="col-md-4">
+                        <h5>{{ menu.title }}</h5>
+                        <ul class="list-unstyled">
+                            {% for child in menu.children %}
+                                {% if child.show %}
+                                    <li><a href="{{ child.uri }}" class="text-white" title="{{ child.title }}">{{ child.title }}</a></li>
+                                {% endif %}
+                            {% endfor %}
+                        </ul>
+                    </div>
+                {% endif %}
+            {% endfor %}
+        </div>
+    </div>
+</footer>
+
+<!-- jQuery e Bootstrap JS -->
+<script src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/js/jquery-3.6.0.min.js"></script>
+<script src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
+<script src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/js/swiper.min.js"></script>
+<!-- JS Personalizado -->
+<script src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/js/scripts.js"></script>
+

resources/appearance/screen_protector_solutions/_header.liquid

@@ -0,0 +1,76 @@
+<header>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-orange">
+
+        <div class="container">
+            {% if site.dist.logo %}
+            <a class="header-logo position-absolute start-0 translate-middle-y" style="top:50%; z-index: 1000" href="/"><img src="{{ site.image_base_url }}{{ site.dist.logo }}" height="115px"></a>
+            {% endif %}
+
+            <div class="navbar-toggler-container position-absolute ">
+                <button class="navbar-toggler " type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#navbarNav"
+                        aria-controls="navbarNav"
+                        aria-expanded="false"
+                        aria-label="切换导航">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+            </div>
+
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    {% for menu in site.menus_header %}
+                        <li class="nav-item {% if menu.children and menu.children.size > 0 %}dropdown{% endif %}">
+                            {% if menu.children and menu.children.size > 0 %}
+                                <a  class="nav-link dropdown-toggle"  id="protetoresTelasDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="{% if menu.children and menu.children.size > 0 %}#{% else %}{{ menu.uri }}{% endif %}">
+                                    {{ menu.title }}
+                                </a>
+                            {% else %}
+                                <a class="nav-link" href="{% if menu.children and menu.children.size > 0 %}#{% else %}{{ menu.uri }}{% endif %}">
+                                    {{ menu.title }}
+                                </a>
+                            {% endif %}
+                            {% if menu.children and menu.children.size > 0 %}
+                                <ul class="dropdown-menu w-100 p-0">
+                                    <div class="container py-3" style="max-width: 90%; margin: 0 auto;">
+                                        <div class="row g-4">
+                                            {% for child in menu.children %}
+                                            <div class="col-4">
+                                                <div class="d-flex align-items-start">
+
+                                                    <div class="flex-shrink-0">
+                                                        {%  if child.image_url %}
+                                                        <img src="{{ site.asset_base_url }}{{ child.image_url }}"
+                                                             class="img-fluid rounded"
+                                                             style="width: 100%; height: 100%; object-fit: cover;">
+                                                        {% else %}
+                                                            <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg"
+                                                                 class="img-fluid rounded"
+                                                                 style="width: 100%; height: 100%; object-fit: cover;">
+                                                        {% endif %}
+                                                    </div>
+                                                    <div class="flex-grow-1 ms-3">
+                                                        <h6 class="mb-2 fw-bold"><a href="{{ child.uri }}" class="text-decoration-none text-reset">{{ child.title }}</a></h6>
+                                                        <div class="d-flex flex-column">
+                                                            {% for item in child.children %}
+                                                            <a href="{{ item.uri }}" class="text-decoration-none text-reset mb-1 small">{{ item.title }}</a>
+                                                            {% endfor %}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            {% endfor %}
+                                        </div>
+                                    </div>
+                                </ul>
+                            {% endif %}
+                        </li>
+                    {% endfor %}
+
+                </ul>
+            </div>
+        </div>
+    </nav>
+</header>
+
+

resources/appearance/screen_protector_solutions/collection_list.liquid

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang}}">
+<head>
+    <meta charset="UTF-8">
+    <title>{{tag.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="en_US" />
+    <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}}' />
+    <!-- Bootstrap CSS -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome para ícones sociais -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/fontawesome/css/all.min.css" rel="stylesheet">
+    <!-- CSS Personalizado -->
+    <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+</head>
+<body>
+
+{% include '_header.liquid' %}
+
+
+<div class="container py-5 article-list">
+    <div class="row g-4">
+        <nav class="nav-orange">
+            <div class="container">
+                <div class="d-flex breadcrumb">
+                    {% for breadcrumb in breadcrumbs %}
+                        <a href="{{ breadcrumb.url }}" class="nav-link {% if forloop.last == false %}add-icon{% endif %}">
+                            {{ breadcrumb.name }}
+                        </a>
+                    {% endfor %}
+                </div>
+            </div>
+        </nav>
+    </div>
+
+    <div class="row g-4">
+        <!-- 左侧文章列表 -->
+        <div class="col-lg-8">
+            <div class="row row-cols-1 g-4">
+                {% for item in pages %}
+                <!-- 单篇文章卡片 -->
+                <div class="col">
+                    <div class="card article-card h-100 article-left">
+                        <div class="row g-0">
+                            <div class="col-md-4">
+                                {% if item.cover_image %}
+                                    <img src="{% if item.cover_image contains 'http' %}{{ item.cover_image }}{% else %}{{ site.image_base_url }}{{ item.cover_image | append: '?x-oss-process=image/resize,m_pad,w_1024,h_1024' }}{% endif %}" class="img-fluid rounded-start post-cover" alt="{{ item.title | strip_html }}">
+                                {% else %}
+                                    <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/" alt="{{ item.title | strip_html }}" class="post-cover">
+                                {% endif %}
+
+                            </div>
+                            <div class="col-md-8">
+                                <div class="card-body">
+                                    <h5 class="card-title">{{ item.title | strip_html }}</h5>
+
+                                    <div class="d-flex justify-content-between mb-2">
+                                        <small class="text-muted">{{ item.post_date | date: '%Y-%m-%d' }}</small>
+                                    </div>
+
+                                    <p class="card-text text-secondary">
+                                        {% if item.description %}
+                                            {{ item.description | truncatewords: 200 }}
+                                        {% else %}
+
+                                        {% endif %}
+                                    </p>
+                                </div>
+                            </div>
+                            <hr class="w-100 mx-auto">
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+                <!-- 更多文章重复上述结构 -->
+                <!-- 分页代码 -->
+                <nav aria-label="Page navigation" class="mt-4">
+                    <ul class="pagination justify-content-center flex-wrap">
+                        {% if paginator.previous_page %}
+                            <li class="page-item mr-2">
+
+                                    <a class="page-link" href="{{ paginator.previous_page_url }}" tabindex="-1">
+                                        <i class="fas fa-arrow-left fa-xs"></i>
+                                    </a>
+                            </li>
+                        {% else %}
+                            <li class="page-item disabled mr-2">
+                                <a class="page-link text-gray" href="#" tabindex="-1">
+                                    <i class="fas fa-arrow-left fa-xs"></i>
+                                </a>
+                            </li>
+                        {% endif %}
+
+                        {% for page in paginator.pages %}
+                            {% if page == paginator.current_page %}
+                                <li class="page-item active mr-2" aria-current="page">
+                                    <a class="page-link" href="#">{{ page }}</a>
+                                </li>
+                            {% else %}
+                                <li class="page-item mr-2">
+                                    <a class="page-link" href="{{ paginator.page_url[page] }}">{{ page }}</a>
+                                </li>
+                            {% endif %}
+                        {% endfor %}
+
+                        {% if paginator.next_page %}
+                            <li class="page-item">
+                                <a class="page-link" href="{{ paginator.next_page_url }}">
+                                    <i class="fas fa-arrow-right fa-xs"></i>
+                                </a>
+                            </li>
+                        {% else %}
+                            <li class="page-item disabled">
+                                <a class="page-link text-gray" href="#">
+                                    <i class="fas fa-arrow-right fa-xs"></i>
+                                </a>
+                            </li>
+                        {% endif %}
+                    </ul>
+                </nav>
+            </div>
+        </div>
+
+        <!-- 右侧边栏 -->
+        <div class="col-lg-4">
+            <div class="recent-posts">
+                <h4 class="mb-4 bg-teal p-3 rounded">RECENT POSTS</h4>
+                <hr class="w-100 mx-auto ">
+                <div class="list-group">
+                    {% for item in pages %}
+                    <a href="/pages/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}" class="list-group-item list-group-item-action d-flex justify-content-between" title="{{ item.title | strip_html }}">
+                        <span>{{ item.title | strip_html }}</span>
+                        <small class="text-muted">{{ item.post_date | date: '%m-%d' }}</small>
+                    </a>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+{% include '_footer.liquid' %}
+</body>
+</html>

resources/appearance/screen_protector_solutions/home.liquid

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang}}">
+<head>
+    <meta charset="UTF-8">
+    <title>{{site.dist.seo_title}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="keywords" content="{{ site.dist.seo_keywords  | strip_html| strip_newlines }}" />
+    <meta name="description" content="{{ site.dist.seo_description  | strip_html| strip_newlines }}" />
+    <link rel="canonical" href="{{site.current_url}}" />
+    <meta property="og:locale" content="en" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{site.dist.seo_title}}" />
+    <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 | strip_html| strip_newlines }}" />
+    <link rel='shortlink' href="{{site.current_url}}" />
+    <!-- Bootstrap CSS -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome para ícones sociais -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/fontawesome/css/all.min.css" rel="stylesheet">
+    <!-- CSS Personalizado -->
+    <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+</head>
+<body>
+
+{% include '_header.liquid' %}
+
+<!-- Seção Hero -->
+
+{% banner limit=5 position=1 template='__banner_list.liquid' %}
+
+
+<!-- Seção de Produtos -->
+<section class="index-products py-5">
+    <div class="container">
+        <h2 mtb_edit="1" id="ibjxa4" class="text-center mb-4">Nossos Produtos</h2>
+        <hr class="w-25 mx-auto mb-5">
+        <div mtb_edit="2" mtb_toolbar="clone,delete" id="ilztiy" class="row">
+            <div class="col-md-4 mb-4" mtb_edit="2" mtb_toolbar="clone,delete">
+                <a href="#" mtb_edit="2">
+                    <div class="card {% if site.mtb_preview == 1 %}animate{% endif %}">
+                        <img src="https://mietubl-dev.oss.mietubl.com.cn/static/tpl/screen_protector_solutions/image/p1.webp" alt="Máquinas para Protetores de Telas" class="card-img-top" mtb_edit="2"/>
+                        <div class="card-body">
+                            <h5 class="card-title" mtb_edit="2">Máquinas para Protetores de Telas</h5>
+                            <p class="card-text" mtb_edit="2">Máquinas para imprimir ou cortar protetores de tela para celulares.</p>
+                        </div>
+
+                    </div>
+                </a>
+            </div>
+
+            <div class="col-md-4 mb-4"  mtb_edit="2" mtb_toolbar="clone,delete">
+                <a href="#" mtb_edit="2" >
+                    <div class="card {% if site.mtb_preview == 1 %}animate{% endif %}">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p2.webp" class="card-img-top" alt="Protetores de Telas de Hidrogel" mtb_edit="2">
+                        <div class="card-body">
+                            <h5 class="card-title" mtb_edit="2">Protetores de Telas de Hidrogel</h5>
+                            <p class="card-text" mtb_edit="2">Fáceis de aplicar e remover.</p>
+                        </div>
+                    </div>
+                </a>
+            </div>
+
+            <div class="col-md-4 mb-4" mtb_edit="2" mtb_toolbar="clone,delete">
+                <a href="#" mtb_edit="2" mtb_toolbar="clone,delete">
+                    <div class="card {% if site.mtb_preview == 1 %}animate{% endif %}">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p3.webp" class="card-img-top" alt="Protetores de Telas de Hidrogel" mtb_edit="2">
+                        <div class="card-body" mtb_edit="2">
+                            <h5 class="card-title" mtb_edit="2">Protetores de Telas de Hidrogel</h5>
+                            <p class="card-text" mtb_edit="2">Fáceis de aplicar e remover.</p>
+                        </div>
+                    </div>
+                </a>
+            </div>
+            <!-- Adicione mais cards conforme necessário -->
+        </div>
+
+        <div mtb_edit="2" mtb_toolbar="clone,delete" id="icljgq" class="row">
+            <div class="col-md-4 mb-4" mtb_edit="2" mtb_toolbar="clone,delete">
+                <a href="#" mtb_edit="2">
+                    <div class="card {% if site.mtb_preview == 1 %}animate{% endif %}">
+                        <img src="https://mietubl-dev.oss.mietubl.com.cn/static/tpl/screen_protector_solutions/image/p4.webp" alt="Máquinas para Protetores de Telas" class="card-img-top" mtb_edit="2"/>
+                        <div class="card-body">
+                            <h5 class="card-title" mtb_edit="2">Máquinas para Protetores de Telas</h5>
+                            <p class="card-text" mtb_edit="2">Máquinas para imprimir ou cortar protetores de tela para celulares.</p>
+                        </div>
+                    </div>
+                </a>
+            </div>
+
+
+
+            <div class="col-md-4 mb-4" mtb_edit="2" mtb_toolbar="clone,delete">
+                <a href="#" mtb_edit="2">
+                    <div class="card {% if site.mtb_preview == 1 %}animate{% endif %}">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p5.webp" class="card-img-top" alt="Protetores de Telas de Hidrogel" mtb_edit="2">
+                        <div class="card-body">
+                            <h5 class="card-title" mtb_edit="2">Protetores de Telas de Hidrogel</h5>
+                            <p class="card-text" mtb_edit="2">Fáceis de aplicar e remover.</p>
+                        </div>
+                    </div>
+                </a>
+            </div>
+
+
+
+            <div class="col-md-4 mb-4" mtb_edit="2" mtb_toolbar="clone,delete">
+                <a href="#" mtb_edit="2">
+                    <div class="card {% if site.mtb_preview == 1 %}animate{% endif %}">
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/p6.webp" class="card-img-top" alt="Protetores de Telas de Hidrogel" mtb_edit="2">
+                        <div class="card-body">
+                            <h5 class="card-title" mtb_edit="2">Protetores de Telas de Hidrogel</h5>
+                            <p class="card-text" mtb_edit="2">Fáceis de aplicar e remover.</p>
+                        </div>
+                    </div>
+                </a>
+            </div>
+
+            <!-- Adicione mais cards conforme necessário -->
+        </div>
+    </div>
+</section>
+
+<!-- Banner de Chamada à Ação -->
+<section class="cta-banner text-center py-4 text-white" style="position: relative; height: 340px;">
+    <!-- 新增纯背景层 -->
+    <div class="bg-orange-overlay"></div>
+    <!-- 内容容器 -->
+    <div class="container d-flex h-100 position-relative" style="z-index: 1;">
+        <div class="container-txt d-flex flex-column justify-content-center">
+            <h3 mtb_edit="1" id="ibk1l6">Veja como é simples produzir telas de proteção personalizadas para celular.</h3>
+        </div>
+        <div class="elementor-widget-container">
+            <div class="elementor-wrapper elementor-open-inline">
+                <iframe allowfullscreen=""  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="Mietubl mini phone skin printer- make DIY the highlight of your store" width="495" height="280" src="https://www.youtube.com/embed/oXRHiw72XMw?&controls=0&showinfo=0&rel=0" id="widget2" class="elementor-video"> </iframe>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Seção de Produtos Adicionais -->
+
+{% banner limit=4 position=2 template='__banner_list_2.liquid' %}
+
+
+
+{% include '_footer.liquid' %}
+
+<script>
+    //主页轮播图
+    var swiper = new Swiper('.swiper-container', {
+        pagination: '.swiper-pagination',
+        paginationClickable: true,
+        autoplay: 5000,
+    });
+
+
+    var swiper2 = new Swiper('.swiper-container-bottom', {
+        slidesPerView: 5,
+        paginationClickable: true,
+        spaceBetween: 30,
+        freeMode: true,
+        autoplay: 15000,
+    });
+</script>
+</body>
+</html>

resources/appearance/screen_protector_solutions/pages_detail.liquid

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang}}">
+<head>
+    <meta charset="UTF-8">
+    <title>{{page.seo_title}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="keywords" content="{{page.seo_keywords  | strip_html| strip_newlines }}" />
+    <meta name="description" content="{{page.seo_description  | strip_html| strip_newlines }}" />
+    <link rel="canonical" href="{{site.current_url}}" />
+    <meta property="og:locale" content="en" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{page.seo_title}}" />
+    <meta property="og:description" content="{{page.seo_title | strip_html| strip_newlines }}" />
+    <meta property="og:url" content="{{site.current_url}}" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <link rel='shortlink' href="{{site.current_url}}" />
+    <!-- Bootstrap CSS -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome para ícones sociais -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/fontawesome/css/all.min.css" rel="stylesheet">
+    <!-- CSS Personalizado -->
+    <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+</head>
+<body>
+
+{% include '_header.liquid' %}
+
+
+<div class="container py-5 article-detail">
+    <div class="row g-4">
+        <!-- 面包屑导航 -->
+        <nav class="nav-orange">
+            <div class="container">
+                <div class="d-flex breadcrumb">
+                    {% for breadcrumb in breadcrumbs %}
+                        <a href="{{ breadcrumb.url }}" class="nav-link  {% if forloop.last == false %}add-icon{% endif %} ">
+                            {{ breadcrumb.name }}
+                        </a>
+                    {% endfor %}
+                </div>
+            </div>
+        </nav>
+    </div>
+
+    <div class="row g-4">
+        <!-- 主内容区 -->
+        <div class="col-lg-12">
+            <article class="card article-content">
+                <div class="card-body">
+                    <!-- 文章标题 -->
+                    <h1 class="mb-4 fw-bold display-6">{{ page.title | raw }}</h1>
+
+                    <!-- 文章元信息 -->
+                    <div class="d-flex justify-content-between mb-4 text-muted">
+                        <div>
+                            <span><i class="fas fa-clock me-1"></i>{{ page.post_date | date: '%Y-%m-%d' }}</span>
+                        </div>
+                    </div>
+
+
+                    <!-- 文章正文 -->
+                    <div class="article-body">
+                        {{page.content | raw }}
+                    </div>
+
+                    <!-- 分页导航 -->
+                    <nav class="mt-5 text-center">
+                        <ul class="pagination justify-content-center post-pagination">
+                            {% if paginator.previous_page %}
+                            <li class="page-item">
+                                <a class="page-link text-white page-bg-orange" href="{{ paginator.previous_page_url }}">
+                                    <i class="fas fa-chevron-left me-2"></i>
+                                </a>
+                            </li>
+                            {% else %}
+                                <li class="page-item disabled">
+                                    <a class="page-link text-white" href="#">
+                                        <i class="fas fa-chevron-left me-2"></i>
+                                    </a>
+                                </li>
+                            {% endif %}
+
+
+                            {% if paginator.next_page %}
+                                <li class="page-item">
+                                    <a class="page-link text-white page-bg-orange" href="{{ paginator.next_page_url }}">
+                                        <i class="fas fa-chevron-right ms-2"></i>
+                                    </a>
+                                </li>
+                            {% else %}
+                                <li class="page-item disabled">
+                                    <a class="page-link  text-white" href="#">
+                                        <i class="fas fa-chevron-right ms-2"></i>
+                                    </a>
+                                </li>
+                            {% endif %}
+                        </ul>
+                    </nav>
+                </div>
+            </article>
+        </div>
+
+        <!-- 右侧边栏 -->
+
+    </div>
+</div>
+
+
+{% include '_footer.liquid' %}
+</body>
+</html>

resources/appearance/screen_protector_solutions/pages_sp_about.liquid

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang}}">
+<head>
+    <meta charset="UTF-8">
+    <title>{{page.seo_title}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="keyword" content="{{ page.seo_keywords  | strip_html| strip_newlines }}" />
+    <meta name="description" content="{{ page.seo_description  | strip_html| strip_newlines }}" />
+    <link rel="canonical" href="{{site.current_url}}" />
+    <meta property="og:locale" content="en" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{ site.dist.seo_title }}" />
+    <meta property="og:description" content="{{ page.seo_description  | strip_html| strip_newlines }}" />
+    <meta property="og:url" content="{{site.current_url}}" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <link rel='shortlink' href='{{site.current_url}}' />
+    <!-- Bootstrap CSS -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome para ícones sociais -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/fontawesome/css/all.min.css" rel="stylesheet">
+    <!-- CSS Personalizado -->
+    <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+</head>
+<body>
+
+{% include '_header.liquid' %}
+
+
+<!-- Hero Section -->
+<section class="about-hero text-center" style="background-image: url('{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/contact_us.png');">
+    <div class="container">
+        <h1 class="display-4 fw-bold mb-4" mtb_edit="2">Sobre Mietubl</h1>
+        <p class="lead" mtb_edit="2">Nascido na China, crescendo com fabricação inteligente</p>
+    </div>
+</section>
+
+<!-- Main Content -->
+<section class="py-5">
+    <div class="container">
+        <div class="row align-items-center g-5">
+            <div class="col-lg-6">
+
+                <h3 class="section-title  text-center py-5"> {{ page.title | raw }}</h3>
+                <div class="text-muted lead">
+                    {{page.content | raw }}
+                </div>
+            </div>
+            <div class="col-lg-6">
+                <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/Profile.webp"
+                     alt="Manufacturing"
+                     class="img-fluid rounded-3 shadow">
+            </div>
+        </div>
+    </div>
+</section>
+
+
+
+
+
+<!-- Core Values -->
+<section class="core-values">
+    <div class="container text-center py-5">
+        <h3 class="section-title" mtb_edit="2">O nosso compromisso</h3>
+        <div class="row g-4">
+            <div class="col-md-4">
+                <div class="card h-100 border-0">
+                    <div class="card-body">
+                        <i class="fas fa-globe-asia fa-3x text-primary mb-3"></i>
+                        <h5 mtb_edit="2">Soluções Globais</h5>
+                        <p class="text-muted" mtb_edit="2">Fornecer soluções tecnológicas em todo o mundo com experiência localizada</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="card h-100 border-0">
+                    <div class="card-body">
+                        <i class="fas fa-hand-holding-heart fa-3x text-danger mb-3"></i>
+                        <h5 mtb_edit="2">Criação de Valor</h5>
+                        <p class="text-muted" mtb_edit="2">Garantir a satisfação do consumidor e a rentabilidade do revendedor</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="card h-100 border-0">
+                    <div class="card-body">
+                        <i class="fas fa-link fa-3x text-success mb-3"></i>
+                        <h5 mtb_edit="2">Construção de ecossistemas</h5>
+                        <p class="text-muted" mtb_edit="2">Integração de recursos ao longo do ciclo de vida do produto</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+
+
+
+{% include '_footer.liquid' %}
+</body>
+</html>

resources/appearance/screen_protector_solutions/pages_sp_contact.liquid

@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang}}">
+<head>
+    <meta charset="UTF-8">
+    <title>{{page.seo_title}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="keyword" content="{{ page.seo_keywords  | strip_html| strip_newlines }}" />
+    <meta name="description" content="{{ page.seo_description  | strip_html| strip_newlines }}" />
+    <link rel="canonical" href="{{site.current_url}}" />
+    <meta property="og:locale" content="en" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{ site.dist.seo_title }}" />
+    <meta property="og:description" content="{{ page.seo_description  | strip_html| strip_newlines }}" />
+    <meta property="og:url" content="{{site.current_url}}" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <link rel='shortlink' href='{{site.current_url}}' />
+    <!-- Bootstrap CSS -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome para ícones sociais -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/fontawesome/css/all.min.css" rel="stylesheet">
+    <!-- CSS Personalizado -->
+    <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+</head>
+<body>
+
+{% include '_header.liquid' %}
+
+
+
+
+<section class="contact-section py-5">
+    <div class="container">
+        <div class="row g-5">
+            <!-- Left Column -->
+            <div class="col-md-6">
+                <h2 class="mb-4" mtb_edit="2">Contato</h2>
+                <div class="mb-4">
+                    <h3>{{ site.dist.company_name }}</h3>
+                    <p class="text-muted">
+                        {{ site.dist.company_address }}
+                    </p>
+                </div>
+
+                <div class="mb-4">
+                    <h5>Telefone</h5>
+                    <p class="text-muted">{{ site.dist.service_hotline }}</p>
+
+                    <h5 mtb_edit="2">Horário de Atendimento</h5>
+                    <p class="text-muted" mtb_edit="2">
+                        Segunda a Sexta das 09:00 às 17:00 horas
+                    </p>
+                </div>
+            </div>
+
+            <!-- Right Column -->
+
+            {% comment %}<div class="col-md-6">{% endcomment %}
+                {% comment %}<div class="form-container">{% endcomment %}
+                    {% comment %}<h3 class="mb-4">Seja um Representante</h3>{% endcomment %}
+                    {% comment %}<form id="form_contact" data-action="/contact" class="form-default" role="form">{% endcomment %}
+                        {% comment %}<div class="mb-3">{% endcomment %}
+                            {% comment %}<input type="text" name="customer_name" class="form-control" placeholder="Nome" required>{% endcomment %}
+                        {% comment %}</div>{% endcomment %}
+{% comment %}{% endcomment %}
+                        {% comment %}<div class="mb-3">{% endcomment %}
+                            {% comment %}<input type="email" name="email" class="form-control" placeholder="E-mail" required>{% endcomment %}
+                        {% comment %}</div>{% endcomment %}
+{% comment %}{% endcomment %}
+                        {% comment %}<div class="mb-3">{% endcomment %}
+                            {% comment %}<input type="text" name="company_name" class="form-control" placeholder="Nome da empresa">{% endcomment %}
+                        {% comment %}</div>{% endcomment %}
+{% comment %}{% endcomment %}
+                        {% comment %}<div class="mb-3">{% endcomment %}
+                            {% comment %}<input type="tel" name="whats_app" class="form-control" placeholder="WhatsApp">{% endcomment %}
+                        {% comment %}</div>{% endcomment %}
+{% comment %}{% endcomment %}
+                        {% comment %}<div class="mb-3">{% endcomment %}
+                            {% comment %}<textarea class="form-control" name="content" rows="4" placeholder="Mensagem"></textarea>{% endcomment %}
+                        {% comment %}</div>{% endcomment %}
+                        {% comment %}<button type="submit" class="btn btn-custom">Enviar</button>{% endcomment %}
+                    {% comment %}</form>{% endcomment %}
+                {% comment %}</div>{% endcomment %}
+            {% comment %}</div>{% endcomment %}
+
+
+            <div class="col-md-6 contact-form">
+                <div class="form-container">
+                    <h3 class="mb-4" mtb_edit="2">Seja um Representante</h3>
+                    <form id="form_contact" data-action="/contact" class="form-default" role="form">
+                        <!-- 姓名 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label" mtb_edit="2">Nome</label>
+                            <div class="col-md-9">
+                                <input type="text" name="customer_name" class="form-control" required>
+                            </div>
+                        </div>
+
+                        <!-- 邮箱 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label" mtb_edit="2">E-mail</label>
+                            <div class="col-md-9">
+                                <input type="email" name="email" class="form-control" required>
+                            </div>
+                        </div>
+
+                        <!-- 公司名称 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label" mtb_edit="2">Empresa</label>
+                            <div class="col-md-9">
+                                <input type="text" name="company_name" class="form-control">
+                            </div>
+                        </div>
+
+                        <!-- WhatsApp -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label" mtb_edit="2">WhatsApp</label>
+                            <div class="col-md-9">
+                                <input type="tel" name="whats_app" class="form-control">
+                            </div>
+                        </div>
+
+                        <!-- 消息 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label" mtb_edit="2">Mensagem</label>
+                            <div class="col-md-9">
+                                <textarea class="form-control" name="content" rows="4"></textarea>
+                            </div>
+                        </div>
+
+                        <!-- 提交按钮 -->
+                        <div class="row">
+                            <div class="col-md-9 offset-md-3">
+                                <button type="submit" class="btn btn-custom w-100" mtb_edit="2">Enviar</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+{% include '_footer.liquid' %}
+<script>
+    $(document).ready(function() {
+        $('#form_contact').on('submit', function(event) {
+            event.preventDefault();
+            var form = $(this);
+            var token = $('input[name="_token"]').val();
+            var formData = form.serialize();
+
+            // Validate required fields
+            var requiredFields = form.find('.required-field input, .required-field textarea');
+            var hasError = false;
+
+            requiredFields.each(function() {
+                if ($(this).val().trim() === '') {
+                    alert('please fill in all required fields');
+                    hasError = true;
+                }
+            });
+
+            if (hasError) return;
+
+            // Validate WhatsApp as a number
+            var whatsapp = $('input[name="whats_app"]').val();
+            if (whatsapp == "") {
+                alert('please enter a valid WhatsApp number');
+                return;
+            }
+
+            // Validate email format
+            var email = $('input[name="email"]').val();
+            if (email == "") {
+                alert('please enter a valid email address');
+                return;
+            }
+            // Submit via AJAX
+            $.ajax({
+                url: form.data('action'),
+                type: 'POST',
+                data: formData,
+                dataType: 'json',
+                beforeSend: function() {
+                    // Before send
+                },
+                success: function(response) {
+                    alert('Success!');
+                    form.trigger('reset');
+                },
+                error: function(xhr, status, error) {
+                    alert('error! Please try again later.');
+                }
+            });
+
+        });
+    });
+</script>
+</body>
+</html>

resources/appearance/screen_protector_solutions/pages_sp_faq.liquid

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang}}">
+<head>
+    <meta charset="UTF-8">
+    <title>{{page.seo_title}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="keyword" content="{{ page.seo_keywords  | strip_html| strip_newlines }}" />
+    <meta name="description" content="{{ page.seo_description  | strip_html| strip_newlines }}" />
+    <link rel="canonical" href="{{site.current_url}}" />
+    <meta property="og:locale" content="en" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{ site.dist.seo_title }}" />
+    <meta property="og:description" content="{{ page.seo_description  | strip_html| strip_newlines }}" />
+    <meta property="og:url" content="{{site.current_url}}" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <link rel='shortlink' href='{{site.current_url}}' />
+    <!-- Bootstrap CSS -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome para ícones sociais -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/fontawesome/css/all.min.css" rel="stylesheet">
+    <!-- CSS Personalizado -->
+    <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+</head>
+<body>
+{% include '_header.liquid' %}
+
+
+{% collection slug="FAQ" limit=3 template="__collection_list_1.liquid" %}
+
+
+
+{% include '_footer.liquid' %}
+</body>
+</html>

resources/appearance/screen_protector_solutions/products_categories.liquid

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang}}">
+<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="keywords" content="{{ site.dist.seo_keywords}}" />
+	<meta name="description" content="{{ site.dist.seo_description  | strip_html| strip_newlines }}" />
+    <link rel="canonical" href="{{site.current_url}}/" />
+    <meta property="og:locale" content="en" />
+    <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}}' />
+    <!-- Bootstrap CSS -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome para ícones sociais -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/fontawesome/css/all.min.css" rel="stylesheet">
+    <!-- CSS Personalizado -->
+    <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+</head>
+<body>
+{% include '_header.liquid' %}
+
+
+<div class="products-list container"> <!-- 修改外层容器类名 -->
+    <h2 class="section-header">{{category.name}}</h2>
+
+    <div class="row g-4 section-list"> <!-- 修改内层容器类名 -->
+        <!-- 头戴式降噪耳机 -->
+        {% for item in products %}
+        <div class="col-6 col-md-3">
+            <div class=" product-card">
+                <a href="/products/{{ item.id }}" title="{{ item.title | strip_html }}">
+                    {% if item.images and item.images[0].image_url %}
+                    {% assign image_url = item.images[0].image_url %}
+                        <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,m_pad,w_260,h_260{% else %}{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_260,h_260' }}{% endif %}" class="card-img-top product-image"  alt="{{ item.title | strip_html }}">
+                    {% else %}
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg" class="card-img-top product-image"  alt="{{ item.title | strip_html }}">
+                    {% endif %}
+                    <div class="card-body text-center">
+                        <h3 class="product-title fw-bold mb-2">{{ item.title | strip_html }}</h3>
+                    </div>
+                </a>
+            </div>
+        </div>
+        {% endfor %}
+
+        <!-- 分页代码 -->
+        <nav aria-label="Page navigation" class="mt-4">
+            <ul class="pagination justify-content-center flex-wrap">
+                {% if paginator.previous_page %}
+                    <li class="page-item mr-2">
+
+                        <a class="page-link" href="{{ paginator.previous_page_url }}" tabindex="-1">
+                            <i class="fas fa-arrow-left fa-xs"></i>
+                        </a>
+                    </li>
+                {% else %}
+                    <li class="page-item disabled mr-2">
+                        <a class="page-link text-gray" href="#" tabindex="-1">
+                            <i class="fas fa-arrow-left fa-xs"></i>
+                        </a>
+                    </li>
+                {% endif %}
+
+                {% for page in paginator.pages %}
+                    {% if page == paginator.current_page %}
+                        <li class="page-item active mr-2" aria-current="page">
+                            <a class="page-link" href="#">{{ page }}</a>
+                        </li>
+                    {% else %}
+                        <li class="page-item mr-2">
+                            <a class="page-link" href="{{ paginator.page_url[page] }}">{{ page }}</a>
+                        </li>
+                    {% endif %}
+                {% endfor %}
+
+                {% if paginator.next_page %}
+                    <li class="page-item">
+                        <a class="page-link" href="{{ paginator.next_page_url }}">
+                            <i class="fas fa-arrow-right fa-xs"></i>
+                        </a>
+                    </li>
+                {% else %}
+                    <li class="page-item disabled">
+                        <a class="page-link text-gray" href="#">
+                            <i class="fas fa-arrow-right fa-xs"></i>
+                        </a>
+                    </li>
+                {% endif %}
+            </ul>
+        </nav>
+
+    </div>
+</div>
+
+
+
+
+{% include '_footer.liquid' %}
+</body>
+</html>

resources/appearance/screen_protector_solutions/products_detail.liquid

@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang}}">
+<head>
+    <meta charset="UTF-8">
+    <title>{{product.seo_title}} - Screen Protector Factory Directly</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="keywords" content="{{product.seo_keywords}}" />
+    <meta name="description" content="{{product.seo_description}}" />
+    <link rel="canonical" href="{{site.current_url}}/" />
+    <meta property="og:locale" content="{{site.dist.country_lang}}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{product.seo_title}}" />
+    <meta property="og:description" content="{{product.seo_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}}" />
+    <!-- Bootstrap CSS -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome para ícones sociais -->
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/fontawesome/css/all.min.css" rel="stylesheet">
+    <!-- CSS Personalizado -->
+    <link rel="stylesheet" href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/lib/swiper/css/swiper.min.css">
+    <link href="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/css/styles.css" rel="stylesheet">
+</head>
+<body>
+
+
+
+{% include '_header.liquid' %}
+
+
+<div class="container products-detail">
+    <div class="row g-4">
+        <!-- 面包屑导航 -->
+        <nav class="nav-orange">
+            <div class="container">
+                <div class="d-flex breadcrumb">
+                    {% for breadcrumb in breadcrumbs %}
+                        <a href="{{ breadcrumb.url }}" class="nav-link  {% if forloop.last == false %}add-icon{% endif %} ">
+                            {{ breadcrumb.name }}
+                        </a>
+                    {% endfor %}
+                </div>
+            </div>
+        </nav>
+    </div>
+    <!-- 第一行 -->
+    <div class="row g-4">
+        <!-- 左侧图片轮播 -->
+        <div class="col-md-5 top-left">
+            <div id="mainCarousel" class="carousel slide main-carousel">
+                <div class="carousel-inner">
+                    {% if product.images and product.images.size > 0 %}
+                        {% for item in product.images %}
+                            {% assign image_url = item.image_url %}
+                        <div class="carousel-item {% if forloop.first %}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 %}" class="d-block w-100" alt="{{ product.title }}">
+                        </div>
+                        {% endfor %}
+                    {% else %}
+                        <div class="carousel-item active">
+                            <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg" class="d-block w-100" alt="{{ product.title }}">
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+
+            <div class="carousel-thumbnails   swiper-container" >
+                <div class="swiper-wrapper">
+                    {% if product.images and product.images.size > 0 %}
+                        {% for item in product.images %}
+                            {% assign image_url = item.image_url %}
+                            <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,w_100,m_lfit{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,w_100,m_lfit{% endif %}" class="swiper-slide" data-bs-target="#mainCarousel" data-bs-slide-to="{{ forloop.index0 }}" alt="{{ product.title }}">
+                        {% endfor %}
+                    {% else %}
+                        <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg" class="swiper-slide" data-bs-target="#mainCarousel" data-bs-slide-to="0" alt="{{ product.title }}">
+                    {% endif %}
+
+                </div>
+            </div>
+        </div>
+
+        <!-- 右侧产品介绍 -->
+        <div class="col-md-7 top-right">
+            <h1 class="mb-4"> {{product.title | strip_html }}</h1>
+
+            <div class="product-parameters">
+                {{ product.seo_description | strip_html }}
+            </div>
+
+            <div class="contact-form">
+                <div class="form-container">
+                    <h3 class="mb-4" mtb_edit="2">Obter Amostra Gratuita Agora</h3>
+
+                    <form id="form_contact" data-action="/contact" class="form-default" role="form">
+                        <!-- 姓名 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label" mtb_edit="2">Nome</label>
+                            <div class="col-md-9">
+                                <input type="text" name="customer_name" class="form-control" required>
+                            </div>
+                        </div>
+
+                        <!-- 邮箱 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label" mtb_edit="2">E-mail</label>
+                            <div class="col-md-9">
+                                <input type="email" name="email" class="form-control" required>
+                            </div>
+                        </div>
+
+                        <!-- 公司名称 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label" mtb_edit="2">Empresa</label>
+                            <div class="col-md-9">
+                                <input type="text" name="company_name" class="form-control">
+                            </div>
+                        </div>
+
+                        <!-- WhatsApp -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label" mtb_edit="2">WhatsApp</label>
+                            <div class="col-md-9">
+                                <input type="tel" name="whats_app" class="form-control">
+                            </div>
+                        </div>
+
+                        <!-- 消息 -->
+                        <div class="row mb-3 align-items-center">
+                            <label class="col-md-3 col-form-label" mtb_edit="2">Mensagem</label>
+                            <div class="col-md-9">
+                                <textarea class="form-control" name="content" rows="2"></textarea>
+                            </div>
+                        </div>
+
+                        <!-- 提交按钮 -->
+                        <div class="row">
+                            <div class="col-md-9 offset-md-3">
+                                <button type="submit" class="btn btn-custom w-100" mtb_edit="2">Enviar</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            {% comment %}<button class="btn btn-quote"  data-bs-toggle="modal" data-bs-target="#quoteModal"  style="background-color: #ec6c00; color: white; width: 150px; height: 45px; border: none; margin-top: 20px;">Get a quote</button>{% endcomment %}
+        </div>
+    </div>
+
+
+    <!-- 第二行 产品详情 -->
+    <div class="row mt-5">
+        <div class="col-12">
+            <h2 class="mb-4" mtb_edit="2">Informações adicionais
+            </h2>
+            <hr class="w-100 mx-auto mb-5">
+            <div class="product-description">
+                {{product.content | raw }}
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- Hidden content -->
+<div class="modal fade" id="quoteModal" tabindex="-1" aria-labelledby="quoteModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="quoteModalLabel">Seja um Representante</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body contact-form">
+                <form id="form_contact" data-action="/contact" class="form-default" role="form">
+                    <input type="hidden" name="consulting_products" value="{{ product.title }}" />
+                    <!-- 姓名 -->
+                    <div class="row mb-3 align-items-center">
+                        <label class="col-md-3 col-form-label">Nome</label>
+                        <div class="col-md-9">
+                            <input type="text" name="customer_name" class="form-control" required>
+                        </div>
+                    </div>
+
+                    <!-- 邮箱 -->
+                    <div class="row mb-3 align-items-center">
+                        <label class="col-md-3 col-form-label">E-mail</label>
+                        <div class="col-md-9">
+                            <input type="email" name="email" class="form-control" required>
+                        </div>
+                    </div>
+
+                    <!-- 公司名称 -->
+                    <div class="row mb-3 align-items-center">
+                        <label class="col-md-3 col-form-label">Empresa</label>
+                        <div class="col-md-9">
+                            <input type="text" name="company_name" class="form-control">
+                        </div>
+                    </div>
+
+                    <!-- WhatsApp -->
+                    <div class="row mb-3 align-items-center">
+                        <label class="col-md-3 col-form-label">WhatsApp</label>
+                        <div class="col-md-9">
+                            <input type="tel" name="whats_app" class="form-control">
+                        </div>
+                    </div>
+
+                    <!-- 消息 -->
+                    <div class="row mb-3 align-items-center">
+                        <label class="col-md-3 col-form-label">Mensagem</label>
+                        <div class="col-md-9">
+                            <textarea class="form-control" name="content" rows="4"></textarea>
+                        </div>
+                    </div>
+
+                    <!-- 提交按钮 -->
+                    <div class="row">
+                        <div class="col-md-9 offset-md-3">
+                            <button type="submit" class="btn btn-custom w-100">Enviar</button>
+                        </div>
+                    </div>
+                </form>
+
+            </div>
+        </div>
+    </div>
+</div>
+
+
+{% include '_footer.liquid' %}
+
+<script>
+    var swiper = new Swiper('.swiper-container', {
+        slidesPerView: 5,
+        paginationClickable: true,
+        spaceBetween: 30,
+        freeMode: true
+    });
+
+    $(document).ready(function() {
+        $('#form_contact').on('submit', function(event) {
+            event.preventDefault();
+            var form = $(this);
+            var token = $('input[name="_token"]').val();
+            var formData = form.serialize();
+
+            // Validate required fields
+            var requiredFields = form.find('.required-field input, .required-field textarea');
+            var hasError = false;
+
+            requiredFields.each(function() {
+                if ($(this).val().trim() === '') {
+                    alert('please fill in all required fields');
+                    hasError = true;
+                }
+            });
+
+            if (hasError) return;
+
+            // Validate WhatsApp as a number
+            var whatsapp = $('input[name="whats_app"]').val();
+            if (whatsapp == "") {
+                alert('please enter a valid WhatsApp number');
+                return;
+            }
+
+            // Validate email format
+            var email = $('input[name="email"]').val();
+            if (email == "") {
+                alert('please enter a valid email address');
+                return;
+            }
+            console.log(formData);
+
+            // Submit via AJAX
+            $.ajax({
+                url: form.data('action'),
+                type: 'POST',
+                data: formData,
+                dataType: 'json',
+                beforeSend: function() {
+                    // Before send
+                },
+                success: function(response) {
+                    alert('Success!');
+                    form.trigger('reset');
+                },
+                error: function(xhr, status, error) {
+                    alert('error! Please try again later.');
+                }
+            });
+
+        });
+    });
+
+
+</script>
+</body>
+</html>

resources/appearance/screenprotector/__collection_list_1.liquid

@@ -0,0 +1,39 @@
+<!-- Description: Collection list 1 -->
+        {% for item in pages %}
+
+                <div class="blog-post">
+                    <!-- 产品图像 -->
+                    <div class="blog-image">
+                        {% assign image_url = item.images[0].image_url %}
+
+                        {% if item.cover_image %}
+                            <img src="{% if item.cover_image contains 'http' %}{{ item.cover_image }}{% else %}{{ site.image_base_url }}{{ item.cover_image | append: '?x-oss-process=image/resize,m_pad,w_380,h_220' }}{% endif %}" alt="Cover Image">
+                        {% else %}
+                            <img src="{{ site.image_base_url }}static/common/images/product_default.jpg" class="img-center default-image-thumbnail" alt="{{ item.title | strip_html }}">
+                        {% endif %}
+                    </div>
+
+
+                    <div class="post-content">
+                        <div class="blog-header">
+                            <a href="/pages/{{ item.id }}" target="_blank">
+                                {{ item.title | decode_html_entities | strip_html }}
+                            </a>
+                        </div>
+                        <div class="blog-summary">
+
+                            {% if item.content %}
+                                {{ item.title | truncatewords: 20 }}
+                            {% else %}
+                                No description available
+                            {% endif %}
+
+                        </div>
+                        <div class="post-meta">
+                            <span>Mietubl</span>
+                        </div>
+                    </div>
+                </div>
+
+        {% endfor %}
+<!-- End of Collection list 1 -->

resources/appearance/screenprotector/__contact.liquid

@@ -0,0 +1,51 @@
+<!-- BEGIN content_for_contact -->
+<section class="index-contact-section">
+    <div class="section-wrapper">
+        <div class="index-contact-left-wrapper">
+            <h3 mtb_edit="1" class="heading-title" id="i8bcze">Get in Touch Today!</h3>
+            <p mtb_edit="1" class="sub-title" id="ijoiu2">Talk to our team and share your exciting ideas with Mietubl.We will always be ready to help.</p>
+            <div class="widget-container">
+                <div class="contact-widget">
+                    <div class="icon-box"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/whatsapp.svg"></div>
+                    <div class="contact-widget-title">WhatsApp</div>
+                    <div mtb_edit="1" class="contact-widget-detail" id="ihk88g">Questions about our product or pricing? Talk to us now</div>
+                    <div class="contact-widget-number">{{ site.dist.service_hotline }}</div>
+                </div>
+
+                <div class="contact-widget">
+                    <div class="icon-box"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/mail.svg"></div>
+                    <div class="contact-widget-title">Email</div>
+                    <div mtb_edit="1" class="contact-widget-detail" id="i62o56">For more questions, you can also write to us.</div>
+                    <div class="contact-widget-number">{{ site.dist.dist_email }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="index-contact-right-wrapper">
+            <div class="contact-form">
+                <h3 mtb_edit="1" class="heading-title" id="ic9d3e">Do feel free to leave us a message!</h3>
+				<div mtb_edit="1" class="sub-text" id="ipy87e">We will get back to you as soon as possible.</div>
+                <form id="form_contact" data-action="/contact" class="form-default" role="form">
+                    <div class="input-container">
+                        <label for="form-field-name" class="field-label">Name</label>
+                        <input type="text" name="customer_name" id="form-field-name" class="field-textual" placeholder="Name">
+
+                        <div class="mark-required">
+                            <label for="form-field-email" class="elementor-field-label">Email</label>
+                            <input size="1" type="email" name="email" id="form-field-email" class="field-textual" placeholder="Email" required="required" aria-required="true">
+                        </div>
+                        <div class="mark-required">
+                            <label for="form-field-field_1076d06" class="elementor-field-label">Whatsapp</label>
+                            <input size="1" type="text" name="whats_app" id="form-field-field_1076d06" class="field-textual" placeholder="+" required="required" aria-required="true">
+                        </div>
+                        <div class="mark-required">
+                            <label for="form-field-message" class="elementor-field-label">Message</label>
+                            <textarea class="field-textual" name="content" id="form-field-message" rows="4" placeholder="Message"></textarea>
+                        </div>
+                        <div class="button-wrapper" id="send_button" style="cursor: pointer;"> Send</div>
+                    </div>
+                </form>
+            </div>
+        </div><!--index-contact-right-wrapper"-->
+    </div>
+</section>
+<!-- END content_for_contact -->

resources/appearance/screenprotector/__index.about.liquid

@@ -0,0 +1,20 @@
+<!-- about begin -->
+<div class="left-box">
+				<div class="elementor-element elementor-element-4fb7960 elementor-widget elementor-widget-heading" data-id="4fb7960" data-element_type="widget" data-widget_type="heading.default">
+				<div class="elementor-widget-container">
+					<h2 class="elementor-heading-title elementor-size-default">{{ page.title }}</h2>		</div>
+				</div>
+				<div class="elementor-widget-container">
+					<p>{{ page.content }}</p>
+				</div>
+				<div class="elementor-widget-container">
+					<div class="elementor-button-wrapper">
+					<a class="elementor-button elementor-button-link elementor-size-sm" href="https://www.lucentparts.com/lucent-electronic-technology-guangzhou-co-ltd-mobile-phone-lcd-screen/">
+                        <a href="pages/{{page.slug }}"><span class="elementor-button-content-wrapper">
+                                <span class="elementor-button-text">Learn More</span>					</span></a>
+					</a>
+				</div>
+				</div>
+			</div><!--left-box-->
+
+<!-- about end -->

resources/appearance/screenprotector/__page_list_1.liquid

@@ -0,0 +1,31 @@
+<!-- Description:  List Page 1 -->
+<div class="products-list">
+    <ul>
+        {% for item in products %}
+        <li>
+            <div class="list-item">
+                <div class="item-pic">
+                    {% assign image_url = item.images[0].image_url %}
+
+                    {% 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="{{ site.image_base_url }}static/common/images/product_default.jpg" class="img-center default-image-thumbnail" alt="{{ item.title | strip_html }}">
+                    {% endif %}
+                </div>
+                <div class="item-name">
+                    <a  href="/products/{{ item.id }}" target="_blank" >
+                        {{ item.title |decode_html_entities| strip_html  }}
+                    </a>
+                </div>
+            </div>
+        </li>
+        {% endfor %}
+
+    </ul>
+</div>
+<!-- End of List Page 1 -->

resources/appearance/screenprotector/__product_list_1.liquid

@@ -0,0 +1,32 @@
+<!-- List Page 1 -->
+
+<div class="products-list">
+    <ul>
+        {% for item in products %}
+        <li>
+            <div class="list-item">
+                <div class="item-pic">
+                    {% assign image_url = item.images[0].image_url %}
+
+                    {% 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="{{ site.image_base_url }}static/common/images/product_default.jpg" class="img-center default-image-thumbnail" alt="{{ item.title | strip_html }}">
+                    {% endif %}
+                </div>
+                <div class="item-name">
+                    <a  href="/products/{{ item.id }}" target="_blank" >
+                        {{ item.title |decode_html_entities| strip_html  }}
+                    </a>
+                </div>
+            </div>
+        </li>
+        {% endfor %}
+
+    </ul>
+</div>
+<!-- End of List Page 1 -->

resources/appearance/screenprotector/_footer.liquid

@@ -0,0 +1,82 @@
+<!-- Footer -->
+<footer>
+	<div class="section-wrapper">
+		<div class="footer-widget">
+			<div class="int-widget">
+                    <div class="footer-logo"><img src="{{ site.image_base_url }}/static/tpl/screenprotector/images/logo.svg" alt="Mietubl logo"></div>
+				<div mtb_edit="1" class="footer-int-text" id="i366ij">
+				Mietubl, originated from Made in China, growing up with intellectually manufactured in China. Focus on product intelligence, resource integration in all aspects of product circulation, construction of ecological chain.
+				</div>
+				<div class="social">
+					<ul>
+						<li><a href="{{ site.dist.facebook }}" target="_blank"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/facebook.svg" alt="Facebook"></a></li>
+						<li><a href="{{ site.dist.tiktok }}" target="_blank"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/TikTok.svg" alt="TikTok"></a></li>
+						<li><a href="{{ site.dist.youtube }}" target="_blank"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/youtube.svg" alt="Youtube"></a></li>
+						<li><a href="{{ site.dist.instagram }}" target="_blank"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/instagram.svg" alt="Instagram"></a></li>
+					</ul>
+				</div>
+			</div>
+			<div class="list-widget">
+                {% for menu in site.menus_footer %}
+                {% if menu.show %}
+                            <dl class="">
+                                <dt>{{ menu.title }}</dt>
+                                {% for child in menu.children %}
+                                    {% if child.show %}
+                                        <dd>
+                                            <a href="{{ child.uri }}" title="{{ child.title }}">
+                                                {{ child.title }}
+                                            </a>
+                                        </dd>
+                                    {% endif %}
+                                {% endfor %}
+                            </dl>
+
+                {% endif %}
+                {% endfor %}
+			</div>
+			<div class="contact-widget">
+					<div mtb_edit="1" class="widget-title" id="ibqg6g">Contact us</div>
+					<div class="tel">{{ site.dist.service_hotline }}</div>
+					<div class="mail"><a href="mailto:{{ site.dist.dist_email }}">{{ site.dist.dist_email }}</a></div>
+					<div class="address"><a href="mailto:{{ site.dist.dist_email }}">{{ site.dist.company_address }}</a></div>
+			</div>
+		</div>
+	</div>
+</footer>
+
+<script>
+    document.getElementById('send_button').addEventListener('click', function() {
+        const form = document.getElementById('form_contact');
+        const actionUrl = form.getAttribute('data-action');
+
+        // Create a FormData object from the form
+        const formData = new FormData(form);
+
+        // Perform the AJAX request
+        fetch(actionUrl, {
+            method: 'POST',
+            body: formData,
+            headers: {
+                'Accept': 'application/json',
+            },
+        })
+            .then(response => {
+                if (response.ok) {
+                    return response.json();
+                } else {
+                    throw new Error('Error in the request');
+                }
+            })
+            .then(data => {
+                console.log('Success:', data);
+                alert('Message submitted successfully!');
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert('There was an error submitting the Message.');
+            });
+    });
+</script>
+{{ site.dist.statistics_js | raw }}
+<!-- footer end -->

resources/appearance/screenprotector/_header.liquid

@@ -0,0 +1,107 @@
+<header class="site-header">
+	<div  class="container">
+		<div class="header-inner">
+			<div class="site-navigation">
+				<div class="site-logo">
+					<a href="/" title="Mietubl screen protector factory">
+					<img width="114" height="37"  src="{{ site.asset_base_url}}static/tpl/screenprotector/images/logo.svg" class="a" alt="Mietubl logo">
+					<img width="114" height="37"  src="{{ site.asset_base_url}}static/tpl/screenprotector/images/logo-black.svg" class="b" alt="Mietubl logo">
+					</a>
+				</div>
+				<nav class="main-nav-container">
+					<ul>
+						<li class="nav-item"><a title="Home page" href="/">Home</a></li>
+						<li class="nav-item has-sub"><a title="About Mietubl" href="#">About Us</a>
+								<div class="sub-about-us sub-nav-container" >
+									<div class="about-item">
+										<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/nav-pic1.jpg"></div>
+										<div class="intro"><a href="/pages/about-us" title="About us">About Us</a>
+														 <span>Company Overview</span>
+										</div>
+									</div>
+									<div class="about-item">
+										<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/nav-pic2.jpg"></div>
+										<div class="intro"><a href="/pages/factory" title="Factory Tour">Factory Tour</a>
+														  <span> Screen Protector Factory</span>
+										</div>
+									</div>
+								</div>
+						</li>
+						<li class="nav-item has-sub"><a title="Screen protector series" href="#">Products</a>
+								<div class="sub-box sub-nav-container">
+									<div class="grid-wrapper">
+										<div class="grid-col">
+											<div class="col-header"><a href="/products/categories/for-mobile-phone" title="Mobile phone screen protectors">For mobile phone</a></div>
+											<div class="col"><a href="/products/347" title="Super D screen protector">Super D screen protector</a></div>
+											<div class="col"><a href="/products/348" title="Antistatic screen protector">Antistatic screen protector</a></div>
+											<div class="col"><a href="/products/349" title="HD clear big curved edge screen protector">HD clear screen protector</a></div>
+											<div class="col"><a href="/products/350" title="Colored MTB Glass Screen Protector">Colored MTB Glass Screen Protector</a></div>
+											<div class="col"><a href="/products/351" title="Privacy screen protector">Privacy screen protector</a></div>
+											<div class="col"><a href="/products/352" title="Hot bending screen protector">Hot bending screen protector</a></div>
+											<div class="col"><a href="/products/353" title="UV screen protector">UV screen protector</a></div>
+											<div class="col"><a href="/products/354" title="Lace edge screen protector">Lace edge screen protector</a></div>	
+											<div class="col"><a href="/products/355" title="Lace edge screen protector">Big curved edge screen protector</a></div>												
+										</div>
+										<div class="grid-col">
+											<div class="col-header"><a href="/products/categories/for-pc" title="Computer screen protectors">For PC</a></div>
+											<div class="col"><a href="/products/356" title="Clip-on monitor privacy filter">Clip-on monitor privacy filter</a></div>
+											<div class="col"><a href="/products/357" title="PC screen privacy filter">PET screen protector</a></div>
+											<div class="col"><a href="/products/358" title="Magnetic privacy screen protector">Magnetic privacy screen protector</a></div>
+										</div>
+										<div class="grid-col">
+											<div class="col-header"><a href="/products/359" title="Tablet screen protectors">For tablet</a></div>								
+											<div class="col-header"><a href="/products/360" title="Car screen protectors">For car</a></div>
+											<div class="col-header"><a href="/products/361" title="Lens protectors">For phone Lens</a></div>
+										</div>
+									</div>
+								</div>
+						</li>
+                        <li class="nav-item"><a title="News" href="/collections/news">News</a></li>
+                        <li class="nav-item"><a title="" href="/pages/faqs">FAQs</a></li>
+                        <li class="nav-item"><a class="btn" href="/pages/Contact-us">Talk To Us</a></li>
+					</ul>
+				</nav>
+			</div>
+		</div>
+
+		<div class="mobile-nav">
+			<div class="mobile-nav-wrapper">
+				<div class="mobile-logo">
+					<a href="/" title="Mietubl screen protector factory">
+					<img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/logo.svg" class="a" alt="Mietubl logo">
+					<img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/logo-black.svg" class="b" alt="Mietubl logo">
+					</a>
+				</div>
+				<div class="tt-hamburger" id="page-open-main-menu" tabindex="1">
+					<span class="bar"></span>
+					<span class="bar"></span>
+					<span class="bar"></span>
+				</div>
+			</div>
+			<nav class="mobile-main-nav">
+					<ul>
+						<li><a href="/" title="Home page">Home</a></li>
+						<li class="m-sub-nav"><a title="About Mietubl" href="#" >About Us</a>
+							<ul class="m-sub-list">
+								<li><a href="/pages/about-us" title="About us">About Us</a></li>
+								<li><a href="/pages/factory" title="Factory Tour">Factory Tour</a></li>
+							</ul>
+						</li>
+						<li class="m-sub-nav"><a title="About Mietubl" href="#" class="m-sub-nav">Products</a>
+							<ul class="m-sub-list">
+								<li><a href="{URL}" title="Mobile phone screen protectors">For mobile phone</a></li>
+								<li><a href="{URL}" title="Computer screen protectors">For PC</a></li>
+								<li><a href="{URL}" title="Tablet screen protectors">For tablet</a></li>
+								<li><a href="{URL}" title="Car screen protectors">For car</a></li>
+								<li><a href="{URL}" title="Lens protectors">For phone Lens</a></li>
+							</ul>
+						</li>
+						<li><a title="News" href="/collections/news">News</a></li>
+						<li><a title="" href="/pages/faq">FAQs</a></li>
+						<li><a class="btn" href="/contact">Talk to us</a></li>
+					</ul>
+			</nav>
+		</div>
+
+	</div>
+</header>

resources/appearance/screenprotector/_header_black.liquid

@@ -0,0 +1,107 @@
+<header class="site-header fix-top2">
+	<div  class="container">
+		<div class="header-inner">
+			<div class="site-navigation">
+				<div class="site-logo">
+					<a href="/" title="Mietubl screen protector factory">
+					<img width="114" height="37"  src="{{ site.asset_base_url}}static/tpl/screenprotector/images/logo.svg" class="a" alt="Mietubl logo">
+					<img width="114" height="37"  src="{{ site.asset_base_url}}static/tpl/screenprotector/images/logo-black.svg" class="b" alt="Mietubl logo">
+					</a>
+				</div>
+				<nav class="main-nav-container">
+					<ul>
+						<li class="nav-item"><a title="Home page" href="/">Home</a></li>
+						<li class="nav-item has-sub"><a title="About Mietubl" href="#">About Us</a>
+								<div class="sub-about-us sub-nav-container" >
+									<div class="about-item">
+										<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/nav-pic1.jpg"></div>
+										<div class="intro"><a href="/pages/about-us" title="About us">About Us</a>
+														 <span>Company Overview</span>
+										</div>
+									</div>
+									<div class="about-item">
+										<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/nav-pic2.jpg"></div>
+										<div class="intro"><a href="/pages/factory" title="Factory Tour">Factory Tour</a>
+														  <span> Screen Protector Factory</span>
+										</div>
+									</div>
+								</div>
+						</li>
+						<li class="nav-item has-sub"><a title="Screen protector series" href="#">Products</a>
+								<div class="sub-box sub-nav-container">
+									<div class="grid-wrapper">
+										<div class="grid-col">
+											<div class="col-header"><a href="/products/categories/for-mobile-phone" title="Mobile phone screen protectors">For mobile phone</a></div>
+											<div class="col"><a href="/products/347" title="Super D screen protector">Super D screen protector</a></div>
+											<div class="col"><a href="/products/348" title="Antistatic screen protector">Antistatic screen protector</a></div>
+											<div class="col"><a href="/products/349" title="HD clear big curved edge screen protector">HD clear screen protector</a></div>
+											<div class="col"><a href="/products/350" title="Colored MTB Glass Screen Protector">Colored MTB Glass Screen Protector</a></div>
+											<div class="col"><a href="/products/351" title="Privacy screen protector">Privacy screen protector</a></div>
+											<div class="col"><a href="/products/352" title="Hot bending screen protector">Hot bending screen protector</a></div>
+											<div class="col"><a href="/products/353" title="UV screen protector">UV screen protector</a></div>
+											<div class="col"><a href="/products/354" title="Lace edge screen protector">Lace edge screen protector</a></div>	
+											<div class="col"><a href="/products/355" title="Lace edge screen protector">Big curved edge screen protector</a></div>												
+										</div>
+										<div class="grid-col">
+											<div class="col-header"><a href="/products/categories/for-pc" title="Computer screen protectors">For PC</a></div>
+											<div class="col"><a href="/products/356" title="Clip-on monitor privacy filter">Clip-on monitor privacy filter</a></div>
+											<div class="col"><a href="/products/357" title="PC screen privacy filter">PET screen protector</a></div>
+											<div class="col"><a href="/products/358" title="Magnetic privacy screen protector">Magnetic privacy screen protector</a></div>
+										</div>
+										<div class="grid-col">
+											<div class="col-header"><a href="/products/359" title="Tablet screen protectors">For tablet</a></div>								
+											<div class="col-header"><a href="/products/360" title="Car screen protectors">For car</a></div>
+											<div class="col-header"><a href="/products/361" title="Lens protectors">For phone Lens</a></div>
+										</div>
+									</div>
+								</div>
+						</li>
+                        <li class="nav-item"><a title="News" href="/collections/news">News</a></li>
+                        <li class="nav-item"><a title="" href="/pages/faqs">FAQs</a></li>
+                        <li class="nav-item"><a class="btn" href="/pages/Contact-us">Talk To Us</a></li>
+					</ul>
+				</nav>
+			</div>
+		</div>
+
+		<div class="mobile-nav">
+			<div class="mobile-nav-wrapper">
+				<div class="mobile-logo">
+					<a href="/" title="Mietubl screen protector factory">
+					<img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/logo.svg" class="a" alt="Mietubl logo">
+					<img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/logo-black.svg" class="b" alt="Mietubl logo">
+					</a>
+				</div>
+				<div class="tt-hamburger" id="page-open-main-menu" tabindex="1">
+					<span class="bar"></span>
+					<span class="bar"></span>
+					<span class="bar"></span>
+				</div>
+			</div>
+			<nav class="mobile-main-nav">
+					<ul>
+						<li><a href="/" title="Home page">Home</a></li>
+						<li class="m-sub-nav"><a title="About Mietubl" href="#" >About Us</a>
+							<ul class="m-sub-list">
+								<li><a href="/pages/about-us" title="About us">About Us</a></li>
+								<li><a href="/pages/factory" title="Factory Tour">Factory Tour</a></li>
+							</ul>
+						</li>
+						<li class="m-sub-nav"><a title="About Mietubl" href="#" class="m-sub-nav">Products</a>
+							<ul class="m-sub-list">
+								<li><a href="{URL}" title="Mobile phone screen protectors">For mobile phone</a></li>
+								<li><a href="{URL}" title="Computer screen protectors">For PC</a></li>
+								<li><a href="{URL}" title="Tablet screen protectors">For tablet</a></li>
+								<li><a href="{URL}" title="Car screen protectors">For car</a></li>
+								<li><a href="{URL}" title="Lens protectors">For phone Lens</a></li>
+							</ul>
+						</li>
+						<li><a title="News" href="/collections/news">News</a></li>
+						<li><a title="" href="/pages/faq">FAQs</a></li>
+						<li><a class="btn" href="/contact">Talk to us</a></li>
+					</ul>
+			</nav>
+		</div>
+
+	</div>
+</header>

resources/appearance/screenprotector/collection_list.liquid

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country}}">
+<head><meta charset="UTF-8">
+	<title>{{tag.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">{{tag.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="news-list-page">
+	<div class="section-wrapper">
+		<div class="container">
+		<aside class="recent">
+			<h2>Recent post</h2>
+			<ul class="title-block">
+                {% for item in pages %}
+				<li>  <a href="/pages/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}" title="{{ item.title | strip_html }}">{{ item.title | strip_html }}</a></li>
+		        {% endfor %}
+			</ul>
+		</aside>
+		<div class="news-list">
+            {% for item in pages %}
+			<div class="news-item">
+			<div class="post-thumbnail">
+                <a href="/pages/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}" title="{{ item.title | strip_html }}">
+
+                {% if item.cover_image %}
+                    <img src="{% if item.cover_image contains 'http' %}{{ item.cover_image }}{% else %}{{ site.image_base_url }}{{ item.cover_image }}{% endif %}" alt="Cover Image">
+                {% else %}
+                    <img src="{{ site.image_base_url }}static/common/images/product_default.jpg" class="img-center default-image-thumbnail" alt="{{ item.title | strip_html }}" >
+                {% endif %}
+                </a>
+			</div>
+			<div class="blog-content">
+				<h2 class="entry-title"><a href="/pages/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}" title="{{ item.title | strip_html }}"> {{ item.title | decode_html_entities | strip_html }}</a></h2>
+				<div class="entry-content">
+					<p>
+                        {% if  item.seo_description %}
+                            {{ item.seo_description }}
+                        {% else %}
+                            No description available.
+                        {% endif %}
+                    </p>
+				</div>
+                <a href="/pages/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}" title="{{ item.title | strip_html }}" class="tt-btn">
+					Read More					<i class="fas fa-arrow-right"></i>
+				</a>
+
+			</div>
+			</div><!--news-item-->
+            {% endfor %}
+
+
+		</div>
+		</div><!--container-->
+	</div>
+</section>
+
+{% include '_footer.liquid' %}
+	</body>
+</html>

resources/appearance/screenprotector/home.liquid

@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country}}">
+<head><meta charset="UTF-8">
+	<title>{{site.dist.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.seo_title}}" />
+	<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  | strip_html| strip_newlines }}" />
+	<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' %}
+			<div class="banner">
+			<div class="banner-text-box">
+			<div  class="e-con-inner">
+				<div class="elementor-element">
+					<div class="elementor-widget-container">
+					<h2 mtb_edit="1" id="isjxbi" class="banner-text-heading-title">Leading Screen Protector Supplier - Factory
+					Direct Supply</h2>
+					</div>
+				</div>
+				<div class="banner-text-sub-title">
+					<div class="elementor-widget-container">
+								<p mtb_edit="1" id="iq1adr">Bulk Orders, High-Quality, Direct from the Source.</p>
+					</div>
+				</div>
+				<div class="elementor-element banner-text-sub-button">
+					<div class="elementor-widget-container">
+						<div class="elementor-button-wrapper">
+							<a href="/contact" mtb_edit="2" id="i2wkmk"> <span class="elementor-button-content-wrapper elementor-button elementor-button-link elementor-size-sm"> <span mtb_edit="2" id="iwqw3l" class="elementor-button-text">Request a Factory Quote</span> </span> </a>
+						</div>
+					</div>
+				</div>
+			</div>
+			</div>
+			</div>
+<section class="index-about-section">
+		<div class="section-wrapper">
+		<div class="e-con-inner">
+
+            <div class="left-box">
+                <div class="elementor-element elementor-element-4fb7960 elementor-widget elementor-widget-heading" data-id="4fb7960" data-element_type="widget" data-widget_type="heading.default">
+                    <div class="elementor-widget-container">
+                        <h2 mtb_edit="1" id="iimbbw" class="elementor-heading-title elementor-size-default">About Us</h2>
+					</div>
+                </div>
+                <div class="elementor-widget-container">
+                    <p mtb_edit="1" >Mietubl, originated from Made in China, growing up with intellectually manufactured in China. Focus on product intelligence, resource integration in all aspects of product circulation, construction of ecological chain.</p>
+					
+					<p mtb_edit="1">With years of industry experience, Mietubl has become one of the leading brands in the market. It has innovatively established several industry standards and is committed to providing better screen protectors for users worldwide.</p>
+                </div>
+                <div class="elementor-widget-container">
+                    <div class="elementor-button-wrapper">
+                        <a href="/pages/about-us" mtb_edit="2" id="ir2b6v" class="elementor-button elementor-button-link elementor-size-sm"> <span class="elementor-button-content-wrapper"> <span mtb_edit="1" id="iqrkd1" class="elementor-button-text">Learn More</span> </span> </a>
+                    </div>
+                </div>
+            </div><!--left-box-->
+
+
+		<div class="right-box">
+					<div class="elementor-widget-container">
+						<div class="right-box-video">
+							<img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/videobg.jpg">
+							<div class="play" aria-label="Play Video about mobile phone parts wholesale">
+									<svg aria-hidden="true" class="e-font-icon-svg e-eicon-play" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M838 162C746 71 633 25 500 25 371 25 258 71 163 162 71 254 25 367 25 500 25 633 71 746 163 837 254 929 367 979 500 979 633 979 746 933 838 837 929 746 975 633 975 500 975 367 929 254 838 162M808 192C892 279 933 379 933 500 933 621 892 725 808 808 725 892 621 938 500 938 379 938 279 896 196 808 113 725 67 621 67 500 67 379 108 279 196 192 279 108 383 62 500 62 621 62 721 108 808 192M438 392V642L642 517 438 392Z"></path></svg>
+							</div>
+					</div>
+					</div>
+		</div><!--right-box-->
+	</div>
+	</div><!--section-wrapper-->
+</section>
+
+<section class="index-factory-section">
+	<div class="e-con-inner">
+	<h1 mtb_edit="1" id="iadfu5">Screen Protector Production Lines</h1>
+	<div mtb_edit="1" id="iqnj1b" class="sub-text">Quality is the foundation of our business. With advanced glass processing and validation equipment <br/> we deliver high-quality screen protectors to users worldwide. Contact us to learn more.</div>
+	<div class="factory-tour">
+		<div class="swiper mySwiper">
+		  <div class="swiper-wrapper">
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-2.webp" alt="Screen protector manufacture">
+				</div>
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-3.webp" alt="Screen protector manufacture">
+				</div>
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-4.webp" alt="Screen protector manufacture">
+				</div>
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-5.webp" alt="Screen protector manufacture">
+				</div>
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-6.webp" alt="Manufacturing screen protector">
+				</div>
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-7.webp" alt="Manufacturing screen protector">
+				</div>
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-8.webp" alt="Manufacturing screen protector">
+				</div>
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-9.webp" alt="Manufacturing screen protector">
+				</div>
+		  </div>
+		</div>
+		  <div class="pre"></div>
+		  <div class="next"></div>
+	</div>
+	</div><!--e-con-inner-->
+</section>
+
+
+<section class="index-product-section">
+	<div class="e-con-inner">
+		<h2 mtb_edit="1" id="iisxts" class="heading-title">Hot Screen Protector Series</h2>
+			<div mtb_edit="1" id="itwepi" class="sub-title">
+					
+Mietubl offers comprehensive solutions, working closely with customers to develop the best solutions for their needs.<br/> And dedicated to providing high-cost-performance screen protector products to users worldwide.
+			</div>
+
+        {% product  mode="list" limit=8 template='__product_list_1.liquid' %}
+
+
+
+	</div>
+</section>
+
+<section class="index-factory2-section">
+	<div class="section-wrapper">
+			<h2 mtb_edit="1" id="io77wi" class="heading-title">Screen protector factory</h2>
+			<p mtb_edit="1" id="i0x8xk" class="sub-title">Leveraging premium supply chain resources to meet the dynamic demands of the industry.</p>
+			<a href="/pages/factory" mtb_edit="1" id="ib28se"> <span class="button">Visit our factory</span> </a>
+	</div>
+</section>
+
+<section class="index-material">
+	<div class="section-wrapper">
+		<h3 class="material-header">UTG Glass Technology</h3>
+		<div class="material-text">UTG (Ultra-Thin Glass), as a cutting-edge material, has been widely adopted in recent years for foldable smartphones, serving as a core protective component for their screens. 
+
+Compared to other screen protector materials, UTG glass offers exceptional optical transparency, creating an almost invisible layer that does not interfere with display performance while preserving the screen’s true colors and brightness. Despite being only a few micrometers thick, UTG glass maintains remarkable hardness, effectively resisting daily scratches and impacts. It flawlessly restores the screen's visual quality while providing robust protection. By incorporating UTG technology, we are equipped to deliver more advanced and reliable screen protection solutions to users worldwide.</div>
+	</div>
+</section>
+
+<section class="about-customer-section">
+	<div class="section-wrapper">
+		<div class="showcase">
+			<div class="zoom-in-pic">
+				<div class="pic active"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/customer1.jpg"></div>
+				<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/customer2.jpg"></div>
+				<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/customer3.jpg"></div>
+				<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/customer4.jpg"></div>
+				<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/customer5.jpg"></div>				
+			</div>
+			<div class="reviews">
+				<h2 mtb_edit="1">What Our Customers Say</h2>
+				<div class="reviews-content  active">
+					The customer service team at Mietubl is quick to respond and provides personalized solutions. Their professionalism and patience left a great impression on us.
+				</div>
+				
+				<div class="reviews-content">
+					The screen protectors from Mietubl are of excellent quality—durable and easy to install. We are very satisfied with their customization services; they perfectly meet our needs!
+				</div>
+				<div class="reviews-content">
+					A big thank you to the Mietubl team for their support—they gave us valuable advice while designing our customized products. The cooperation has been a pleasure.
+				</div>
+				<div class="reviews-content">
+					We are impressed with Mietubl's ability to meet deadlines. Our orders are always delivered as promised, allowing us to plan ahead and avoid any delays in our operations.
+				</div>					
+				<div class="reviews-content">
+					Since we’ve been working with Mietubl, their delivery services have been consistently reliable. They always deliver on time, and there have been no issues with shipping—this has greatly improved our operational efficiency.
+				</div>
+			
+				<div class="preview-pic">
+					<ul>
+						<li class="pic active"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/customer1.jpg"></li>
+						<li class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/customer2.jpg"></li>
+						<li class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/customer3.jpg"></li>
+						<li class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/customer4.jpg"></li>
+						<li class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/customer5.jpg"></li>						
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
+
+
+{% include '__contact.liquid' %}
+
+
+<section class="index-article-section">
+	<div class="section-wrapper">
+		<h2 mtb_edit="1" id="i1otcj" class="heading-title">Recent Posts</h2>
+		<div class="blog-widget">
+
+            {% collection slug="news" limit=3 template="__collection_list_1.liquid" %}
+
+
+		</div>
+
+		<div class="more">
+			<a href="/collections/news"><span class="btn">View more information</span></a>
+		</div>
+	</div>
+</section>
+
+
+{% include '_footer.liquid' %}
+<script>
+  var swiper1=new Swiper(".mySwiper", {
+  	    autoplay:true,
+        slidesPerView: 3,
+        slidesPerGroup: 3,
+		speed:1000,
+        loop: true,
+		navigation: {
+			  nextEl: '.pre',
+			  prevEl: '.next',
+			},
+		 breakpoints: {
+          320: {
+            slidesPerView: 1,
+			slidesPerGroup: 1,
+			spaceBetween: 10,			
+          },
+          768: {
+            slidesPerView: 2,
+			slidesPerGroup:2,
+			spaceBetween: 10,			
+          },
+          900: {
+            slidesPerView: 3,
+			slidesPerGroup:3,
+			spaceBetween: 10,			
+          },
+          1024: {
+            slidesPerView: 3,
+			slidesPerGroup:3,
+			spaceBetween: 10,
+          },
+        },
+      });
+</script>
+	</body>
+</html>

resources/appearance/screenprotector/pages_detail.liquid

@@ -0,0 +1,89 @@
+
+<!DOCTYPE html>
+<html lang="{{site.dist.country}}">
+<head><meta charset="UTF-8">
+    <title>{{page.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.seo_title }}" />
+    <meta property="og:description" content="{{ site.dist.seo_description  | strip_html| strip_newlines }}" />
+    <meta property="og:url" content="{{site.current_url}}" />
+    <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>
+
+</head>
+<body>
+{% include '_header.liquid' %}
+<section class="news-header">
+	<div class="section-wrapper">
+		<h1 class="page-title">{{ page.title | raw }}</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="news-list-page">
+	<div class="section-wrapper">
+		<div class="container">
+		<aside class="recent">
+			<h2>Recent post</h2>
+			<ul class="title-block">				
+				 {% for item in recent_pages %}
+				<li>  <a href="/pages/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}" title="{{ item.title | strip_html }}">{{ item.title | strip_html }}</a></li>
+		        {% endfor %}
+			</ul>
+		</aside>
+		<div class="news-details">
+			<div class="news-details-content">
+				<h2 class="entry-title">  {{ page.title | raw }}</h2>
+				<div class="entry-meta"><time class="entry-time"> {{page.post_date}}</time> by <span class="entry-author"><span class="entry-author-name">{{site.dist.site_name}}</span></span></div>
+				<div class="entry-content">
+					  {{page.content | raw }}
+				</div>
+
+			</div>
+			<div class="pagination">
+
+			                 <!-- Previous Page Link -->
+                                        {% if paginator.previous_page %}
+                                         
+                                         
+						<div class="pre"><a href="{{ paginator.previous_page_url }}" title="{{ paginator.previous_page_title }}">{{ paginator.previous_page_title }}</a></div>
+                                           
+                                        {% else %}
+                                            
+                                        {% endif %}
+
+                                        <!-- Next Page Link -->
+                                        {% if paginator.next_page %}
+					<div class="next"><a href="{{ paginator.next_page_url }}" title="{{ paginator.next_page_title }}">{{ paginator.next_page_title }}</a></div>
+                                          
+                                        {% else %}
+                                           
+                                        {% endif %}
+
+				
+			</div>
+		</div>	
+		</div><!--container-->
+	</div>
+</section>
+{% include '__contact.liquid' %}
+{% include '_footer.liquid' %}
+	</body>
+</html>
+
+ 

resources/appearance/screenprotector/pages_sp_about.liquid

@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country}}">
+<head><meta charset="UTF-8">
+    <title>{{page.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.seo_title }}" />
+    <meta property="og:description" content="{{ site.dist.seo_description  | strip_html| strip_newlines }}" />
+    <meta property="og:url" content="{{site.current_url}}" />
+    <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-banner">
+	<div class="section-wrapper">
+		<div class="page-banner-text">
+			<h2 mtb_edit="1">Leading the screen protector industry standard </h2>
+			<div mtb_edit="1">With years of experience in the screen protector industry, Mietubl has established numerous unique standards thanks to its exceptional innovation capabilities and rigorous quality control systems. We cater to the global market and have built a strong customer base around the world.
+			</div>
+        </div>
+	</div>
+</section>
+
+
+<section class="index-about-section">
+		<div class="section-wrapper">
+		<div class="e-con-inner">
+			<div class="left-box">
+				<div class="elementor-element elementor-element-4fb7960 elementor-widget elementor-widget-heading" data-id="4fb7960" data-element_type="widget" data-widget_type="heading.default">
+				<div class="elementor-widget-container">
+					<h2 class="elementor-heading-title elementor-size-default">{{ page.title }}</h2>		</div>
+				</div>
+				<div class="elementor-widget-container">
+					<p>{{ page.content |raw }}</p>
+				</div>
+			</div><!--left-box-->
+
+		<div class="right-box">
+					<div class="elementor-widget-container">
+						<div class="right-box-video">
+							<img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/videobg.jpg">
+							<div class="play" aria-label="Play Video about mobile phone parts wholesale">
+									<svg aria-hidden="true" class="e-font-icon-svg e-eicon-play" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M838 162C746 71 633 25 500 25 371 25 258 71 163 162 71 254 25 367 25 500 25 633 71 746 163 837 254 929 367 979 500 979 633 979 746 933 838 837 929 746 975 633 975 500 975 367 929 254 838 162M808 192C892 279 933 379 933 500 933 621 892 725 808 808 725 892 621 938 500 938 379 938 279 896 196 808 113 725 67 621 67 500 67 379 108 279 196 192 279 108 383 62 500 62 621 62 721 108 808 192M438 392V642L642 517 438 392Z"></path></svg>
+							</div>
+					</div>
+					</div>
+		</div><!--right-box-->
+		</div><!--e-con-inner-->
+	</div><!--section-wrapper-->
+</section>
+
+<section class="index-factory-section">
+	<div class="e-con-inner">
+		<div class="con-data">
+		<div class="inner-widget">
+			<div class="widget-pic"><img width="43" height="49" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/001-1.png" alt="" /></div>
+			<div class="widget-text">
+				<div class="box1">
+					<span class="counter-number" data-to-value="130" data-from-value="0" mtb_edit="1">0</span>
+					<span class="suffix">+</span>
+				</div>
+				<div class="box2" mtb_edit="1">
+					Customers in more than 130 countries
+				</div>
+			</div>
+		</div>
+		<div class="inner-widget">
+			<div class="widget-pic"><img width="43" height="49" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/002.png" alt="" /></div>
+			<div class="widget-text">
+				<div class="box1">
+					<span class="counter-number" data-to-value="10000" data-from-value="0" mtb_edit="1">0</span>
+					<span class="suffix">㎡</span>
+				</div>
+				<div class="box2" mtb_edit="1">
+					Square Meters of Factory
+				</div>
+			</div>
+		</div>
+		<div class="inner-widget">
+			<div class="widget-pic"><img width="43" height="49" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/003.png" alt="" /></div>
+			<div class="widget-text">
+				<div class="box1">
+					<span class="counter-number" data-to-value="8000000" data-from-value="0" mtb_edit="1">0</span>
+				</div>
+				<div class="box2" mtb_edit="1">
+					Screens protector Produced Per Month
+				</div>
+			</div>
+		</div>
+
+	</div><!--con-data-->
+
+	<div class="factory-tour">
+		<div class="swiper mySwiper">
+		  <div class="swiper-wrapper">
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-2.webp" alt="Screen protector manufacture">
+				</div>
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-3.webp" alt="Screen protector manufacture">
+				</div>
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-4.webp" alt="Screen protector manufacture">
+				</div>
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-5.webp" alt="Screen protector manufacture">
+				</div>
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-6.webp" alt="Manufacturing screen protector">
+				</div>
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-7.webp" alt="Manufacturing screen protector">
+				</div>
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-8.webp" alt="Manufacturing screen protector">
+				</div>
+				<div class="swiper-slide">
+					<img class="image" src="{{ site.asset_base_url}}static/tpl/screenprotector/images/factory-9.webp" alt="Manufacturing screen protector">
+				</div>
+		  </div>
+		</div>
+		  <div class="pre"></div>
+		  <div class="next"></div>
+	</div>
+	</div><!--e-con-inner-->
+</section>
+
+<section class="about-why-us">
+		<div class="section-wrapper">
+			<div class="heading-text"><h2 mtb_edit="1">Why Choose Us</h2></div>
+			<div class="sub-text" mtb_edit="1">With many years of experience and strong supply chain management and production capabilities, we are able to provide reliable, high-quality products at competitive prices to customers worldwide.</div>
+			<div class="why-grid">
+				<div class="grid-item">
+					<div class="item-wrapper">
+					<div class="item-title">Long Time Experience</div>
+					<div class="item-content">Established with exacting standards and rich experience, Mietubl boasts over 20 years of specialization in mobile accessories, beginning with screen protector. We have accumulated abundant resources to deliver reliable product solutions to our clients.</div>
+					</div>
+				</div>
+				<div class="grid-item">
+					<div class="item-wrapper">
+					<div class="item-title">Integrated Supply Chain</div>
+					<div class="item-content">We are a seamlessly integrated system of business and production, leveraging advanced manufacturing resources in China to offer cost-effective products to global users.</div>
+					</div>
+				</div>
+				<div class="grid-item">
+					<div class="item-wrapper">
+					<div class="item-title">Quality Control Management</div>
+					<div class="item-content">Multiple quality control processes ensure stable product quality, addressing customer concerns effectively; we prioritize product quality above all else.</div>
+					</div>
+				</div>
+				<div class="grid-item">
+					<div class="item-wrapper">
+					<div class="item-title">Strong Logistics Management</div>
+					<div class="item-content">With over 10000 square meters of proprietary industrial base, more than 5 million units of regular inventory, and multiple logistics partners, we ensure timely and accurate delivery of all orders.</div>
+					</div>
+				</div>
+
+			</div>
+		</div>
+</section>
+
+
+{% include '__contact.liquid' %}
+
+{% include '_footer.liquid' %}
+<script>
+  var swiper1=new Swiper(".mySwiper", {
+  	    autoplay:true,
+        slidesPerView: 3,
+        slidesPerGroup: 3,
+		speed:1000,
+        loop: true,
+		navigation: {
+			  nextEl: '.pre',
+			  prevEl: '.next',
+			},
+		 breakpoints: {
+          320: {
+            slidesPerView: 1,
+			slidesPerGroup: 1,
+			spaceBetween: 10,			
+          },
+          768: {
+            slidesPerView: 2,
+			slidesPerGroup:2,
+			spaceBetween: 10,			
+          },
+          900: {
+            slidesPerView: 3,
+			slidesPerGroup:3,
+			spaceBetween: 10,			
+          },
+          1024: {
+            slidesPerView: 3,
+			slidesPerGroup:3,
+			spaceBetween: 10,
+          },
+        },
+      });
+</script>
+</body>
+</html>

resources/appearance/screenprotector/pages_sp_contact.liquid

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country}}">
+<head><meta charset="UTF-8">
+     <title>{{page.seo_title}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="keywords" content="{{ page.seo_keywords}}" />  
+    <meta name="description" content="{{page.seo_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.seo_title }}" />
+    <meta property="og:description" content="{{ site.dist.seo_description  | strip_html| strip_newlines }}" />
+    <meta property="og:url" content="{{site.current_url}}" />
+    <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">Contact Us </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="contact-companies">
+	<div class="section-wrapper" mtb_edit="1">
+		<h1>Welcome to talk to us</h1>
+		<div class="rich-text">We are ready to assist if you have any of the following needs.</div>
+	<div class="contact-grid">
+		<div class="contact-grid-item">
+			<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/contact-icon5.svg"></div>
+				<div class="heading-group">
+				<h3 class="text-balance">Find new suppliers</h3>
+				<p class="richtex">Looking for a new supplier? Talk to our team and let us know your needs – we’d love to become your trusted business partner.</p>
+				</div>
+		</div>
+		
+		<div class="contact-grid-item">
+			<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/contact-icon2.svg"></div>
+				<div class="heading-group">
+				<h3 class="text-balance">Competitive products</h3>
+				<p class="richtex">With our robust supply chain integration capabilities, we can provide you with high-quality, cost-effective products, talk to our team now and get a price list.</p>
+				</div>
+		</div>
+		<div class="contact-grid-item">
+			<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/contact-icon1.svg"></div>
+				<div class="heading-group">
+				<h3 class="text-balance">Technical support</h3>
+				<p class="richtex">Please share your innovative product ideas with us, and we will work closely with you every step of the way to bring them to life.</p>
+				</div>
+		</div>
+		<div class="contact-grid-item">
+			<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/contact-icon3.svg"></div>
+				<div class="heading-group">
+				<h3 class="text-balance">OEM service</h3>
+				<p class="richtex">
+				If you have any specific design requirements, such as different sizes, materials, or features, our R&D and design team would be happy to help.
+				</p>
+				</div>
+		</div>
+		
+		<div class="contact-grid-item">
+			<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/contact-icon4.svg"></div>
+				<div class="heading-group">
+				<h3 class="text-balance">One-stop service</h3>
+				<p class="richtex">Our dedicated customer support team is available to assist with any order-related inquiries, from various products to shipping status. And ensure complete customer satisfaction.</p>
+				</div>
+		</div>
+		<div class="contact-grid-item">
+			<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/contact-icon6.svg"></div>
+				<div class="heading-group">
+				<h3 class="text-balance">Stable supply chain</h3>
+				<p class="richtex">With our own factory and a production facility of over 10,000 square meters, along with ample regular stock, we are able to respond quickly to orders of any size.</p>
+				</div>
+		</div>
+	</div>
+	</div><!--section-wrapper-->
+</section>
+
+
+
+{% include '__contact.liquid' %}
+
+{% include '_footer.liquid' %}
+<script>
+  var swiper1=new Swiper(".mySwiper", {
+  	    autoplay:true,
+        slidesPerView: 3,
+        slidesPerGroup: 3,
+		speed:1000,
+        loop: true,
+		navigation: {
+			  nextEl: '.pre',
+			  prevEl: '.next',
+			},
+		 breakpoints: {
+          320: {
+            slidesPerView: 1,
+			slidesPerGroup: 1,
+          },
+          768: {
+            slidesPerView: 2,
+			slidesPerGroup:2,
+          },
+          900: {
+            slidesPerView: 3,
+			slidesPerGroup:3,
+          },
+          1024: {
+            slidesPerView: 3,
+			slidesPerGroup:3,
+          },
+        },
+      });
+</script>
+	</body>
+</html>

resources/appearance/screenprotector/pages_sp_factory_tour.liquid

@@ -0,0 +1,310 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country}}">
+<head><meta charset="UTF-8">
+	<title>{{page.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="{{page.seo_title}}" />
+	<meta property="og:description" content="{{ site.dist.seo_description  | strip_html| strip_newlines }}" />
+	<meta property="og:url" content="{{site.current_url}}" />
+	<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="video-banner">
+	<div class="bg-video">
+		<video autoplay muted loop >
+			<source src="{{ site.asset_base_url}}static/tpl/screenprotector/images/video-banner.webm" type="video/webm">	
+			<source src="{{ site.asset_base_url}}static/tpl/screenprotector/images/video-banner.mp4" type="video/mp4">
+			  <p>Your browser does not support the video tag or the file format.</p>
+		</video>
+	</div>
+	<h1 mtb_edit="1">Screen Protector Manufacturer Wholesaler</h1>
+</section>
+
+<section class="factory-section">
+	<div class="thumb">
+		<img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/2023-12-08.jpg" alt="Screen protector Manufacturer Wholesaler" mtb_edit="1">
+	</div>
+	<div class="block-content">
+			<h2 mtb_edit="1">Screen protector solutions to <br>  meet your unique needs</h2>
+			<div class="content-text">
+				<p mtb_edit="1">Electronic devices have become an essential part of daily life, and screen protector is crucial to safeguard devices from scratches and damage. We understand that every customer who is engaged in the screen protector business pursues product uniqueness. </p>
+				<p mtb_edit="1">
+				As an experienced manufacturer of screen protectors, Mietubl is dedicated to providing customized solutions for global distributors, retailers, and OEM clients. We have established several industry benchmark standards to ensure that each product meets the highest quality requirements. Whether for smartphones, tablets, laptops , computer screens, or camera lenses, we offer tailored solutions to meet the diverse needs of different markets and clients. Contact us to learn more about our customization services!</p>
+			</div>
+	</div>
+</section>
+
+<section class="factory-department">
+	<div class="section-wrapper">
+		<h3 mtb_edit="1">Assembly Line</h3>
+		<div class="departments" mtb_edit="1">
+			<div class="dep">
+				<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/Assembly1.jpg" alt="Cutting glass"></div>
+				<div class="content">
+					<div class="header">Cutting glass</div>
+					<div class="detail">Cutting raw big glass into small pieces with CNC cutting machine.</div>
+				</div>
+			</div>
+
+			<div class="dep">
+				<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/Assembly2.jpg" alt="Fine water jet cutting"></div>
+				<div class="content">
+					<div class="header">Fine water jet cutting</div>
+					<div class="detail">The glass is processed into the required screen protector model by a glass water jet with an accuracy of up to 0.1mm, so that it can match the screen size.</div>
+				</div>
+			</div>
+
+			<div class="dep">
+				<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/Assembly3.jpg" alt="Polished Edges"></div>
+				<div class="content">
+					<div class="header">Polished Edges</div>
+					<div class="detail">The screen protector is polished into an extra-large curved edge using a fast-rotating polishing device,so that it can fit the curvature of the original screen.</div>
+				</div>
+			</div>
+			<div class="dep">
+				<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/Assembly4.jpg" alt="Ultrasonic cleaning"></div>
+				<div class="content">
+					<div class="header">Ultrasonic cleaning</div>
+					<div class="detail">The screen protector is cleaned through a multi-pass ultrasonic cleaning process to ensure a high degree of cleanliness during the production process and reduce defects caused by contamination.</div>
+				</div>
+			</div>
+
+			<div class="dep">
+				<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/Assembly5.jpg" alt="Ion Exchange"></div>
+				<div class="content">
+					<div class="header">Ion Exchange</div>
+					<div class="detail">Screen protectors that undergo Ion exchange at high temperatures have better durability and scratch resistance, and can better protect mobile phone screens from scratches and impact damage.</div>
+				</div>
+			</div>
+
+			<div class="dep">
+				<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/Assembly6.jpg" alt="Tempered glass"></div>
+				<div class="content">
+					<div class="header">Tempered</div>
+					<div class="detail">The tempered treatment can make the material have high strength and high toughness. The improvement of these properties helps the screen protector to better protect the mobile phone screen when it is impacted.</div>
+				</div>
+			</div>
+			<div class="dep">
+				<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/Assembly7.jpg" alt="Silkscreen"></div>
+				<div class="content">
+					<div class="header">Silkscreen</div>
+					<div class="detail">"By using silk-screen printing, the screen protector is enhanced with aesthetic appeal and personalization, increasing its recognizability.</div>
+				</div>
+			</div>
+
+			<div class="dep">
+				<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/Assembly8.jpg" alt="Plasma coating"></div>
+				<div class="content">
+					<div class="header">Plasma coating </div>
+					<div class="detail">Plasma coating effectively reduces fingerprint smudges, helping to maintain the cleanliness and clarity of the phone screen, thereby improving the overall user experience.</div>
+				</div>
+			</div>
+
+			<div class="dep">
+				<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/Assembly9.jpg"></div>
+				<div class="content">
+					<div class="header">Inspection and packaging</div>
+					<div class="detail">Each screen protector needs to go through multiple inspection processes to ensure stable product quality and is well packed to ensure that users get products of consistent quality.</div>
+				</div>
+			</div>			
+		</div>
+	</div>
+</section>
+
+<section class="factory-oem">
+	<div class="section-wrapper">
+		<h3 mtb_edit="1">Custom Screen Protector Manufacturing Capabilities</h3>
+		<div class="sub-text" mtb_edit="1">By choosing us as your screen protector manufacturer, we can help elevate your brand through services like glass etching, screen printing, and custom packaging. Whether you need a smartphone screen protector, car screen protector,or any other type, you can rely on Mietubl expertise to provide the optimal solution for your requirements. Contact us to discuss your project today!</div>
+	</div>
+</section>
+
+<section class="categories" mtb_edit="1">
+		<div class="section-wrapper">
+		<h3 class="heading-title">Our solutions for you</h3>
+		<div class="category">
+			<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/phone.jpg" alt="Mobile phone screen protector"></div>
+			<div class="category-text">
+					<h3>Mobile phone screen protector</h3>
+					<div> With the widespread use of smartphones, screens have become one of the most vulnerable parts to damage. As mobile accessory distributors and wholesalers, you may face challenges such as diverse customer needs, intense price competition, and the search for high-quality products. We understand that the demand for screen protectors varies across different markets—whether it’s impact resistance, high-definition display, or ease of installation.Welcome to talk to us.</div>
+
+					<div class="features">
+					<div><p><strong>Features</strong></p></div>
+					<div>
+					<ul>
+						<li>
+							<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/scratch.svg" alt="Scratch resistant"></div>
+							<div class="t">Scratch resistant</div>
+						</li>
+						<li>
+							<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/curvededge.svg" alt="Polished edges"></div>
+							<div class="t">Polished edges</div>
+						</li>
+						<li>
+							<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/HD.svg" alt="98% optical clarity"></div>
+							<div class="t">High optical clarity</div>
+						</li>
+						<li>
+							<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/fingerprint.svg" alt="Anti-fingerprint"></div>
+							<div class="t">Anti-fingerprint</div>
+						</li>
+
+					</ul>
+					</div>
+					</div>
+			</div>
+		</div>
+		<div class="category">
+			<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/tablet.jpg" alt="Tablet screen protector"></div>
+			<div class="category-text">
+					<h3>Tablet screen protector</h3>
+					<div> As a distributor or wholesaler, you need to provide high-quality screen protectors that meet market demands. Our tablet screen protectors are compatible with a wide range of popular tablet brands, including iPad, Samsung Galaxy Tab, and more. Each product undergoes strict quality control to ensure durability and long-lasting protection..</div>
+					<div class="features">
+					<div><p><strong>Features</strong></p></div>
+					<div>
+					<ul>
+						<li>
+							<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/scratch.svg" alt="Scratch resistant"></div>
+							<div class="t">Scratch resistant</div>
+						</li>
+						<li>
+							<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/touch.svg" alt="Touch sensitive"></div>
+							<div class="t">Touch sensitive</div>
+						</li>
+						<li>
+							<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/fingerprint.svg" alt="Anti-fingerprint"></div>
+							<div class="t">Anti-fingerprint</div>
+						</li>
+
+					</ul>
+					</div>
+					</div>
+			</div>
+		</div>
+		<div class="category">
+			<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/car.jpg" alt="Car screen protector"></div>
+			<div class="category-text">
+					<h3>Car screen protector</h3>
+					<div> In-vehicle navigation systems have become an essential part of modern vehicles,  We understand the unique requirements of vehicle navigation screens, and offer high-performance screen protector solutions designed to meet these needs.</div>
+					<div class="features">
+					<div><p><strong>Features</strong></p></div>
+					<div>
+					<ul>
+						<li>
+							<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/scratch.svg" alt="Scratch resistant"></div>
+							<div class="t">Scratch resistant</div>
+						</li>
+						<li>
+							<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/guang.svg" alt="Anti-glare"></div>
+							<div class="t">Anti-glare</div>
+						</li>
+						<li>
+							<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/touch.svg" alt="Touch sensitive"></div>
+							<div class="t">Touch sensitive</div>
+						</li>
+						<li>
+							<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/fingerprint.svg" alt="Anti-fingerprint"></div>
+							<div class="t">Anti-fingerprint</div>
+						</li>
+
+					</ul>
+					</div>
+					</div>
+			</div>
+		</div>
+		<div class="category">
+			<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/lens.jpg" alt="Lens protector"></div>
+			<div class="category-text">
+					<h3>Lens protector</h3>
+					<div> As the camera function of electronic products becomes more and more powerful, dealers and consumers may face the challenge of protecting mobile phones while maintaining the clarity of photos and not increasing the thickness. Mietubl's innovative AR series lens protector may be your best choice.</div>
+					<div class="features">
+					<div><p><strong>Features</strong></p></div>
+					<div>
+					<ul>
+						<li>
+							<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/scratch.svg" alt="Scratch resistant"></div>
+							<div class="t">Scratch resistant</div>
+						</li>
+						<li>
+							<div class="icon"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/HD.svg" alt="High-definition photo clarity"></div>
+							<div class="t">Photo clarity</div>
+						</li>
+					</ul>
+					</div>
+					</div>
+			</div>
+		</div>
+		</div><!--section-wrapper-->
+</section>
+
+
+
+<section class="factory-service">
+	<div class="section-wrapper" mtb_edit="1">
+		<h3>Best Services to Drive Your Business</h3>
+		<div class="service">
+			<div class="service-box">
+				<div class="heading">Full-spectrum of devices</div>
+				<div class="content">We have a comprehensive range of production equipment, including CNC cutting machines, edge polishing machines, ultrasonic cleaning devices, tempered quenching equipment, silk-screen printing machines, and plasma coating machines, among others. With this full range of equipment, we are able to provide complete product solutions for our customers.</div>
+			</div>
+
+			<div class="service-box">
+				<div class="heading">Own R&D team</div>
+				<div class="content">Our technical team, composed of professional engineers, allows us to offer personalized services ranging from product development to packaging design. Our team would be happy to discuss your new product ideas with you.</div>
+			</div>
+
+			<div class="service-box">
+				<div class="heading">Strict quality control system</div>
+				<div class="content">We adhere to strict production and quality inspection standards, with all products undergoing multiple testing processes. We have the capability to provide highly consistent quality products to customers worldwide.</div>
+			</div>
+		</div>
+	</div>
+</section>
+
+{% include '__contact.liquid' %}
+
+{% include '_footer.liquid' %}
+<script>
+  var swiper1=new Swiper(".mySwiper", {
+  	    autoplay:true,
+        slidesPerView: 3,
+        slidesPerGroup: 3,
+		speed:1000,
+        loop: true,
+        pagination: {
+          el: ".swiper-pagination",
+	      nextEl: ".next",
+          prevEl: ".pre",
+          clickable: true
+        },
+        breakpoints: {
+          320: {
+            slidesPerView: 1,
+			slidesPerGroup: 1,
+          },
+          768: {
+            slidesPerView: 2,
+			slidesPerGroup:2,
+          },
+          900: {
+            slidesPerView: 3,
+			slidesPerGroup:3,
+          },
+          1024: {
+            slidesPerView: 3,
+			slidesPerGroup:3,
+          },
+        },
+      });
+</script>
+	</body>
+</html>

resources/appearance/screenprotector/pages_sp_faq.liquid

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country}}">
+<head><meta charset="UTF-8">
+	<title>{{page.seo_title}}</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+	<meta name="description" content="{{page.seo_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}}" />
+	<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">{{page.title}}</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="faq-page">
+	<div class="section-wrapper">
+		<div class="faq-box">
+			<p>{{ page.content |raw }}</p>
+		</div>
+	</div>
+</section>
+
+{% include '__contact.liquid' %}
+
+{% include '_footer.liquid' %}
+	</body>
+</html>

resources/appearance/screenprotector/products_categories.liquid

@@ -0,0 +1,72 @@
+<!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="keywords" content="{{ site.dist.seo_keywords" />
+	<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/common/images/product_default.jpg{% endif %}"
+                            alt="{{ item.title | strip_html }}"></div>
+                        {% else %}
+                            <img src="{{ site.asset_base_url}}static/common/images/product_default.jpg" alt="{{ item.title | strip_html }}">
+			    <div class="overlay"><img src="{{ site.asset_base_url}}static/common/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>

resources/appearance/screenprotector/products_detail.liquid

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country}}">
+<head><meta charset="UTF-8">
+	<title>{{product.seo_title}} - Screen Protector Factory Directly</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="{{ site.image_base_url }}static/common/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">
+                    {% 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}}">Get Free Sample Now</a></div>
+			</div>
+		</div>
+
+		<div class="product-conent">
+			<div class="description-header">Description</div>
+			<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="{{ site.image_base_url }}static/common/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>

resources/appearance/screenprotector/version.liquid

@@ -0,0 +1 @@
+<!-- update date 2024-12-25 14:04 -->

resources/appearance/tech_vista/__banner_list.liquid

@@ -0,0 +1,68 @@
+<!-- REVOLUTION SLIDER -->
+<div id="rev_slider_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="image-hero39" data-source="gallery">
+    <!-- START REVOLUTION SLIDER 5.3.0.2 fullwidth mode -->
+    <div id="rev_slider_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.3.0.2" >
+        <ul>
+            {% for item in banners %}
+            <li data-index="rs-{{ forloop.index }}" data-transition="slidevertical" data-slotamount="1" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="1500"  data-thumb=""  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="{{ item.title }}" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
+                <!-- MAIN IMAGE -->
+                <a href="{{ item.banner_url }}">
+                    {% assign image_url = item.image_url %}
+                    {% if image_url contains 'http' %}
+                        <img src="{{ image_url }}" alt="" data-bgposition="top center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
+                    {% else %}
+                        <img src="{{ site.image_base_url }}{{ image_url }}" alt="" data-bgposition="top center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
+                    {% endif %}
+                </a>
+
+                <!-- LAYER NR. 2 -->
+                <div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-2-layer-2"
+                     data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
+                     data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
+                     data-fontsize="['16','16','16','16']"
+                     data-lineheight="['16','16','16','16']"
+                     data-width="[300, 300, 300, 300]"
+                     data-height="none"
+                     data-whitespace="nowrap"
+                     data-type="text"
+                     data-responsive_offset="on"
+                     data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
+                     data-textAlign="['left','left','left','left']"
+                     data-paddingtop="[0,0,0,0]"
+                     data-paddingright="[0,0,0,0]"
+                     data-paddingbottom="[0,0,0,0]"
+                     data-paddingleft="[0,0,0,0]"
+                     style="z-index: 11; white-space: nowrap;text-transform:left;">
+
+                    <span class="text-uppercase strong-400">	{{ item.subtitle }}</span>
+
+                </div>
+                <div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-1-layer-3"
+                     data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
+                     data-y="['middle','middle','middle','middle']" data-voffset="['70','70','70','70']"
+                     data-fontsize="['40','40','40','40']"
+                     data-lineheight="['50','40','40','40']"
+                     data-width="[300, 300, 300, 300]"
+                     data-height="none"
+                     data-whitespace="nowrap"
+                     data-type="text"
+                     data-responsive_offset="on"
+                     data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1000,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
+                     data-textAlign="['left','left','left','left']"
+                     data-paddingtop="[0,0,0,0]"
+                     data-paddingright="[0,0,0,0]"
+                     data-paddingbottom="[0,0,0,0]"
+                     data-paddingleft="[0,0,0,0]"
+                     style="z-index: 11; white-space: nowrap;text-transform:left;">
+
+
+                    <span class="strong-600">
+					{{ item.title }}
+					</span>
+                </div>
+            </li>
+            {% endfor %}
+        </ul>
+        <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
+    </div>
+</div><!-- END REVOLUTION SLIDER -->

resources/appearance/tech_vista/__contactus.liquid

@@ -0,0 +1,60 @@
+<h4 >Get a quote</h4>
+<form id="form_contact" data-action="/contact" class="form-default" role="form">
+    <input type="hidden" name="_token" value="{{ csrf_token }}">
+    <input type="hidden" name="consulting_products" value="{{product.title }}">
+    <div class="row">
+        <div class="col-md-6">
+            <div class="form-group has-feedback">
+                <label for="" class="text-uppercase c-gray-light">Your name</label>
+                <input type="text" name="customer_name" class="form-control form-control-lg" required>
+                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                <div class="help-block with-errors"></div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group has-feedback">
+                <label for="" class="text-uppercase c-gray-light">Email address</label>
+                <input type="email" name="email" class="form-control form-control-lg" required>
+                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                <div class="help-block with-errors"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-6">
+            <div class="form-group has-feedback">
+                <label for="" class="text-uppercase c-gray-light">Company name</label>
+                <input type="text" name="company_name" class="form-control form-control-lg">
+                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                <div class="help-block with-errors"></div>
+            </div>
+        </div>
+        <div class="col-sm-6">
+            <div class="form-group has-feedback">
+                <label for="" class="text-uppercase c-gray-light">Phone/whats_app</label>
+                <input type="text" name="whats_app" class="form-control form-control-lg" required>
+                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                <div class="help-block with-errors"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-12">
+            <div class="form-group has-feedback">
+                <label for=""  class="text-uppercase c-gray-light">Message</label>
+                <textarea name="content" class="form-control no-resize" rows="5" required></textarea>
+                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                <div class="help-block with-errors"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="">
+
+
+        <button type="reset" class="btn-reset d-none"></button>
+        <button type="submit" class="btn btn-styled btn-base-1 mt-4">Send message</button>
+    </div>
+</form>

resources/appearance/tech_vista/__product_list_1.liquid

@@ -0,0 +1,47 @@
+
+<div class="row cols-xs-space cols-sm-space cols-md-space">
+{% for item in products %}
+    {% comment %}{{ item.title }} - {{ item.sku }}{% endcomment %}
+
+    <div class="col-lg-4">
+        <div class="block product no-border z-depth-2-top z-depth-2--hover">
+            <div class="block-image ">
+                <a  href="/products/{{ item.id }}" target="_blank" >
+
+                    {% if item.images and item.images[0].image_url %}
+                        {% assign image_url = item.images[0].image_url %}
+                      
+                        {% if image_url contains 'http' %}
+                            <img src="{{ image_url }}" class="img-center default-image-thumbnail">
+                        {% 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">
+                        {% endif %}
+                    {% else %}
+                        <div class="img-center default-image-thumbnail no-image-placeholder-thumbnail">
+                            <span>No Image</span>
+                        </div>
+                    {% endif %}
+                </a>
+                <span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
+            </div>
+
+            <div class="block-body text-center">
+                <h3 class="heading heading-5 strong-600 text-capitalize title-over-flow" >
+                    <a  href="/products/{{ item.id }}" target="_blank"  title=" {{ item.title | strip_html  }}">
+                        {{ item.title |decode_html_entities| strip_html  }}
+                    </a>
+                </h3>
+                <p class="product-description title-over-flow">
+                    {{ item.content | decode_html_entities| strip_html | default: "No description " }}
+                </p>
+                <div class="product-buttons mt-4">
+                    <a href="/products/{{ item.id }}" class="btn  btn-gray-dark btn-circle px-4" target="_blank">
+                        Explore
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endfor %}
+</div>
+

resources/appearance/tech_vista/_footer.liquid

@@ -0,0 +1,73 @@
+<!-- _footer.template -->
+<footer id="footer" class="footer">
+    <div class="footer-top">
+        <div class="container">
+            <div class="row cols-xs-space cols-sm-space cols-md-space">
+                <div class="col-lg-5">
+                    <div class="col">
+
+                        <span class="clearfix"></span>
+                        {% comment %}<span class="heading heading-sm c-gray-light strong-400">Mietubl</span>{% endcomment %}
+                        <h4>
+                            {{site.dist.site_name }}
+                        </h4>
+
+                        <div class="copyright mt-4">
+                            <p>
+                                {{site.dist.copy_right | raw  }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                {% for menu in site.menus_footer %}
+                    {% if menu.show %}
+                        <div class="col-lg-2">
+                            <div class="col">
+                                <h4 class="heading heading-xs strong-600 text-uppercase mb-1">
+                                    {{ menu.title }}
+                                </h4>
+
+                                <ul class="footer-links">
+                                    {% for child in menu.children %}
+                                        {% if child.show %}
+                                            <li>
+                                                <a href="{{ child.uri }}" title="{{ child.title }}">
+                                                    {{ child.title }}
+                                                </a>
+                                            </li>
+                                        {% endif %}
+                                    {% endfor %}
+                                </ul>
+                            </div>
+                        </div>
+                    {% endif %}
+                {% endfor %}
+
+                <div class="col-lg-3">
+                    <div class="col">
+                        <h4 class="heading heading-xs strong-600 text-uppercase mb-1">
+                            Get in touch
+                        </h4>
+
+                        <ul class="social-media social-media--style-1-v4">
+                            <li>
+                                <a href="{{ site.dist.facebook }}" class="facebook" target="_blank" data-toggle="tooltip" data-original-title="Facebook">
+                                    <i class="fa fa-facebook"></i>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="{{ site.dist.instagram }}" class="instagram" target="_blank" data-toggle="tooltip" data-original-title="Instagram">
+                                    <i class="fa fa-instagram"></i>
+                                </a>
+                            </li>
+
+                            </li>
+
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>
+{{ site.dist.statistics_js }}

resources/appearance/tech_vista/_footer_js.liquid

@@ -0,0 +1,64 @@
+<!-- _footer_js.template -->
+
+<!-- SCRIPTS -->
+<!-- Core -->
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/jquery.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/popper.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/bootstrap.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/slidebar.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/classie.js"></script>
+
+<!-- Bootstrap Extensions -->
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/bootstrap-growl.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/scrollpos-styler.js"></script>
+
+<!-- Plugins: Sorted A-Z -->
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/adaptive-backgrounds.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/jquery.countdown.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/dropzone.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/jquery.easypiechart.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/jquery.fancybox.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/flatpickr.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/flip.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/footer-reveal.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/jquery.gradientify.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/headroom.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/jquery.headroom.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/input-mask.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/instafeed.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/jquery.countto.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/nouislider.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/paraxify.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/select2.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/sticky-kit.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/swiper.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/autosize.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/typeahead.bundle.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/typed.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/vide.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/viewportchecker.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/wow.min.js"></script>
+
+<!-- Isotope -->
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/isotope.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/imagesloaded.pkgd.min.js"></script>
+
+<!-- RS5.0 Core JS Files -->
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/jquery.themepunch.tools.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/jquery.themepunch.revolution.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/revolution-slider-shop-electronics.js"></script>
+
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/revolution.extension.actions.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/revolution.extension.carousel.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/revolution.extension.kenburn.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/revolution.extension.layeranimation.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/revolution.extension.migration.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/revolution.extension.navigation.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/revolution.extension.parallax.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/revolution.extension.slideanims.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/revolution.extension.video.min.js"></script>
+
+<!-- App JS -->
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/main.min.js"></script>
+
+

resources/appearance/tech_vista/_header.liquid

@@ -0,0 +1,113 @@
+<!-- _header.template -->
+
+<div class="header">
+    <!-- Top Bar -->
+    <div class="top-navbar">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+
+                </div>
+
+                <div class="col-md-6">
+                    <nav class="top-navbar-menu">
+                        <ul class="top-menu">
+
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Global Search -->
+    <section id="sctGlobalSearch" class="global-search global-search-overlay">
+        <div class="container">
+            <div class="global-search-backdrop mask-dark--style-2"></div>
+
+            <!-- Search form -->
+            <form class="form-horizontal form-global-search z-depth-2-top" role="form">
+                <div class="px-4">
+                    <div class="row">
+                        <div class="col-12">
+                            <input type="text" class="search-input" placeholder="Type and hit enter ...">
+                        </div>
+                    </div>
+                </div>
+                <a href="#" class="close-search" data-toggle="global-search" title="Close search bar"></a>
+            </form>
+        </div>
+    </section>
+
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar--bold navbar--style-2 navbar-light bg-default  navbar--shadow">
+        <div class="container navbar-container">
+            <!-- Brand/Logo -->
+            <a class="navbar-brand" href="/">
+
+
+                {% if site.dist.logo %}
+                    <img src="{{ site.image_base_url }}{{ site.dist.logo }}" alt="logo" class="" alt="mtb" style="height: 50px;">
+                {% else %}
+                    <div class="logo-placeholder no-image-logo-thumbnail">
+                        No Logo
+                    </div>
+                {% endif %}
+
+            </a>
+
+            <div class="d-inline-block">
+                <!-- Navbar toggler  -->
+                <button class="navbar-toggler hamburger hamburger-js hamburger--spring" type="button" data-toggle="collapse" data-target="#navbar_main" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="hamburger-box">
+                        <span class="hamburger-inner"></span>
+                    </span>
+                </button>
+            </div>
+
+            <div class="collapse navbar-collapse align-items-center justify-content-center" id="navbar_main">
+                <!-- Navbar search - For small resolutions -->
+                <div class="navbar-search-widget b-xs-bottom py-3 d-lg-none d-none">
+                    <form class="" role="form">
+                        <div class="input-group input-group-lg">
+                            <input type="text" class="form-control" placeholder="Search for...">
+                            <span class="input-group-btn">
+                <button class="btn btn-base-3" type="button">Go!</button>
+                </span>
+                        </div>
+                    </form>
+                </div>
+
+                <!-- Navbar links -->
+
+    <!-------------menus--------------->
+                <ul class="navbar-nav">
+                    {% for menu in site.menus_header %}
+                        <li class="nav-item dropdown {% if menu.children and menu.children.size == 0 %}megamenu{% endif %}">
+                            <a class="nav-link {% if menu.children and menu.children.size > 0 %}dropdown-toggle{% endif %}"
+                               href="{% if menu.children and menu.children.size > 0 %}#{% else %}{{ menu.uri }}{% endif %}"
+                               {% if menu.children and menu.children.size > 0 %}data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"{% endif %}>
+                                {{ menu.title }}
+                            </a>
+                            {% if menu.children and menu.children.size > 0 %}
+                                <div class="dropdown-menu dropdown-menu-xl py-0 px-0 overflow--hidden" aria-labelledby="navbar_{{ menu.id }}_dropdown">
+                                    <div class="list-group rounded">
+                                        {% for child in menu.children %}
+                                            <a href="{% if child.children and child.children.size > 0 %}#{% else %}{{ child.uri }}{% endif %}"
+                                               class="list-group-item list-group-item-action d-flex align-items-center">
+                                                <div class="list-group-content">
+                                                    <div class="list-group-heading heading heading-6 mb-1">{{ child.title }}</div>
+                                                    <p class="text-sm mb-0">{{ child.title }}</p>
+                                                </div>
+                                            </a>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            {% endif %}
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+    </nav>
+</div>

resources/appearance/tech_vista/_header_css.liquid

@@ -0,0 +1,40 @@
+<!-- _header_css.template -->
+
+<!-- Bootstrap -->
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/bootstrap.min.css" type="text/css">
+
+<!-- Fonts -->
+<link href="{{ site.image_base_url }}static/tpl/tech_vista/css/af9117b70d024d9bab98a2f93152186d.css" rel="stylesheet">
+
+<!-- Plugins -->
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/swiper.min.css">
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/hamburgers.min.css" type="text/css">
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/animate.min.css" type="text/css">
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/jquery.fancybox.min.css">
+
+<!-- Icons -->
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/font-awesome.min.css" type="text/css">
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/ionicons.min.css" type="text/css">
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/line-icons.css" type="text/css">
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/line-icons-pro.css" type="text/css">
+
+<!-- Linea Icons -->
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/linea-icons.css" type="text/css">
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/linea-icons_1.css" type="text/css">
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/linea-icons_2.css" type="text/css">
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/linea-icons_3.css" type="text/css">
+
+<!-- Global style (main) -->
+<link id="stylesheet" type="text/css" href="{{ site.image_base_url }}static/tpl/tech_vista/css/main.min.css" rel="stylesheet" media="screen">
+
+{% comment %}<!-- Custom style - Remove if not necessary -->{% endcomment %}
+{% comment %}<link type="text/css" href="../../assets/css/custom-style.css" rel="stylesheet">{% endcomment %}
+
+<!-- Favicon -->
+<link href="{{ site.image_base_url }}static/tpl/tech_vista/images/favicon.png" rel="icon" type="image/png">
+
+
+<!-- RS5.0 -->
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/settings.css">
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/layers.css">
+<link rel="stylesheet" href="{{ site.image_base_url }}static/tpl/tech_vista/css/navigation.css">

resources/appearance/tech_vista/collection_list.liquid

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+<meta name="author" content="Mietubl">
+<meta name="description" content="{{ tag.seo_description  | strip_html| strip_newlines  }}">
+<meta name="keywords" content="{{tag.seo_keywords}}">
+<title>{{tag.seo_title}}</title>
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+                    <!-- BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="page-title">
+                                <div class="row align-items-center">
+                                    <div class="d-flex justify-content-end col-lg-12 col-12">
+                                        {% for  breadcrumb in breadcrumbs %}
+                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
+                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
+                                                    &nbsp;
+                                                    {% if forloop.index == 1 %}
+                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
+                                                        <i class="ion-ios-home"></i>
+                                                    {% else %}
+                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
+                                                        <i class="ion-ios-arrow-forward"></i>
+                                                    {% endif %}
+                                                    {{ breadcrumb.name }}
+                                                </a>
+                                            </h2>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- END: BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="row align-items-center">
+                                <div class="col-12" >
+                                    <h3 class="heading heading-3 strong-600 text-uppercase mb-0 text-center">{{ tag.name }}</h3>
+                                </div>
+
+                            </div>
+
+                            <div class="row cols-md-space cols-sm-space cols-xs-space">
+
+                                {% for item in pages %}
+                                    <div class="col-lg-4 col-wrapper--spaced-y">
+                                        <div class="card z-depth-2-top">
+                                            <div class="card-image">
+                                                <div class="view view-first">
+                                                    <a href="/pages/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}">
+
+                                                        {% if item.cover_image %}
+                                                            <img src="{% if item.cover_image contains 'http' %}{{ item.cover_image }}{% else %}{{ site.image_base_url }}{{ item.cover_image | append: '?x-oss-process=image/resize,m_pad,w_400,h_400' }}{% endif %}" alt="Cover Image">
+                                                        {% else %}
+                                                            <div class=" d-flex justify-content-center align-items-center"
+                                                                 style="background-color: #FFF; width: 100%; height: 0; padding-top: 100%; position: relative; display: flex;">
+                                                               <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #555;">No Image</span>
+                                                            </div>
+                                                        {% endif %}
+
+                                                    </a>
+                                                </div>
+                                            </div>
+
+                                            <div class="card-body">
+                                                <h3 class="heading heading-5 strong-500 mb-0 title-over-flow" >
+                                                    <a href="/pages/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}" title="{{ item.title | strip_html }}">{{ item.title | strip_html }}</a>
+                                                </h3>
+                                            </div>
+
+                                            <div class="card-footer">
+                                                <div class="row">
+
+                                                    <div class="col text-right">
+                                                        <ul class="inline-links inline-links--style-2">
+                                                            <li>
+                                                                {{item.post_date }}
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                {% endfor %}
+
+
+
+
+
+                            </div>
+                        </div>
+                        <div class="pt-5">
+                            <nav aria-label="Product pagination">
+                                <ul class="pagination pagination--style-2 justify-content-center">
+                                    <!-- Previous Page Link -->
+                                    {% if paginator.previous_page %}
+                                        <li class="page-item">
+                                            <a class="page-link" href="{{ paginator.previous_page_url }}" tabindex="-1">Previous</a>
+                                        </li>
+                                    {% else %}
+                                        <li class="page-item disabled">
+                                            <a class="page-link" href="#" tabindex="-1">Previous</a>
+                                        </li>
+                                    {% endif %}
+
+                                    <!-- Pagination Links -->
+                                    {% for page in paginator.pages %}
+                                        {% if page == paginator.current_page %}
+                                            <li class="page-item active">
+                                                <span class="page-link">{{ page }}</span>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="{{ paginator.page_url[page] }}">{{ page }}</a>
+                                            </li>
+                                        {% endif %}
+                                    {% endfor %}
+
+                                    <!-- Next Page Link -->
+                                    {% if paginator.next_page %}
+                                        <li class="page-item">
+                                            <a class="page-link" href="{{ paginator.next_page_url }}">Next</a>
+                                        </li>
+                                    {% else %}
+                                        <li class="page-item disabled">
+                                            <a class="page-link" href="#">Next</a>
+                                        </li>
+                                    {% endif %}
+                                </ul>
+                            </nav>
+                        </div>
+                    </section>    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+</body>
+</html>

resources/appearance/tech_vista/home.liquid

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="index, follow">
+    <meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+    <meta name="description" content="{{ site.dist.seo_description  | strip_html| strip_newlines }}">
+    <meta name="keywords" content="{{ site.dist.seo_keywords }}">
+    <meta name="author" content="Mietubl">
+    <title>{{ site.dist.seo_title }}</title>
+    {% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+
+                    <!-- banner -->
+                    {% banner limit=5 position=1 template='__banner_list.liquid' %}
+
+                    <!-- banner END -->
+                    <section class="slice sct-color-2">
+                        <div class="container">
+                            <div class="section-title section-title--style-1 text-center">
+                                <h3 class="section-title-inner heading-3 strong-600 text-capitalize">
+                                    <span>Featured products</span>
+                                </h3>
+                            </div>
+
+                            {% product  mode="list" limit=3 template='__product_list_1.liquid' %}
+
+                        </div>
+                    </section>
+
+
+
+
+
+                    <section class="slice-lg has-bg-cover bg-size-cover" style="background-image: url({{ site.image_base_url }}static/tpl/tech_vista/images/img-slider-1.jpg);">
+                        <div class="mask mask-base-1--style-1"></div>
+                        <div class="container">
+                            <div class="row justify-content-center">
+                                <div class="col-6 text-center">
+                                    <h2 class="heading heading-1 strong-600 c-white">
+                                        Join the biggest sales of the year
+                                    </h2>
+                                    <p class="c-white trong-300 mt-4">
+                                        Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. There is only that moment, and the incredible certainty that everything under the sun has been written by one hand only.
+                                    </p>
+
+                                    <div class="btn-container mt-5">
+                                        <a href="/pages/sales" class="btn btn-styled btn-white btn-outline btn-circle px-5" target="_blank">Learn more</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+
+
+                    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+</body>
+</html>

resources/appearance/tech_vista/pages_detail.liquid

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+<meta name="author" content="Mietubl">
+<meta name="description" content="{{ page.seo_description | strip_html| strip_newlines  }}">
+<meta name="keywords" content="{{page.seo_keywords}}">
+<title>{{page.seo_title}}</title>
+
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+                    <!-- BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="page-title">
+                                <div class="row align-items-center">
+                                    <div class="d-flex justify-content-end col-lg-12 col-12">
+                                        {% for  breadcrumb in breadcrumbs %}
+                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
+                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
+                                                    &nbsp;
+                                                    {% if forloop.index == 1 %}
+                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
+                                                        <i class="ion-ios-home"></i>
+                                                    {% else %}
+                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
+                                                        <i class="ion-ios-arrow-forward"></i>
+                                                    {% endif %}
+                                                    {{ breadcrumb.name }}
+                                                </a>
+                                            </h2>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- END: BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+
+                                    <div class="block block-post">
+                                        <div class="block-body block-post-body">
+                                            <h1>
+                                                {{ page.title | raw }}
+                                            </h1>
+
+                                            {{page.content | raw }}
+
+                                        </div>
+                                    <!-- Comment form -->
+                                </div>
+                             </div>
+                    </section>
+
+                    {{ page.page_type }}
+                    {% if page.page_type == 0 %}
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                        <div class="pt-5">
+                                <nav aria-label="Product pagination">
+                                    <ul class="pagination pagination--style-2 justify-content-center">
+                                        <!-- Previous Page Link -->
+                                        {% if paginator.previous_page %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="{{ paginator.previous_page_url }}" tabindex="-1">Previous</a>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item disabled">
+                                                <a class="page-link" href="#" tabindex="-1">Previous</a>
+                                            </li>
+                                        {% endif %}
+
+                                        <!-- Next Page Link -->
+                                        {% if paginator.next_page %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="{{ paginator.next_page_url }}">Next</a>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item disabled">
+                                                <a class="page-link" href="#">Next</a>
+                                            </li>
+                                        {% endif %}
+                                    </ul>
+                                </nav>
+                            </div>
+                        </div>
+                    </section>
+                    {% endif %}
+
+                    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+
+<!-- Isotope -->
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/isotope.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/imagesloaded.pkgd.min.js"></script>
+
+<!-- Deso Slide -->
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/jquery.desoslide.min.js"></script>
+<script>
+    $('#slideshow').desoSlide({
+        thumbs: $('#slideshow_thumbs .swiper-slide > a'),
+        thumbEvent: 'click',
+        first: 0,
+        effect: 'none',
+        overlay: 'none',
+        controls: {
+            show: false,
+            keys: false
+        },
+    });
+</script>
+</body>
+</html>

resources/appearance/tech_vista/pages_sp_contact.liquid

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+<meta name="description" content="{{ site.dist.seo_description  | strip_html| strip_newlines }}">
+<meta name="keywords" content="{{ site.dist.seo_keywords }}">
+<meta name="author" content="Mietubl">
+<title>{{ site.dist.seo_title }}</title>
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+                    <!-- BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="page-title">
+                                <div class="row align-items-center">
+                                    <div class="d-flex justify-content-end col-lg-12 col-12">
+                                        {% for  breadcrumb in breadcrumbs %}
+                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
+                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
+                                                    &nbsp;
+                                                    {% if forloop.index == 1 %}
+                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
+                                                        <i class="ion-ios-home"></i>
+                                                    {% else %}
+                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
+                                                        <i class="ion-ios-arrow-forward"></i>
+                                                    {% endif %}
+                                                    {{ breadcrumb.name }}
+                                                </a>
+                                            </h2>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- END: BREADCRUMB -->
+                    <section class="slice">
+                        <div class="container">
+                            <div class="text-center">
+                                <h2 class="heading heading-2 strong-400">
+                                    Contact us for help
+                                </h2>
+                                <p>
+                                    Please call us or complete the form below and we'll get to you shortly.
+                                </p>
+
+                                <a href="" class="btn btn-styled btn-xl btn-base-1 btn-icon-left mt-4">
+                                    <i class="fa fa-mobile"></i>Hotline: {{ site.dist.service_hotline }}
+                                </a>
+                                <span class="clearfix"></span>
+                                <small>Get support by calling the 24h helpline.</small>
+                            </div>
+                        </div>
+                    </section>
+
+                    <section class="slice pt-0 sct-color-1">
+                        <div class="container">
+                            <div class="row justify-content-center">
+                                <div class="col-lg-8">
+                                    <!-- Contact form -->
+
+                                    {% contactus template='__contactus.liquid' %}
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+</body>
+</html>

resources/appearance/tech_vista/products_categories.liquid

@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+<meta name="description" content="{{ category.seo_description | strip_html| strip_newlines  }}">
+<meta name="keywords" content="{{category.seo_keywords}}">
+<title>{{category.seo_title}}</title>
+<meta name="author" content="Mietubl">
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+
+
+
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+                    <!-- BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="page-title">
+                                <div class="row align-items-center">
+                                    <div class="d-flex justify-content-end col-lg-12 col-12">
+                                        {% for  breadcrumb in breadcrumbs %}
+                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
+                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
+                                                    &nbsp;
+                                                    {% if forloop.index == 1 %}
+                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
+                                                        <i class="ion-ios-home"></i>
+                                                    {% else %}
+                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
+                                                        <i class="ion-ios-arrow-forward"></i>
+                                                    {% endif %}
+                                                    {{ breadcrumb.name }}
+                                                </a>
+                                            </h2>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- END: BREADCRUMB -->
+                    <section class="slice sct-color-2">
+                        <div class="container">
+                            <h4 class="heading heading-xs text-uppercase strong-600 mb-0 text-center">
+                                Trending
+                            </h4>
+                            <div class="section-title section-title--style-1 text-center mt-1">
+                                <h3 class="section-title-inner heading-3 strong-600 line-height-1_6">
+                                    <span>{{category.name}}</span>
+                                </h3>
+                                <span class="section-title-delimiter clearfix d-none"></span>
+                            </div>
+
+                            <div class="row-wrapper">
+                                <div class="row cols-xs-space cols-sm-space cols-md-space">
+                                    {% for item in products %}
+
+                                    <div class="col-lg-3 col-md-6 col-wrapper--spaced-y">
+                                        <div class="card card-product z-depth-1-top z-depth-2--hover">
+                                            <div class="card-body">
+                                                <h2 class="heading heading-6 strong-600 mt-2 mb-3 title-over-flow">
+                                                    <a  href="/products/{{ item.id }}" target="_blank" title="{{ item.title | strip_html }}">
+                                                        {{ item.title | strip_html }}
+                                                    </a>
+                                                </h2>
+
+                                                <div class="card-image swiper-js-container">
+                                                    <div class="">
+                                                        <div class="swiper-container" data-swiper-items="1" data-swiper-space-between="0">
+                                                            <div class="swiper-wrapper">
+                                                                <div class="swiper-slide">
+                                                                    <a  href="/products/{{ item.id }}" target="_blank" >
+                                                                        {% if item.images and item.images[0].image_url %}
+                                                                            {% assign image_url = item.images[0].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 %}"
+                                                                                 class="img-fluid img-center img-primary default-image-thumbnail-small">
+                                                                        {% else %}
+                                                                            <div class="img-fluid img-center img-primary default-image-thumbnail-small no-image-placeholder-thumbnail-small">
+                                                                                <span>No Image</span>
+                                                                            </div>
+                                                                        {% endif %}
+                                                                    </a>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+                                                <div class="mt-3">
+
+                                                    <p class="product-description mt-3 mb-0 title-over-flow" >
+                                                        {{ item.content | strip_html| strip_newlines | default: "No description " }}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <div class="card-footer">
+                                                <div class="product-buttons">
+                                                    <div class="row align-items-center">
+                                                        <div class="col-2"></div>
+                                                        <div class="col-8">
+                                                            <a  href="/products/{{ item.id }}" target="_blank" >
+                                                            <button type="button" class="btn btn-block btn-base-1 btn-circle btn-icon-left">
+                                                                View Details
+                                                            </button>
+                                                            </a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    {% endfor %}
+                                </div>
+
+                            </div>
+
+                            <div class="pt-5">
+                                <nav aria-label="Product pagination">
+                                    <ul class="pagination pagination--style-2 justify-content-center">
+                                        <!-- Previous Page Link -->
+                                        {% if paginator.previous_page %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="{{ paginator.previous_page_url }}" tabindex="-1">Previous</a>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item disabled">
+                                                <a class="page-link" href="#" tabindex="-1">Previous</a>
+                                            </li>
+                                        {% endif %}
+
+                                        <!-- Pagination Links -->
+                                        {% for page in paginator.pages %}
+                                            {% if page == paginator.current_page %}
+                                                <li class="page-item active">
+                                                    <span class="page-link">{{ page }}</span>
+                                                </li>
+                                            {% else %}
+                                                <li class="page-item">
+                                                    <a class="page-link" href="{{ paginator.page_url[page] }}">{{ page }}</a>
+                                                </li>
+                                            {% endif %}
+                                        {% endfor %}
+
+                                        <!-- Next Page Link -->
+                                        {% if paginator.next_page %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="{{ paginator.next_page_url }}">Next</a>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item disabled">
+                                                <a class="page-link" href="#">Next</a>
+                                            </li>
+                                        {% endif %}
+                                    </ul>
+                                </nav>
+                            </div>
+
+                        </div>
+                    </section>
+
+
+
+
+
+
+                    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+</body>
+</html>

resources/appearance/tech_vista/products_detail.liquid

@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+<meta name="author" content="Mietubl">
+<meta name="description" content="{{ product.seo_description  | strip_html| strip_newlines }}">
+<meta name="keywords" content="{{product.seo_keywords}}">
+<title>{{product.seo_title}}</title>
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+                    <!-- BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="page-title">
+                                <div class="row align-items-center">
+                                    <div class="d-flex justify-content-end col-lg-12 col-12">
+                                        {% for  breadcrumb in breadcrumbs %}
+                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
+                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
+                                                    &nbsp;
+                                                    {% if forloop.index == 1 %}
+                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
+                                                        <i class="ion-ios-home"></i>
+                                                    {% else %}
+                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
+                                                        <i class="ion-ios-arrow-forward"></i>
+                                                    {% endif %}
+                                                    {{ breadcrumb.name }}
+                                                </a>
+                                            </h2>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- END: BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <!-- Product gallery and Description -->
+                            <div class="row cols-xs-space cols-sm-space cols-md-space">
+                                <div class="col-lg-6">
+                                    <div class="gallery-container">
+                                        <div id="slideshow" class="gallery-top no-padding bg-transparent"></div>
+                                        <div id="slideshow_thumbs" class="swiper-js-container gallery-thumbs gallery-thumbs--style-1 mt-4">
+                                            <div class="swiper-container" data-swiper-items="5" data-swiper-space-between="10" data-swiper-xs-items="3" data-swiper-xs-space-between="10" data-swiper-sm-items="4" data-swiper-sm-space-between="10">
+                                                <div class="swiper-wrapper">
+                                                    {% if product.images and product.images.size > 0 %}
+                                                        {% for item in product.images %}
+                                                            {% assign image_url = item.image_url %}
+                                                            <div class="swiper-slide">
+                                                                <a href="{% 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 %}" data-desoslide-index="{{ forloop.index0 }}">
+                                                                    <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,m_pad,w_100,h_100{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,m_pad,w_100,h_100{% endif %}" alt="{{ product.title }}">
+                                                                </a>
+                                                            </div>
+                                                        {% endfor %}
+                                                    {% else %}
+                                                        <div class="swiper-slide">
+                                                            <a href="{{ site.image_base_url }}static/common/images/product_default.jpg" data-desoslide-index="0">
+                                                                <img src="{{ site.image_base_url }}static/common/images/product_default.jpg" alt="Default Product">
+                                                            </a>
+                                                        </div>
+                                                    {% endif %}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-lg-6">
+                                    <div class="px-2">
+                                        <!-- Product description -->
+                                        <div class="product-description-wrapper px-1">
+                                            <!-- Product title -->
+                                            <h2 class="product-title font-size-2">
+                                                {{product.title | strip_html }}
+                                            </h2>
+                                            <hr>
+                                            <div class="row align-items-center">
+
+                                            </div>
+
+                                            <!-- Product description -->
+
+                                            <table class="table table-specs">
+                                                <tbody>
+                                                {% for item in product.parameters %}
+
+                                                <tr>
+                                                    <td>
+                                                        <span class="c-gray-light strong-600">  {{ item.key }}</span>
+                                                    </td>
+                                                    <td>
+                                                        {{ item.value }}
+                                                    </td>
+                                                </tr>
+                                                {% endfor %}
+                                                </tbody>
+                                            </table>
+                                            <hr>
+                                            <div class="row row-no-padding no-margin">
+                                                <div class="col-lg-8">
+                                                    <form class="form-default">
+                                                        <!-- Choose size -->
+                                                        <label class="strong-600">Contact us </label>
+
+
+                                                        <div class="d-table product-quantity width-100 mt-3">
+
+                                                            <div class="d-table-cell">
+                                                                <a data-fancybox data-src="#fancybox_hidden_content" class="btn btn-base-1 btn-icon-left" href="javascript:;">
+                                                                    <i class="icon ion-android-add"></i>     Get a quote
+                                                                </a>
+                                                            </div>
+                                                        </div>
+                                                    </form>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <span class="space-xs-xl"></span>
+
+                            <div class="row-wrapper">
+                                <div class="row cols-xs-space cols-sm-space cols-md-space">
+                                    <div class="col-lg-12">
+                                        <div class="feature  feature--bg-1">
+                                            <h3 class="heading heading-6 strong-600">     Description:</h3>
+
+
+                                            <p>
+                                                {{product.content | raw }}
+                                            </p>
+                                        </div>
+                                    </div>
+
+
+                                </div>
+
+
+                            </div>
+
+                        </div>
+                    </section>
+
+                    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+
+<!-- Hidden content -->
+<div   id="fancybox_hidden_content" style="display:none;">
+    <h4 >Get a quote</h4>
+    <form id="form_contact" data-action="/contact" class="form-default" role="form">
+        <input type="hidden" name="_token" value="{{ csrf_token }}">
+        <input type="hidden" name="consulting_products" value="{{ product.title }} }}">
+        <div class="row">
+            <div class="col-md-6">
+                <div class="form-group has-feedback">
+                    <label for="" class="text-uppercase c-gray-light">Your name</label>
+                    <input type="text" name="customer_name" class="form-control form-control-lg" required>
+                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                    <div class="help-block with-errors"></div>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="form-group has-feedback">
+                    <label for="" class="text-uppercase c-gray-light">Email address</label>
+                    <input type="email" name="email" class="form-control form-control-lg" required>
+                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                    <div class="help-block with-errors"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-6">
+                <div class="form-group has-feedback">
+                    <label for="" class="text-uppercase c-gray-light">Company name</label>
+                    <input type="text" name="company_name" class="form-control form-control-lg">
+                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                    <div class="help-block with-errors"></div>
+                </div>
+            </div>
+            <div class="col-sm-6">
+                <div class="form-group has-feedback">
+                    <label for="" class="text-uppercase c-gray-light">Phone/whats_app</label>
+                    <input type="text" name="whats_app" class="form-control form-control-lg" required>
+                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                    <div class="help-block with-errors"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-12">
+                <div class="form-group has-feedback">
+                    <label for=""  class="text-uppercase c-gray-light">Message</label>
+                    <textarea name="content" class="form-control no-resize" rows="5" required></textarea>
+                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                    <div class="help-block with-errors"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="">
+
+
+            <button type="reset" class="btn-reset d-none"></button>
+            <button type="submit" class="btn btn-styled btn-base-1 mt-4">Send message</button>
+        </div>
+    </form>
+
+</div>
+
+
+
+
+{% include '_footer_js.liquid' %}
+
+
+<!-- Deso Slide -->
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/jquery.desoslide.min.js"></script>
+<script>
+    $('#slideshow').desoSlide({
+        thumbs: $('#slideshow_thumbs .swiper-slide > a'),
+        thumbEvent: 'click',
+        first: 0,
+        effect: 'none',
+        overlay: 'none',
+        controls: {
+            show: false,
+            keys: false
+        },
+    });
+</script>
+</body>
+</html>

resources/appearance/tech_vista/version.liquid

@@ -0,0 +1 @@
+<!-- update date 2024-12-12 11:45 -->

resources/appearance/tech_vista/videos_categories.liquid

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+<meta name="author" content="Mietubl">
+<meta name="description" content="{{ tag.seo_description | strip_html| strip_newlines  }}">
+<meta name="keywords" content="{{tag.seo_keywords}}">
+<title>{{tag.seo_title}}</title>
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+                    <!-- BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="page-title">
+                                <div class="row align-items-center">
+                                    <div class="d-flex justify-content-end col-lg-12 col-12">
+                                        {% for  breadcrumb in breadcrumbs %}
+                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
+                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
+                                                    &nbsp;
+                                                    {% if forloop.index == 1 %}
+                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
+                                                        <i class="ion-ios-home"></i>
+                                                    {% else %}
+                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
+                                                        <i class="ion-ios-arrow-forward"></i>
+                                                    {% endif %}
+                                                    {{ breadcrumb.name }}
+                                                </a>
+                                            </h2>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- END: BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="row align-items-center">
+                                <div class="col-12" >
+                                    <h3 class="heading heading-3 strong-600 text-uppercase mb-0 text-center">{{ tag.name }}</h3>
+                                </div>
+
+                            </div>
+
+                            <div class="row cols-md-space cols-sm-space cols-xs-space">
+
+                                {% for item in videos %}
+                                    <div class="col-lg-4 col-wrapper--spaced-y">
+                                        <div class="card z-depth-2-top">
+                                            <div class="card-image">
+                                                <div class="view view-first">
+                                                    <a href="/videos/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}">
+
+                                                        {% assign cover_image_url = item.cover_image %}
+                                                        {% if cover_image_url %}
+                                                            {% if cover_image_url contains 'http' %}
+                                                                <img src="{{ cover_image_url }}" alt="Cover Image">
+                                                            {% else %}
+                                                                <img src="{{ site.image_base_url }}{{ cover_image_url | append: '?x-oss-process=image/resize,m_pad,w_400,h_400' }}" alt="Cover Image">
+                                                            {% endif %}
+                                                        {% else %}
+                                                            <div class="img-center default-image-thumbnail no-image-placeholder-thumbnail">
+                                                                <span>No Image</span>
+                                                            </div>
+                                                        {% endif %}
+
+                                                    </a>
+                                                </div>
+                                            </div>
+
+                                            <div class="card-body">
+                                                <h3 class="heading heading-5 strong-500 mb-0 title-over-flow" >
+                                                    <a href="/videos/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}" title="{{ item.title | strip_html }}">{{ item.title | strip_html }}</a>
+                                                </h3>
+                                            </div>
+
+                                            <div class="card-footer">
+                                                <div class="row">
+
+                                                    <div class="col text-right">
+                                                        <ul class="inline-links inline-links--style-2">
+                                                            <li>
+                                                                {{item.post_date }}
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                {% endfor %}
+
+
+
+
+
+                            </div>
+                        </div>
+                    </section>    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+</body>
+</html>

resources/appearance/tech_vista/videos_detail.liquid

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+<meta name="author" content="Mietubl">
+<meta name="description" content="{{ page.seo_description  | strip_html| strip_newlines }}">
+<meta name="keywords" content="{{page.seo_keywords}}">
+<title>{{page.seo_title}}</title>
+
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+                    <!-- BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="page-title">
+                                <div class="row align-items-center">
+                                    <div class="d-flex justify-content-end col-lg-12 col-12">
+                                        {% for  breadcrumb in breadcrumbs %}
+                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
+                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
+                                                    &nbsp;
+                                                    {% if forloop.index == 1 %}
+                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
+                                                        <i class="ion-ios-home"></i>
+                                                    {% else %}
+                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
+                                                        <i class="ion-ios-arrow-forward"></i>
+                                                    {% endif %}
+                                                    {{ breadcrumb.name }}
+                                                </a>
+                                            </h2>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- END: BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+
+                                    <div class="block block-post">
+                                        <div class="block-body block-post-body">
+                                            <h1>
+                                                {{ video.title | raw }}
+                                            </h1>
+
+
+                                            <div class="d-flex justify-content-center">
+                                                <div style="position: relative; width: 90%; padding-top: 56.25%;"> <!-- 16:9 ratio -->
+                                                    <iframe
+                                                        src="{{ video.video_url | raw }}"
+                                                        title="YouTube video player"
+                                                        frameborder="0"
+                                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                                        referrerpolicy="strict-origin-when-cross-origin"
+                                                        allowfullscreen
+                                                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+                                                    ></iframe>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    <!-- Comment form -->
+                                </div>
+                             </div>
+                    </section>
+
+                    {{ page.page_type }}
+                    {% if page.page_type == 0 %}
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                        <div class="pt-5">
+                                <nav aria-label="Product pagination">
+                                    <ul class="pagination pagination--style-2 justify-content-center">
+                                        <!-- Previous Page Link -->
+                                        {% if paginator.previous_page %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="{{ paginator.previous_page_url }}" tabindex="-1">Previous</a>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item disabled">
+                                                <a class="page-link" href="#" tabindex="-1">Previous</a>
+                                            </li>
+                                        {% endif %}
+
+                                        <!-- Next Page Link -->
+                                        {% if paginator.next_page %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="{{ paginator.next_page_url }}">Next</a>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item disabled">
+                                                <a class="page-link" href="#">Next</a>
+                                            </li>
+                                        {% endif %}
+                                    </ul>
+                                </nav>
+                            </div>
+                        </div>
+                    </section>
+                    {% endif %}
+
+                    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+
+<!-- Isotope -->
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/isotope.min.js"></script>
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/imagesloaded.pkgd.min.js"></script>
+
+<!-- Deso Slide -->
+<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/jquery.desoslide.min.js"></script>
+<script>
+    $('#slideshow').desoSlide({
+        thumbs: $('#slideshow_thumbs .swiper-slide > a'),
+        thumbEvent: 'click',
+        first: 0,
+        effect: 'none',
+        overlay: 'none',
+        controls: {
+            show: false,
+            keys: false
+        },
+    });
+</script>
+</body>
+</html>

resources/appearance/techvista/__banner_list.liquid

@@ -0,0 +1,68 @@
+<!-- REVOLUTION SLIDER -->
+<div id="rev_slider_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="image-hero39" data-source="gallery">
+    <!-- START REVOLUTION SLIDER 5.3.0.2 fullwidth mode -->
+    <div id="rev_slider_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.3.0.2" >
+        <ul>
+            {% for item in banners %}
+            <li data-index="rs-{{ forloop.index }}" data-transition="slidevertical" data-slotamount="1" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="1500"  data-thumb="../../images/slider/concept-1-100x50.jpg"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="{{ item.title }}" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
+                <!-- MAIN IMAGE -->
+                <a href="{{ item.banner_url }}">
+                    {% assign image_url = item.image_url %}
+                    {% if image_url contains 'http' %}
+                        <img src="{{ image_url }}" alt="" data-bgposition="top center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
+                    {% else %}
+                        <img src="{{ site.image_base_url }}{{ image_url }}" alt="" data-bgposition="top center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
+                    {% endif %}
+                </a>
+
+                <!-- LAYER NR. 2 -->
+                <div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-2-layer-2"
+                     data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
+                     data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
+                     data-fontsize="['16','16','16','16']"
+                     data-lineheight="['16','16','16','16']"
+                     data-width="[300, 300, 300, 300]"
+                     data-height="none"
+                     data-whitespace="nowrap"
+                     data-type="text"
+                     data-responsive_offset="on"
+                     data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
+                     data-textAlign="['left','left','left','left']"
+                     data-paddingtop="[0,0,0,0]"
+                     data-paddingright="[0,0,0,0]"
+                     data-paddingbottom="[0,0,0,0]"
+                     data-paddingleft="[0,0,0,0]"
+                     style="z-index: 11; white-space: nowrap;text-transform:left;">
+
+                    <span class="text-uppercase strong-400">	{{ item.subtitle }}</span>
+
+                </div>
+                <div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-1-layer-3"
+                     data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
+                     data-y="['middle','middle','middle','middle']" data-voffset="['70','70','70','70']"
+                     data-fontsize="['40','40','40','40']"
+                     data-lineheight="['50','40','40','40']"
+                     data-width="[300, 300, 300, 300]"
+                     data-height="none"
+                     data-whitespace="nowrap"
+                     data-type="text"
+                     data-responsive_offset="on"
+                     data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1000,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
+                     data-textAlign="['left','left','left','left']"
+                     data-paddingtop="[0,0,0,0]"
+                     data-paddingright="[0,0,0,0]"
+                     data-paddingbottom="[0,0,0,0]"
+                     data-paddingleft="[0,0,0,0]"
+                     style="z-index: 11; white-space: nowrap;text-transform:left;">
+
+
+                    <span class="strong-600">
+					{{ item.title }}
+					</span>
+                </div>
+            </li>
+            {% endfor %}
+        </ul>
+        <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
+    </div>
+</div><!-- END REVOLUTION SLIDER -->

resources/appearance/techvista/__contactus.liquid

@@ -0,0 +1,60 @@
+<h4 >Get a quote</h4>
+<form id="form_contact" data-action="/contact" class="form-default" role="form">
+    <input type="hidden" name="_token" value="{{ csrf_token }}">
+    <input type="hidden" name="consulting_products" value="{{product.title }}">
+    <div class="row">
+        <div class="col-md-6">
+            <div class="form-group has-feedback">
+                <label for="" class="text-uppercase c-gray-light">Your name</label>
+                <input type="text" name="customer_name" class="form-control form-control-lg" required>
+                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                <div class="help-block with-errors"></div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group has-feedback">
+                <label for="" class="text-uppercase c-gray-light">Email address</label>
+                <input type="email" name="email" class="form-control form-control-lg" required>
+                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                <div class="help-block with-errors"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-6">
+            <div class="form-group has-feedback">
+                <label for="" class="text-uppercase c-gray-light">Company name</label>
+                <input type="text" name="company_name" class="form-control form-control-lg">
+                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                <div class="help-block with-errors"></div>
+            </div>
+        </div>
+        <div class="col-sm-6">
+            <div class="form-group has-feedback">
+                <label for="" class="text-uppercase c-gray-light">Phone/whats_app</label>
+                <input type="text" name="whats_app" class="form-control form-control-lg" required>
+                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                <div class="help-block with-errors"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-12">
+            <div class="form-group has-feedback">
+                <label for=""  class="text-uppercase c-gray-light">Message</label>
+                <textarea name="content" class="form-control no-resize" rows="5" required></textarea>
+                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                <div class="help-block with-errors"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="">
+
+
+        <button type="reset" class="btn-reset d-none"></button>
+        <button type="submit" class="btn btn-styled btn-base-1 mt-4">Send message</button>
+    </div>
+</form>

resources/appearance/techvista/__product_list_1.liquid

@@ -0,0 +1,47 @@
+
+<div class="row cols-xs-space cols-sm-space cols-md-space">
+{% for item in products %}
+    {% comment %}{{ item.title }} - {{ item.sku }}{% endcomment %}
+
+    <div class="col-lg-4">
+        <div class="block product no-border z-depth-2-top z-depth-2--hover">
+            <div class="block-image ">
+                <a  href="/products/{{ item.id }}" target="_blank" >
+
+                    {% if item.images and item.images[0].image_url %}
+                        {% assign image_url = item.images[0].image_url %}
+                      
+                        {% if image_url contains 'http' %}
+                            <img src="{{ image_url }}" class="img-center default-image-thumbnail">
+                        {% 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">
+                        {% endif %}
+                    {% else %}
+                        <div class="img-center default-image-thumbnail no-image-placeholder-thumbnail">
+                            <span>No Image</span>
+                        </div>
+                    {% endif %}
+                </a>
+                <span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
+            </div>
+
+            <div class="block-body text-center">
+                <h3 class="heading heading-5 strong-600 text-capitalize title-over-flow" >
+                    <a  href="/products/{{ item.id }}" target="_blank"  title=" {{ item.title | strip_html  }}">
+                        {{ item.title |decode_html_entities| strip_html  }}
+                    </a>
+                </h3>
+                <p class="product-description title-over-flow">
+                    {{ item.content | decode_html_entities| strip_html | default: "No description " }}
+                </p>
+                <div class="product-buttons mt-4">
+                    <a href="/products/{{ item.id }}" class="btn  btn-gray-dark btn-circle px-4" target="_blank">
+                        Explore
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endfor %}
+</div>
+

resources/appearance/techvista/_footer.liquid

@@ -0,0 +1,73 @@
+<!-- _footer.template -->
+<footer id="footer" class="footer">
+    <div class="footer-top">
+        <div class="container">
+            <div class="row cols-xs-space cols-sm-space cols-md-space">
+                <div class="col-lg-5">
+                    <div class="col">
+
+                        <span class="clearfix"></span>
+                        {% comment %}<span class="heading heading-sm c-gray-light strong-400">Mietubl</span>{% endcomment %}
+                        <h4>
+                            {{site.dist.site_name }}
+                        </h4>
+
+                        <div class="copyright mt-4">
+                            <p>
+                                {{site.dist.copy_right | raw  }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                {% for menu in site.menus_footer %}
+                    {% if menu.show %}
+                        <div class="col-lg-2">
+                            <div class="col">
+                                <h4 class="heading heading-xs strong-600 text-uppercase mb-1">
+                                    {{ menu.title }}
+                                </h4>
+
+                                <ul class="footer-links">
+                                    {% for child in menu.children %}
+                                        {% if child.show %}
+                                            <li>
+                                                <a href="{{ child.uri }}" title="{{ child.title }}">
+                                                    {{ child.title }}
+                                                </a>
+                                            </li>
+                                        {% endif %}
+                                    {% endfor %}
+                                </ul>
+                            </div>
+                        </div>
+                    {% endif %}
+                {% endfor %}
+
+                <div class="col-lg-3">
+                    <div class="col">
+                        <h4 class="heading heading-xs strong-600 text-uppercase mb-1">
+                            Get in touch
+                        </h4>
+
+                        <ul class="social-media social-media--style-1-v4">
+                            <li>
+                                <a href="{{ site.dist.facebook }}" class="facebook" target="_blank" data-toggle="tooltip" data-original-title="Facebook">
+                                    <i class="fa fa-facebook"></i>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="{{ site.dist.instagram }}" class="instagram" target="_blank" data-toggle="tooltip" data-original-title="Instagram">
+                                    <i class="fa fa-instagram"></i>
+                                </a>
+                            </li>
+
+                            </li>
+
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>
+{{ site.dist.statistics_js }}

resources/appearance/techvista/_footer_js.liquid

@@ -0,0 +1,64 @@
+<!-- _footer_js.template -->
+
+<!-- SCRIPTS -->
+<!-- Core -->
+<script src="/static/js/jquery.min.js"></script>
+<script src="/static/js/popper.min.js"></script>
+<script src="/static/js/bootstrap.min.js"></script>
+<script src="/static/js/slidebar.js"></script>
+<script src="/static/js/classie.js"></script>
+
+<!-- Bootstrap Extensions -->
+<script src="/static/js/bootstrap-growl.min.js"></script>
+<script src="/static/js/scrollpos-styler.js"></script>
+
+<!-- Plugins: Sorted A-Z -->
+<script src="/static/js/adaptive-backgrounds.js"></script>
+<script src="/static/js/jquery.countdown.min.js"></script>
+<script src="/static/js/dropzone.min.js"></script>
+<script src="/static/js/jquery.easypiechart.min.js"></script>
+<script src="/static/js/jquery.fancybox.min.js"></script>
+<script src="/static/js/flatpickr.min.js"></script>
+<script src="/static/js/flip.min.js"></script>
+<script src="/static/js/footer-reveal.min.js"></script>
+<script src="/static/js/jquery.gradientify.min.js"></script>
+<script src="/static/js/headroom.min.js"></script>
+<script src="/static/js/jquery.headroom.min.js"></script>
+<script src="/static/js/input-mask.min.js"></script>
+<script src="/static/js/instafeed.js"></script>
+<script src="/static/js/jquery.countto.js"></script>
+<script src="/static/js/nouislider.min.js"></script>
+<script src="/static/js/paraxify.min.js"></script>
+<script src="/static/js/select2.min.js"></script>
+<script src="/static/js/sticky-kit.min.js"></script>
+<script src="/static/js/swiper.min.js"></script>
+<script src="/static/js/autosize.min.js"></script>
+<script src="/static/js/typeahead.bundle.min.js"></script>
+<script src="/static/js/typed.min.js"></script>
+<script src="/static/js/vide.min.js"></script>
+<script src="/static/js/viewportchecker.min.js"></script>
+<script src="/static/js/wow.min.js"></script>
+
+<!-- Isotope -->
+<script src="/static/js/isotope.min.js"></script>
+<script src="/static/js/imagesloaded.pkgd.min.js"></script>
+
+<!-- RS5.0 Core JS Files -->
+<script src="/static/js/jquery.themepunch.tools.min.js"></script>
+<script src="/static/js/jquery.themepunch.revolution.min.js"></script>
+<script src="/static/js/revolution-slider-shop-electronics.js"></script>
+
+<script src="/static/js/revolution.extension.actions.min.js"></script>
+<script src="/static/js/revolution.extension.carousel.min.js"></script>
+<script src="/static/js/revolution.extension.kenburn.min.js"></script>
+<script src="/static/js/revolution.extension.layeranimation.min.js"></script>
+<script src="/static/js/revolution.extension.migration.min.js"></script>
+<script src="/static/js/revolution.extension.navigation.min.js"></script>
+<script src="/static/js/revolution.extension.parallax.min.js"></script>
+<script src="/static/js/revolution.extension.slideanims.min.js"></script>
+<script src="/static/js/revolution.extension.video.min.js"></script>
+
+<!-- App JS -->
+<script src="/static/js/main.min.js"></script>
+
+

resources/appearance/techvista/_header.liquid

@@ -0,0 +1,113 @@
+<!-- _header.template -->
+
+<div class="header">
+    <!-- Top Bar -->
+    <div class="top-navbar">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+
+                </div>
+
+                <div class="col-md-6">
+                    <nav class="top-navbar-menu">
+                        <ul class="top-menu">
+
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Global Search -->
+    <section id="sctGlobalSearch" class="global-search global-search-overlay">
+        <div class="container">
+            <div class="global-search-backdrop mask-dark--style-2"></div>
+
+            <!-- Search form -->
+            <form class="form-horizontal form-global-search z-depth-2-top" role="form">
+                <div class="px-4">
+                    <div class="row">
+                        <div class="col-12">
+                            <input type="text" class="search-input" placeholder="Type and hit enter ...">
+                        </div>
+                    </div>
+                </div>
+                <a href="#" class="close-search" data-toggle="global-search" title="Close search bar"></a>
+            </form>
+        </div>
+    </section>
+
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar--bold navbar--style-2 navbar-light bg-default  navbar--shadow">
+        <div class="container navbar-container">
+            <!-- Brand/Logo -->
+            <a class="navbar-brand" href="/">
+
+
+                {% if site.dist.logo %}
+                    <img src="{{ site.image_base_url }}{{ site.dist.logo }}" alt="logo" class="" alt="mtb" style="height: 50px;">
+                {% else %}
+                    <div class="logo-placeholder no-image-logo-thumbnail">
+                        No Logo
+                    </div>
+                {% endif %}
+
+            </a>
+
+            <div class="d-inline-block">
+                <!-- Navbar toggler  -->
+                <button class="navbar-toggler hamburger hamburger-js hamburger--spring" type="button" data-toggle="collapse" data-target="#navbar_main" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="hamburger-box">
+                        <span class="hamburger-inner"></span>
+                    </span>
+                </button>
+            </div>
+
+            <div class="collapse navbar-collapse align-items-center justify-content-center" id="navbar_main">
+                <!-- Navbar search - For small resolutions -->
+                <div class="navbar-search-widget b-xs-bottom py-3 d-lg-none d-none">
+                    <form class="" role="form">
+                        <div class="input-group input-group-lg">
+                            <input type="text" class="form-control" placeholder="Search for...">
+                            <span class="input-group-btn">
+                <button class="btn btn-base-3" type="button">Go!</button>
+                </span>
+                        </div>
+                    </form>
+                </div>
+
+                <!-- Navbar links -->
+
+    <!-------------menus--------------->
+                <ul class="navbar-nav">
+                    {% for menu in site.menus_header %}
+                        <li class="nav-item dropdown {% if menu.children and menu.children.size == 0 %}megamenu{% endif %}">
+                            <a class="nav-link {% if menu.children and menu.children.size > 0 %}dropdown-toggle{% endif %}"
+                               href="{% if menu.children and menu.children.size > 0 %}#{% else %}{{ menu.uri }}{% endif %}"
+                               {% if menu.children and menu.children.size > 0 %}data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"{% endif %}>
+                                {{ menu.title }}
+                            </a>
+                            {% if menu.children and menu.children.size > 0 %}
+                                <div class="dropdown-menu dropdown-menu-xl py-0 px-0 overflow--hidden" aria-labelledby="navbar_{{ menu.id }}_dropdown">
+                                    <div class="list-group rounded">
+                                        {% for child in menu.children %}
+                                            <a href="{% if child.children and child.children.size > 0 %}#{% else %}{{ child.uri }}{% endif %}"
+                                               class="list-group-item list-group-item-action d-flex align-items-center">
+                                                <div class="list-group-content">
+                                                    <div class="list-group-heading heading heading-6 mb-1">{{ child.title }}</div>
+                                                    <p class="text-sm mb-0">{{ child.title }}</p>
+                                                </div>
+                                            </a>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            {% endif %}
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+    </nav>
+</div>

resources/appearance/techvista/_header_css.liquid

@@ -0,0 +1,40 @@
+<!-- _header_css.template -->
+
+<!-- Bootstrap -->
+<link rel="stylesheet" href="/static/css/bootstrap.min.css" type="text/css">
+
+<!-- Fonts -->
+<link href="/static/css/af9117b70d024d9bab98a2f93152186d.css" rel="stylesheet">
+
+<!-- Plugins -->
+<link rel="stylesheet" href="/static/css/swiper.min.css">
+<link rel="stylesheet" href="/static/css/hamburgers.min.css" type="text/css">
+<link rel="stylesheet" href="/static/css/animate.min.css" type="text/css">
+<link rel="stylesheet" href="/static/css/jquery.fancybox.min.css">
+
+<!-- Icons -->
+<link rel="stylesheet" href="/static/css/font-awesome.min.css" type="text/css">
+<link rel="stylesheet" href="/static/css/ionicons.min.css" type="text/css">
+<link rel="stylesheet" href="/static/css/line-icons.css" type="text/css">
+<link rel="stylesheet" href="/static/css/line-icons-pro.css" type="text/css">
+
+<!-- Linea Icons -->
+<link rel="stylesheet" href="/static/css/linea-icons.css" type="text/css">
+<link rel="stylesheet" href="/static/css/linea-icons_1.css" type="text/css">
+<link rel="stylesheet" href="/static/css/linea-icons_2.css" type="text/css">
+<link rel="stylesheet" href="/static/css/linea-icons_3.css" type="text/css">
+
+<!-- Global style (main) -->
+<link id="stylesheet" type="text/css" href="/static/css/main.min.css" rel="stylesheet" media="screen">
+
+{% comment %}<!-- Custom style - Remove if not necessary -->{% endcomment %}
+{% comment %}<link type="text/css" href="../../assets/css/custom-style.css" rel="stylesheet">{% endcomment %}
+
+<!-- Favicon -->
+<link href="/static/images/favicon.png" rel="icon" type="image/png">
+
+
+<!-- RS5.0 -->
+<link rel="stylesheet" href="/static/css/settings.css">
+<link rel="stylesheet" href="/static/css/layers.css">
+<link rel="stylesheet" href="/static/css/navigation.css">

resources/appearance/techvista/collection_list.liquid

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+<meta name="author" content="Mietubl">
+<meta name="description" content="{{ tag.seo_description  | strip_html| strip_newlines  }}">
+<meta name="keywords" content="{{tag.seo_keywords}}">
+<title>{{tag.seo_title}}</title>
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+                    <!-- BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="page-title">
+                                <div class="row align-items-center">
+                                    <div class="d-flex justify-content-end col-lg-12 col-12">
+                                        {% for  breadcrumb in breadcrumbs %}
+                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
+                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
+                                                    &nbsp;
+                                                    {% if forloop.index == 1 %}
+                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
+                                                        <i class="ion-ios-home"></i>
+                                                    {% else %}
+                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
+                                                        <i class="ion-ios-arrow-forward"></i>
+                                                    {% endif %}
+                                                    {{ breadcrumb.name }}
+                                                </a>
+                                            </h2>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- END: BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="row align-items-center">
+                                <div class="col-12" >
+                                    <h3 class="heading heading-3 strong-600 text-uppercase mb-0 text-center">{{ tag.name }}</h3>
+                                </div>
+
+                            </div>
+
+                            <div class="row cols-md-space cols-sm-space cols-xs-space">
+
+                                {% for item in pages %}
+                                    <div class="col-lg-4 col-wrapper--spaced-y">
+                                        <div class="card z-depth-2-top">
+                                            <div class="card-image">
+                                                <div class="view view-first">
+                                                    <a href="/pages/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}">
+
+                                                        {% if item.cover_image %}
+                                                            <img src="{% if item.cover_image contains 'http' %}{{ item.cover_image }}{% else %}{{ site.image_base_url }}{{ item.cover_image | append: '?x-oss-process=image/resize,m_pad,w_400,h_400' }}{% endif %}" alt="Cover Image">
+                                                        {% else %}
+                                                            <div class=" d-flex justify-content-center align-items-center"
+                                                                 style="background-color: #FFF; width: 100%; height: 0; padding-top: 100%; position: relative; display: flex;">
+                                                               <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #555;">No Image</span>
+                                                            </div>
+                                                        {% endif %}
+
+                                                    </a>
+                                                </div>
+                                            </div>
+
+                                            <div class="card-body">
+                                                <h3 class="heading heading-5 strong-500 mb-0 title-over-flow" >
+                                                    <a href="/pages/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}" title="{{ item.title | strip_html }}">{{ item.title | strip_html }}</a>
+                                                </h3>
+                                            </div>
+
+                                            <div class="card-footer">
+                                                <div class="row">
+
+                                                    <div class="col text-right">
+                                                        <ul class="inline-links inline-links--style-2">
+                                                            <li>
+                                                                {{item.post_date }}
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                {% endfor %}
+
+
+
+
+
+                            </div>
+                        </div>
+                        <div class="pt-5">
+                            <nav aria-label="Product pagination">
+                                <ul class="pagination pagination--style-2 justify-content-center">
+                                    <!-- Previous Page Link -->
+                                    {% if paginator.previous_page %}
+                                        <li class="page-item">
+                                            <a class="page-link" href="{{ paginator.previous_page_url }}" tabindex="-1">Previous</a>
+                                        </li>
+                                    {% else %}
+                                        <li class="page-item disabled">
+                                            <a class="page-link" href="#" tabindex="-1">Previous</a>
+                                        </li>
+                                    {% endif %}
+
+                                    <!-- Pagination Links -->
+                                    {% for page in paginator.pages %}
+                                        {% if page == paginator.current_page %}
+                                            <li class="page-item active">
+                                                <span class="page-link">{{ page }}</span>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="{{ paginator.page_url[page] }}">{{ page }}</a>
+                                            </li>
+                                        {% endif %}
+                                    {% endfor %}
+
+                                    <!-- Next Page Link -->
+                                    {% if paginator.next_page %}
+                                        <li class="page-item">
+                                            <a class="page-link" href="{{ paginator.next_page_url }}">Next</a>
+                                        </li>
+                                    {% else %}
+                                        <li class="page-item disabled">
+                                            <a class="page-link" href="#">Next</a>
+                                        </li>
+                                    {% endif %}
+                                </ul>
+                            </nav>
+                        </div>
+                    </section>    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+</body>
+</html>

resources/appearance/techvista/home.liquid

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="index, follow">
+    <meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+    <meta name="description" content="{{ site.dist.seo_description  | strip_html| strip_newlines }}">
+    <meta name="keywords" content="{{ site.dist.seo_keywords }}">
+    <meta name="author" content="Mietubl">
+    <title>{{ site.dist.seo_title }}</title>
+    {% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+
+                    <!-- banner -->
+                    {% banner limit=5 position=1 template='__banner_list.liquid' %}
+
+                    <!-- banner END -->
+                    <section class="slice sct-color-2">
+                        <div class="container">
+                            <div class="section-title section-title--style-1 text-center">
+                                <h3 class="section-title-inner heading-3 strong-600 text-capitalize">
+                                    <span>Featured products</span>
+                                </h3>
+                            </div>
+
+                            {% product  mode="list" limit=3 template='__product_list_1.liquid' %}
+
+                        </div>
+                    </section>
+
+
+
+
+
+                    <section class="slice-lg has-bg-cover bg-size-cover" style="background-image: url(static/images/img-slider-1.jpg);">
+                        <div class="mask mask-base-1--style-1"></div>
+                        <div class="container">
+                            <div class="row justify-content-center">
+                                <div class="col-6 text-center">
+                                    <h2 class="heading heading-1 strong-600 c-white">
+                                        Join the biggest sales of the year
+                                    </h2>
+                                    <p class="c-white trong-300 mt-4">
+                                        Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. There is only that moment, and the incredible certainty that everything under the sun has been written by one hand only.
+                                    </p>
+
+                                    <div class="btn-container mt-5">
+                                        <a href="/pages/sales" class="btn btn-styled btn-white btn-outline btn-circle px-5" target="_blank">Learn more</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+
+
+                    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+</body>
+</html>

resources/appearance/techvista/pages_detail.liquid

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+<meta name="author" content="Mietubl">
+<meta name="description" content="{{ page.seo_description | strip_html| strip_newlines  }}">
+<meta name="keywords" content="{{page.seo_keywords}}">
+<title>{{page.seo_title}}</title>
+
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+                    <!-- BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="page-title">
+                                <div class="row align-items-center">
+                                    <div class="d-flex justify-content-end col-lg-12 col-12">
+                                        {% for  breadcrumb in breadcrumbs %}
+                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
+                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
+                                                    &nbsp;
+                                                    {% if forloop.index == 1 %}
+                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
+                                                        <i class="ion-ios-home"></i>
+                                                    {% else %}
+                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
+                                                        <i class="ion-ios-arrow-forward"></i>
+                                                    {% endif %}
+                                                    {{ breadcrumb.name }}
+                                                </a>
+                                            </h2>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- END: BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+
+                                    <div class="block block-post">
+                                        <div class="block-body block-post-body">
+                                            <h1>
+                                                {{ page.title | raw }}
+                                            </h1>
+
+                                            {{page.content | raw }}
+
+                                        </div>
+                                    <!-- Comment form -->
+                                </div>
+                             </div>
+                    </section>
+
+                    {{ page.page_type }}
+                    {% if page.page_type == 0 %}
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                        <div class="pt-5">
+                                <nav aria-label="Product pagination">
+                                    <ul class="pagination pagination--style-2 justify-content-center">
+                                        <!-- Previous Page Link -->
+                                        {% if paginator.previous_page %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="{{ paginator.previous_page_url }}" tabindex="-1">Previous</a>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item disabled">
+                                                <a class="page-link" href="#" tabindex="-1">Previous</a>
+                                            </li>
+                                        {% endif %}
+
+                                        <!-- Next Page Link -->
+                                        {% if paginator.next_page %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="{{ paginator.next_page_url }}">Next</a>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item disabled">
+                                                <a class="page-link" href="#">Next</a>
+                                            </li>
+                                        {% endif %}
+                                    </ul>
+                                </nav>
+                            </div>
+                        </div>
+                    </section>
+                    {% endif %}
+
+                    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+
+<!-- Isotope -->
+<script src="/static/js/isotope.min.js"></script>
+<script src="/static/js/imagesloaded.pkgd.min.js"></script>
+
+<!-- Deso Slide -->
+<script src="/static/js/jquery.desoslide.min.js"></script>
+<script>
+    $('#slideshow').desoSlide({
+        thumbs: $('#slideshow_thumbs .swiper-slide > a'),
+        thumbEvent: 'click',
+        first: 0,
+        effect: 'none',
+        overlay: 'none',
+        controls: {
+            show: false,
+            keys: false
+        },
+    });
+</script>
+</body>
+</html>

resources/appearance/techvista/pages_sp_contact.liquid

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+<meta name="description" content="{{ site.dist.seo_description  | strip_html| strip_newlines }}">
+<meta name="keywords" content="{{ site.dist.seo_keywords }}">
+<meta name="author" content="Mietubl">
+<title>{{ site.dist.seo_title }}</title>
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+                    <!-- BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="page-title">
+                                <div class="row align-items-center">
+                                    <div class="d-flex justify-content-end col-lg-12 col-12">
+                                        {% for  breadcrumb in breadcrumbs %}
+                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
+                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
+                                                    &nbsp;
+                                                    {% if forloop.index == 1 %}
+                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
+                                                        <i class="ion-ios-home"></i>
+                                                    {% else %}
+                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
+                                                        <i class="ion-ios-arrow-forward"></i>
+                                                    {% endif %}
+                                                    {{ breadcrumb.name }}
+                                                </a>
+                                            </h2>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- END: BREADCRUMB -->
+                    <section class="slice">
+                        <div class="container">
+                            <div class="text-center">
+                                <h2 class="heading heading-2 strong-400">
+                                    Contact us for help
+                                </h2>
+                                <p>
+                                    Please call us or complete the form below and we'll get to you shortly.
+                                </p>
+
+                                <a href="" class="btn btn-styled btn-xl btn-base-1 btn-icon-left mt-4">
+                                    <i class="fa fa-mobile"></i>Hotline: {{ site.dist.service_hotline }}
+                                </a>
+                                <span class="clearfix"></span>
+                                <small>Get support by calling the 24h helpline.</small>
+                            </div>
+                        </div>
+                    </section>
+
+                    <section class="slice pt-0 sct-color-1">
+                        <div class="container">
+                            <div class="row justify-content-center">
+                                <div class="col-lg-8">
+                                    <!-- Contact form -->
+
+                                    {% contactus template='__contactus.liquid' %}
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+</body>
+</html>

resources/appearance/techvista/products_categories.liquid

@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+<meta name="description" content="{{ category.seo_description | strip_html| strip_newlines  }}">
+<meta name="keywords" content="{{category.seo_keywords}}">
+<title>{{category.seo_title}}</title>
+<meta name="author" content="Mietubl">
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+
+
+
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+                    <!-- BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="page-title">
+                                <div class="row align-items-center">
+                                    <div class="d-flex justify-content-end col-lg-12 col-12">
+                                        {% for  breadcrumb in breadcrumbs %}
+                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
+                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
+                                                    &nbsp;
+                                                    {% if forloop.index == 1 %}
+                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
+                                                        <i class="ion-ios-home"></i>
+                                                    {% else %}
+                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
+                                                        <i class="ion-ios-arrow-forward"></i>
+                                                    {% endif %}
+                                                    {{ breadcrumb.name }}
+                                                </a>
+                                            </h2>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- END: BREADCRUMB -->
+                    <section class="slice sct-color-2">
+                        <div class="container">
+                            <h4 class="heading heading-xs text-uppercase strong-600 mb-0 text-center">
+                                Trending
+                            </h4>
+                            <div class="section-title section-title--style-1 text-center mt-1">
+                                <h3 class="section-title-inner heading-3 strong-600 line-height-1_6">
+                                    <span>{{category.name}}</span>
+                                </h3>
+                                <span class="section-title-delimiter clearfix d-none"></span>
+                            </div>
+
+                            <div class="row-wrapper">
+                                <div class="row cols-xs-space cols-sm-space cols-md-space">
+                                    {% for item in products %}
+
+                                    <div class="col-lg-3 col-md-6 col-wrapper--spaced-y">
+                                        <div class="card card-product z-depth-1-top z-depth-2--hover">
+                                            <div class="card-body">
+                                                <h2 class="heading heading-6 strong-600 mt-2 mb-3 title-over-flow">
+                                                    <a  href="/products/{{ item.id }}" target="_blank" title="{{ item.title | strip_html }}">
+                                                        {{ item.title | strip_html }}
+                                                    </a>
+                                                </h2>
+
+                                                <div class="card-image swiper-js-container">
+                                                    <div class="">
+                                                        <div class="swiper-container" data-swiper-items="1" data-swiper-space-between="0">
+                                                            <div class="swiper-wrapper">
+                                                                <div class="swiper-slide">
+                                                                    <a  href="/products/{{ item.id }}" target="_blank" >
+                                                                        {% if item.images and item.images[0].image_url %}
+                                                                            {% assign image_url = item.images[0].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 %}"
+                                                                                 class="img-fluid img-center img-primary default-image-thumbnail-small">
+                                                                        {% else %}
+                                                                            <div class="img-fluid img-center img-primary default-image-thumbnail-small no-image-placeholder-thumbnail-small">
+                                                                                <span>No Image</span>
+                                                                            </div>
+                                                                        {% endif %}
+                                                                    </a>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+                                                <div class="mt-3">
+
+                                                    <p class="product-description mt-3 mb-0 title-over-flow" >
+                                                        {{ item.content | strip_html| strip_newlines | default: "No description " }}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <div class="card-footer">
+                                                <div class="product-buttons">
+                                                    <div class="row align-items-center">
+                                                        <div class="col-2"></div>
+                                                        <div class="col-8">
+                                                            <a  href="/products/{{ item.id }}" target="_blank" >
+                                                            <button type="button" class="btn btn-block btn-base-1 btn-circle btn-icon-left">
+                                                                View Details
+                                                            </button>
+                                                            </a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    {% endfor %}
+                                </div>
+
+                            </div>
+
+                            <div class="pt-5">
+                                <nav aria-label="Product pagination">
+                                    <ul class="pagination pagination--style-2 justify-content-center">
+                                        <!-- Previous Page Link -->
+                                        {% if paginator.previous_page %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="{{ paginator.previous_page_url }}" tabindex="-1">Previous</a>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item disabled">
+                                                <a class="page-link" href="#" tabindex="-1">Previous</a>
+                                            </li>
+                                        {% endif %}
+
+                                        <!-- Pagination Links -->
+                                        {% for page in paginator.pages %}
+                                            {% if page == paginator.current_page %}
+                                                <li class="page-item active">
+                                                    <span class="page-link">{{ page }}</span>
+                                                </li>
+                                            {% else %}
+                                                <li class="page-item">
+                                                    <a class="page-link" href="{{ paginator.page_url[page] }}">{{ page }}</a>
+                                                </li>
+                                            {% endif %}
+                                        {% endfor %}
+
+                                        <!-- Next Page Link -->
+                                        {% if paginator.next_page %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="{{ paginator.next_page_url }}">Next</a>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item disabled">
+                                                <a class="page-link" href="#">Next</a>
+                                            </li>
+                                        {% endif %}
+                                    </ul>
+                                </nav>
+                            </div>
+
+                        </div>
+                    </section>
+
+
+
+
+
+
+                    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+</body>
+</html>

resources/appearance/techvista/products_detail.liquid

@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+<meta name="author" content="Mietubl">
+<meta name="description" content="{{ product.seo_description  | strip_html| strip_newlines }}">
+<meta name="keywords" content="{{product.seo_keywords}}">
+<title>{{product.seo_title}}</title>
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+                    <!-- BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="page-title">
+                                <div class="row align-items-center">
+                                    <div class="d-flex justify-content-end col-lg-12 col-12">
+                                        {% for  breadcrumb in breadcrumbs %}
+                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
+                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
+                                                    &nbsp;
+                                                    {% if forloop.index == 1 %}
+                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
+                                                        <i class="ion-ios-home"></i>
+                                                    {% else %}
+                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
+                                                        <i class="ion-ios-arrow-forward"></i>
+                                                    {% endif %}
+                                                    {{ breadcrumb.name }}
+                                                </a>
+                                            </h2>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- END: BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <!-- Product gallery and Description -->
+                            <div class="row cols-xs-space cols-sm-space cols-md-space">
+                                <div class="col-lg-6">
+                                    <div class="gallery-container">
+                                        <div id="slideshow" class="gallery-top no-padding bg-transparent"></div>
+                                        <div id="slideshow_thumbs" class="swiper-js-container gallery-thumbs gallery-thumbs--style-1 mt-4">
+                                            <div class="swiper-container" data-swiper-items="5" data-swiper-space-between="10" data-swiper-xs-items="3" data-swiper-xs-space-between="10" data-swiper-sm-items="4" data-swiper-sm-space-between="10">
+                                                <div class="swiper-wrapper">
+                                                    {% if product.images and product.images.size > 0 %}
+                                                        {% for item in product.images %}
+                                                            {% assign image_url = item.image_url %}
+                                                            <div class="swiper-slide">
+                                                                <a href="{% 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 %}" data-desoslide-index="{{ forloop.index0 }}">
+                                                                    <img src="{% if image_url contains 'http' %}{{ image_url }}?x-oss-process=image/resize,m_pad,w_100,h_100{% else %}{{ site.image_base_url }}{{ image_url }}?x-oss-process=image/resize,m_pad,w_100,h_100{% endif %}" alt="{{ product.title }}">
+                                                                </a>
+                                                            </div>
+                                                        {% endfor %}
+                                                    {% else %}
+                                                        <div class="swiper-slide">
+                                                            <a href="/static/images/product_default.jpg" data-desoslide-index="0">
+                                                                <img src="/static/images/product_default.jpg" alt="Default Product">
+                                                            </a>
+                                                        </div>
+                                                    {% endif %}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="col-lg-6">
+                                    <div class="px-2">
+                                        <!-- Product description -->
+                                        <div class="product-description-wrapper px-1">
+                                            <!-- Product title -->
+                                            <h2 class="product-title font-size-2">
+                                                {{product.title | strip_html }}
+                                            </h2>
+                                            <hr>
+                                            <div class="row align-items-center">
+
+                                            </div>
+
+                                            <!-- Product description -->
+
+                                            <table class="table table-specs">
+                                                <tbody>
+                                                {% for item in product.parameters %}
+
+                                                <tr>
+                                                    <td>
+                                                        <span class="c-gray-light strong-600">  {{ item.key }}</span>
+                                                    </td>
+                                                    <td>
+                                                        {{ item.value }}
+                                                    </td>
+                                                </tr>
+                                                {% endfor %}
+                                                </tbody>
+                                            </table>
+                                            <hr>
+                                            <div class="row row-no-padding no-margin">
+                                                <div class="col-lg-8">
+                                                    <form class="form-default">
+                                                        <!-- Choose size -->
+                                                        <label class="strong-600">Contact us </label>
+
+
+                                                        <div class="d-table product-quantity width-100 mt-3">
+
+                                                            <div class="d-table-cell">
+                                                                <a data-fancybox data-src="#fancybox_hidden_content" class="btn btn-base-1 btn-icon-left" href="javascript:;">
+                                                                    <i class="icon ion-android-add"></i>     Get a quote
+                                                                </a>
+                                                            </div>
+                                                        </div>
+                                                    </form>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <span class="space-xs-xl"></span>
+
+                            <div class="row-wrapper">
+                                <div class="row cols-xs-space cols-sm-space cols-md-space">
+                                    <div class="col-lg-12">
+                                        <div class="feature  feature--bg-1">
+                                            <h3 class="heading heading-6 strong-600">     Description:</h3>
+
+
+                                            <p>
+                                                {{product.content | raw }}
+                                            </p>
+                                        </div>
+                                    </div>
+
+
+                                </div>
+
+
+                            </div>
+
+                        </div>
+                    </section>
+
+                    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+
+<!-- Hidden content -->
+<div   id="fancybox_hidden_content" style="display:none;">
+    <h4 >Get a quote</h4>
+    <form id="form_contact" data-action="/contact" class="form-default" role="form">
+        <input type="hidden" name="_token" value="{{ csrf_token }}">
+        <input type="hidden" name="consulting_products" value="{{ product.title }} }}">
+        <div class="row">
+            <div class="col-md-6">
+                <div class="form-group has-feedback">
+                    <label for="" class="text-uppercase c-gray-light">Your name</label>
+                    <input type="text" name="customer_name" class="form-control form-control-lg" required>
+                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                    <div class="help-block with-errors"></div>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="form-group has-feedback">
+                    <label for="" class="text-uppercase c-gray-light">Email address</label>
+                    <input type="email" name="email" class="form-control form-control-lg" required>
+                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                    <div class="help-block with-errors"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-6">
+                <div class="form-group has-feedback">
+                    <label for="" class="text-uppercase c-gray-light">Company name</label>
+                    <input type="text" name="company_name" class="form-control form-control-lg">
+                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                    <div class="help-block with-errors"></div>
+                </div>
+            </div>
+            <div class="col-sm-6">
+                <div class="form-group has-feedback">
+                    <label for="" class="text-uppercase c-gray-light">Phone/whats_app</label>
+                    <input type="text" name="whats_app" class="form-control form-control-lg" required>
+                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                    <div class="help-block with-errors"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-12">
+                <div class="form-group has-feedback">
+                    <label for=""  class="text-uppercase c-gray-light">Message</label>
+                    <textarea name="content" class="form-control no-resize" rows="5" required></textarea>
+                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                    <div class="help-block with-errors"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="">
+
+
+            <button type="reset" class="btn-reset d-none"></button>
+            <button type="submit" class="btn btn-styled btn-base-1 mt-4">Send message</button>
+        </div>
+    </form>
+
+</div>
+
+
+
+
+{% include '_footer_js.liquid' %}
+
+
+<!-- Deso Slide -->
+<script src="/static/js/jquery.desoslide.min.js"></script>
+<script>
+    $('#slideshow').desoSlide({
+        thumbs: $('#slideshow_thumbs .swiper-slide > a'),
+        thumbEvent: 'click',
+        first: 0,
+        effect: 'none',
+        overlay: 'none',
+        controls: {
+            show: false,
+            keys: false
+        },
+    });
+</script>
+</body>
+</html>

resources/appearance/techvista/version.liquid

@@ -0,0 +1 @@
+<!-- update date 2024-12-12 11:45 -->

resources/appearance/techvista/videos_categories.liquid

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+<meta name="author" content="Mietubl">
+<meta name="description" content="{{ tag.seo_description | strip_html| strip_newlines  }}">
+<meta name="keywords" content="{{tag.seo_keywords}}">
+<title>{{tag.seo_title}}</title>
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+                    <!-- BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="page-title">
+                                <div class="row align-items-center">
+                                    <div class="d-flex justify-content-end col-lg-12 col-12">
+                                        {% for  breadcrumb in breadcrumbs %}
+                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
+                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
+                                                    &nbsp;
+                                                    {% if forloop.index == 1 %}
+                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
+                                                        <i class="ion-ios-home"></i>
+                                                    {% else %}
+                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
+                                                        <i class="ion-ios-arrow-forward"></i>
+                                                    {% endif %}
+                                                    {{ breadcrumb.name }}
+                                                </a>
+                                            </h2>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- END: BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="row align-items-center">
+                                <div class="col-12" >
+                                    <h3 class="heading heading-3 strong-600 text-uppercase mb-0 text-center">{{ tag.name }}</h3>
+                                </div>
+
+                            </div>
+
+                            <div class="row cols-md-space cols-sm-space cols-xs-space">
+
+                                {% for item in videos %}
+                                    <div class="col-lg-4 col-wrapper--spaced-y">
+                                        <div class="card z-depth-2-top">
+                                            <div class="card-image">
+                                                <div class="view view-first">
+                                                    <a href="/videos/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}">
+
+                                                        {% assign cover_image_url = item.cover_image %}
+                                                        {% if cover_image_url %}
+                                                            {% if cover_image_url contains 'http' %}
+                                                                <img src="{{ cover_image_url }}" alt="Cover Image">
+                                                            {% else %}
+                                                                <img src="{{ site.image_base_url }}{{ cover_image_url | append: '?x-oss-process=image/resize,m_pad,w_400,h_400' }}" alt="Cover Image">
+                                                            {% endif %}
+                                                        {% else %}
+                                                            <div class="img-center default-image-thumbnail no-image-placeholder-thumbnail">
+                                                                <span>No Image</span>
+                                                            </div>
+                                                        {% endif %}
+
+                                                    </a>
+                                                </div>
+                                            </div>
+
+                                            <div class="card-body">
+                                                <h3 class="heading heading-5 strong-500 mb-0 title-over-flow" >
+                                                    <a href="/videos/{% if item.slug %}{{ item.slug }}{% else %}{{ item.id }}{% endif %}" title="{{ item.title | strip_html }}">{{ item.title | strip_html }}</a>
+                                                </h3>
+                                            </div>
+
+                                            <div class="card-footer">
+                                                <div class="row">
+
+                                                    <div class="col text-right">
+                                                        <ul class="inline-links inline-links--style-2">
+                                                            <li>
+                                                                {{item.post_date }}
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                {% endfor %}
+
+
+
+
+
+                            </div>
+                        </div>
+                    </section>    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+</body>
+</html>

resources/appearance/techvista/videos_detail.liquid

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="{{site.dist.country_lang }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="robots" content="index, follow">
+<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
+<meta name="author" content="Mietubl">
+<meta name="description" content="{{ page.seo_description  | strip_html| strip_newlines }}">
+<meta name="keywords" content="{{page.seo_keywords}}">
+<title>{{page.seo_title}}</title>
+
+{% include '_header_css.liquid' %}
+</head>
+<body>
+
+<!-- MAIN WRAPPER -->
+<div class="body-wrap shop-default shop-cards shop-tech">
+    <div id="st-container" class="st-container">
+        <div class="st-pusher">
+            <div class="st-content">
+                <div class="st-content-inner">
+                    <!-- HEADER -->
+                    {% include '_header.liquid' %}
+                    <!-- END: HEADER -->
+                    <!-- BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                            <div class="page-title">
+                                <div class="row align-items-center">
+                                    <div class="d-flex justify-content-end col-lg-12 col-12">
+                                        {% for  breadcrumb in breadcrumbs %}
+                                            <h2 class="heading heading-6 text-capitalize strong-500 mb-0">
+                                                <a href="{{ breadcrumb.url }}" class="link text-underline--none">
+                                                    &nbsp;
+                                                    {% if forloop.index == 1 %}
+                                                        <!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
+                                                        <i class="ion-ios-home"></i>
+                                                    {% else %}
+                                                        <!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
+                                                        <i class="ion-ios-arrow-forward"></i>
+                                                    {% endif %}
+                                                    {{ breadcrumb.name }}
+                                                </a>
+                                            </h2>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- END: BREADCRUMB -->
+                    <section class="slice sct-color-1">
+                        <div class="container">
+
+                                    <div class="block block-post">
+                                        <div class="block-body block-post-body">
+                                            <h1>
+                                                {{ video.title | raw }}
+                                            </h1>
+
+
+                                            <div class="d-flex justify-content-center">
+                                                <div style="position: relative; width: 90%; padding-top: 56.25%;"> <!-- 16:9 ratio -->
+                                                    <iframe
+                                                        src="{{ video.video_url | raw }}"
+                                                        title="YouTube video player"
+                                                        frameborder="0"
+                                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                                        referrerpolicy="strict-origin-when-cross-origin"
+                                                        allowfullscreen
+                                                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+                                                    ></iframe>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    <!-- Comment form -->
+                                </div>
+                             </div>
+                    </section>
+
+                    {{ page.page_type }}
+                    {% if page.page_type == 0 %}
+                    <section class="slice sct-color-1">
+                        <div class="container">
+                        <div class="pt-5">
+                                <nav aria-label="Product pagination">
+                                    <ul class="pagination pagination--style-2 justify-content-center">
+                                        <!-- Previous Page Link -->
+                                        {% if paginator.previous_page %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="{{ paginator.previous_page_url }}" tabindex="-1">Previous</a>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item disabled">
+                                                <a class="page-link" href="#" tabindex="-1">Previous</a>
+                                            </li>
+                                        {% endif %}
+
+                                        <!-- Next Page Link -->
+                                        {% if paginator.next_page %}
+                                            <li class="page-item">
+                                                <a class="page-link" href="{{ paginator.next_page_url }}">Next</a>
+                                            </li>
+                                        {% else %}
+                                            <li class="page-item disabled">
+                                                <a class="page-link" href="#">Next</a>
+                                            </li>
+                                        {% endif %}
+                                    </ul>
+                                </nav>
+                            </div>
+                        </div>
+                    </section>
+                    {% endif %}
+
+                    <!-- FOOTER -->
+                    {% include '_footer.liquid' %}
+                </div>
+            </div>
+        </div><!-- END: st-pusher -->
+    </div><!-- END: st-container -->
+</div><!-- END: body-wrap -->
+<a href="#" class="back-to-top btn-back-to-top"></a>
+{% include '_footer_js.liquid' %}
+
+<!-- Isotope -->
+<script src="/static/js/isotope.min.js"></script>
+<script src="/static/js/imagesloaded.pkgd.min.js"></script>
+
+<!-- Deso Slide -->
+<script src="/static/js/jquery.desoslide.min.js"></script>
+<script>
+    $('#slideshow').desoSlide({
+        thumbs: $('#slideshow_thumbs .swiper-slide > a'),
+        thumbEvent: 'click',
+        first: 0,
+        effect: 'none',
+        overlay: 'none',
+        controls: {
+            show: false,
+            keys: false
+        },
+    });
+</script>
+</body>
+</html>