Techmarket Electronics shopify Theme

7 Different demos for 7 different markets

We have included 7 different demos for 7 different markets. You can import them and get started right away.

Electronics Market

Inspiring collection of home pages

Choose from eight awesome home pages and use the power of techmarket to make them your own. Easily change all colors, rearrange sections, add new elements, and so much more.

Home ^v1

Awesome shop elements

Choose from lots of awesome shop elements to make your dream shop.

Innovative Shopify layouts

Choose from 3 different layouts to showcase your product. Use the power of techmarket to add show advanced reviews with review breakup, add accessories that enable users for quicker checkout and add additional specification with ease.

Product Full-width

Product Sidebar

body { font-family: 'Rubik', sans-serif; } .staff-list { display: flex; position: absolute !important; top: 25px; width: 100%; height: 320px; flex-wrap: wrap; align-items: center; padding: 0 !important; align-items: stretch; } .staff-list li { width: 50% !important; text-align: left; position: relative !important; } .staff-list li + li { text-align: right; } .staff-list li a { vertical-align: middle; position: relative; width: 100%; display: inline-block; color: white; text-decoration: none; } .staff-list li a .img-wrap { height: 100%; width: 100%; display: inline-block; overflow: hidden; } .staff-list li a .img-wrap img { width: 46%; height: auto; } h1 { font-weight: 700; font-size: 100px; text-transform: uppercase; } .m-b-20 { margin-bottom: 20px; } a, a:hover{ color: #000; text-decoration: none; } .theme-info,.footer-content{ padding: 20px 220px 40px 220px; font-weight: 200; font-size: 22px; line-height: 40px; color: #000; letter-spacing: 0.4px; } .theme-title h1{ margin-bottom: 0; } .theme-title { position: relative; z-index: 1; } .buy-theme { padding: 14.5px 50px; background-color: transparent; border-radius: 50px; color: #0165d5; font-size: 16px; display: inline-block; text-transform: uppercase; font-weight: 400; letter-spacing: 0.4px; /*border: 2px solid #fed700;*/ border: 2px solid #0165d5; } .buy-theme:hover{ border: 2px solid #0165d5; background-color: #0165d5; color: #fff; } .buy-theme:focus { /*color: #fff;*/ text-decoration: none; } .buy-theme i { padding-left: 10px; } .techmarket-option .content a img{ width: 100%; border: 10px solid #dadada; } .techmarket-option .content a { display: block; background-color: #000; } .techmarket-option h4 { margin: 34px 0 44px 0; } .techmarket-option { padding: 70px 0; } .techmarket-option .content a:hover img { opacity: 0.8; } .view-demo { display: block; text-transform: capitalize; margin-top: 30px; } .view-demo i { display: block; font-size: 20px; padding-top: 6px; } .theme-title h3 { text-transform: uppercase; letter-spacing: 1px; color: #afafaf; } h3 { margin-top: 0; } h4 { font-weight: 500; } .home-version { padding: 42px 0 80px 0; } .home-version h4 { font-size: 16px; margin-top: 32px; font-weight: 500; margin-bottom: 40px; } .demo { padding: 70px 0; background-color: #EEEEE9; } .headings { text-align: center; margin-bottom: 86px; } .headings h2 { font-size: 32px; font-weight: 500; margin-bottom: 24px; letter-spacing: -0.2px; } .headings .content { font-size: 20px; letter-spacing: 0.1px; line-height: 32px; padding: 0 90px; font-weight: 200; } h4{ text-transform: uppercase; margin: 20px 0; color: #0063d1; } .verson .browser-window { height: 435px; } .verson .browser-window .content { height: 406px; } .demo .browser-window { height: 335px; } .demo .browser-window .content { height: 306px; } .demo .browser-window .content a { border-radius: 5px; } .home-version .browser-window { height: 462px; } .home-version .browser-window .content { height: 432px; } .verson .browser-window .content a, .demo .browser-window .content a, .home-version .browser-window .content a { overflow: hidden; } .page-header { padding: 100px 0; margin: 0 auto 30px auto; border-bottom: none; background-color: #eff2f1; background-image: url(select_html/images/pat.png); -webkit-box-shadow: inset 0px 0px 30px -4px rgba(0,0,0,0.19); -moz-box-shadow: inset 0px 0px 30px -4px rgba(0,0,0,0.19); box-shadow: inset 0px 0px 30px -4px rgba(0,0,0,0.19); } .page-header h4 { margin: 0 0 34px 0; } .buy-techmarket { padding: 80px 0; display: block; position: relative; } .buy-techmarket::after { content: ""; background-image: url(select_html/images/bg.jpg); opacity: 0.05; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; } .buy-techmarket h1 { font-size: 40px; } .box { position: relative; } .ribbon { position: fixed; left: -5px; top: -5px; z-index: 1; overflow: hidden; width: 75px; height: 75px; text-align: right; } .ribbon span { font-size: 8px; font-weight: normal; color: #FFF; text-transform: uppercase; text-align: center; line-height: 20px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); width: 100px; display: block; letter-spacing: 0.6px; background: #79A70A; background: linear-gradient(#0063d1 0%, #0063d1 100%); position: absolute; top: 19px; left: -21px; } .ribbon span::before { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #0063d1; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #0063d1; } .ribbon span::after { content: ""; position: absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #0063d1; border-bottom: 3px solid transparent; border-top: 3px solid #0063d1; } svg { margin-bottom: 20px; width: 400px; height: auto; } .footer { padding: 40px 0; background-color: #202020; color: #fff; } .footer .made-love{ line-height: 32px; color: #fff; } .footer .made-love i { color: #ea1b25; padding-left: 4px; } .footer .copyright{ font-size: 14px; color: #5b5b5b; padding-left: 10px; } .footer h1 { font-size: 60px; margin-bottom: 30px; } .browser-window a { display: block; } .browser-window img { width: 101%; } .browser-window { text-align: left; width: 100%; display: inline-block; border-radius: 0; background-color: #fff; box-shadow: 0 0 0 3px #e7e7e6; } .browser-window .top-bar { height: 30px; border-radius:0; border-top: thin solid #eaeae9; border-bottom: thin solid #dfdfde; background: linear-gradient(#e7e7e6, #e2e2e1); } .browser-window .circle { height: 8px; width: 8px; display: inline-block; border-radius: 50%; background-color: white; } .browser-window .circles { margin: 5px 11px; } .browser-window .circles a { display: inline; padding-left: 10px; font-size: 13px; font-weight: 500; } .browser-window .circle-red { background-color: #e11d21; } .browser-window .circle-green { background-color: #009800; } .browser-window .circle-yellow { background-color: #fbca04; } .browser-window .content { margin: 0; width: 100%; min-height: 50%; display: inline-block; border-radius: 0 0 5px 5px; background-color: #fafafa; } @-webkit-keyframes heartbeat { 0% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 14% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 28% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 42% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 70% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } } @-moz-keyframes heartbeat { 0% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 14% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 28% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 42% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 70% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } } @-o-keyframes heartbeat { 0% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 14% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 28% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 42% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 70% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } } @keyframes heartbeat { 0% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 14% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 28% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 42% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 70% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } } .heart { text-align: center; } /* Styles for old versions of IE */ .heartbeat { font-family: sans-serif; font-weight: 100; } /* :not(:required) hides this rule from IE9 and below */ .heartbeat:not(:required) { -webkit-animation: heartbeat 1300ms ease 0s infinite normal; -khtml-animation: heartbeat 1300ms ease 0s infinite normal; -moz-animation: heartbeat 1300ms ease 0s infinite normal; -ms-animation: heartbeat 1300ms ease 0s infinite normal; -o-animation: heartbeat 1300ms ease 0s infinite normal; animation: heartbeat 1300ms ease 0s infinite normal; display: inline-block; position: relative; overflow: hidden; text-indent: -9999px; width: 20px; height: 20px; -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 30% 70%; } .heartbeat:not(:required):after, .heartbeat:not(:required):before { position: absolute; content: ""; background: #fd4b4b; } .heartbeat:not(:required):before { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius: 12px; border-top-left-radius: 12px; -moz-border-radius-bottomleft: 12px; -webkit-border-bottom-left-radius: 12px; border-bottom-left-radius: 12px; top: 6px; left: 0; width: 16px; height: 10px; } .heartbeat:not(:required):after { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius: 12px; border-top-left-radius: 12px; -moz-border-radius-topright: 12px; -webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; top: 0; left: 6px; width: 10px; height: 16px; } .clear { clear: both; }

welcome to

7 Different demos for 7 different markets

Electronics Market

Shoes Market

Organic Market

Glass Market

Garden Market

Sports Market

Multi Market

Inspiring collection of home pages

Home ^v1

Home ^v2

Home ^v3

Home ^v4

Home ^v5

Home ^v6

Home ^v7

Home ^v8

Awesome shop elements

Innovative Shopify layouts

Product Full-width

Product Sidebar