Getting Started

Welcome to Porto Shopify Theme!

We would like to thank you for purchasing Porto Shopify Theme! We are very pleased you have chosen Porto Shopify Theme(or interested in ) for your website, you will be never disappointed! Before you get started, please be sure to always check out this documentation. We outline all kinds of good information, and provide you with all the details you need to use Porto Shopify Theme. Porto will be used with Shopify 2.0 and we assume that you already have Shopify installed and ready to go.

If you are unable to find your answer here in our documentation, we encourage you to contact us through themeforest item support page with your site and Shopify admin details. We're very happy to help you and you will get reply from us more faster than you expected. Thank you, we hope you to enjoy using Porto Shopify Theme!

Compatible with Shopify:

Porto Shopify Theme is fully compatible with Shopify 2.0.

Shopify Information

To install this theme you must have a working version of Shopify already installed. If you need help installing Shopify, follow below sites and tutorials from Shopify.com, hope everything that you need are there.

Installation & Error

Shopify Installation

Shopify is web based ecommerce software. This means there’s no installation required and it works with all operating systems (including Windows and MacOS). You don’t have to worry about installing, upgrading or maintaining any software or web servers.

Please go to Shopify Site and choose Get Started.

Theme Installation


Important!

The package you download from Themeforest have 44 theme files, which includes

  • Support Multi-language versions : 20 demos ( 1- 20) + demo 1 update + demo 2 update

  • Support RTF language (ONLY 1 language) : 20 demos ( 1- 20) + demo 1 update + demo 2 update

  • Make sure your theme files are compressed into a single .zip file.

  • From your Shopify admin, click Online Store, and then click Themes.

  • Click Upload a theme in the top right-hand corner:

Note!

If the message You can't have more than 20 themes on your store appears, you must export or delete one of your installed themes before you can install another one.

  • From the Upload A Theme dialog, click Choose File to select the .zip file that you want to upload.

  • Click Upload.

Publish Theme

Click Publish Theme button.

Errors in Installation

If you have error as below:

This happens when you are trying to upload the incorrect .zip to Shopify. 99% of the time this happens when the folder that was downloaded from Themeforest was NOT unzipped beforehand. Remember that The file you have to upload to Shopify is a .zip file in Packages folder (Porto_shopify_package.zip).


Basic Configuration

Create a new product?

Go to Product > Products > Add product

You will be directed to the product page config.


Each of the elements on the product config page is easy to understand and use. There are only 2 things we want to explain more:

  • On the Pricing config, you can set the sale price by adding the Compare at price.

    Here is the example on how the price will be displayed :

  • On the Tags area, besides adding the tags for the product, you will need to add the tags to make the filtering works.

Add Product Countdown

This guide will show you how to display the countdown on the product image on the Homepage & Collection page and also, the product deal on the Product page.

  1. Go to Product > Products > choose a product.

  2. On Product Description box, in the top, insert the line below:

    [countdown]yyyy/mm/dd hh:mm:ss[/countdown]

    For example : [countdown]2017/12/10 10:30:00[/countdown]

    Here is an example on the Product Configuration :

Import/ Expoxt products

Go to Product > Products

You can easily export the products to CSV file to use in other Shopify theme as well as import the CSV file to your Porto theme.

Create a new collection

The collection is an important and necessary part which you will need on your theme. It's specially helpful when you want to display different product for diffirent section on the theme.

For example: Collection "Hat", collection "Jeans", etc.

1. Go to Products > Collections > Create collection.

2. In Collection config page, you will have 2 options to choose the conditions:

    1. Manually seclect products: You can freely to choose the products those you want to be on this collection.
    1. Automatically seclect products based on conditions.

Below is an example of a collection, named Daily Deal:

Create a new menu navigation

  1. Go to Online Stores > Navigation > Select Add Menu button.
  2. Give your navigation a title. A handle will automatically be generated from this site.
    • Add the menu item and choose the link to direct for your items.
    • Home page: links to the store's homepage.
    • Collection: links to a collection.
    • All collections: links to an index of all your collections.
    • Product: links to a product.
    • All products: links to all products.
    • Page: links to a page.
    • Blog: links to a blog.
    • Search page: links to a search function.
    • Web Address: links to a web URL outside of your store.
  3. Once you have done, choose Save.

Below is an example of a Menu navigation:

Homepage Configuration

Drag & Drop Sections

Filter Products Section Settings


  • Collection Title : Add the title.
    For example : WEEKLY FEATURED PRODUCTS

  • Collection : Choose the collection of products which you want to display on this feature.
    You can go to the collection config page by choose Edit Collection on the top-right of the box.

  • Number of products to show : The total number of products you want to display on this feature.

  • Products per row : The total number of products you want to display on this feature.
    For example: 8 products.

  • Hide Action Links : Action links include 'Add to cart' button, 'Add to compare' link and 'Add to wishlist' link.

  • Move Actions : If choose, all of the action links will be moved onto the product image.

  • Enable Carousel

  • Slideshow : The time for the autoplay.

    For example: set 5000 = 5 seconds.Leave empty to disable autoplay.

  • Show Paging : Choose to show the paging.

  • Margin : Adjust the margin between 2 items.

Blog Section Settings


  • Title: Add the title of the section.
  • Blog: Choose the collection of blog post you want to display.
  • Number of article to show
  • Columns: The number columns of the articles.
  • Slideshow: The time for the autoplay.
    For example: set 5000 = 5 seconds.
  • Show Paging: Choose to display the Paging
  • Show Navigation: Choose to display the left/ right arrows navigation.

Featured Brand Settings




  • Title: The title of the section.

  • Slideshow: The time for the autoplay. For example: set 5000 = 5 seconds.
    Leave empty to disable autoplay.

  • Column: The number of the columns of brand images.

  • Margin: Adjust the margin between 2 items.

  • Show Paging: Choose to show the paging.

  • Show Navigation: The left/ right arrow

Demo 1 - Update

Link to the Porto Demo 1 Site : Click Here


Recommended Size
  • Slideshow Image : 1970 x 800
  • Product Image 1 : 280 x 291
  • Product Image 2 : 280 x 280
  • Newsletter image: 700 x 320

Home Slideshow Settings

  • Fullscreen:

    Choose Yes if you would like the slider to be window height.

    Note: According to default design, there are

  • Autoplay:

    Set the autoplay rotate in ms (the time for changing between 2 slider).
    For example: set '5000' = 5s

  • Transition:

    There are 2 ways to for the transition of the sliders: Slide & Fade.

There are 2 options to choose the way which the customer can switch the sliders.

  • Navigation : The left/ right arrow
  • Pagination

The max number of the slider the customer can add is 4 sliders.



Slider content



  • Content 1

    <h2> style="font-family:'Oswald';font-weight:800;color:#000;line-height:1;">WINTER SALE<br>GET 30% OFF<br>ON JACKETS.</h2>
  • Button Content

    <div style="text-align:left;"><a href="https://porto-demo1-new.myshopify.com/collections/categories" class="btn btn-default" style="border:0;background-color:#000;color:#fff;font-family:'Oswald';font-weight:400;border-radius:0;">SHOP BY JACKETS</a></div>

Demo 2 - Update

Link to the Porto Demo 2 Site : Click Here


Recommended Size
  • Slideshow Image : 1970 x 800
  • Banner Image : 399 x 210
  • Product Image 1 : 280 x 291
  • Product Image 2 : 280 x 280
  • Parallax Image : 2119 x 1301
  • Newsletter image: 700 x 320

Home Slideshow

  • Autoplay:

    Set the autoplay rotate in ms (the time for changing between 2 slider).
    For example: set '5000' = 5s

  • Transition:

    There are 2 ways to for the transition of the sliders: Slide & Fade.

    There are 2 options to choose the way which the customer can switch the sliders.

  • Navigation : The left/ right arrow

  • Pagination

Slider 1


Class Content : slide-1


  • Content 1
    <h2>Dresses</h2>
  • Content 2
    <p><span><b>Up to </b><b class="text-large">30%</b><b style="text-align:right;">OFF in the<br>collection</b></span></p>
  • Button Content
    SHOP NOW

Slider 2


Class Content : slide-2

  • Content 1
    <h2>Fashion</h2>
  • Content 2
    <p><span><b>Up to </b><b class="text-large">70%</b><b style="text-align:right;">OFF in the<br>collection</b></span></p>
  • Button Content
    SHOP NOW

Parallax Slider
  1. Content 1
    Up to <b class="text-large">40%</b> OFF
  2. Content 2
    SPECIAL PROMO
  3. Button content
    Purchase now

Header - Update

Header type 18


