LoganCee – Multipurpose Responsive Shopify Theme

1.Getting Started

LoganCee – Multipurpose Responsive Shopify Theme

Documentation Version: 1.0.0

Typo LoganCee is a Multipurpose Responsive Shopify Theme, which can be easily customized. It will match all of your demand no matter which items your store are selling.

Rate this theme:

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to post it in TypoSupport site. Thanks you so much!

More info:

To get notification about the theme update, new features, our promotions and our upcoming themes, please follow us !

You should read this guide carefully to have correct configuration of the theme and Shotify.
Notes: If you want to find something quickly, you should use search tool in your browse/PDF reader (click Ctrl + F in almost readers) and find the word you are looking for:

2.Support

support

You can check more about support policy:

  • Shopify Help & Support: Everything you need to know to build your Shopify business.
  • Shopify Support: Get instant answers to common question.
  • App Stores : Powerful new features, services and plugins for your Shopify store.
  • Shopify API: All the tools you need to build powerful commerce solutions.

3.Theme Installation

Installation QuickShop Theme is easy and quick.

If you already had the Shopify site and want to apply the theme to your site, follow the instruction below:

  1. Download: themes-myshopify-logancee-1-ver1.0.0 .
  2. From your Shopify admin select Online Store > Themes.
    Logancee 01 Themes Shopify
  3. Click Upload a theme in the top righthand corner.
    2
  4. After installing theme successfully, choose Publish theme then continue to do other settings
    3

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.

Import Product: After install theme, you can import Product from CSV files:

  • Go to Products > Products and choose Import.

importproduct

4.Create Product

To add or update a product:

From your Shopify admin, click Products :

Click Add a product, or click the name of an existing product to edit it.

Enter or update the product information.

Click Save when you’re happy with the product information you’ve entered.

 

create-product01

1. Title
Enter a name for your product as you want your customers to see it. This field is mandatory.

2. Description
Enter a product description using the Rich Text Editor. Describing your products in detail will help your customers decide to buy your product. Avoid copying a manufacturer’s exact description, because you want your product pages to look unique to a search engine.

3. Images
Product display on your storefront, and let your customers see what your product looks like. These images are also used on Shopify POS.

4. Product Type
The type of product you are selling. This is helpful for use in automated collections of products, such as all your store’s hats, shirts, shoes, etc

5. Vendor
The vendor of your product, if you purchase it from another party.

6. Collections
Use this field to add the product directly to a manual collection. Automated collections will automatically include the product if it matches the collection conditions.

7. Tags
Tags are searchable keywords associated with your product. Tags can help customers find your product through your storefront search, and you can also use them to create automated collections.
In the Organization section, select or enter tags for your product, using a comma to separate different tags. Any new tags will be created.

You’ll using tags enter in this field to create filter product in Product Filter

create-product02

8. Price
This is the price you’re charging for your product. (The currency your store uses is set in your General Settings page.)
Compare at price: If you’re putting an item on sale, enter its original price here. Your product will show a sale price.
Charge taxes on this product: If you’re required to charge tax on your product, check this box. Your taxes are set in your Tax Settings.

9. Inventory
SKU (Stock Keeping Unit): Type a unique identifier that you want to use for this product. The SKU is useful for organizing fulfillment.
Barcode: Enter a barcode for the product. This is the same barcode that is used by Shopify POS in a retail store.
Inventory policy: Sets whether your product’s inventory will be tracked by Shopify.

10. Shipping
Weight: Enter the weight of your product. This is used to calculate any weight-based shipping rates or carrier-calculated shipping rates. You can purchase shipping scales at the Shopify Hardware Store.

11. Variants
Use variants to create different versions of a product that you have for sale.

For example, you might sell a product named sunglasses in different colors – black, red, and brown. In this case:

the product Title is sunglasses
the variant Option name is color
the variant Option values are black, red, and brown.
You can create variants when you’re adding a new product or at any time afterwards.

12. Search engine listing preview
Most customers look for products by using a search engine like Google or Bing. You can edit the way your products appear by clicking Edit website SEO in the Search engine listing preview section of the product page.

create-product03


When you using filter

5.Theme Setting

Open your Shopify admin panel and go to Online Store > Themes > Customize theme in the top menu. There you will find all the settings available for this theme.
0-0
After each step, do not forget to Save Changes:
0-1

Note: Always make a backup copy of your theme before you make any customizations. You’ll then be able to discard your changes and start again if you need to.

5.1.General Setting

Goto Theme Customize -> Gerenal:

5.1.1.Font

5-1

Config font-size and color:

5.1.3.Page Title

5-3

Config color and align for page title.

5.2.Page Background

