Styleshop - Responsive Shopify Theme User Guide


Firstly, a huge thanks for purchasing this theme, your support is truly appreciated! This document covers the installation and use of this theme, reveals some answers to common problems and issues. We encourage you to read throughout this document if you are experiencing any difficulties. If you have any questions that are beyond the scope of document, please feel free to contact us via our Ticket Support System. http://www.smartaddons.com/support/tickets
Below you will find the documentation for how to use the template.

To install this theme you must create a Shopify account.

For information an overview of Shopify's platform and features please see the Shopify Documentation

Shopify is a hosted ecommerce solution that allows you to set up and run your own online store. Pick an ecommerce website template (preferably from us!), list your products, accept credit card orders, and ship your goods — all with a few clicks of the mouse. With Shopify it's easy to sell online and there's no software to download or maintain.

You can start free trial with Shopify. Click the image below Start your free 14-day trial of Shopify

img1

Read shopify manual before you start

Installation


Dowload

1. Purchase Ss Styleshop template from Themeforest.net then you can download theme package.

2. Extract Package that include all files and folders of theme..

3. Find this file: Styleshop-1.0.0.zip in the folder Styleshop-v1.0.0, then you just need to upload Styleshop-1.0.0.zip file to your Shopify store.

I. Install Theme


Video installation tutorial

Look at this video of installation process:

To install the theme:

  1. Please log in to your Shopify store, click Online Store, then click Themes.
    Install
  2. From there, click Upload a theme on the top right-hand corner.
    Install
  3. The Upload A Theme dialog displays. Click Choose File to select the .zip file you want to upload, then click Upload.
    Install
  4. If your store is currently active and is using a different theme, you can select Publish theme button to publish what you have just uploaded to be an active theme.
    Install
    Install

Install Apps


1. Set Product Review

To have product review feature, you can install this free app below:

Get App - Product Reviews

2. Wishlist

There are some issues with wishlist and shopify hasn't updated it yet. There is no way around this because of the limitation of Memory. The memory was made available for anyone to make such requests, which also can't be increased.

In order to remedy this situation, a 3rd party wishlist app will need to be used as they operate completely diffirently through our API and don't have the same limitations as the solution created through Github has.

The following link will lead you to our app page with results showing all the wishlist apps we integrate with - Wishlist Apps

Store Setting


I. Enable Customer Registration Form


  1. From your Shopify admin, click Settings, then click Checkout.
    #
  2. Scroll down to the Customer accounts section.
  3. Check Accounts are optional and click Save.
    #

Setup shipping rates


To enable shipping calculator, please configure your shipping rates by following below guide:

Setup shipping rates

Configure Currency (General)


   Video Example

Editing the HTML for currency formatting

  1. From your Shopify admin, click Settings:
    #
  2. Scroll down to Select setting Garenal: .
    #
  3. Click change formatting to open the Currency Formatting section.
    #
  4. Replace selected text and click Save
    Install

  5. Currency must be the same


    #

Setup of Page


You will also need to create two pages, one for the textual content that can be placed on the ' Frontpage ' as a welcome message and another for the ' Contact Page ' which you can link to the 'page.contact' template. Linking these pages to the correct template will be covered in their respective sections within this documentation. Here is the link which help you to create custom pages.

If you are having difficulty in finding complimentary colors to use throughout your customization, we recommend using an advanced color wheel/palette such as Adobe Kuler.

Create Contact Us Page


Login to your Shopify admin panel and go to Pages, click Add a page:

Install

1. In the Online Store / Pages, find and click button "Add a page"

2. Write in the Title field page name:

3. Select Visibility: Visible

4. Select Template: page.contact

5. Click save

Install

Setting Customize

After you create Contact Us page successfully, please go to Themes > Customize theme > Click Contact us which you just created at navigation to show Section for this.

At this Section, you can start adjusting like in this image below:

Install

Then, paste the embedded code of Google Map into the field Google Map Code and put the content that you'd like to show as the below image.

Install

Edit/add fields to the Contact Form

This is the contact form we are going to add/ edit:

To add/edit contact field, please follow below guide:

Adding fields to the Liquid Contact Form

Create Wishlist Page


1. From the pages tab, click the Add a page, then click page.

Install

2. From your Shopify admin, click Online Store button. You will be taken to a new template page.

Install

3. From the template page, enter a Title and choose the Template look like the below image.

Install

4. Click Save.

Create Hot Deals Page


1. From the pages tab, click the Add a page, then click page.

Install

2. From your Shopify admin, click Online Store button. You will be taken to a new template page.

Install

3. From the template page, enter a Title and choose the Template look like the below image.

Install

4. Click Save.

5. From your Shopify admin, click Online Store, then click Themes. Click Customize theme for the theme you want to customize. In General Settings Tab -> Hotdeal Page.

- Backend setting:

img



Setup Navigation


   Video Example

From your shop admin, go to the Online Store / Navigation



1. Create a Link List In Menu

Main Menu

img img

Create Blog


Link setup guide blog Blog Posts Manual





Using of Variant images and Color Variant