Footer - Update
  • Custom Block 1:

    <h3 style="color: #fff; text-align: left; font-size: 18px; line-height: 35px; margin: 0;">Start Selling Today, Buy Porto eCommerce</h3>
  • Custom Block 2:

    <h4 style="color: #fff; text-align: left; font-size: 16px;line-height: 1;margin:0;">Be the First to Know<br><p style="font-size: 13px;font-weight: 400; margin: 0;line-height:1.5">Sign up for newsletter today.</p></h4>
  • Custom Block - Column 1:

    <ul class="contact-info" style="padding-top: 7px;">
    <li><i class="icon-direction"> </i><p><b style="color: #fff;text-transform:uppercase;">Address</b><br>123 Street Name, City, England</p></li>
    <li><i class="icon-phone-1"> </i><p><b style="color: #fff;text-transform:uppercase;">Phone</b><br>(123) 456-7890</p></li>
    <li><i class="icon-envolope"> </i><p><b style="color: #fff;text-transform:uppercase;">Email</b><br><a href="mailto:mail@example.com">mail@example.com</a></p></li>
    </ul>
  • Custom Block - Column 2:

    <div class="row">
    <div class="col-sm-3">
    <div class="block">
    <div class="block-title footer-block-title"><h3><span>MY ACCOUNT</span></h3></div>
    <div class="block-content">
    <ul class="links footer-list">
    <li class="theme-color"><i class="icon-right-dir theme-color"></i><a href="https://porto-demo2.myshopify.com/pages/about-us" title="About us">About us</a></li>
    <li class="theme-color"><i class="icon-right-dir theme-color"></i><a href="https://porto-demo2.myshopify.com/pages/contact" title="Contact Us">Contact us</a></li>
    <li class="theme-color"><i class="icon-right-dir theme-color"></i><a href="https://porto-demo2.myshopify.com/customer/account" title="My Account">My Account</a></li>
    <li class="theme-color"><i class="icon-right-dir theme-color"></i><a href="https://porto-demo2.myshopify.com/customer/account" title="My Account">Order history</a></li>
    <li class="theme-color"><i class="icon-right-dir theme-color"></i><a href="https://porto-demo2.myshopify.com/catalogsearch/advanced" title="Contact us">Advanced search</a></li>
    </ul>
    </div>
    </div>
    </div>
    <div class="col-sm-5">
    <div class="block">
    <div class="block-title footer-block-title"><h3><span>Main Features</span></h3></div>
    <div class="block-content">
    <ul class="features">
    <li><i class="icon-right-dir theme-color"></i><a href="#">Super Fast Magento Theme</a></li>
    <li><i class="icon-right-dir theme-color"></i><a href="#">1st Fully working Ajax Theme</a></li>
    <li><i class="icon-right-dir theme-color"></i><a href="#">10 Unique Homepage Layouts</a></li>
    <li><i class="icon-right-dir theme-color"></i><a href="#">Powerful Admin Panel</a></li>
    <li><i class="icon-right-dir theme-color"></i><a href="#">Mobile & Retina Optimized</a></li>
    </ul>
    </div>
    </div>
    </div>
    <div class="col-sm-4">
    <div class="block" style="margin-bottom: 20px;">
    <div class="block-title footer-block-title"><h3><span>BE THE FIRST TO KNOW</span></h3></div>
    <div class="block-content">
    <p style="margin-bottom: 35px;">Get all the latest information on Events, Sales and Offers. Sign up for newsletter today.</p>
    <form action="http://obest.org/magento/porto/index.php/demo2_en/newsletter/subscriber/new/" method="post" target="_blank" name="mc-embedded-subscribe-form">
    <div class="input-group">
    <input id="fc-email" type="text" name="EMAIL" class="input-group-field input-text required-entry validate-email" placeholder="Email Address">
    <button type="submit" title="Go!" class="btn-button" name="subscribe">Go!</button>
    </div>
    </form>
    </div>
    </div>
    </div>
    </div>
    <div class="row">
    <div class="col-sm-12">
    <div class="block-bottom">
    <div class="custom-block" style="float:left;"><img src="https://cdn.shopify.com/s/files/1/1612/9747/files/payment-icon.png?13979943977191077033" style="max-width: 100%;" alt=""></div>
    <address style="float:left; margin-left: 44px;margin-top:6px;font-size:11px;">© Porto eCommerce. 2016. All Rights Reserved</address>
    <div class="social-icons" style="float:right;">
    <a href="https://www.facebook.com/" title="Facebook" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
    <a href="https://twitter.com/" title="Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
    <a href="https://linkedin.com/" title="Linkedin" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
    </div>
    </div>
    </div>
    </div>

Demo 3

Link to the Porto Demo 3 Site : Click Here


Recommended Size
  • Slider image: 1140 x 635
  • Banner Content Image: 722 x 436
  • Banner Image 1 & 3: 273 x 240
  • Banner Image 2: 562 x 240
  • Product Image: 600 x 800
  • Newsletter image: 700 x 320
Home Slideshow
  1. Content 1

    <em style="font-weight:400;color:#666666;float:left;font-style:normal;">Porto Presents...</em>
    <div class="clearer"></div>
  2. Content 2

    <h2 style="font-weight:400;color:#141414;margin:0;line-height:1;">The Bride's Dream</h2>
  3. Button content

    <a href="#" style="color:#2b262f;font-weight:700;"><span>SHOP NOW</span></a>

Home Banner Content

There are 2 options for the Home Banner Content Location: Right/ Left

  1. Banner Content 1

    <>h3 style="color:#f2f4f3;font-weight:400;line-height:1;">The Wedding Day</h3>
  2. Banner Content 2

    <hr style="margin:15px 0;border-color:#ada4b5;">
  3. Banner Content 3

    <p style="color:#ada4b5;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a arcu lacinia, ornare lorem maximus, consequat mauris. Nam vitae risus at leo convallis sagittis.</p>
  4. Button content

    <a href="#" style="color:#fff;">SHOP NOW</a>

Demo 4

Link to the Porto Demo 4 Site : Click Here


Recommended Size
  • Slider image: 850 x 421
  • Banner Left 1: 270 x 308
  • Banner Left 2: 270 x 421
  • Banner Left 3: 270 x 246
  • Banner Right 1: 270 x 216
  • Banner Right 2: 270 x 523
  • Banner Right 3: 270 x 246
  • Banner Main 1: 560 x 361
  • Banner Main 2: 560 x 295
  • Banner Main 3: 560 x 294
  • Product Image: 600 x 800
  • Newsletter image: 700 x 320
Home Bar

You can see the list of Font Icon by going to here.


  • Content 1

    <i class="icon-truck" style="font-size:36px;"></i><div class="text-area"><h3>FREE SHIPPING & RETURN</h3><p>Free shipping on all orders over $99.</p></div>
  • Content 2

    <i class="icon-dollar"></i><div class="text-area"><h3>MONEY BACK GUARANTEE</h3><p>100% money back guarantee.</p></div>
  • Content 3

    <i class="icon-lifebuoy" style="font-size:32px;"></i><div class="text-area"><h3>ONLINE SUPPORT 24/7</h3><p>Lorem ipsum dolor sit amet.</p></div>

Demo 5

Link to the Porto Demo 5 Site : Click Here


Recommended Size
  • Background image: 1315 x 488
  • Banner Image: 270 x 200
  • Product Image 1: 600 x 800
  • Product Image 2: 600 x 600
  • Newsletter image: 700 x 320
  • Brand image: 140 x 29
Home Slideshow
  • Slider 1

  1. Content 1

    <h2 style="font-weight:600;line-height:1;color:#08c">HUGE <b style="font-weight:800">SALE</b></h2>
  2. Content 2

    <p style="color:#777;font-weight:300;line-height:1;margin-bottom:15px">Now starting at <span style="color:#535353;font-weight:400">$99</span></p>
  • Slider 2

  1. Content 1

    <div style="margin:0;line-height:1;">
    <img src="//cdn.shopify.com/s/files/1/1559/5181/t/2/assets/quote.png" style="display:inline-block;vertical-align:middle;width:inherit"/>
    <em style="display:inline-block;vertical-align:middle;line-height:1;color:#fff;font-weight:300;font-style:normal;    font-size: 26.26px; margin: 0 10px;">DO YOU NEED A NEW</em>
    <img src="//cdn.shopify.com/s/files/1/1559/5181/t/2/assets/quote.png" style="display:inline-block;vertical-align:middle;width:inherit"/></div>
  2. Content 2

    <h2 style="font-weight:800;color:#fff;line-height:1;font-size: 79.12px; margin: 5px 0 10px;">eCOMMERCE?</h2>
  3. Content 3

    <p style="font-weight:300;color:#fff;line-height:1;    font-size: 23.64px;">Check our options and features.</p>

Home Bar

You can see the list of Font Icon by going to here.


  • Content 1

    <i class="icon-truck" style="font-size:36px;"></i><div class="text-area"><h3>FREE SHIPPING & RETURN</h3><p>Free shipping on all orders over $99.</p></div>
  • Content 2

    <i class="icon-dollar"></i><div class="text-area"><h3>MONEY BACK GUARANTEE</h3><p>100% money back guarantee.</p></div>
  • Content 3

    <i class="icon-lifebuoy" style="font-size:32px;"></i><div class="text-area"><h3>ONLINE SUPPORT 24/7</h3><p>Lorem ipsum dolor sit amet.</p></div>

Custom Support

