Getting Started

Welcome to Techmarket Shopify Theme!

We would like to thank you for purchasing Techmarket Shopify Theme! We are very pleased you have chosen Techmarket Shopify Theme(or interested in ) for your website, you will be never disappointed! Before you get started, please be sure to always check out this documentation. We outline all kinds of good information, and provide you with all the details you need to use Techmarket Shopify Theme. Techmarket will be used with Shopify 2.0 and we assume that you already have Shopify installed and ready to go.

If you are unable to find your answer here in our documentation, we encourage you to contact us through themeforest item support page with your site and Shopify admin details. We're very happy to help you and you will get reply from us more faster than you expected. Thank you, we hope you to enjoy using Techmarket Shopify Theme!

Compatible with Shopify:

Techmarket Shopify Theme is fully compatible with Shopify 2.0.

Shopify Information

To install this theme you must have a working version of Shopify already installed. If you need help installing Shopify, follow below sites and tutorials from Shopify.com, hope everything that you need are there.

Installation & Error

Shopify Installation

Shopify is web based ecommerce software. This means there’s no installation required and it works with all operating systems (including Windows and MacOS). You don’t have to worry about installing, upgrading or maintaining any software or web servers.

Please go to Shopify Site and choose Get Started.

Theme Installation


Important!

The package you download from Themeforest, after unzipping, have 3 files, which includes


  • Documentation file

  • Preset file : Contain the Data files for 8 demos

  • Theme File: The .zip file which is used to import.

  • Product demo

You can see the list of all demos on the Landing page.

  • Make sure you have unzipped your package .zip file.

  • From your Shopify admin, click Online Store, and then click Themes.

  • Click Upload a theme in the top right-hand corner:

Note!

If the message You can't have more than 20 themes on your store appears, you must export or delete one of your installed themes before you can install another one.

  • From the Upload A Theme dialog, click Choose File to select Techmarket-v2.0 > Theme file > Techmarket Theme.zip file that you want to upload.

  • Click Upload.

Choose the Demo

  • After importing the .zip file, go to Online Stores > Themes > Actions > Edit HTML/ CSS > Config folder > settings_data.json.

  • Go to the package folder: Techmarket-v1.0 > Presets, then open the demo file you want to use and copy the content

  • Replace this content with the content in the file settings_data.json

  • Choose Save to finish.

Publish Theme

Click Publish Theme button.

Errors in Installation

If you have error as below:

This happens when you are trying to upload the incorrect .zip to Shopify. 99% of the time this happens when the folder that was downloaded from Themeforest was NOT unzipped beforehand. Remember that The file you have to upload to Shopify is a .zip file in Packages folder (Techmarket_shopify_package.zip).

Update

About the update, please download the package from ThemeForest. Please note that:

  • When you import the new updated version, the settings on the Customize theme of the old theme can’t be converted.
  • If you didn’t done any custom on your theme, please import and config like normal
  • If you have done any custom, please:
    • Backup all your files you have done custom. 
    • After backup file, you can import the updated demo version like normal and replace by the backup files
      OR See the changelog to know which files were fixed or updated, then, only update those files.

Basic Configuration

Enable Customer Registration Form

To make the Top LInks on the Header works, you need to enable the customer registration first.

  • Go to Admin Panel > Settings > Checkout

  • Find the Customer Account section.

  • Choose Account are optional.

Install Apps

1. To have the Product Reviews works, please install the Shopify app, called Product Reviews

View in Shopify App Store

2. To help in creating the Deal Products, please install the Shopify app, called Metafield Sync

View in Shopify App Store

Here is an example:

Create a new product

Refer the Shopify guide

Add Product Countdown

This guide will show you how to display the countdown on the product image on the Homepage & Collection page and also, the product deal on the Product page.

  1. Go to Product > Products > choose a product.

  2. On Product Description box, MUST BE in the top, insert the line below:

    [countdown]yyyy/mm/dd hh:mm:ss[/countdown]

    For example : [countdown]2017/12/10 10:30:00[/countdown]

    Here is an example on the Product Configuration :

Import/ Expoxt products

Refer the Shopify guide

