Skudmart - Retina Responsive Shopify Theme

You need a Shopify store. If you don't have a shopify store, you can go to Shopify and create your store. We also recommend that you should read the Shopify Manual.It is an extremely well written and thorough guide to understanding the Shopify platform, written by Shopify themselves. It will help with understanding many aspects of the customization of your theme as well as using Shopify in general.

Purchase and download the theme from themeforest.net

Once the theme has been downloaded to your computer, you are now ready to install it to your Shopify store

You need to install the Skudmart theme via Shopify admin. The theme installation is simple and fast which includes these below steps:

Step 1 - Login to your Shopify admin panel.

Step 2 - Go to "Online Store" > "Themes" section:

Step 3 - Click on the "Upload Theme" button:

Step 4 - Click on the "Select File" button, then choose the theme file and click "Upload":

Step 5 - Click on "Publish Theme" option to complete the theme installation.

Our Skudmart Theme provides 15 beautiful default homepages. You can choose which homepage should be applied for your store by these steps:

Step 1 - Click on the "Customize" button in the theme you want to apply homepage:

Step 2 - Please click on "Select home page layout" button to import demo:

Step 3 - A list of default homepages will be shown up. You should select one beautiful homepage you want to apply, then click on "Import Now" to start importing progress.

Note We strongly recommend that you should create a backup of your Theme settings before publishing the new homepage by copying the bellow code and save in your computer. You can use the code next time if you want to roll back the current home page.

Four free shopify apps are required to be installed in our Skudmart theme in order to make our theme works smoothly. These app includes:

App #1 - Product Reviews. Link setup: https://apps.shopify.com/product-reviews

App #2 - Wishlist. You can get Wishlist App here.

App #3 - Compare. You can get Compare App here.

App #4 - Swatch Color. You can get Swatch App here.

Enter your store URL. For example: yourstore.myshopify.com

Shopify provides option for you to choose whether your customer need to register an account to checkout on your store or not.

In order to set it up, you should go to "Settings" > Click on "Checkout":

You can choose the option you want to use for your store in "Customer Account" section. There have 3 options:

• Accounts are disabled: Your customer can go ahead to checkout without login.
• Accounts are optional: Your customer can go to checkout as a guest or as a logged in customer.
• Accounts are required: Your customer have to login to your store to complete the checkout.

Please click "Save" to apply the change to your store.

Shopify have written documentations about its navigation in detail. Please read and follow the Shopify document.

• Add a link to Main Menu link lists
• Create a new link lists
• Create a drop-down menu
• Delete a link
• Reorder a link list

Note: Please be carefully and remember not to change "Main Menu" name or remove this section.

You need to import sample products to your store. From your Shopify admin, please click on "Products" > "Import":

In the popup, please choose file products.csv in the folder /sample_data of the theme

You can add new pages to your website by go to Online Store > Pages, then click on "Add page" button:

Overall, in order to create pages, you need to follow these three basic steps:

Step 1 - Add page title in "Title" field

Step 2 - Click on "Show HTML" icon to input HTML source code to add page content

Step 3 - Copy the given source code, then paste into the HTML source code area.

Our Skudmart theme supports creating mega menu to your shopify store. In this section, we will guide you to create the demo "Collections" mega menu item.

Firstly, you need to create a new page for this mega menu item. You should use below HTML source code:

