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:



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.
  4. After installing theme successfully, choose Publish theme then continue to do other settings

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.


4.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.
After each step, do not forget to Save Changes:

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.

4.1.General Setting

Goto Theme Customize -> Gerenal:



Config font-size and color:

4.1.3.Page Title


Config color and align for page title.

4.2.Page Background

Go to Theme Customize -> Page Background



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

4.3.Button Config

Go to Theme Customize -> Button

Color config for primary and secondary button.



4.4.Home Product

Go to Theme Customize -> Home Product

To display Product Tab like this


  • Go to Products > Collections to Add a collection



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



  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

4.5.Home Block

Go to Theme Customize -> Home Block


Setting for Block Top block



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

4.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.



Go to Theme Customize -> Col-left:

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


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



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


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


In Shop by color:



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


In Shop by Size: 


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




In Shop by Price: 



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




In Shop by Brand: 



  • 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!




Go to Theme Customize -> Currency



4.8.Contact Page

Go to Theme Customize -> Contact Page




4.9.About Us

Go to Theme Customize -> About Us


Go to Theme Customize -> Fonts

4.11.Check Out

Goto Theme Customize -> Checkout





4.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
  2. Find Assets and choose the file styles.css.liquid then edit the content as it needs to be

4.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.

7.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.

7.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:


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



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>


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




7.2.Category List


7.3.Product Collection

Go to Theme Customize -> Product Collection

You can upload and set display Category Image for Collection.


Product Hover Image: New feature,


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




7.4.Product Detail

Go to Theme Customize -> Product Detail




7.5.Product Filter

  • Filter by color
  • Filter by Size
  • Filter by Price
  • Filter by Brand

8.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

9.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”



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




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


Enable Display Mega Menu.


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.


  • 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


9.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

9.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.

9.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 

10.Home Slideshow

Goto Theme Customize -> Home - Slideshow





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




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

12.Installing Apps

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


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


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.

Suggest Edit