To create product with color variant as in our demo page (https://Styleshop-demo-10.myshopify.com/products/cras-in-nunc-non-ipsum-duo-cursus-ultrices?variant=31534360328), you need to follow these steps:


A. Add images to your product variants

1. From your Shopify admin, click Products, then click on the product you would like to add color variants.

Color Variant

2. In Variants section, click the image icon to assign an image to that variant.

Color Variant

3. Select a product image or click Add image to upload a new image.

Color Variant

4. Click Save .



B. Add color variant icons

After that, to show color swatch icons, you can use one of two below methods:

1. Upload icon with the same name as the variant color name (please use PNG icon). You need to go to Settings --> Files upload images here.
Naming convention: Lower cap and use "-" to replace white space.
For example: with the option name "Modern Style" the icon name will be modern-style.png.

2. Use color name for the option.
Naming convention: No space and the name need to be existed in this table: http://www.w3schools.com/tags/ref_colornames.asp
For example: MediumPurple or MistyRose, Black.

Using of Advanced Filtering


Advanced Filtering sidebar is built on top of Tags of Shopify. To make the feature work, you need to configure options in theme setting and add tags to your products (like variant option)

To use advanced filtering as in our demo page (http://Styleshop-demo-8.myshopify.com/collections/all), you need to follow these steps:

1. From your Shopify admin, click Online Store, then clickThemes.

Install

2. Click Customize theme for the theme you want to customize.

3. Go to collection page, at Sidebar section, add content that you'd like to show. We offer 4 options for you to show in your site: Color, Size, Price, and Brand

Install

Advanced Filtering

Advanced Filtering

Advanced Filtering

Advanced Filtering

4. Go to Products, click on the product that you'd like to show these options.

Advanced Filtering

5. In the Organization sections, you need to put tags which you just filled in the above sidebar option for products you would like to show (using a comma to separate different tags).

Advanced Filtering

For example:
If you would like to filter by color and price, your products have below options: Red color, White color, Blue color, Black color, Under $100, $100 - $200, Above $200. Then you need to fill in theme settings all these options.
For a product A which has below options: Red color, Gray color, Less than $299, $300 - $899, you need to add below tags: Red, White, Blue, Black, $100 - $200, Above $200 for this product.

Theme settings


1. From your Shopify admin, click Online Store, then click Themes.

2. Click Customize theme for the theme you want to customize.

For more information regarding Shopify theme settings, please refer to Theme Setting Guide.

General


From your Shopify admin, click Online Store, then click Themes. Click Customize theme for the theme you want to customize. In General Settings Tab -> General.

Settings

TypoGraphy


In General Settings Tab. Click TypoGraphy Tab

Settings

Color


In General Settings Tab. Click Color Tab

Settings

Header


In General Settings Tab. Click Header Tab

Settings

Layout


From your Shopify admin, click Online Store, then click Themes. Click Customize theme for the theme you want to customize. In General Settings Tab -> Layout.

This below box will allow you to choose between using a background color and a background image. If you select the background images, you can upload it using the upload form below.

Settings

Currency


In General Settings Tab. Click Currency Tab

Settings

Social media


In General Settings Tab. Click Social Tab. You can enable/disable social block.

Settings

Newletter


In General Settings Tab. Click Newletter Tab. You can enable/disable Newletter Popup.

Settings

Newletter


In General Settings Tab. Click Newletter Tab. You can enable/disable Newletter Popup.

Settings

Homepage Sections


You can drag & drop sections.

Read more Section at here.

1. From your Shopify admin, click Online Store, then click Themes.

2. Click Customize theme for the theme you want to customize.

Settings



List sections on homepage

Settings


1. Home Page Slideshow

Add new: Click the "Add section" -> Click the "Home Page Slideshow"

- SETTINGS:

  • Show Prev/Next arrows: Show/Hide button navigation.
  • Show dot indicators: Show/Hide dot indicators.
  • Auto-rotate slides: Enable/Disable Autoplay.
  • Change slides every (*): Autoplay Speed in milliseconds.
  • Image size (*): Slideshow image size. Example: 1920x940

Note: (*) This field is required.

img



- CONTENT:

-- Item: Image

  • Image: Upload slide image
  • Caption alignment: There are three styles: Center, Left, Right
  • Heading: Enter the heading. Can be left blank.
  • Heading color: Choose color for Heading
  • Subheading: Enter the subheading. Can be left blank.
  • Subheading color: Choose color for Subheading
  • Button text: Enter the button text. Can be left blank.
  • Button link: Enter the button link. Can be left blank.
  • Slide link: Enter the slide link. Can be left blank.

img


- Frontend appearance

img


2. Home Page Services

Add new: Click the "Add section" -> Click the "Home Page Servives"

- SETTINGS:

  • Title: Hidden on website


- CONTENT:

-- Item: Box item

  • Content: Upload slide image
  • Text Title: Enter the heading. Can be left blank.
  • Text Description: Choose color for Heading

img


- Frontend appearance

img

3. Home Page Product Deals

Add new: Click the "Add section" -> Click the "Home Page Product Deals"

- Backend setting:

img


- Frontend appearance

img

Example:

img



4. Home Page Banner

Add new: Click the "Add section" -> Click the "Home Page Banner"

- Backend setting:

img


- Frontend appearance

img



5. Home Page Product

Add new: Click the "Add section" -> Click the "Home Page Product"

- Backend setting:

img


- Frontend appearance

img



6. Home Page Blogs

Add new: Click the "Add section" -> Click the "Home Page Product"

- Backend setting:

img


- Frontend appearance

img



7. Home Page Product List

Add new: Click the "Add section" -> Click the "Home Page Product"

- Backend setting:

img


- Frontend appearance

img



8. Home Page Logo List

Add new: Click the "Add section" -> Click the "Home Page Logo List"

- Backend setting:

img


- Frontend appearance

img



Credits


Need Help?


If you have any questions, please do not hesitate to contact us at http://www.smartaddons.com/support/tickets. We are happy to help!