HTML code:

    <div class="container">

    <ul class="sub-menu row">

    <li class="submenu-two-columns menu-item"><a href="/collections/all"><span class="mm-text">Shop Pages</span></a>

    <ul class="sub-menu">

    <li><a href="#"><span class="mm-text">Shop Fullwidth</span></a></li>

    <li><a href="#"><span class="mm-text">Shop 03 Columns</span></a></li>

    <li><a href="#"><span class="mm-text">Shop Masonry</span></a></li>

    <li><a href="#"><span class="mm-text">Shop 04 Columns</span></a></li>

    <li><a href="#"><span class="mm-text">Shop Left Sidebar</span></a></li>

    <li><a href="#"><span class="mm-text">Shop Metro</span></a></li>

    <li><a href="#"><span class="mm-text">Shop By Collections</span></a></li>

    <li><a href="#"><span class="mm-text">Shop No-Gutter</span></a></li>

    </ul>

    </li>

    <li class="submenu-two-columns menu-item"><a href="/collections/all"><span class="mm-text">Product Pages</span></a>

    <ul class="sub-menu">

    <li><a href="#"><span class="mm-text">Product Simple</span></a></li>

    <li><a href="#"><span class="mm-text">Product Simple 02</span></a></li>

    <li><a href="#"><span class="mm-text">Product Simple 03</span></a></li>

    <li><a href="#"><span class="mm-text">Product Simple 04</span></a></li>

    <li><a href="#"><span class="mm-text">Product Simple 05</span></a></li>

    <li><a href="#"><span class="mm-text">Product Simple 06</span></a></li>

    <li><a href="#"><span class="mm-text">Product Simple 07</span></a></li>

    <li><a href="#"><span class="mm-text">Product Simple 08</span></a></li>

    </ul>

    </li>

    <li class="submenu-two-columns menu-item"><a href="/collections/all"><span class="mm-text">Other Pages</span></a>

    <ul class="sub-menu">

    <li><a href="/account"><span class="mm-text">My Account</span></a></li>

    <li><a href="/cart"><span class="mm-text">Shopping Cart</span></a></li>

    <li><a href="/checkout"><span class="mm-text">Checkout</span></a></li>

    <li><a href="/pages/wishlist"><span class="mm-text">Wish List</span></a></li>

    </ul>

    </li>

    </ul>

    <div class="mm-menu-block menu-block-before">

    <div class="g-static-block">

    <div class="row">

    <div class="col-md-4 col-banner-hover">

    <div class="box-image-menu col-relative">

    <div class="banner--image"><img src="//cdn.shopify.com/s/files/1/0065/8767/8835/files/menu-block1.jpg" alt="" /></div>

    <div class="banner--info">

    <div class="mm-b-title1">#Sport new</div>

    <div class="mm-b-title2">Off 20%</div>

    </div>

    <a href="/collections/all" class="overflow-link"></a></div>

    </div>

    <div class="col-md-4 col-banner-hover">

    <div class="box-image-menu col-relative">

    <div class="banner--image"><img src="//cdn.shopify.com/s/files/1/0065/8767/8835/files/menu-block2.jpg" alt="" /></div>

    <div class="banner--info">

    <div class="mm-b-title1">Hello Summer</div>

    <div class="mm-b-title2">Off 25%</div>

    </div>

    <a href="/collections/all" class="overflow-link"></a></div>

    </div>

    <div class="col-md-4 col-banner-hover">

    <div class="box-image-menu col-relative">

    <div class="banner--image"><img src="//cdn.shopify.com/s/files/1/0065/8767/8835/files/menu-block3.jpg" alt="" /></div>

    <div class="banner--info">

    <div class="mm-b-title1">#Fashion2018</div>

    <div class="mm-b-title2 font-size-48">New Arrival</div>

    </div>

    <a href="/collections/all" class="overflow-link"></a></div>

    </div>

    </div>

    </div>

    </div>

    </div>
                    

After that, please active the "Collections" menu item (please refer here for guidance on this step) and check result in front-end website:

For About page, you have to choose "page.about" value in template suffix field.

In order to create contact us page, you need to follow three basic steps as we have described previously, and use these HTML source code:

Note: For contact us page, you have to choose "page.contact" value in template suffix field.

    <h3>Contact info</h3>

    <div class="box-address-contact">

        <h4>Postal Address</h4>

        <p>PO Box 16122 Collins Street West<br /> Victoria 8007 Australia</p>

    </div>

    <div class="box-address-contact">

        <h4>Skudmart HQ</h4>

        <p>PO Box 16122 Collins Street West<br /> Victoria 8007 Australia</p>

    </div>

    <div class="row">

        <div class="col-sm-6 col-xs-12">

            <div class="box-address-contact">

                <h4>Business Phone</h4>

                <p>+84 168 992 8902</p>

            </div>

        </div>

        <div class="col-sm-6 col-xs-12">

            <div class="box-address-contact">

                <h4>Say Hello</h4>

                <p>contact@globosoftware.net</p>

            </div>

        </div>

    </div>

    <div class="social-media-link style-default font-size-20 text-color-secondary">

        <a href="https://www.facebook.com/" class="facebook" title="Facebook" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-facebook"></i></a> 

        <a href="https://twitter.com/" class="twitter" title="Twitter" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-twitter"></i></a> 

        <a href="https://www.pinterest.com/" class="pinterest" title="Pinterest" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-pinterest-p"></i></a> 

        <a href="https://www.instagram.com/" class="instagram" title="Instagram" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-instagram"></i></a> 

        <a href="https://www.behance.net/" class="behance" title="Behance" target="_blank" rel="nofollow noopener noreferrer"><i class="fa fa-behance"></i></a>

    </div>
                    