You can see the list of Font Icon by going to here.

  • Content 1

    <i class="icon-star" style="border-radius:50%;border:2px solid #cecece;color:#333;background-color:transparent;line-height:58px;font-size:25px;"></i>
    <div class="content">
    <h2>Customer Support</h2>
    <em>YOU WON'T BE ALONE</em>
    <p>We really care about you and your website as much as you do. Purchasing Porto or any other theme from us you get 100% free support.</p></div>
  • Content 2

    <i class="icon-reply" style="border-radius:50%;border:2px solid #cecece;color:#333;background-color:transparent;line-height:58px;font-size:25px;"></i>
    <div class="content">
    <h2>Fully Customizable</h2>
    <em>TONS OF OPTIONS</em>
    <p>With Porto you can customize the layout, colors and styles within only a few minutes. Start creating an amazing website right now!</p>
    </div>
  • Content 3

    <i class="icon-paper-plane" style="border-radius:50%;border:2px solid #cecece;color:#333;background-color:transparent;line-height:58px;font-size:25px;"></i>
    <div class="content">
    <h2>Powerful Admin</h2>
    <em>MADE TO HELP YOU</em>
    <p>Porto has very powerful admin features to help customer to build their own shop in minutes without any special skills in web development.</p>
    </div>

Parallax Slider
  • Title

    <h2 style="font-weight:600;">EXPLORE <b style="font-weight:800;">PORTO</b></h2>

Demo 6

Link to the Porto Demo 6 Site : Click Here


Recommended Size
  • Slider Image: 1140 x 500
  • Slider Banner: 255 x 363
  • Banner Image: 270 x 200
  • Product Image 1: 600 x 800
  • Product Image 2: 600 x 600
  • Newsletter image: 700 x 320
Home Bar

You can see the list of Font Icon by going to here.


  • Content 1

    <i class="icon-truck" style="font-size:36px;"></i><div class="text-area"><h3>FREE SHIPPING & RETURN</h3><p>Free shipping on all orders over $99.</p></div>
  • Content 2

    <i class="icon-dollar"></i><div class="text-area"><h3>MONEY BACK GUARANTEE</h3><p>100% money back guarantee.</p></div>
  • Content 3

    <i class="icon-lifebuoy" style="font-size:32px;"></i><div class="text-area"><h3>ONLINE SUPPORT 24/7</h3><p>Lorem ipsum dolor sit amet.</p></div>

Home Slideshow

Slider 1

  1. Content 1

    <h2 style="font-weight:600;line-height:1;color:#08c">HUGE <b style="font-weight:800">SALE</b></h2>
  2. Content 2

    <p style="color:#777;font-weight:300;line-height:1;margin-bottom:15px">Now starting at <span style="color:#535353;font-weight:400">$99</span></p>

>Slider 2

  1. Content 1
    <div style="margin:0;line-height:1;">
    <img src="//cdn.shopify.com/s/files/1/1559/5181/t/2/assets/quote.png" style="display:inline-block;vertical-align:middle;width:inherit"/>
    <em style="display:inline-block;vertical-align:middle;line-height:1;color:#fff;font-weight:300;font-style:normal;    font-size: 26.26px; margin: 0 10px;">DO YOU NEED A NEW</em>
    <img src="//cdn.shopify.com/s/files/1/1559/5181/t/2/assets/quote.png" style="display:inline-block;vertical-align:middle;width:inherit"/></div>
  2. Content 2
    <h2 style="font-weight:800;color:#fff;line-height:1;font-size: 79.12px; margin: 5px 0 10px;">eCOMMERCE?</h2>
  3. Content 3
    <p style="font-weight:300;color:#fff;line-height:1;    font-size: 23.64px;">Check our options and features.</p>

Testimonials
  • Testimonials Enable : Choose to display the Testimonials section or not.

  • Testimonials Title : Add the title

    <strong>Testimonials</strong>
  • Testimonials Block : Add the content of the testimonials.

  • Testimonials Author : Add the information about the author.

    <strong>John Smith</strong><span>CEO & Founder - Okler</span>

Shop Features

Shop Features Enable : Choose to display the Shop Features or not.

  • Content 1

    <i class="icon-star"></i>
    <h3>DEDICATED SERVICE</h3>
    <p>Consult our specialists for help with an order, customization, or design advice.</p>
    <a href="#">Get in Touch ></a>
  • Content 2

    <i class="icon-reply"></i>
    <h3>FREE RETURNS</h3>
    <p>We stand behind our goods and services and want you to be satisfied with them.</p>
    <a href="#">Returns Policy ></a>
  • Content 3

    <i class="icon-paper-plane"></i>
    <h3>INTERNATIONAL SHIPPING</h3>
    <p>Currently over 50 countries qualify for express international shipping.</p>
    <a href="#">Learn More ></a>

Demo 7

Link to the Porto Demo 7 Site : Click Here


Recommended Size
  • Banner Image 1: 566 x 536
  • Banner Image 2: 279 x 536
  • Banner Image 3 & 4: 279 x 263.83
  • Category Slide: 279 x 140
  • Product Image: 600 x 800
  • Newsletter image: 700 x 320

Home Banner

Banner 1

  1. Content 1

    <em style="font-weight:300;font-style:normal;color:#fff;margin-right:26%;">UP TO</em>
    <h4 style="font-weight:700;color:#fff;">70%</h4>
    <h5 style="font-weight:600;color:#fff;">OFF</h5>
  2. Content 2

    <h2 style="font-weight:800;font-style:italic;color:#fff;margin-bottom:0;">HUGE <b style="font-weight:600;">SALE</b></h2>
    <p style="font-weight:300;color:#fff;">Now starting at <b style="font-weight:600;">$99</b></p>
    <a href="#">Shop now ></a>

Banner 2



  • Content
    <h3 style="font-weight:400;color:#121213;">amazing</h3>
    <h2 style="font-weight:800;color:#121213;margin-bottom:10px;">COLLECTION</h2>
    <a style="color:#121213;margin:0;" href="#">Shop now ></a>

Banner 3



  • Content

    <p style="font-weight:300;color:#313131;">MOBILE</p>
    <p style="font-weight:700;color:#313131;">MEGA SALE</p>
    <h4 style="font-weight:400;color:#888;"><span>$</span>450.<span>00</span></h4>
    <h3 class="theme-color" style="font-weight:400"><span>$</span>350.<span>00</span></h3>
    <a href="#">Shop now ></a>

Banner 4



  • Content

    <h2 style="font-weight:300;color:#000;"><b style="font-weight:600;font-style:italic;">Deals</b> +<br>PROMOS</h2>
    <p style="font-weight:300;color:#000;opacity:0.7;filter:alpha(opacity=70);font-style:italic;">Limited sales in<br>our categories.</p>
    <a class="btn btn-default" href="#">SHOP NOW <i class="icon-right-dir"></i></a>

Demo 8

Link to the Porto Demo 8 Site : Click Here


Recommended Size
  • Slider Image: 820 x 405
  • Banner Image: 305 x 129
  • Main Section > Banner Image 1 &2: 269 x 114
  • Main Section > Banner Image 3: 558 x 237
  • Brand image: 140 x 29
  • Product Image: 465 x 465
  • Newsletter image: 700 x 320

Home Banners
  • Banner 1


    <em style="color:#fff;font-weight:400;font-style:italic;line-height:1;">fashion</em>
    <h2 style="color:#fff;font-weight:700;line-height:1;">TRENDS</h2>
    <a href="#" style="color:#000;font-weight:300;line-height:1;">Shop now ></a>
  • Banner 2

    <h2 style="color:#000;font-weight:300;line-height:1;"><b style="font-weight:600;font-style:italic;">Deals</b> + PROMOS</h2>
    <p style="color:#777;font-weight:300;font-style:italic;vertical-align:bottom;line-height:1.2;float:left;">Limited sales in<br>our categories.</p>
    <a href="#" class="btn btn-default" style="color:#fff;font-weight:400;vertical-align:bottom;line-height:1;float:left;">SHOP NOW << class="icon-right-dir"></i></a>
                                        
  • Banner 3


    <h2 style="color:#fff;font-weight:600;line-height:1;">HUGE <b style="font-weight:800;">SALE</b></h2>
    <p style="color:#b2b2b2;font-weight:300;line-height:1;">Now starting at <b style="font-weight:600;">$99</b></p>
    <a href="#" style="font-weight:300;line-height:1;">Shop now ></a>
Home Bar

You can see the list of Font Icon by going to here.

  • Content 1

    <i class="icon-truck" style="font-size:36px;"></i><div class="text-area"><h3>FREE SHIPPING & RETURN</h3><p>Free shipping on all orders over $99.</p></div>
  • Content 2

    <i class="icon-dollar"></i><div class="text-area"><h3>MONEY BACK GUARANTEE</h3><p>100% money back guarantee.</p></div>
  • Content 3

    <i class="icon-lifebuoy" style="font-size:32px;"></i><div class="text-area"><h3>ONLINE SUPPORT 24/7</h3><p>Lorem ipsum dolor sit amet.</p></div>
Sidebar custom HTML Block
<h2 style="font-weight:600;font-size:16px;color:#000;line-height:1;margin-top:0;">Custom HTML Block</h2>
<h5 style="font-family:Arial;font-weight:400;font-size:11px;color:#878787;line-height:1;margin-bottom:13px;">This is a custom sub-title.</h5>
<p style="font-weight:400;font-size:14px;color:#666;line-height:1.42;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non placerat mi. Etiam non tellus </p>

Demo 9

Link to the Porto Demo 9 Site : Click Here


Recommended Size
  • Slider Image: 1900 x 1102
  • Banner Image: 305 x 129
  • Banner Image 1: 943 x 589
  • Banner Image 2: 468 x 589
  • Banner Image 3: 468 x 838
  • Banner Image 4: 1417 x 243
  • Banner Image 5: 1891 x 401
  • Banner Image 6: 468 x 838
  • Banner Image 7: 468 x 590
  • Banner Image 8: 940 x 588
  • Banner Image 9: 468 x 242
  • Brand image: 183 x 109
  • Product Image: 213 x 246
  • Newsletter image: 700 x 320
  • Footer logo: 87 x 36

