1 Theme Documentation
Thank you for purchasing our theme. This is one of the finest Shopify theme. Fitsy Fitness & Sports Clothing Shopify Store is packed with a lot of powerful features. We have put together this documentation in the best possible way to explain these features and help you set up your website. Let's get Started!
All of your emails will be reviewed and checked carefully. However, based on the number support tickets and the nature of the request itself, the response time can be up to 1-2 business days.
Support Policies : A supported item includes item support for 6 months from the purchase date. During those 6 months, we are expected to be available to provide the item support services. You’ll also have the option to purchase extended item support, increasing the item support period up to a maximum of 12 months from the date of purchase.
Read the item documentation first
Many support queries and technical questions will already be answered in supporting documentation such as FAQ's and comments from previous buyers. We also make sure that all of the items sold on Envato Market have documentation included so always check the included information and if you can’t find the answer you’re looking for then consider whether the author might be able to help.
1.1About the Theme
This is a versatile and user-friendly Shopify theme. It gives you stylish page layouts and sections so you can easily design your attractive online store. You can use its intuitive Drag and Drop interface to create your unique Homepage. The specially designed Shop Page of This is ideal for showcasing your products in the most attractive way. Not just Homepage or Shop Page, you can use other inbuilt layouts for inner pages such as About, Contact, Services, Blog Page, FAQ Page in an equally attractive way. This makes it all easy.
If you need any assistance that are beyond the scope of this help file, kindly contact us through mail. Thank you so much!
Theme Customization
Our support covers getting setup with the theme, theme related questions and bugs or issues that occur when using the theme. Customization can be any work you need done to the theme that is not covered by the scope of our support.
In most cases, this is anything that falls outside of the options the theme offers. We work with an amazing customization team. They have unique offerings and can provide the services you need to customize your theme.
Note : if it's a minor customization means, we will do it for free. If any customization work takes more than 1 hour, we will charge $30/ per hour.
1.2 Download the Theme Package
When you purchase our theme from ThemeForest, you can download the theme files via the ‘Downloads’ tab on your ThemeForest account. While you download theme, you can choose the ‘All Files & Documentation’. This will includes the theme files and supporting documents.
Step 1 – Login to your ThemeForest account and navigate to the ‘Downloads’ tab.
Step 2 – Locate your Theme purchase, and click the Download button. Choose between ‘All Files & Documentation’.
1.3 Shopify Information
To install this theme you must have a shopify store already. It can be trial store or premium one.
If you need help with understanding general details about shopify in Shopify. Below are all the useful links.
1.4 Theme Features
- Responsive design: Looks great on desktops, laptops, tablets and mobiles. Give it a try on your iPhone or iPad now.
- Draggable sections: Option to change the home page layout order using drag and drop option.
- Custom Content Block Option to showcase custom content with images.
- Ajax filters: Filter products by colors and other parameters using tags.
- Ajax Cart: An option to purchase the items without leaving current page.
- Ajax Wishlist: An option keep your items in wihlist.
- Highly customizable: Change colors, fonts, background image through the theme settings. No coding required.
- Multi-currency: The currecies AUD,CAD,USD,GBP,JPY,EUR,NZD,INR,PHP are inbuilt with theme
- Product sorting on collection pages: Sort by price, A to Z, newest etc.
- Great for SEO: Uses the latest Shopify SEO features and product data is formatted for Google rich snippet, so that product listings are optimized for search engines.
- Deal Timer: An option to setup deal timer to promo banners as well as for unique products.
- Newsletter: A pop-up and standard newsletter subscription form.
- Social sharing: Share by Twitter, Facebook, Google+ and Pinterest.
Getting Started
Getting up and running with theme is quick and easy. Simply create a Shopify account, purchase the theme and upload it. You'll then have the opportunity to customize it to your liking before publishing it as your main theme.If that sounds like a lot, don't worry… each step is outlined in detail below and it's entirely possible to go from scratch to a store running Boutique in under ten minutes!
If you already have a Shopify account, then you can skip ahead to the next section. If you're considering setting up a store but haven't done so yet, read on.
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.
Below is a full list of everything that is included when you download the main files, along with a brief description of each item.
Please unpack the whole package after downloading it from Themeforest. On that extracted themeforest-fitsy-shopify-theme.zip, You can find files like Documentation, fitsy.zip , Log.txt and Readme.txt. You need to install the file "fitsy.zip".
- fitsy.zip – This is the installable theme file you’ll need to install or upload.
- Log.txt – this file contains theme change/update log.
- Readne.txt – this file contains details about folder structure.
2Theme Installation
Installing Theme is easy and quick.To install the theme, please log in to your Shopify store and go to the Themes. From there, follow the instruction below:
1.In your back office go to: Online Store > Themes
2. Click Import option.
3. Select fitsy.zip file from extracted folder.
4. Once this files is loaded , just publish theme and do further setups.
Note : We advise reading and familiarizing yourself with the Shopify Manual. It is an extremely well written and thorough guide to understand the Shopify platform, written by Shopify themselves. It will help you understand many aspects of customization for your theme as well as using Shopify in general.
2.1Checkout Settings
Once you have uploaded and activated the theme, install and activate few other free apps/plugins as follows.
Step 1: From your Shopify admin, go to the Settings / Checkout.
Step 2:In the Form options section, make the appropriate changes.
Note : Click on "save" to update the changes.
2.2 Plugin/App Installation
Once you have uploaded and activated the theme, install and activate few other free apps/plugins as follows.
Step 1 : Log in to the Shopify App Store.
Step 2 : Find an app that you want to install, and then click it.
Step 3 : On the app listing page, click Add app.
Step 4 : In your Shopify admin, to authorize the use of the app, click Install app.
Note : After the app is installed, you can view and use it from the Apps page in your Shopify admin.
2.3Choose a language for your theme
Step 1 : From your Shopify admin, go to Online Store > Themes > Settings
Step 2 : Store languages > Add language
Step 3 :Language: Choose a language.
Step 4 :Click Save.
Using the language editor, enter translations for your theme text. Your changes are saved automatically.
To make sure that you have created complete translations for all of your theme's text content, you can search for incomplete translations.
3 Header layout
In order to manage general header setting, navigate to Online Store > Themes and click Customize button at the top right corner.
Header Settings
In this section, you can select your Header Position, Header Layout, and Header width settings. Depending on the options you select here, their respective dependent options will load and appear.
Topbar Settings
In this section, you can set your Topbar settings.
Create a Mega-Menu with Image
Add collection link in the drop-down menu item which must have Collection image
6Setup Pages
When you first install theme , it won’t contain all the extra pages setup by default that you might have seen in the live demo. For that you need to do followings setup for respective pages.
Step 1 : Go to Online Store > Pages
Step 2 : Click Add page
Step 3 : Enter a title for the page
Go to Customizer > Pages
You can add, remove, edit, and customize sections using the theme editor
About us page
Step 1 : Go to Online Store > Pages
Step 2 : Click Add page
Step 3 : Enter a title for the page
Step 4 : Select 'about' in the Online store section, from the Theme template drop-down menu
Step 4 : Go to Customizer > Pages > About
Step 6 : You can add, remove, edit, and customize sections using the theme editor
Contact Page
Step 1 : Go to Online Store > Pages
Step 2 : Click Add page
Step 3 : Enter a title for the page
Step 4 : Select 'Contact' in the Online store section, from the Theme template drop-down menu
Step 4 : Go to Customizer > Pages > Contact Page
Step 6 : You can add, remove, edit, and customize sections using the theme editor
Service Page
Step 1 : Go to Online Store > Pages
Step 2 : Click Add page
Step 3 : Enter a title for the page
Step 4 : Select 'Service Page' in the Online store section, from the Theme template drop-down menu
Step 4 : Go to Customizer > Pages > Service Page
Step 6 : You can add, remove, edit, and customize sections using the theme editor
Wishlist Page
Step 1 : Go to Online Store > Pages
Step 2 : Click Add page
Step 3 : Enter a title for the page
Step 4 : Select 'Wishlist Page' in the Online store section, from the Theme template drop-down menu
Step 4 : Go to Customizer > Pages > Wishlist Page
Step 6 : You can add, remove, edit, and customize sections using the theme editor
7 Sliders
You can change all the content, image , text color, links and button bg of slider banner in the "Slider" section itself.
Step 1 : Login into Admin
Step 2 : Navigate to Online Store > Themes > Live theme > Customize
Step 3 : Sections > Slideshow > edit Slideshow
Step 4 : The ‘Slideshow Settings’ tab will open and allow you to set the general settings for your slider.
Step 5 : Once you are done, click ‘Save Changes’ to save the slider. Next you can add slides, see the information below.
8 Theme settings
A theme style is a collection of settings chosen by the theme designer that you can apply to your store to give it a polished look and feel. All themes have a theme style applied by default. When you customize a theme, you replace the theme style settings with your own. If you apply a theme style to your theme, then your current settings, such as colors and typography, will change.
Step 1 : From your Shopify admin, go to Online Store > Themes.
Step 2 : Find the theme that you want to edit and click Customize.
Step 3 : Click Theme settings.
8.1 Colors
The Favicon Options are located in the Go to Online Store > Themes > Customize > Click Theme settings > Colors section.
Use these color pickers to set the primary colors and Secondary colors throughout the theme. At times we will use your selections to automatically generate variations by blending your colors. Additionally, some sections give you the option to manually set colors that overwrite these defaults.
- Text - Overall text color
- Title - Used for titles throughout the layout
- Background - Primary background color
- Content box background - Use for the "add to cart" box on product pages and for the sidebars on collection and blog pages
- Accent - Primary accent color for buttons and links
8.2 Typography
Choose from a huge selection of free fonts from Shopify's font library for the body (primary text), headings (titles) and navigation (header menu, buttons and small UI based text).
It's recommended that you use system fonts in your store. Using system fonts avoids downloading new fonts to your customer's computer, which can negatively impact your store load speed. The font that displays on your customer's computer depends on their operating system.
- Heading Font Family — choose a font family for the heading;
8.3 General settings
The Product pages section is the main customizable section for product pages. You can customize this section
Position - Choose the location of the product description relative to the product image.
Show a tab next to your product description - Display the content of a page, such as a size chart or a return policy, on a second tab. Select the page to display in Tab content.
8.4 Styles
Shopify product badges will make your products stand out from the market of other products in the search results that customers find. With millions of Shopify stores operating at the same time, you need something different that will catch customers’ attention fast so they won’t keep scrolling.
Badges are a short and effective way of promoting the specialty of your products and drive customers’ focus just by skimming through product pages. Without having to say too many words that customers sometimes don’t bother reading, you just need to point out the most interesting point that you want to show.
Sale badge color scheme: To change the color of the Sale Badge on theme.
Sold out badge color scheme : To change the color of the Sold out badge on theme.
8.5 Social media
Theme includes a wide range of social media icons that can be used in several locations on your site. All social media icons are CSS based font icons, which ensures that they are high quality, and can be configured using the available options.
To Change theme Social media : Go to Online Store > Themes > Customize > Click Theme settings > Social media section.
8.6 Checkout
Quick Shop allows your customers to search and order the products quickly without navigating to all categories to find products.
Enabling the 'Quick Shop' for your products allows customers to easily and quickly add a product to their cart without having to leave the page! If you enable the 'Quick Shop' an option will show up when you hover over product thumbnails in Collections.
You can enable the 'Quick Shop' within the theme settings! From your Shopify Admin, head into Customize > Theme Settings > Quick Shop. Enable quick shop' setting:
9 Home Page Sections
The sections are made global in Online Store 2.0. Therefore, not only the homepage, if you want to customize your product page, blog page, collection page, or any page, you can easily do that. Using metafields, Shopify makes it easy for you to manage your content.
Sections allows user to easily add or move content on their homepage with just a few clicks. You can preview your changes in real-time in either desktop or mobile view
There are 25+ sections available to use.Total 18 sections available on home page any time you can add, update, reorder and delete any section
Home page options can be easily configurable via these settings.
Settings of Themes --> Customize -> Sections -> Add Section:
9.1 Slideshow
Section use for Images Slider with caption and custom links.
General Settings: Display on, Show Full width, Style value, Slide effect, Auto-rotate slides, Slide width in px (Desktop), Slide height in px (Desktop), Enable Navigaiton, Navigation Position and Enable Pagination.
The Important area is the Content area. It will listing all slide of Slideshow. Click to Slide to edit
You have more than one option to display slidshow and banners at the top for your online store
- Slideshow Default - You have 2 style with this option
- Text position left, right and center with text align center
- Text position left, right and center with text align left and background image animation
- Slideshow Image Only
- Parallax Banner
9.2Grid Banner
Go to Store Admin >> Online Store >> Customize >> Sections >> Grid Banner
9.3Image banner
Go to Store Admin >> Online Store >> Customize >> Sections >> Image banner
9.4Blog posts
Go to Store Admin >> Online Store >> Customize >> Sections >> Blog posts
9.5Collection list
Themes use sections to create your ideal layout. Most sections are made up of blocks that serve a specific function, such as headers, text, single images, a collage of images, or links. Using sections and blocks in your templates provides more flexibility in how you arrange your store's content, enabling you to control the look and feel of your online store without the need to edit code.
9.6Email signup
Go to Store Admin >> Online Store >> Customize >> Sections >> Email signup
9.7Featured collection
Go to Store Admin >> Online Store >> Customize >> Sections >> Featured collection
9.8Featured product
Go to Store Admin >> Online Store >> Customize >> Sections >> Featured product
9.9Multicolumn
Go to Store Admin >> Online Store >> Customize >> Sections >> Multicolumn
9.10Team Section
Go to Store Admin >> Online Store >> Customize >> Sections >> Team Section
9.11Masonry Banner
Go to Store Admin >> Online Store >> Customize >> Sections >> Masonry Banner
9.12Testimonials
Go to Store Admin >> Online Store >> Customize >> Sections >> Testimonials
9.13Video
Go to Store Admin >> Online Store >> Customize >> Sections >>Video
10 Collection Page
Step 1 : Go to Online Store > Collections > Default collection
Step 2 :You can control Sidebar position (left, right, remove)
Step 3 :Add & remove, drag & drop block types like Search, Category, Vendor, Type, Color, Size, Collection, Tag, Menu, and Banner in the Sidebar
Step 4 :You can controll product column and limit also
11 List collections
Step 1 : Go to Online Store > Collections > List collections
Step 2 :You can control Sidebar position (left, right, remove)
Step 3 :Add & remove, drag & drop block types like Search, Category, Vendor, Type, Color, Size, Collection, Tag, Menu, and Banner in the Sidebar
Step 4 :You can controll product column and limit also
12Blog Page
No matter which layout style you use to display your blog posts, the first thing you need to do is create the blog posts.
How To Create A Blog Post
Step 1 – Navigate to Blog Posts in your shopify admin sidebar.
Step 2 – Click on the Add blog post to make a new post. Create a title, and insert your post content in the editing field.
Step 4 – Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.
Step 5 – For a single image, click the Featured Image Box, select an image and click Save.
Step 6 – For a video post, paste the iFrame embed from either Youtube or Vimeo into the Video Embed Code field.
Step 7 – Once you are finished, click visible and save the post.
13Contact Page
Contact page page must be assigned to the respective template file while creating it.
Contact page options can be easily configurable using these settings.
Contact page have an option to embed google iframe map with enable/disable features.
Also it includes editable address fields at section itself.
Where do I generate googlemap iframe code?
Add fontawesome icon class Where do I find this Class name?
15.1Multiple Currencies
You can enable multiple currencies by adding the countries and regions for each currency that you want to accept in your store.
Step 1 :In the Shopify Payments section, click Manage.
Step 2 :In the Countries/regions section, click Add country/region.
Step 3 :Select the country or region that you want to support from the list of supported countries and regions.
Step 4 :Click Add country/region.
15.2Add variants while you're creating a product
Step 1 : In the Options section of the Add product page, check This product has options, like size or color.
Step 2 : In Option name, enter a name for the option, for example Size. Customers see this name.
Step 3 : In Option values, enter each option value in a separate field, for example Small, Medium, Large. Customers see these option values when they choose a variant.
Step 4 :If your variants differ in more than one way, then click Add another option. You can have up to 3 options for each product.
Step 5 : As you add the product options, a list of variants appears. Uncheck the boxes next to any combination of options that you don't sell. You can also add prices, SKUs, and barcodes for individual variants, or use the defaults based on the product details.
Step 6 : Optional: Add a different product image for each variant.
Step 7 : Click Save.
15.3Create a Bundle product
Bundling products together is a great way to increase average order value and encourage customers to buy more from your shop. It’s also a great way to clear out inventory of older products or promote a new product launch. You can create bundles on Shopify without an app by following these simple steps:
Step 1 : Create a new product in your Shopify admin.
This will be the “parent” product for your bundle. Give it a name, description, and price.
Step 2 : Add a variant to this product for each of the products you want to include in the bundle. Make sure to set the inventory for each variant to 0 so that customers can’t purchase the products individually.
Step 3 : Create a new collection and call it something like “Bundles”.
Step 4 : Add the parent product to this collection.
Step 5 : Enable collection discounts. This can be done in your Shopify admin under Discounts (under Sales channels).
Create a new discount and choose “Collection” as the type. Then select the “Bundles” collection you created in step 3 above. Set the discount amount or percentage and save your changes.