Go to Theme Customize -> Page Background

4-1

4-2

You can config select background image or solid image, posittion, etc.. here.

5.3.Button Config

Go to Theme Customize -> Button

Color config for primary and secondary button.

7-1

7-2

5.4.Home Product

Go to Theme Customize -> Home Product

To display Product Tab like this

bestseller

  • Go to Products > Collections to Add a collection

a2

 

  • Choose the box next to Enable Product?
  • Do some settings as the below image

8-1

8-2

  1. Choose the number of visible items (1-5)
  2. Enter the Lable Title and Sub Title for each part block
  3. Choose Collection to products from the collection you have created from the previous step

5.5.Home Block

Go to Theme Customize -> Home Block
9-1

9-3

Setting for Block Top block
9-2

 

9-4

You can setup brands in theme settings page under the Home Block tab.

  • Choose the box next to Enable our brands on Home Page?
  • Everything you can do more is only browsing the image for the logos and entering other information

5.6.Columns Left

In this tutorial, will show you how to config to filter a collection.

If you want to filter by product tag. You have to set tag for product. Product -> Product then select the one you want to add tag.

tag

 

Go to Theme Customize -> Col-left:

In here, you can select which tag you want to use to filter:

colleft01

  • You can set enable to display filtering in Category Page & Product Detail Page.
  • Set title & config to display in every categories or specified category.

 

colleft02

  • If you want to display in specified categories, please name it here with “,” to separate.

colleft03

  • You can enable to select multi filtering value instead of select only 1.

 

In Shop by color:

colleft04

 

  • You can select color you want to add in filtering value.
  • You can insert image for color.

 

In Shop by Size: 

colleft05

  • You can Set title for this filtering.
  • Name filtering value, separate by “,”

filtering

 

 

In Shop by Price: 

 

colleft06

  • You can Set title for this filtering.
  • Price filtering value, separate by “,”.

price-filter

 

 

In Shop by Brand: 

colleft07

 

  • You can set title for this filtering.
  • Brand filtering value, separate by “,”.

brand filtering

You’ll using tags that enter in Create Product to create filter list!

 

 

5.7.Currency

Go to Theme Customize -> Currency

14-1

 

5.8.Contact Page

Go to Theme Customize -> Contact Page
16-1

16-2

16-3

16-4

5.9.About Us

Go to Theme Customize -> About Us
17

5.10.Fonts

Go to Theme Customize -> Fonts
18

5.11.Check Out

Goto Theme Customize -> Checkout
19

19-2

19-3

19-4

19-5

5.12.Style files

This theme has the CSS files styles.css.liquid

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited. Please follow these steps:

  1. Navigate Online Store > Themes> Edit HTML/CSS
    a1
  2. Find Assets and choose the file styles.css.liquid then edit the content as it needs to be

5.13.Java Script

This theme uses Jquery Javascript library and many plugins and custom built scripts. All the theme specific behaviour is written in global.js and this is the only file you may ever need to edit.

It is comparatively easy to find what you need to edit in gosh-scrip.js. Just open the file and look for init function. It initializes all other functions which you can recognize by the name.

8.Features Product

  • Easy management.
  • Display products in many Collections with Tab Panel.
  • Well responsive and mobile friendly.
  • Hover product image effect.
  • Resize and Crop Image make your site get better look.

8.1.Blog Post

  • Now go to Online Store > Blog Posts and choose Add a blog post
  • Show editor and enter the content in form of:

blogpos

You can turn on Editor to make it easier to insert content.

blogpos2

 

In Text Editor.

You can click icon at the top right to edit post in html and using this structure below to create a post with image and content

<p class=”images”> <img /></p>

and

<p class=”content”> Text content</p>

 

blog-post-02

 

8.2.Category List

Categories
11-1

8.3.Product Collection

Go to Theme Customize -> Product Collection
12-1

You can upload and set display Category Image for Collection.

h03

Product Hover Image: New feature,

h00

*New feature: When hover over product image. It’ll display second image of product with overlay background to make quickview button stand out!.

h01

 

 

8.4.Product Detail

Go to Theme Customize -> Product Detail

 13-1

13-2

13-3

8.5.Product Filter

  • Filter by color
    11-2
  • Filter by Size
    11-3
  • Filter by Price
    11-4
  • Filter by Brand
    11-5

9.Creating Dropdown Menu

To create a dropdown menu, first decide on which menu item in your Main Menu you would like to have as a dropdown:

  • From the Navigation tab in the Shopify Admin (Themes > Navigation), create a new link list (choosing Add a link list). The title of this “link list” must be the same as the title of the menu item from your Main Menu. For example, if you have a Main Menu with a link called “Shop”, create a new “link list” with the title “Shop”. Each link in this new “link list” will appear as a dropdown under “Shop”

    b1 b2
  • Now go to Theme Customize -> Mega Menu then tick on two box (Display Mega Menu? and Display Ticky Menu?), enter Mega Menu Items (for example, here is Fashion) then upload a new image for the dropdown menu