Home Slideshow

Slideshow Content

<em style="font-style: normal; display: block;font-weight:600;">NEW ARRIVALS</em>
 <h2 style="line-height: 1;font-weight:800;margin:0;color:#3d3734">FASHION</h2>
 <p><span style="vertical-align: top;font-weight:300;">UP TO <b style="font-weight:800;">70% OFF</b> IN THE NEW COLLECTION</span></p>
 <p><a href="#" class="btn btn-default" style="vertical-align: top; font-weight: 400;">SHOP NOW/<a></p>

Demo 10

Link to the Porto Demo 10 Site : Click Here


Recommended Size
  • Slider Image: 1920 x 1000
  • Onepage Collection > Image: 800 x 200
  • Product Image: 300 x 372
  • Newsletter image: 700 x 320
  • Footer logo: 111 x 51

Home Slideshow

Slider 1

Content 1

<h2 style="color: #000;">WINTER SALE<br>70% OFF</h2>

Content 2

<p style="color: #000;">Shop new styles added to sale online.</p>

Onepage Collection

Go to: Customize theme > General Settings > One Page Collection.

Navigation Link List: Choose the Navigation Menu to show.


Demo 11

Link to the Porto Demo 11 Site : Click Here


Recommended Size
  • Slider background Image: 1920 x 945
  • Slideshow Banner Image: 1920 x 609
  • Full Width Banner Image: 1920 x 660
  • Product Image: 280 x 280
  • Newsletter image: 700 x 320
  • Footer logo: 111 x 51

Shop By Collections

  • Number of products to show: The total number of products you want to display on this feature.

  • Number of products to show at one time: The number of products you want to display at the same time while loading,

  • Products per row: The total number of products you want to display on this feature.
    For example: 8 products.

  • Hide Action Links: Action links include 'Add to cart' button, 'Add to compare' link and 'Add to wishlist' link.

  • Move Actions: If choose, all of the action links will be moved onto the product image.

  • Flex Grid: Choose if you want the collection page to be in flex grid.

    In Flex Grid mode:

Set up the Tab Collection

  • Collection Title: Add the title.
    For example : WEEKLY FEATURED PRODUCTS

  • Collection: Choose the collection of products which you want to display on this feature.
    You can go to the collection config page by choose Edit Collection on the top-right of the box.

Full Width Banner
  • Update& Remove :

    To change or remove the Banner Image. There are 3 options when updating the image:

    - Upload image

    - Select from library

    - Edit image

  • Content: Add the content for the Banner Image.

  • Button Name: Add the text for Button.

  • Banner Link: You can navigate the Button to a external link OR a page or collection in your site.

Demo 12

Link to the Porto Demo 12 Site : Click Here


Recommended Size
  • Slider background Image: 1920 x 500
  • Parallax Slider > Background Image: 1680 x 1200
  • Product Image: 280 x 373
  • Brand Image: 173 x 103
  • Newsletter image: 700 x 320
  • Footer logo: 68 x 31

Home Slideshow

Slider 1

  1. Content 1

    <em style="font-weight:300;font-style:normal;color:#a39a8c;float:left;">Feel the real</em>
  2. Content 2

    <h2 style="font-weight:400;font-style:italic;line-height:1;color:#79a939"><b style="font-weight:800">MOBILE</b> music</h2>
  3. Content 3

    <p style="color:#010101;font-weight:700;line-height:1;margin-bottom:15px">$999</p>
  4. Button Content

    <a href="#" style="font-weight:600;color:#1e1e1e;"><span>SHOP NOW</span><i class="icon-angle-right theme-bg-color"></i></a>
Home Bar

You can see the list of Font Icon by going to here.


  • Content 1

    <i class="icon-truck" style="font-size:36px;"></i><div class="text-area"><h3>FREE SHIPPING & RETURN</h3><p>Free shipping on all orders over $99.</p></div>
  • Content 2

    <i class="icon-dollar"></i><div class="text-area"><h3>MONEY BACK GUARANTEE</h3><p>100% money back guarantee.</p></div>
  • Content 3

    <i class="icon-lifebuoy" style="font-size:32px;"></i><div class="text-area"><h3>ONLINE SUPPORT 24/7</h3><p>Lorem ipsum dolor sit amet.</p></div>

Custom Support

You can see the list of Font Icon by going to here.

  • Content 1

    <i class="icon-star" style="border-radius:50%;border:2px solid #cecece;color:#333;background-color:transparent;line-height:58px;font-size:25px;"></i>
    <div class="content">
    <h2>Customer Support</h2>
    <em>YOU WON'T BE ALONE</em>
    <p>We really care about you and your website as much as you do. Purchasing Porto or any other theme from us you get 100% free support.</p></div>
  • Content 2

    <i class="icon-reply" style="border-radius:50%;border:2px solid #cecece;color:#333;background-color:transparent;line-height:58px;font-size:25px;"></i>
    <div class="content">
    <h2>Fully Customizable</h2>
    <em>TONS OF OPTIONS</em>
    <p>With Porto you can customize the layout, colors and styles within only a few minutes. Start creating an amazing website right now!</p>
    </div>
  • Content 3

    <i class="icon-paper-plane" style="border-radius:50%;border:2px solid #cecece;color:#333;background-color:transparent;line-height:58px;font-size:25px;"></i>
    <div class="content">
    <h2>Powerful Admin</h2>
    <em>MADE TO HELP YOU</em>
    <p>Porto has very powerful admin features to help customer to build their own shop in minutes without any special skills in web development.</p>
    </div>

Parallax Slider
  • Title

    <h2 style="font-weight:600;">EXPLORE <b style="font-weight:800;">PORTO</b></h2>

Demo 13

Link to the Porto Demo 13 Site : Click Here


Recommended Size
  • Slider Image: 1024 x 415
  • Home Banner Image: 247 x 190
  • Product Image: 280 x 373
  • Brand Image: 140 x 29
  • Newsletter image: 700 x 320
  • Footer logo: 68 x 31

Custom Support

You can see the list of Font Icon by going to here.

  • Content 1

    <i class="icon-star" style="border-radius:50%;border:2px solid #cecece;color:#333;background-color:transparent;line-height:58px;font-size:25px;"></i>
    <div class="content">
    <h2>Customer Support</h2>
    <em>YOU WON'T BE ALONE</em>
    <p>We really care about you and your website as much as you do. Purchasing Porto or any other theme from us you get 100% free support.</p></div>
  • Content 2

    <i class="icon-reply" style="border-radius:50%;border:2px solid #cecece;color:#333;background-color:transparent;line-height:58px;font-size:25px;"></i>
    <div class="content">
    <h2>Fully Customizable</h2>
    <em>TONS OF OPTIONS</em>
    <p>With Porto you can customize the layout, colors and styles within only a few minutes. Start creating an amazing website right now!</p>
    </div>
  • Content 3

    <i class="icon-paper-plane" style="border-radius:50%;border:2px solid #cecece;color:#333;background-color:transparent;line-height:58px;font-size:25px;"></i>
    <div class="content">
    <h2>Powerful Admin</h2>
    <em>MADE TO HELP YOU</em>
    <p>Porto has very powerful admin features to help customer to build their own shop in minutes without any special skills in web development.</p>
    </div>

Demo 14

Link to the Porto Demo 14 Site : Click Here


Recommended Size
  • Slider Image: 860 x 415
  • Home Banner Image: 366 x 269
  • Product Image: 280 x 322
  • Brand Image: 140 x 29
  • Newsletter image: 700 x 320
  • Footer logo: 68 x 31

Home Slideshow
  • Slider 1

    Class Content : content-1

    Content 1

    <div class="content-area-1">
    <p style="color:#fff;">Furniture & Garden</p>
    <h3 style="color:#fff;">HUGE<br><b>SALE</b></h3>
    </div>
    <div class="content-area-1" style="text-align:right;">
    <em style="color:#fff;">up to</em>
    <h4 style="color:#fff;">40%</h4>
    <h5 style="color:#fff;">OFF</h5>
    </div>
  • Slider 2

    Class Content : content-2


    Content
    <div class="content-area-2">
        <p style="color:#fff;">Furniture & Garden</p>
        <h3 style="color:#fff;">SPECIAL <b>PROMO</b></h3>
    </div>
    <div class="content-area-2" style="text-align:right;border: 1px solid #ccc;border-width: 0 1px;">
        <em style="color:#fff;">up to</em>
        <h4 style="color:#fff;">40%</h4>
        <h5 style="color:#fff;">OFF</h5>
    </div>
    <div class="content-area-2">
        <a style="color:#fff;" href="#">SHOP NOW <i class="icon-right-dir"></i></a>
    </div>

Note!

The Class Content is the specific class that we use to display the style of the text on the slider.
There are 2 Class Content: Content-1 and Content-2. You need to insert 1 of that 2 class content to display the text like on the DEMO. If you insert another class content, you must to style this on your own.

Demo 15

Link to the Porto Demo 15 Site : Click Here