Create a new collection

Refer the Shopify guide

Navigation, Menus and links

Refer the Shopify guide

Payment Methods

Refer the Shopify guide

Homepage Configuration

Drag & Drop Sections - Page Builder

Add Sections

Techmarket Shopify theme allows the users to add ALL of the sections from the other demos.

Go to Admin Panel > Online Stores > Themes > Customize theme > Add sections




Theme Configuration

Collection Page Configuration

Basic Settings

This theme comes with a new collection page, which is more customizable & mobile-friendly. There are some areas you need to check:

  1. Edit and Manage Collection in Products > Collections

  2. Add and assign products to each collection, go to Products > Products

  3. Go to: Customize theme > Collection Page to config filtering & set the column number in collection page.

  4. Configure to show filter by attributes (color, size or manuafacture): Customize Theme > Collection Filtering.

  5. Configure to show collection side-bar in collection page: Customize Theme > Collection Sidebar.

  6. Configure to show collection side-bar collection in collection page: Customize Theme > Sidebar Bestseller Collection.

How to add Top Banne Sliders?

Go to Products > Collections, choose a collection and click Show HTML.

Please insert the code below:

Note!

After inserting the code, you can click again the button "Show Editor" to edit.
Or you can change the image by replace the image link in tag <img> and the navigation link in tag <a href=>.

. 
<div class="category-content">
<div class="full-width-image-banner" style="background: url('https://cdn.shopify.com/s/files/1/2109/8617/files/banner-collection.jpg?11679762296477094581')  100% 50% no-repeat; background-size: cover; height: 409px;">
<div class="content">
<h3>Virtual Reality Headsets</h3>
<p>Nullam dignissim elit ut urna rutrum, a fermentum mi auctor. Mauris efficitur magna orci, et dignissim lacus scelerisque sit<br />amet. Proin malesuada tincidunt nisl ac commodo. Vivamus eleifend porttitor ex sit amet suscipit. Vestibulum at ullamcor-<br />per lacus, vel facilisis arcu. Aliquam erat volutpat.</p>
<p>Maecenas in sodales nisl. Pellentesque ac nibh mi. Ut lobortis odio nulla, congue rhoncus risus facilisis eget.<br /> Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<a href="#" class="btn-button no-bg icon">Read More</a></div>
</div>
</div>

Collection Page

Go to Online Stores > Themes > Customize theme > General Settings > Collection Page

General

  • Disable Sidebar Categories: Choose Yes if you want to hide the categories menu on the sidebar.

  • Alternative: Choose Yes if you want to change the produce images when hovering.

  • Keep Image Aspect Ratio: If set to Yes, shows product image with uploaded image's size ratio.
    If you choose No, you need to insert the Image Width and Image Height.

    Keep Image Aspect Ratio - Yes

    Keep Image Aspect Ratio - No

  • Choose if you want to Show Product Price

  • Choose if you want to Show Action Links

  • Choose if you want to Show Rating Stars

  • Choose if you want to Show Product Price

  • Number of Columns: Choose the number of column you want to show in 1 row.

  • There are 5 List Mode for you to choose: Grid, Grid Extended, List, Large List, and Small List

Collection Filtering

This theme includes a new advanced filter called Collection Filtering.

  • Go to: Customize theme > Collection Page > Filtering then select Filter By Groups

  • By Techmarket design, This filter is displayed in vertical mode (in sidebar), but you can custom to show it in horizon mode (in a bar on top) to help improving user experience


Set up Collection Filtering

Understanding the structure of the filter:

There are many filter items (from now we called a filter item "filter" as abbreviation)

  • To the image above, you can see there are 4 filters (Color, Size, Price, Brand)

  • To each filter, there are many values. For instance, Color has its value: beige, black, blue, gray, green, pink, red, silver and yellow.

  • When a value is selected, for instance "green", all products (in the collection) having "green" tag will be displayed.

  • The filter Color is displayed in swatches by default.

  • To each brand, there are many values. If i want to filter by brand "Adidas", all products (in the collection) having "Adidas" tag will be display.