10.Mega Menu

In this guide you will learn how to add a new menu item to the MegaMenu.
To create a dropdown menu, first decide on which menu item in your Main Menu you would like to have as a dropdown

From the Navigation tab in the Shopify Admin (Themes > Navigation), create a new link list (choosing Add a link list). The title of this “link list” must be the same as the title of the menu item from your Main Menu. For example, if you have a Main Menu with a link called “Accessories”, create a new “link list” with the title “Accessories”. Each link in this new “link list” will appear as a dropdown under “Accessories”

megamenu01

 

You can add/drag to change the order that they appear in frontend store.

megamenu02

 

 

Go to Theme Customize -> Mega Menu:

We are having 5 Mega Menu items from Mega Menu item 1 to Mega Menu item 5. You can enable any items with a mega menu as you like.Each item stands for the link in the menu.
Each Mega Menu item also have 4 types of Mega Menu including:

  • Mega Menu Blocklinks
  • Mega Menu Video
  • Mega Menu Product
  • Mega Menu HTML

6-1

Enable Display Mega Menu.

6-2

Menu item 1: Enter “Link Name” of “Navigation / Main Menu” into Menu item 1 box.

  • You can tick on any Mega Menu type you want to use is enable.
  • Here you can enter Mega Menu Items (for example, here is Shop) then edit Mega Menu for the dropdown menu.

megamenu04

  • If you want to limit the Mega Menu width you can input the pixel values to the box.
  • Check to display label icons (Hot & New) at Mega Menu items.
  • You can divide the width of each Mega Menu type follow column of bootstrap

megamenu03

10.2.Mega Menu Video

You can embed a video to the Mega Benu by ticking the box next to Enable Mega Menu 1 video.

Then copy Video Code from youtube, or vimeo and put in the box Mega Menu video content. That it is done.

megamenu video

  • Columns  of block videos 1: Number of columns ( Bootstrap columns).
  • Mega Menu video content: youtube/vimeo code to embed

10.3.Mega Menu Product

 

If you want to display product in mega menu .
Please set config like this guide. Ticking Mega Menu Product enable.

mega menu product

  • Columns of block: Set width by bootstrap columns.
  • Mega Menu product title: Set title for this mega menu.
  • Mega Menu Product item: You can select how to display of mega menu product item here.
  • Limit Product: Number of product display in Mega Menu.

10.4.Mega Menu HTML

You can freely custom your Mega Menu by using this features.

Choose the box next to Mega Menu html enable 1.

mega menu html

You also can change the number of columns and image for Mega Menu html.

 

You can set 

11.Home Slideshow

Goto Theme Customize -> Home - Slideshow

 

10-1

10-2

12.Newsletter

Shopify has tight integration with MailChimp, which is an excellent service that allows you to create a mailing list and reach out to your customers. MailChimp has multiple pricing tiers, including one that is free and still offers a lot of functionality.

In various locations throughout the theme, you’ll notice newsletter sign up forms. If you wish to use this functionality, you must provide your form action URL. This is a special URL that is custom to your MailChimp account. For instructions on how to find your form action URL, follow add a third party newsletter signup form here!

 

Then go to Theme Customize -> Newsletter
2-1

2-2

12.2.Newsletter

2-2

  • Enable newsletter: Display newsletter in page/ template or not.
  • Upload custom newsletter background color (pallarax effect)
  • Enter Newsletter custom title, sub title and text.

13.Installing Apps

  • Choose Apps on the leftside menu then click on Visit the App Store button

a4

  • Search Products Review app in the search bar then choose Get.
  • Choose Install to complete the app installation.

14.Update

We’ll update frequently to make sure to satisfy customers!

Our development team is very interested in hearing your comments, so we have an easy way for you to send feedback in Typo Supporter while you’re using our template. We want to hear what you like and what you think we could do better.

All feedback will be taken seriously and treated confidentially.

Once again, thank you so much for purchasing this theme. As we said at the beginning, we’d be glad to help you if you have any questions relating to this theme. No guarantees, but we’ll do my best to assist.

14.1.How to Update

For each theme package, we have “update files ” folder. It contain every files you need to update theme to the latest version.

update1

It was divide into different folders for each home layout.

update2

You can copy files and replace the one in current live stores by directories.

update3

 

http://support.typostores.com/

Contact us if you need any help

Suggest Edit