Recommended Size
  • Slider Image: 730 x 390
  • Banner Image: 1024 x 194
  • Home Banner Image: 247 x 190
  • Product Image: 280 x 373
  • Newsletter image: 700 x 320
  • Footer logo: 111 x 51

Header

Go to Online Stores > Themes > Customize theme > Header.

Header Type: Header Type 10.

  • Custom Block for Header Type 10 Content :
    <div class="custom-menu-block">
        <a href="#">FASHION PROMO</a>
        <a href="#">WOMAN SHOES</a>
        <a href="#">50% OFF FASHION</a>
    </div>
  • Insert the Menu Title.
    For example : SHOP BY CATEGORY
Slideshow
  • Slider 1

Content :

<span style="font-weight:300;color:#303030;display:inline-block;vertical-align:middle;">Now starting at <b style="font-weight:600;">$99</b></span>
<a class="btn btn-default" style="background-color:#303030;color:#fff;position:inline-block;vertical-align:middle;font-weight:600">SHOP NOW <i class="icon-right-dir"></i></a>

Home Bar

You can see the list of Font Icon by going to here.


  • Content 1

    <i class="icon-truck" style="font-size:36px;"></i><div class="text-area"><h3>FREE SHIPPING & RETURN</h3><p>Free shipping on all orders over $99.</p></div>
  • Content 2

    <i class="icon-dollar"></i><div class="text-area"><h3>MONEY BACK GUARANTEE</h3><p>100% money back guarantee.</p></div>
  • Content 3

    <i class="icon-lifebuoy" style="font-size:32px;"></i><div class="text-area"><h3>ONLINE SUPPORT 24/7</h3><p>Lorem ipsum dolor sit amet.</p></div>

Group Product

  • Number of products to show : The total number of products you want to display on this feature.

  • Products per row : The total number of products you want to display on this feature.
    For example: 8 products.

  • Hide Action Links : Action links include 'Add to cart' button, 'Add to compare' link and 'Add to wishlist' link.

  • Move Actions : If choose, all of the action links will be moved onto the product image.

  • Show Paging: Choose to display the Paging

  • Show Navigation: Choose to display the left/ right arrows navigation.


  • Choose Add group product.

  • Insert the Group Product Title. For example : FEATURED

  • Collection : Choose the collection of products which you want to display on this feature.
    You can go to the collection config page by choose Edit Collection on the top-right of the box.

  • Choose Delete if you want to delete this group product.

Demo 16

Link to the Porto Demo 16 Site : Click Here


Recommended Size
  • Slider Background Image: 1920 x 950
  • Banner Image: 475 x 343
  • Collection Banner Image: 950 x 800
  • Product Image: 280 x 373
  • Newsletter image: 700 x 320
  • Footer logo: 68 x 31

Slideshow

The max number of the slider the customer can add is 4 sliders.



Slider 1



  1. Content 1
    <div style="margin:0;line-height:1;">
    <img src="//cdn.shopify.com/s/files/1/1559/5181/t/2/assets/quote.png" style="display:inline-block;vertical-align:middle;width:inherit"/>
    <em style="display:inline-block;vertical-align:middle;line-height:1;color:#fff;font-weight:300;font-style:normal;    font-size: 26.26px; margin: 0 10px;">DO YOU NEED A NEW</em>
                                                    <img src="//cdn.shopify.com/s/files/1/1559/5181/t/2/assets/quote.png" style="display:inline-block;vertical-align:middle;width:inherit"/> </div>
  2. Content 2
    <h2 style="font-weight:800;color:#fff;line-height:1;font-size: 79.12px; margin: 5px 0 10px;">eCOMMERCE?</h2>
  3. Content 3
    <p style="font-weight:300;color:#fff;line-height:1;    font-size: 23.64px;">Check our options and features.</p>

Slider 2



  1. Content 1
    <em style="display:block;line-height:1;color:#fff;font-weight:300;font-style:normal;font-size: 26.26px; margin-left: 8px;">up to <strong>70%</strong> off!</em>
  2. Content 2
    <h2 style="font-weight:600;color:#fff;line-height:1; font-size: 82.51px; margin: 3px 0 10px;">HUGE <strong style="font-weight:800;">SALE</strong></h2>
  3. Content 3
    <p style="font-weight:600;color:#fff;line-height:1; font-size: 18px;margin-left: 8px;margin-bottom: 30px;">Fashion<span class="split">-</span>Electronics<span class="split">-</span>Gifts<span class="split">-</span>Music<span class="split">-</span>Sports</p>

Slider 3



  1. Content 1
    <em style="display:block;line-height:1;margin:0;color:#fff;font-weight:300;font-style:normal;text-align:right;    font-size: 26.26px;">It’s time to feel</em>
  2. Content 2
    <h2 style="font-weight:600;color:#fff;line-height:1;  font-size: 82.51px; margin-bottom: 17px;">THE <strong style="font-weight:800;">POWER</strong></h2>

Collection Banner

Collection Banner is a section which includes a product collection and a banner.

  • You will have 2 ways to display this section by choosing the Home Banner Content Position to be Right or Left.

  • Slideshow: The time for the autoplay.
    For example: set 2000 = 2 seconds.


Demo 17

Link to the Porto Demo 17 Site : Click Here


Recommended Size
  • Slider Image: 1250 x 521
  • Product Image: 280 x 373
  • Brand Image: 183 x 109
  • Newsletter image: 700 x 320
  • Footer logo: 68 x 31

Slideshow

The max number of the slider the customer can add is 4 sliders.


Slider 1

Class Content : content1

  1. Content 1
    <h2 style="font-weight:800;color:#fff;line-height:1;font-size: 79.12px; margin: 5px 0 10px;">eCOMMERCE?</h2>
  2. Content 2
    <p style="font-weight:300;color:#fff;line-height:1;">
    <img src="//cdn.shopify.com/s/files/1/1559/5181/t/2/assets/quote.png" style="display:inline-block;vertical-align:middle;width:inherit"/>    Check our options and features.    <img src="//cdn.shopify.com/s/files/1/1559/5181/t/2/assets/quote.png" style="display:inline-block;vertical-align:middle;width:inherit"/></p>

Slider 2

Class Content : content2

  1. Content 1
    <em style="display:block;line-height:1;color:#fff;font-weight:300;font-style:normal;font-size: 26.26px; margin-left: 8px;">up to <strong>70%</strong> off!</em>
  2. Content 2
    <h2 style="font-weight:600;color:#fff;line-height:1; font-size: 82.51px; margin: 3px 0 10px;">HUGE <strong style="font-weight:800;">SALE</strong></h2>
  3. Content 3
    <p style="font-weight:600;color:#fff;line-height:1; font-size: 18px;margin-left: 8px;margin-bottom: 30px;">Fashion<span class="split">-</span>Electronics<span class="split">-</span>Gifts<span class="split">-</span>Music<span class="split">-</span>Sports</p>

Slider 3

Class Content : content3

  1. Content 1
    <em style="display:block;line-height:1;margin:0;color:#fff;font-weight:300;font-style:normal;text-align:right;    font-size: 26.26px;">It’s time to feel</em>
  2. Content 2
    <h2 style="font-weight:600;color:#fff;line-height:1;  font-size: 82.51px; margin-bottom: 17px;">THE <strong style="font-weight:800;">POWER</strong></h2>

Home Bar

You can see the list of Font Icon by going to here.


  • Content 1

    <i class="icon-truck" style="font-size:36px;"></i><div class="text-area"><h3>FREE SHIPPING & RETURN</h3><p>Free shipping on all orders over $99.</p></div>
  • Content 2

    <i class="icon-dollar"></i><div class="text-area"><h3>MONEY BACK GUARANTEE</h3><p>100% money back guarantee.</p></div>
  • Content 3

    <i class="icon-lifebuoy" style="font-size:32px;"></i><div class="text-area"><h3>ONLINE SUPPORT 24/7</h3><p>Lorem ipsum dolor sit amet.</p></div>

Featured Products

Here are the settings for each sections:

Featured Box Content 1

<h3><i class="icon-star"></i> DEDICATED SERVICE</h3>
<p>Consult our specialists for help with an order, customization, or design advice.</p>
<a href="#">Get in Touch ></a>

Featured Box Content 2

<h3><i class="icon-reply"></i> FREE RETURNS</h3>
<p>We stand behind our goods and services and want you to be satisfied with them.</p>
<a href="#">Returns Policy ></a>

Demo 18

Link to the Porto Demo 18 Site : Click Here


Recommended Size
  • Background Image: 1904 x 981
  • Product Image: 212 x 245
  • Newsletter image: 700 x 320
  • Footer logo: 68 x 31

Banner Content 1

Banner Content 1

Banner Content 2

  • Banner Text Content :
    <div style="margin:0;line-height:1;">
    <img src="https://cdn.shopify.com/s/files/1/1613/0211/files/quote.png?16379687509074076010" alt="" class="quote" width="37" height="10" style="display:inline-block;vertical-align:middle;">
    <em style="display:inline-block;vertical-align:middle;line-height:1;color:#fff;font-weight:300;font-style:normal;">DO YOU NEED A NEW</em>
    <img src="https://cdn.shopify.com/s/files/1/1613/0211/files/quote.png?16379687509074076010" alt="" class="quote" width="37" height="10" style="display:inline-block;vertical-align:middle;">
    </div>
    </div>h2 style="font-weight:800;color:#fff;line-height:1;">eCOMMERCE?</h2>
    </div>p style="font-weight:300;color:#fff;line-height:1;">Check our options and features.</div>/p>