Go to Customize theme > Collection Filtering

  • Used: Choose if you want to show the filter.

  • Heading: Add the title of the filter.

  • Filters: Add the Filter Variants.

Go to Products > Products, choose a product and go to Tags Area

Note!

In Filters box, you MUST separate the variants by the comma ( , ) with NO SPACE.

The Tags must like EXACTLY the variant which you insert in Collection Filtering.

Collection Sidebar

Note: The Collection Sidebar is applied for All collections page

Usually has the form: yourstore.com/collections

  • Sidebar Position: You can choose the postion of the sidebar to be on the left or right side of the collection page.

  • Menu Categories: Choose the Navigation Menu to show on the Menu Categories.

  • Banner Sidebar: Choose the Navigation Menu to show on the Menu Categories.

  • HTML Sidebar Categories: Add the content.


    Please add the code: 
    <div class="homepage-bar">
<div class="backgroud_home_bar">
<div class="block_content">
<div class="col-md-12">
<i class="icon-free-delivery"></i>
<div class="text-area">
<h3>Free Delivery</h3>
<p>from $50</p>
</div>
</div>
<div class="col-md-12">
<i class="icon-feedback"></i>
<div class="text-area">
<h3>99 % Customer</h3>
<p>Feedbacks</p>
</div>
</div>
<div class="col-md-12">
<i class="icon-free-return"></i>
<div class="text-area">
<h3>365 Days</h3>
<p>for free return</p>
</div>
</div>
<div class="col-md-12">
<i class="icon-safe-payments"></i>
<div class="text-area">
<h3>Payment</h3>
<p>Secure System</p>
</div>
</div>
<div class="col-md-12">
<i class="icon-best-brands"></i>
<div class="text-area">
<h3>Only Best</h3>
<p>Brands</p>
</div>
</div>
</div>
</div>
</div>

Product Page Configuration

Go to Online Stores > Themes > Customize theme > General Settings > Product Page .

Basic Settings

Enable Addtocart Sticky?

Choose if you want to have a Add to cart sticky popup to be displayed below the Main Menu when scrolling.


Color Swatches

Swatches is a feature for products presenting how a product looks like in different colors & size. This also shows the relationship between your product size and stock..

Enable Color Swatches

Go to Customize Theme > Product Page > General

Tick to enable color & size as swatches.

Settings

  1. In the Admin Panel, go to Products > Products > Add a product or edit an existing

    product.

  2. Add product details.

    Create different color, size or style variants (swatches) for product by clicking Add Variants

  3. Add Images to Swatches: Upload the image to: Online Stores > Themes > ... >

    Edit HTML/CSS > Assets > Add New Asset > Upload a file


    Reminder!

    There's an important naming convention to respect here! The image must be named after the color option, be all lowercase, seperated by " - ", and have a .png extension.
Media Slide

  • Keep Image Aspect Ratio: Choose Yes if you want to keep the image aspect ratio. If No, you must to add the Image Width & Image Height.

  • Thumbnail Images: There are 2 options: Verticle & Horizontal.

  • Product Image Size: Choose the size of the product page.

Horizontal

Media Zoom

Zoom Position

Right

Insignt

Lightbox

If you want to have the image popup display when customer click on the product image, choose to enable the Lightbox.

Product Tab

Configuration


Review Tab

To have the Product Reviews like our Demo, please install the Shopify app, called Product Reviews

View in Shopify App Store



Sidebar
Additional Product Tabs

TechMarket Shopify theme supports you to have 3 different product tabs for the different products

To config, please go to Admin Panel > Product > Product Configuration page > Description
You will use those tabs to separate the content :

  • [accesories] [/accesories]
  • [specifications] [/specifications]

The order of the tags MUST BE followed the example below.

Here is an example:


Related Products

A Related Product is shown on the product page, under product tabs. It is designed to encourage the customer to purchase more than one item. This type of product is usually a logical suggestion based on a same collection (automatic).

  • Techmarket Theme offers you more options to show related product on product page. Go to Customize Theme > Product Page > Related Product

  • Type of related product: There are 2 options to display the related products : By Collection & By Tags.

Newsletter

Go to: Online Stores > Themes > Customize Theme > General Settings > Newsletter:

