Skateboard - Responsive Shopify Theme

• Created: 31 August 2016
• Latest Update: 31 August 2016
• By: Buddha Themes
• Email: manager@iamdesigning.com

Thanks for purchasing our "Skateboard - Responsive Shopify Theme".This is a clean, pleasant, responsive theme for your shopify store that stands out of crowd.

This theme comes with some specific features like Swipe Slider,Three types of category images ,Collection and Product videos,Custom product blocks with product images, Image switching based on options and Lightbox(colorbox) that will be spectaculous and gives a unique impresssion about your store. Menu comes with megamenu and simple dropdown with sub menu by which you can show all the categories available in your store. Its great for selling unique products with soem extraordinary presentation.

If you need any assistance that are beyond the scope of this help file, kindly contact us through mail. Thank you so much!

• Responsive design: Looks great on desktops, laptops, tablets and mobiles. Give it a try on your iPhone or iPad now.
• Highly customizable: Change colors, fonts, background image through the theme settings. No coding required!
• Supports multi-currency: The currecies AUD,CAD,USD,GBP,JPY,EUR,NZD,INR,PHP are inbuilt with theme
• collection page with extra category images , video & information blocks:Video and product info can be included in the WYSIWYG HTML editor itself.
• Great for SEO: Uses the latest Shopify SEO features and product data is formatted for google rich snippet, so that product listings are optimized on search engines.
• Drawer search: Customer can search the item directly on pop-up screen instead of moving to search page and looking for products.
• Branded checkout: A seamless checkout for your customers using your logo and color scheme. You can also add a custom checkout header to your checkout screens!
• Customer accounts: Customers can register, login, change addresses and view past orders.
• Flexible Fullpage sliders: A home page slideshow comes with the ability of changing everything in cusotmization panel itself.
• Newsletter integration: Easily link your Mailchimp account to the popup newsletter form.
• Social integration: Share by Twitter, Facebook, Google+ and Pinterest.
• Toggle Footer: Use can expand or clsoe the footer section as per their wish, this helps to get more attension on page main section.
• Retina: "Retina" is Apple's term for a high pixel-density display—a screen packed with so many pixels you shouldn't be able to see the individual cells with your naked eye. It's more than just the resolution of the display; it's the pixels per inch (ppi).

• Getting up and running with Skateboard 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 Skateboard in under ten minutes!
• Creating a Shopify Account
• 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.