Banner Content 2

Banner Content 1

Banner Content 2

Banner Text Content :

<div style="margin:0;line-height:1;">
<img src="https://cdn.shopify.com/s/files/1/1613/0211/files/quote_black.png?16379687509074076010" alt="" width="37" height="10"" class="quote" style="display:inline-block;vertical-align:middle;">
<em style="display:inline-block;vertical-align:middle;line-height:1;color:#333;font-weight:300;font-style:normal;">LET THE MUSIC PLAY</em>
<img src="https://cdn.shopify.com/s/files/1/1613/0211/files/quote_black.png?16379687509074076010" alt="" width="37" height="10"" class="quote" style="display:inline-block;vertical-align:middle;">
</div>
<h2 style="font-weight:800;color:#333;line-height:1;">Connect with the best tech!</h2>
<p style="font-weight:300;color:#333;line-height:1;">Up to 70% OFF in the new collection.</p>
<a href="#" class="btn btn-default" style="background-color: #333; color: #fff; border-radius: 0; border: 0;">SHOP NOW</a>

Slideshow

The unique feature of the slide is that you will have a Product Filter Section within the slider.

  • You will have 2 ways to display this section by choosing the Text Content Position to be Right or Left.

  • Slideshow Text Content

    <em style="font-style: normal; text-align: right; display: block; color: #333;font-weight:600;">NEW ARRIVALS</em>
    <h2 style="color: #333; line-height: 1;font-weight:800;margin:0;">Fashion Dresses</h2>
    <p><span style="color: #333; vertical-align: top;">Up to <b style="font-weight:800;">70% OFF</b> in the new collection.</span> <a href="#" class="btn btn-default" style="background-color: #333; vertical-align: top; font-weight: 600;">SHOP NOW</a></p>
  • Collection : Choose the collection of products which you want to display on this feature.
    You can go to the collection config page by choose Edit Collection on the top-right of the box.

  • Number of products to show : The total number of products you want to display on this feature.

  • Products per row : The total number of products you want to display on this feature.
    For example: 8 products.

  • Hide Action Links : Action links include 'Add to cart' button, 'Add to compare' link and 'Add to wishlist' link.

  • Move Actions : If choose, all of the action links will be moved onto the product image.

  • Slideshow : The time for the autoplay.

    For example: set 5000 = 5 seconds.

    Leave empty to disable autoplay.

  • Show Paging : Choose to show the paging.

  • Margin : Adjust the margin between 2 items.

Demo 19

Link to the Porto Demo 19 Site : Click Here


Recommended Size
  • Background Image: 1920 x 950
  • Product Image: 400 x 533
  • Newsletter image: 700 x 320
  • Logo: 162 x 67

Slideshow

The max number of the slider the customer can add is 4 sliders.

Class Content : slide1-content

  1. Content 1
    <em style="font-style: normal; text-align: right; display: block; color: #fff;font-weight:600;">NEW ARRIVALS</em>
  2. Content 2
    <h2 style="color: #fff; line-height: 1;font-weight:800;margin:0;">Fashion Sunglasses</h2>
  3. Content 3
    <p><span style="color: #fff; vertical-align: top;">Up to <b style="font-weight:800;">70% OFF</b> in the new collection.</span> <a href="#" class="btn btn-default" style="background-color: #fff; color: #333; vertical-align: top; font-weight: 600;float:right;">SHOP NOW</a></p>

Demo 20

Link to the Porto Demo 20 Site : Click Here


Recommended Size
  • Background Image: 1900 x 688
  • Product Image: 268 x 400
  • Brand image: 187 x 109
  • Newsletter image: 700 x 320
  • Logo: 109 x 50
  • Footer Logo: 78 x 36

Slideshow

The unique feature of the Demo 20's slider is that you can upload the Background image and Image to have your own style.
Please the example below:


Slide 1

Class Content : slide-1

  1. Content 1
    <em style="font-style: normal; text-align: left; display: block; color: #2c3232;font-weight:600;">PROFESSIONAL</em>
  2. Content 2
    <h2 style="color: #2c3232; line-height: 1;font-weight:800;margin:0;">COSMETICS</h2>
  3. Content 3
    <p><span style="color: #2c3232; vertical-align: top; font-weight: 300;">Up to <b style="font-weight:800;">70% OFF</b> in the new collection.</span></p>
  4. Button Content
    <a href="#" class="btn btn-default" style="background-color: #b74173; color: #fff; vertical-align: top; font-weight: 600;">SHOP NOW</a>

Slide 2

Class Content : slide-2

  1. Content 1
    <em style="font-style: normal; display: block; color: #2c3232;font-weight:600;">CHECK OUT THE NEW</em>
  2. Content 2
    <h2 style="color: #2c3232; line-height: 1;font-weight:800;margin:0;">GLOSS FOR LIPS</h2>
  3. Content 3
    <p><span style="color: #2c3232; vertical-align: top; font-weight: 300;">Starting at $9.99</span></p>
  4. Button Content
    <a href="#" class="btn btn-default" style="background-color: #b74173; color: #fff; vertical-align: top; font-weight: 600;">SHOP NOW</a>

Note!

The Class Content is the specific class that we use to display the style of the text on the slider.
There are 2 Class Content: slide-1 and slide-2. You need to insert 1 of that 2 class content to display the text like on the DEMO. If you insert another class content, you must to style this on your own.
Comestic Section
  • Collection : Choose the collection of products which you want to display on this feature.
    You can go to the collection config page by choose Edit Collection on the top-right of the box.

  • Number of products to show : The total number of products you want to display on this feature.

  • Products per row : The total number of products you want to display on this feature.

  • Hide Action Links : Action links include 'Add to cart' button, 'Add to compare' link and 'Add to wishlist' link.

  • Hide Wishlist Quickview : Action links include 'Add to cart' button, 'Add to compare' link and 'Add to wishlist' link.

  • Flex Grid: Choose if you want the collection page to be in flex grid.
    In Flex Grid mode:

  • Move Actions : If choose, all of the action links will be moved onto the product image.

  • Enable Carousel : Use ONLY for the default layout and don't show the SHOW MORE button

  • Slideshow: Set the autoplay rotate in ms (the time for changing between 2 slider).
    For example: set '5000' = 5s

  • There are 2 options to choose the way which the customer can switch the sliders.

Navigation : The left/ right arrow

Pagination.

Theme Configuration

Collection Page Configuration

Basic Settings

This theme comes with a new collection page, which is more customizable & mobile-friendly. There are some areas you need to check:

  1. Edit and Manage Collection in Products > Collections

  2. Add and assign products to each collection, go to Products > Products

  3. Go to: Customize theme > Collection Page to config filtering & set the column number in collection page.

  4. Configure to show filter by attributes (color, size or manuafacture): Customize Theme > Collection Filtering.

  5. Configure to show collection side-bar in collection page: Customize Theme > Collection Sidebar.

  6. Configure to show collection side-bar collection in collection page: Customize Theme > Sidebar Bestseller Collection.

How to add Top Banne Sliders?

Go to Products > Collections, choose a collection and click Show HTML.

Please insert the code below:

Note!

After inserting the code, you can click again the button "Show Editor" to edit.
Or you can change the image by replace the image link in tag <img> and the navigation link in tag <a href=>.

.
<div class="data-slideshow" data-auto="5000" data-paging="true" data-nav="false" style="display: none;"></div>
                                                
<div class="slideshow owl-carousel category-boxed-banner">
<div class="item"><img src="//cdn.shopify.com/s/files/1/1559/5181/files/02-01.png?v=1479116914" />
<div class="banner-text" style="top: 37%;">
<h2 style="background-color: transparent; color: #2b2b2b; margin: 0;">CATEGORY <b>BANNER</b></h2>
<br/>
<p style="max-width: 280px; background-color: transparent; color: #2b2b2b; font-weight: 400;">Set banners and description for any category of your website.</p>
</div>
</div>
<div class="item"><img src="//cdn.shopify.com/s/files/1/1559/5181/files/02-02.png?v=1479116914" />
<div class="banner-text" style="top: 45%;"><img src="//cdn.shopify.com/s/files/1/1559/5181/files/02-02-01_large.png?v=1479139752" alt="" style="vertical-align: middle; width: auto; max-width: 50%;" /> <a href="#" class="shop-now" style="color: #2b2b2b; vertical-align: middle;">Shop now ></a></div>
</div>
</div>

How to add Full Width Top Banne?

Go to Products > Collections, choose a collection and click Show HTML.

Please insert the code below:

Note!

After inserting the code, you can click again the button "Show Editor" to edit.
Or you can change the image by replace the image link in tag <img> and the navigation link in tag <a href=>.

.
<div class="category-content move-below-header">
<div class="full-width-image-banner" style="background: url('//cdn.shopify.com/s/files/1/1559/5181/files/full-width-banner_acf73e01-8c5a-4728-b631-1fb7c96dca07.jpg?v=1479138403')  50% 50% no-repeat; background-size: cover; height: 375px;">
<div class="content">
<h2>CATEGORY <b style="font-weight: 800;">BANNER</b></h2>
<p>Set banners and description for any category of your website.</p>
</div>
</div>
</div>

Collection Page