Newsletter Footer

  • Insert the Newsletter Footer Content

  • Insert the MailChimp Form Action URL

    Note : Below the box is the link of the guide which show how to get this info.

Newsletter Popup

Setting : There are 3 options to choose the way the popup displayed.

  • Disable

  • Enable on ONLY Homepage

  • Enable on ALL pages.

Delay : Add the time you want the popup displayed before automatically closing.

The time is in Milisecond. For example: 10000 = 10s.

Popup Width : Config the popup width.

Translation

Edit Language

Here's a quick way to change some of the more commonly text

  • Go to: Themes > Actions > Edit language:



Second Language

Enable Multi Language

Go to Online Stores > Themes > Customize theme > General Settings > General > Multi Language

  • Choose Multi language enable?

  • Choose Icon? if you want to display the Language Flat.

  • Add the Language Name and upload the Language Flat


Language Flag

If you have more than one store view in your store, the store view selector will be displayed at the top of the page as a selectbox. You can enable different language for each store view.

For each available lanugage a flat is displayed in the store view switcher. Flag images form : PNG, 16*12 pixels .

Second Language

  1. Go to Online Stores > Navigation, click Edit link list, then change the link name follow the structure: Lang 1 | Lang 2

    For example : Home | Domicile

  2. Go to Product > Product list, then choose product:

    - Changing the product title follow the structure: Lang 1 | Lang 2

    - Changing the product content follow the structure: Page content Lang 1 [lang2] Page content Lang 2

  3. Go to Online Stores > Theme > ... > Edit HTML/CSS

    - In folder Locales, create new locales, for example: name folder for French: fre.json

    - Copy the content of en.default.json to fre.json

    - In fre.json, please replace the text behind the : and inside " " to French.

    For example : "home": "Home",

    "home_link_title": "Back to the frontpage"

    =>> "home": "Domicile",

    "home_link_title": "Retour a Domicile"

    - After finishing, pls copy the content of fre.json and replace with the content in file lang2.js in folder Assets.


Admin Options

General

Go to: Online Store > Themes > Customize theme > General Settings > General

Currencies

Go to: Online Store > Themes > Customize theme > General Settings > General > Currencies

  • Show:

    Choose to display the currencies or not.

  • Money Format:

    There are 2 options: Without Currency, Ex: $10 and With Currency, $10 CAD

  • Currencies you wish to support:

    Add the currencies, seperated by the space.

    For example: EUR USD GBP

  • Default currency:

    Insert the currency you want to set the default.

Favicon

This guide will show you how to change your theme's favicon.

  1. Go to: Online Store > Themes > ... > Edit HTML/CSS > Assets folder.

  2. Upload your new icon, name: favicon.ico and replace the old file.

Logo

You can easily to upload the logo by going to Header > Logo

Note: Maximum logo dimensions are 450px wide by 200px high. The uploaded file will be resized to fit within those constraints.

Logo Sticky

  • Sticky Header: You can enable Sticky Header.

  • Sticky Header on Mobile: You can enable or disable sticky header on mobile devices.

Customization Settings


Important !

If you want to do the customization on the theme style, please go to Online Stores > Themes > Customize theme > Customization Settings and insert the code on the Custom Style box.


Footer


Go to Online Stores > Themes > Customize theme > Sections > Footer

Footer- Brands

TechMarket Shopify theme supports you to have the Footer Brands. You can choose to display this section or not by marking the box Show Brands?

Footer structure

By default, Techmarket Footer has 3 sections:

  • Footer - Top

  • Footer - Middle

  • Footer - Bottom

Footer- Top

  • Show Footer Top: Choose Yes if you want to display the Footer-Top.

  • Social Button HTML :

    The code

    <div class="social-icons" style="float:right;">
<a href="https://www.facebook.com/" title="Facebook" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i> Facebook</a>
<a href="https://twitter.com/" title="Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a>
<a href="https://plus.google.com/" title="GooglePlus" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i> Google +</a>
<a href="https://vimeo.com/" title="Video" target="_blank"><i class="fa fa-dribbble " aria-hidden="true"></i> Vimeo</a>
<a href="https://rss.com/" title="Rss" target="_blank"><i class="fa fa-rss" aria-hidden="true"></i> RSS</a>
</div>