For Our team page, you have to choose "page.our_team" value in template suffix field.

For FAQs page, you have to choose "page.faqs" value in template suffix field.

For Gallery page, you have to choose "page.gallery" value in template suffix field.

Go to "Theme settings" > Click on "Colors" section:

You can set color for text and link, color heder tranparent, footer as well as theme background color here. Please click on the item name to change its color.

This is the list of options that allows you to change font for all text in front end.

Header settings

The Skudmart theme provides 13 default headers, please choose one header to configure:

Setup header top content

Setup logo and logo sticky

Setup main menu

Go to "Theme Setting" > Select "Mega Menu" section:

Menu
It allow you to manage main menu (navigation)

• Mega Menu 1 Items: It allows you select a link list to display as a mega menu. You have to enter name of link list here.
• Image for Megamenu 1: It allows you to add a image to Mega Menu 1 Items. For example Shop is item 1, Sale is item 2.
• Mega Menu 2 Items: It allows you to select a link list to display as a mega menu. This is difference mega menu, because the menu content will be get from Pages. You can create 3 megamenu of this type.
• Content of Mega Menu 2: You have to select a page. Please read menu collection page section to create a page for menu

Go to "Theme Setting" > Select "Collection Page" section:

You can set product per row, products per page, shop page layout, enable sorting and enable sorting best selling

Go to "Theme Setting" > Select "Product Details" section:

It allows you to manage the product details page. It allows to manage everything on product details page: Use product limited, Product tabs, product review app, related products.

Go to "Theme Setting" > Select "Social media" section:

You can setup social sharing, social account

It allows to set up the notification product which appear in the bottom left side.

The settings for this feature includes:

It allows you to manage the Newletter popup

It allows you to manage the Age Verify

Go to "Theme Setting" > Select "General" section:

Settings other

You can set back to top, show Image Second, show wishlist when setup app

Show multiple currencies in a drop-down list top header

The settings for Footer include:

In default, Shopify not allow you add new custom field for product. So with Skudmart we will help you understand how to bring custom field to your store.

Example: you can have different description, different video... for each product.

The first you need install this extension on your chrome by go to this link: ShopifyFD

After install you will see the icon in your browser:

When go to Edit Product, you need click to ShopifyFD icon and metafield will show.

You need enter fill these sections: Namespace, Key, Value, then click Save.

Skudmart Theme support metafield for: Video, Short Description, Link.

Video:

If want show video, you need enter youtube video link for it.

1. namespace: meta

2. key: video

3. value: youtube url

The Filter sidebar only applies for Collection page. In order to setup filter side bar, please go to Themes > Customize > Click on "Collection page" > Choose "Filter Sidebar".

The filter sidebar section contains 2 setups:

SETTINGS PRODUCT CATEGORIES

Please tick on "Enable" checkbox if you want to show up Product Categories in the Filter sidebar.

You can change the product categories title by editing text in "Category block header" field.

CONTENT

By default, you can filter products with 3 filter types: By Size, By Color, and By Price. You can add new filter type by clicking on "Add content" button.

Filter made with tags, so all value from filter must exist from product.Let me give you an example to explain how to setup to make this filter sidebar work.

We have filter by size with values: XXL, XL, L, M, S, and X.You need to enter these tags from product page. The steps is as below:

Step 1: Add the list of tags to "Shop by tags list" field. Please take note that each tag is separated by one comma, then click "Save"

Step 2: Add tags to the product that you want to filter, then click "Save".

For Filter by Color and Filter by Price, you just need to do similar as Filter by Size.

You can also create a custom block text in the filter sidebar section.

Please install "Globo Color Swatches" to add color swatches to your Shopify product options. Install the app here: https://app.shopifydevelopers.net/swatch