Go to Online Stores > Themes > Customize theme > General Settings > Collection Page

General
  • Alternative: Choose Yes if you want to change the produce images when hovering.

  • Keep Image Aspect Ratio: If set to Yes, shows product image with uploaded image's size ratio.
    If you choose No, you need to insert the Image Width and Image Height.

    Keep Image Aspect Ratio - Yes

    Keep Image Aspect Ratio - No

  • Choose if you want to Show Rating Stars

  • Choose if you want to Show Product Price

  • Choose if you want to Show Action Links

  • Number of Columns: Choose the number of column you want to show in 1 row.

  • Flex Grid: Choose if you want the collection page to be in flex grid.
    In Flex Grid mode:
  • Keep Image Aspect Ratio: Choose Yes if you want the product image to Aspect Ratio.
  • If you choose No, you need to insert the Image Width and Image Height.
  • Move Actions: Choose if you want the action links to move into the product image area.
  • Show color swatch grid?: Choose to show the color swatch grid.

Collection Filtering

This theme includes a new advanced filter called Collection Filtering.

  • Go to: Customize theme > Collection Page > Filtering then select Filter By Groups

  • By Porto design, This filter is displayed in vertical mode (in sidebar), but you can custom to show it in horizon mode (in a bar on top) to help improving user experience


Set up Collection Filtering

Understanding the structure of the filter:

There are many filter items (from now we called a filter item "filter" as abbreviation)

  • To the image above, you can see there are 4 filters (Color, Size, Price, Brand)

  • To each filter, there are many values. For instance, Color has its value: beige, black, blue, gray, green, pink, red, silver and yellow.

  • When a value is selected, for instance "green", all products (in the collection) having "green" tag will be displayed.

  • The filter Color is displayed in swatches by default.

  • To each brand, there are many values. If i want to filter by brand "Adidas", all products (in the collection) having "Adidas" tag will be display.

Go to Customize theme > Collection Filtering

  • Used: Choose if you want to show the filter.

  • Heading: Add the title of the filter.

  • Filters: Add the Filter Variants.

Go to Products > Products, choose a product and go to Tags Area

Note!

In Filters box, you MUST separate the variants by the comma ( , ) with NO SPACE.

The Tags must like EXACTLY the variant which you insert in Collection Filtering.

Collection Sidebar
  • Sidebar Position: You can choose the postion of the sidebar to be on the left or right side of the collection page.

  • Menu Categories: Choose the Navigation Menu to show on the Menu Categories.

  • HTML Sidebar Categories: Add the content.


    Please add the code:
    <h2 style="font-weight:600;font-size:16px;color:#000;line-height:1;margin-top:0;">Custom HTML Block</h2>
    <h5 style="font-family:Arial;font-weight:400;font-size:11px;color:#878787;line-height:1;margin-bottom:13px;">This is a custom sub-title.</h5>
    <p style="font-weight:400;font-size:14px;color:#666;line-height:1.42;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non placerat mi. Etiam non tellus </p>

Collection Bestseller Sidebar

  • Sidebar Bestseller Collection Use? :

    Choose if you want to display the section.

  • Collection Title : Add the title.
    For example: Featured.

  • Collection use :

    Choose the collection of products which you want to display on this feature.
    How to create a new collection? --- Refer the section Basic Configuration > Create a new collection.
    You can go to the collection config page by choose Edit Collection on the top-right of the box.

  • Limit : The number of products you want to display.

Product Page Configuration

Go to Online Stores > Themes > Customize theme > General Settings > Product Page .

Basic Settings

Enable Addtocart Sticky?

Choose if you want to have a Add to cart sticky popup to be displayed below the Main Menu when scrolling.


Color Swatches

Swatches is a feature for products presenting how a product looks like in different colors & size. This also shows the relationship between your product size and stock..

Enable Color Swatches

Go to Customize Theme > Product Page > General

Tick to enable color & size as swatches.

Settings

  1. In the Admin Panel, go to Products > Products > Add a product or edit an existing

    product.

  2. Add product details.

    Create different color, size or style variants (swatches) for product by clicking Add Variants

  3. Add Images to Swatches: Upload the image to: Online Stores > Themes > ... >

    Edit HTML/CSS > Assets > Add New Asset > Upload a file


    Reminder!

    There's an important naming convention to respect here! The image must be named after the color option, be all lowercase, seperated by " - ", and have a .png extension.
Media Slide
Media Slide
  • Keep Image Aspect Ratio: Choose Yes if you want to keep the image aspect ratio. If No, you must to add the Image Width & Image Height.

  • Thumbnail Images: There are 2 options: Verticle & Horizontal.

  • Product Image Size: Choose the size of the product page.

Horizontal

Media Zoom

Zoom Position

Right

Insignt

Lightbox

If you want to have the image popup display when customer click on the product image, choose to enable the Lightbox.

Product Tab

Product Tab Style
Porto eCommerce provides 4 product tab styles, you can choose one of them here.

Horizonal

Sticky

Verticle

Accordion

Product Tab Position

Move Product Tabs at the Right of Product Image? : Choose if you want to display the product tabs on the right of the product image.

If not, the produc tabs will be displayed below the product image.

Custom Tab Content

<ul>
<li>Any Product types that You want - Simple, Configurable, Bundled and Grouped Products</li>
<li>Downloadable/Digital Products, Virtual Products</li>
<li>Inventory Management with Backordered items</li>
li>Customer Personalized Products - upload text for embroidery, monogramming, etc.</li>
<li>Create Store-specific attributes on the fly</li>
<li>Advanced Pricing Rules and support for Special Prices</li>
<li>Tax Rates per location, customer group and product type</li>
<li>Detailed Configuration Options in Theme Admin Penl</li>
</ul>

Review Tab

To have the Product Reviews like our Demo, please install the Shopify app, called Product Reviews

View in Shopify App Store



Sidebar

Sidebar Block

<div><i class="icon-truck"></i><h3>FREE SHIPPING</h3><p>Free shipping on all orders over $99.</p>
</div>
<div><i class="icon-dollar"></i><h3>MONEY BACK GUARANTEE</h3><p>100% money back guarantee.</p>
</div>
<div><i class="icon-lifebuoy"></i><h3>ONLINE SUPPORT 24/7</h3><p>Lorem ipsum dolor sit amet.</p>
</div>
Sidebar Product
  • Insert the Sidebar Product Title

  • Choose the Collection which you want to display the products.

  • Limit : Add the number of products you want to display.


Related Products

A Related Product is shown on the product page, under product tabs. It is designed to encourage the customer to purchase more than one item. This type of product is usually a logical suggestion based on a same collection (automatic).

  • Porto Theme offers you more options to show related product on product page. Go to Customize Theme > Product Page > Related Product

  • Type of related product: There are 2 options to display the related products : By Collection & By Tags.

Newsletter

Go to: Online Stores > Themes > Customize Theme > General Settings > Newsletter:

Newsletter Footer

  • Insert the Newsletter Footer Content

  • Insert the MailChimp Form Action URL

    Note : Below the box is the link of the guide which show how to get this info.

Newsletter Popup

Setting : There are 3 options to choose the way the popup displayed.

  • Disable

  • Enable on ONLY Homepage

  • Enable on ALL pages.

Delay : Add the time you want the popup displayed before automatically closing.

The time is in Milisecond. For example: 10000 = 10s.

Popup Width : Config the popup width.

Translation

Edit Language

Here's a quick way to change some of the more commonly text

  • Go to: Themes > ... > Edit language:



Second Language

Enable Multi Language

Go to Online Stores > Themes > Customize theme > General Settings > General > Multi Language

  • Choose Multi language enable?

  • Choose Icon? if you want to display the Language Flat.

  • Add the Language Name and upload the Language Flat


Language Flag

If you have more than one store view in your store, the store view selector will be displayed at the top of the page as a selectbox. You can enable different language for each store view.

For each available lanugage a flat is displayed in the store view switcher. Flag images form : PNG, 16*12 pixels .

Second Language

  1. Go to Online Stores > Navigation, click Edit link list, then change the link name follow the structure: Lang 1 | Lang 2

    For example : Home | Domicile

  2. Go to Product > Product list, then choose product:

    - Changing the product title follow the structure: Lang 1 | Lang 2

    - Changing the product content follow the structure: Page content Lang 1 [lang2] Page content Lang 2

  3. Go to Online Stores > Theme > ... > Edit HTML/CSS

    - In folder Locales, create new locales, for example: name folder for French: fre.json

    - Copy the content of en.default.json to fre.json

    - In fre.json, please replace the text behind the : and inside " " to French.

    For example : "home": "Home",

    "home_link_title": "Back to the frontpage"

    =>> "home": "Domicile",

    "home_link_title": "Retour a Domicile"

    - After finishing, pls copy the content of fre.json and replace with the content in file lang2.js in folder Assets.


Admin Options

General

Go to: Online Store > Themes > Customize theme > General Settings > General

Layout
  • Box / Wide:

    There are 2 options for the layout: Wide(default) and Boxed

  • RTL Support:

    In this option, you can turn your store into Right to Left language mode for entire section.

  • Disable Responsive:

    You can disable the responsive mode on your mobile devices.

  • Maximum Page Width:

    Porto eCommerce provides 1024px, 1170px and 1280px max width mode, you can choose one as you prefer. You can apply this option to any home versions.

  • Disable All Border Radius:

    If you choose "Yes", border radius will be applied for all elements