Footer - Middle

  • Show Footer Middle: Choose Yes if you want to display the Footer - Middle.

  • Support Content:
    The code: 

    <p style="font-size:15px;font-weight:500;letter-spacing: -0.025em;color:#1f1f1f;line-height:23px;">GOT QUESTION? CALL US 24/7!</p>
<p style="font-size:22px;font-weight:500;letter-spacing: -0.015em;line-height:21px;">801 017 197</p>
<p>17 Princess Road, London,
Greater London NW1 8JR, UK</p>
<p><i class="icon-map-marker"></i>Find is on map</p>

  • Payment Content:
    The code: 

    <span style="font-size:15px;font-weight:500;letter-spacing: -0.025em;color:#1f1f1f;line-height:23px;">WE USING SAFE PAYMENTS</span>

Footer - Bottom

Color

Go to Online Store > Themes > Customize theme > General Settings > Color.

General

Choose the Theme color.

Other Color Settings
On the other sections, you will have lots of options to config the Color of whole theme, Header, Footer, Page, Main Container.

Typography

About Typography


Font Family can be set (Google Fonts and Custom Fonts). Google Font Family has option to set one of many Google Fonts.

Both families has option for font size of 6 Heading types.

Go to Customize Theme > Typography

How to get a Google Web font name

Go to: https://www.google.com/fonts. Find your font in search field on the left hand


Click Quick-use button

Pages

Blog Page

How to create a Blog Post?

Go to Online Store > Blog Posts > Add Blog Post.

  • Add the Title.

  • Add the Content.

  • Choose Add excerpt and insert image with original size if you want to show this image on the Blog Page.

    If you want to have the slider, add more than 1 image.

  • Add image in Featured Image to display this image on the Homepage

Blog Page Sidebar

Go to Online Store > Themes > Customize theme > General Settings > Blog Page.

  • Display Sidebar :

    Choose the position of the sidebar on the blog page.

  • Display Recent Article? :

    Choose to display the recent posts on the sidebar.

  • Display Tabs Sidebar? :

    Choose to display the Tag Cloud.

Contact Page

Settings

Go to Customize Theme > Contact Page.

Here, you can integrate & stype Google Map with your address.

  • Google Map Api Key :

    You can get an API key from https://developers.google.com/maps/documentation/javascript/get-api-key.

    Here is an example key for localhost :
    AIzaSyDDfqNjiVz7F6wqWWn6NXuzwS4mEAQj6v4

Edit the Contact Detail

Go to Online Stores > Page > Contact Page.
There are 2 versions of Contact page. You can choose in the Template field.

Here is an example of Contact Page:

Checkout Page

Go to Customize theme > General Settings > Checkout.

Here you are able to do some settings for Banner , Logo , Main Content Area , Order Summary , Typography and Colors of Checkout Page.

Wishlist Page

Create Wishlist Page

Go to Online Store > Pages > Add Page

Go to Customize theme > Wishlist Page

Others

Frequently Asked Questions

Updating . . .

Support & Customization

Thanks for using Techmarket Shopify Theme!

We would like to thank you for using Techmarket Shopify Theme! We are very pleased you have chosen Techmarket eCommerce for your website, we always provide best support for our customers, you can confirm it from our themeforest review rating - top 1 in themeforest!

If you have any difficulities with Techmarket Shopify Theme or need any additional service, do not hesitate to contact us. We provide 24/7 Support!

Regarding presale questions and free support for theme usage, please contact us through themeforest support page. We will provide you amazing one-by-one email support and you will get answers more faster than you expected. We also provide support in weekends, but may require some more hours than normal working days.

Regarding customization service based on our themes or other Shopify related, please contact us to [email protected]. We have an amazing team to provide customization service who have done bunch of customization projects so far, will provide you reasonable quote before start.


Free Support for Questions and Issues

Themeforest Support Page
(Obest)

Customization Service(additional cost)

[email protected]
(OBest)

Change Log

Updating...