• Step 1 : At first, after purchasing this theme, please download the package from Themeforest. All you need to do that, is move your mouse over your login name in right top corner (of course after you`re logged in Themeforest) and then click Download. Here you will find all the items that you have purchased. It looks exactly just as the diagram next to.
• Step 2 : In the next step click the Download > All files and documentation and save the package on your computer.
• Step 3 : In that package you can find the zipped file called Skateboard_V1.zip. Please unpack the whole package after downloading it from Themeforest.

What's Included

• Extract the Skateboard_V1.zip –
• Which Contains the Skateboard.zip, Documentaion & readme.txt..

Theme Installation

Installing Skateboard is easy and quick.

If you had the Shopify site and now want to change with this theme for your site, follow the instruction below:

Note: Extract package downloaded, use file the Skateboard.zip to upload to your Shopify site

1. In your back office go to: Online Store > Themes:

• Click: Upload a theme

  

• Click on Choose File button and select Skateboard.zip file, then click: Upload

  

2. In your Backoffice Dashboard go to: Online Store > Themes > Scroll to respective demo:

• Click: Publish theme

  

• Click: Publish

  

Global settings are options that will affect your entire site. This seems like a good place to start customizing your theme...

• The Primary Color option controls your main text color, various interface colors, button colors, and more. It is well used throughout your site. The color you choose here should contrast with both a white background and the background color you choose for the outer site section.
• The Secondary Color is used for alternate text color and other places.
• The Link/Button hover color will appear when you hover over most links and buttons.

 

 

 

You need to add followings pages to enjoy the features of theme.

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

1. In a Online Store / Pages, find and click button "Add a page"
2. Write in Title field as " wishlist
3. Select Visibility: Visible
4. Select Template: page.wishlist
5. Click save

1. In a Online Store / Pages, find and click button "Add a page"
2. Write in Title field as "Contact"
3. Select Visibility: Visible
4. Select Template: page.contact



5. Click save

To create a new menu:

• Step 1: From your Shopify admin, click Online Store, then click Navigation
• Step 2: Select the Add menu button.
• Step 3: Give your navigation a title. A handle will automatically be generated from this title.
• Step 4: Add links to your menu.
• Step 5: Once you have added all of your links click Save.

Home page options can be easily configurable via these settings.

This theme's collection page is uniquely coded to present the layout completely different from other shopify themes/stores.Here we are describing how to activate and control each each sections.

1. Collection additional images:

   Hope you already know about how to add collection's featured image (If not plz check at Menu setting's third screen shot).This collection's default featured image will appear in menu hover section.But now we are going to showcase two more images in collection/category page.Shopify not having default fields in collection panel for this , so we have done some short code works at backend.All you need to do is just adding two images in file section for each category.

   Important:

   You have to upload two images for each collection with the down case naming of collection. E.g if your collection name is 'Women Shoes' add two images as 'women-shoes.jpg' and 'alternate-women-shoes.jpg' @ Files section.

   Naming

   

   After uploding into file section , it will looks like

   

   The first image[e.g freestyle.jpg] will appear as large background image in respective collection page

   

   The second image[e.g alternate-freestyle.jpg] will appear on left side of collection page information section

   

2. Collection additional Heading and Description:

   This additional heading & description will be taken from the collection's meta title & description.

   

   It will appear in the front page as like screen shot below.

   

3. Featured product:

   As per the uniqueness of this theme , we have included an option to have sinlge product for each collection or having multiple products based on "Default limit" settings.

   

4. Collection Description

   The main heading above the description can be editable on language translation section of your store.And collection descrption is nothing but what you are entering in default collection description section using WYSIWYG Editor.E.g

   

5. Collection Video:

   You can embed youtube or vimeo videos at the collection description section as follows.

   STEP:1

   Host your videos in youtube and get the iframe video script as below, simply copy it and then

   

   STEP:2

   Go to respective collection at admin end and paste it in the description section as below

   

   STEP:3

   Just paste the iframe code at the end of description as below

   

   Now video will appear in respective collection front page automatically. e.g

   

6. Collection specifications:

   The title sepecification can be editable on language translation section of your store.And this content can be anything which you wish to show right side of video or additionaly.For this you need to follow some simple HTML structure as follows.
   

   <!-- split -->
   Required text will goes here
   <!-- split -->
   

   
   Some examples: For paragraph

   <!-- split -->
   <p>Here you can add any information, this will appear on specification section.</p>
   <!-- split -->
   

   
   For un-ordered list

   <!-- split -->
   <ul>
   <li>Point 1</li>
   <li>Point 2</li>
   <li>Point 3</li>
   <li>Point 4</li>
   </ul>
   <!-- split -->
   

   
   For ordered list

   <!-- split -->
   <ol>
   <li>Point 1</li>
   <li>Point 2</li>
   <li>Point 3</li>
   <li>Point 4</li>
   </ol>
   <!-- split -->
   

   
   
   Follow this format and prepare the content then place it under video(If you are not using video just under description) as below

   

   

7. You may also like:

   This section will showcase all the available collections except the one that the user viewing...

   

This page will display all the available collectons in the store, Also

• Can display every collection from your store.
• Can display the limited collections which you need to display. To limit the collections, create linklist to display particular collection.Then Choose that linklist from theme settings.

Product detail page includes:

• Product zoom with lightbox.
• Product detail page includes availiability,product vendor,product type.Everything have to add in your product to display.
• And it provides product variants, Add to cart option,wishlist,product quantity,social sharing,related products.
• Product color variant displayed as color swatch box .

If you enable product review , don't foreget to install Product Review app.



 
Product Video


Just refere the screen shots of how to add video to the collection description section, the same method will applied here.. Just place the video iframe script in the product description section. And cusotm content(Shipping details) can be editable via theme language translator.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Select Blog Posts in admin and hit -> Add blog post, which is available at top right corner to add new one.

• Blog page contains image tite,description,read more button.
• It includes sidebar with articles and categories.
• To display categories, Add tags in blog posts when you add blog.Ex:Sports, Offers etc.

Contact page options can be easily configurable via these settings.

• Contact page contains map with options to enable/disable.
• It has an options to include address details at theme settings.

Footer details can be easily editable on theme settings itself, And related heading and content can be able to update on theme translation section.