Show Site Notice:

You can show the custom block at the top of the page, above the header.



  • Notice Text 1:

    <span style="color: #fff; font-size: 16px; font-family: Georgia; line-height: 30px;"><b>SALE:</b> use coupon code <b>PORTO</b> to save 30%</span>
  • Notice Text 2:

    <p style="margin: 0; color: #fff; font-family: Georgia; font-size: 15px; font-weight: 700; line-height: 15px;">Be the First to Know</p>
    <p style="margin: 0; font-size: 12px; color: #a7a7a7; line-height: 15px;">Sign up for newsletter today.</p>
Currencies

Go to: Online Store > Themes > Customize theme > General Settings > General > Currencies

  • Show:

    Choose to display the currencies or not.

  • Money Format:

    There are 2 options: Without Currency, Ex: $10 and With Currency, $10 CAD

  • Currencies you wish to support:

    Add the currencies, seperated by the space.

    For example: EUR USD GBP

  • Default currency:

    Insert the currency you want to set the default.

Favicon

This guide will show you how to change your theme's favicon.

  1. Go to: Online Store > Themes > ... > Edit HTML/CSS > Assets folder.

  2. Upload your new icon, name: favicon.ico and replace the old file.

Footer


General

Go to Online Stores > Themes > Customize theme > Sections > Footer

Choose Yes if you want the footer to be in fixed position while scroll, for ONLY HOMEPAGE.

Footer structure

By default, Porto Footer has 3 sections:

  • Footer - Top

  • Footer - Middle

  • Footer - Bottom

Footer- Top

  • Show Footer Top: Choose Yes if you want to display the Footer-Top.

  • Block : There are 3 options: Do not show; Custom Block & Twitter Widget.

    If you choose Custom Block, there are 2 boxs for you to insert the Custom Block Content.

    The code

    Custom Block 1

    <h3 style="color: #000; text-align: left; font-size: 18px; line-height: 35px; margin: 0;">Start Selling Today, Buy Porto eCommerce</h3>

    Custom Block 2

    <h4 style="color: #000; text-align: left; font-size: 16px;line-height: 1;margin:0;">Be the First to Know<br><p style="font-size: 13px;font-weight: 400; margin: 0;line-height:1.5">Sign up for newsletter today.</p></h4>

Footer - Middle

  • Show Footer Middle: Choose Yes if you want to display the Footer - Middle.

  • Show Footer Ribbon: Choose Yes if you want to display the Footer - Middle.

  • Ribbon Text: Insert the content for the Ribbon.


The Footer - Middle allows customers to have maximum 4 columns. In the example below is 3 columns.

Footer Links
  • Column: Choose Custom Block to display the Footer Link.

  • Heading Collumn: Add the title heading.

  • Column Content: Choose Linkslist

  • Link list: Choose the Navigation Menu.

  • Column size: Choose the column size.

    For example : 3/12

Footer Contact information
  • Column: Choose Custom Block.

  • Heading Collumn: Add the title heading.

  • Column Content: Choose None

  • Custom Block: Add the code

    The code from the Demo:

    <ul class="contact-info">
    <li><i class="icon-location"> </i><p><b>Address:</b><br>123 Street Name, City, England</p></li>
    <li><i class="icon-phone"> </i><p><b>Phone:</b><br>(123)456-7890</p></li>
    <li><i class="icon-mail"> </i><p><b>Email:</b><br><a href="#">mail@example.com</a></p></li>
    <li><i class="icon-clock"> </i><p><b>Working Days/Hours:</b><br>Mon - Sun / 9:00AM - 8:00PM</p>
    </li></ul>
  • Column size: Choose the column size.

    For example : 3/12

Footer Features
  • Column : Choose Custom Block.

  • Heading Collumn : Add the title heading.

  • Column Content : Choose None

  • Custom Block : Add the code

    The code from the Demo:

    <ul class="features">
    <li class="theme-color"><i class="icon-ok theme-color"></i><<a href="#">Super Fast Shopify Theme</a>
    </li>
    <li class="theme-color"><i class="icon-ok  theme-color"></i><a href="#">1st Fully working Ajax Theme</a>
    </li>
    <li class="theme-color"><i class="icon-ok  theme-color"></i><a href="#">10 Unique Homepage Layouts</a>
    </li>
    <li class="theme-color"><i class="icon-ok  theme-color"></i><a href="#">Powerful Admin Panel</a>
    </li>
    <li class="theme-color"><i class="icon-ok  theme-color"></i><a href="#">Mobile & Retina Optimized</a>
    </li></ul>
  • Column size: Choose the column size.

    For example : 3/12
Other Footer

Besides 3 kinds footer above, you can choose to display:

Newsletter Subcribe

Facebook Widget

Footer - Bottom

Color

Go to Online Store > Themes > Customize theme > General Settings > Color.

General

Choose the Theme color.

There are 2 options for the Background Color:

  • Light (default)

  • Dark

Other Color Settings
On the other sections, you will have lots of options to config the Color of whole theme, Header, Footer, Page, Main Container.

Typography

About Typography


Font Family can be set (Google Fonts and Custom Fonts). Google Font Family has option to set one of many Google Fonts.

Both families has option for font size of 6 Heading types.

Go to Customize Theme > Typography

How to get a Google Web font name

Go to: https://www.google.com/fonts. Find your font in search field on the left hand


Click Quick-use button

Pages

Blog Page

How to create a Blog Post?

Go to Online Store > Blog Posts > Add Blog Post.

  • Add the Title.

  • Add the Content.

  • Choose Add excerpt and insert image with original size if you want to show this image on the Blog Page.

    If you want to have the slider, add more than 1 image.

  • Add image in Featured Image to display this image on the Homepage

Blog Page Sidebar

Go to Online Store > Themes > Customize theme > General Settings > Blog Page.

  • Display Sidebar :

    Choose the position of the sidebar on the blog page.

  • Display Recent Article? :

    Choose to display the recent posts on the sidebar.

  • Display Tabs Sidebar? :

    Choose to display the Tag Cloud.

Contact Page

Settings

Go to Customize Theme > Contact Page.

Here, you can integrate & stype Google Map with your address.

  • Google Map Api Key :

    You can get an API key from https://developers.google.com/maps/documentation/javascript/get-api-key.

    Here is an example key for localhost :
    AIzaSyDDfqNjiVz7F6wqWWn6NXuzwS4mEAQj6v4

Edit the Contact Detail

Go to Online Stores > Page > Contact Page.

Here is an example of Contact Page:

The code for Contact Page:

Note : Choose Show HTML.

<h2 class="legend">Contact <b>Details</b></h2>
<div class="row">
<div class="col-sm-12"><i class="icon-phone"></i>
<p>0201 203 2032</p>
<p>0201 203 2032</p>
</div>
</div>
<div class="row">
<div class="col-sm-12"><i class="icon-mobile"></i>
<p>201-123-3922</p>
<p>302-123-3928</p>
</div>
</div>
<div class="row">
<div class="col-sm-12"><i class="icon-mail-alt">
<p>porto@gmail.com</p>
<p>porto@portotemplate.com</p>
</div>
</div>
<div class="row">
<div class="col-sm-12"><i class="icon-skype"></i>
<p>porto_skype</p>
<p>proto_template</p>
</div>
</div>

Checkout Page

Go to Customize theme > General Settings > Checkout.

Here you are able to do some settings for Banner , Logo , Main Content Area , Order Summary , Typography and Colors of Checkout Page.

Wishlist Page

Create Wishlist Page

Go to Online Store > Pages > Add Page

Go to Customize theme > Wishlist Page

Others

Frequently Asked Questions

Updating . . .

Support & Customization

Thanks for using Porto Shopify Theme!

We would like to thank you for using Porto Shopify Theme! We are very pleased you have chosen Porto eCommerce for your website, we always provide best support for our customers, you can confirm it from our themeforest review rating - top 1 in themeforest!

If you have any difficulities with Porto Shopify Theme or need any additional service, do not hesitate to contact us. We provide 24/7 Support!

Regarding presale questions and free support for theme usage, please contact us through themeforest support page. We will provide you amazing one-by-one email support and you will get answers more faster than you expected. We also provide support in weekends, but may require some more hours than normal working days.

Regarding customization service based on our themes or other Shopify related, please contact us to nicework125@gmail.com. We have an amazing team to provide customization service who have done bunch of customization projects so far, will provide you reasonable quote before start.


Free Support for Questions and Issues

Themeforest Support Page

Customization Service(additional cost)

nicework125@gmail.com

Change Log

Version 1.1 (01/18/2017)

Fixed

  • The broken style of the search result page.
  • The theme is not responsive on mobile in the boxed mode.
  • The responsive options issue.
  • The thumbnail images don’t display on the screen < 767px
  • Can’t disable each small sections on the Main Section on Demo 8.
  • The navigations don’t work on Section Group Product on Demo 13, 15.

Fixed files:

All demos:
                                        
  • styles.scss.liquid
  • search.liquid
  • theme.liquid
  • settings.schema.json
  • responsive.css
  • media.liquid
  • media-quickview.liquid

Demo 3

  • home_banner_content.liquid

Demo 8

  • main_section.liquid

Updated:

  • Update demo 1 new design.
  • Update demo 2 new design.
  • Support RTF language.