Motion Shopify Theme Documentation

Theme Installation

Installation of Motion 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:

Download: Motion-KabukiThemes.zip

  • Click Upload a theme

    • Click Upload

    • Click Publish


    • Click Publish as Main > Puslish theme

     

        Customize theme

        To customize this theme's appearance and settings.

        Go to the administration: Online store / Themes

        • Click Customize theme

        • Here you can see all available options for customizing your theme in real-time

        Theme presets

        When you've gone through the settings in the customization panel and decide the look of the website, you can save these settings as presets.

        • Click 'Presets'

        • Click 'Save current as new preset'

        • Select 'a new preset' from the dropdown, choose a name for the preset and click 'Save'

         

        • Now your new preset will appear in the preset list

        Custom logo and favicon

        You can set a custom logo and favicon for website. By default, instead of a logo you have the name of your website and the default favicon is the shopify image.

        Custom logo

        • Click 'Use Custom Logo' then click 'Choose file' and select the image you want to use as logo

        • You now see the new logo in the settings panel and in the website

         

        Custom favicon

        • Click 'Use custom icon (16px x 16px)' then click 'Choose file' and select the image file you want to use as favicon

        • You now see the new favicon in the settings panel and in the tab 

        General settings

        From this section you can choose background color and image, fonts, theme color and currencies selector

        Background color and image

        • Click "Custom Background Color" then select the color you like from the color picker

        • Click "Use Custom Background Image" then click "Choose file" and select the image file you want to use

        Fonts

        • "Body text font" is the main website font
        • "Custom secondary font" is the font elements like text paragraphs, buttons etc.

         Theme color presets

        • Here you can select a theme color preset from the built-in presets

         

        Currencies selector

        • Click "Show Currency selector" to enable your customers to select a currency

        • From the "Money format" you can select the format of the product prices

        • Select the currencies you wish to support i.e. USD, GBP etc. (use the two links to Shopify documentation for further help!)

        Home page settings

        In this section you would be able to setup the home page slider, categories section, featured and bestseller products, blog posts and a home page banner.

        Slideshow banner

        • Click "Use slider on home page"

        • You can have four slides, with or without link. Click "Show", then click "Choose file" and select the image file you want. You can set a page to which the slide links to, in the "Links to" text box.

        Home page categories

        • Click "Enable home page categories"

        • Set a title for your categories section

        • You can choose up to six categories to be shown on the home page. Select each one from the dropdowns.

         

        • Now you have a beautiful, easy to access categories section on your home page!

         

        Home page products sections

        • Click "Enable home page products first section" ("Enable home page products second section")

        • Set a title for the product section

        • Select which collection you want to be shown in the section

        • Now your customers will be able to access particular products faster and easier

         

         Home page blog posts

        • Click "Enable home page blog"

        • Select from the dropdown, the blog which posts would be shown

        • Set the number of posts

        Home page bottom banner

        You can select 1 (centered or full width), 2 or 3 banners to be shown in this section.

        • Click "Show"

        • Click "Choose file" and select the image file you want to use as banner

        • Set a link to a page in the "Links to" text box

         

        • You can make the banner take the full width of the page

         

        Instagram Feed

         

        Connect your Instagram and your shop through this functionality. In order to configure the Instagram widget in your store, you will need to have an access token and user id which you can obtain following the instructions below.

        • Create an Instagram app for your store. Just go to https://www.instagram.com/developer/ and log in with your account. From the "Manage Clients" menu "Register a new" client and fill in the necessary information. It is important to specify your store url for the "Website Url" and "Valid Redirect Urls". Then when the client is created click on the Edit button and go to the Security tab. Uncheck the "Disable implicit OAuth" option in order to be able to authorize your app without a server side code.
        • Once you register your client you will need to obtain the access token necessary in order to authorize your store in Instagram. For this just enter the following url https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token where you need to replace the CLIENT-ID with the one from your client and the REDIRECT-URI with the one enterd when registering your client. After you have entered this URL you will be prompted to log in to your Instagram account and after that you will be redirected to the home page of your store and the link will look like http://your-redirect-uri/#access_token=ACCESS-TOKEN.
        • Finally you need to retrieve your user id in order to display data from your profile like photos, etc. Just open the following link https://api.instagram.com/v1/users/self/?access_token=ACCESS-TOKEN where you replace the ACCESS-TOKEN with the one retrieved in the previous step. If everything goes well, you will be able to see your profile "id".
        • Copy and paste both the UserID and the AccessToken into their respective text fields in the Instagram options and choose how many images you want to display.
        • OPTIONAL: In addition, you can filter certain images from your profile by HASH tag

        Please note that by default your Instagram client will be created in a sandbox mode in which there is a limitation of being able to get the 20 most recent posts only. When the client is created you can submit it for a review in order to be moved in a live mode where no limitations will be present

        Collection page settings

         In this section you can set the number of products on the collection page, enable/disable the QuickView feature and select product ribbon for products on sale.

         

        • Set the number of products on a collection page (between 1 and 50)

        • Click "Enable quick view button" to enable the QuickView feature for your products

        • Click "Enable product ribbon" then click "Choose file" and select the image file you want to use as a ribbon for products on sale.
        •  Now you have a beautiful collection page with quick product access

        Product page settings

        In this section you would be able to enable or disable the CloudZoom feature for your product image, show/hide quantity box, social buttons, enable/disable the QuickTabs feature and show/hide Related product section.

        Main product settings

        • Click "Enable image zoom feature" to enable the CloudZoom feature for your products

        • Click "Display quantity box" to enable the quantity box next to the addToCart button 

        • Click "Display social like buttons" to show the share/like buttons - facebook, twitter etc. on your product page

        Quick tabs settings

        • Click "Enable quick tabs feature"

        • Select which pages to show in the QuickTabs feature from the two dropdowns

        • If you have installed the Product Reviews Shopify App you can show it in the QuickTabs

         

        Related products

        • Click "Display related products" and choose the number of products you want to be shown 

        Blog

        • Select the number of post per page on the blog list page 

         

        Footer settings

        In this sections you would be able to adjust the settings for your newsletter section, footer links and social media links.

        Newsletter

        • Click "Show newsletter" to enable the newsletter section

        • Set the title of the newsletter section

        • You can set a Mailchimp form action URL (use the link under the text box for information)

        Footer links list

        • Select a link lists for the footer from the dropdowns

        Social media links

        • Click "Show social media links" to enable the social media links in the footer

         

        • Set the title of the social media links section

        • Set links to your pages in the different social websites

        • Click "Show blog feed" to enable the RSS icon in the footer

        Checkout settings

        In this section you would be able to adjust the look of the checkout page.

        • Click "Use a custom background" to set a custom image for the background of your checkout then click "Choose file" to select the image file you want to use. Also you can set a custom background color.

        • Select a custom logo for your checkout. You can select the storefront logo from the dropdown or choose a different one by clicking "Choose file". Also you are able to add some words under the logo.

        • You are able to set colors for different elements in the checkout