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


NOTE : Please consider before updating to the newest version 3.2. Because there is the update/ change in the Header Structure, the older version Header Type CAN'T be used in the version 2.2.


Important!

The package you download from Themeforest, after unzipping, have 3 files, which includes


  • Documentation file

  • Preset file : Contain the Data files for 40 demos: 20 old skins demos + 20 new skins demo

  • Theme File: The .zip file which is used to import.

You can see the list of all demos on the Landing page.

Note: The RTL version has not updated in this version 2.0 yet. It will be released in the next update version.

  • Make sure you have unzipped your package .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 porto-v2.2 > Theme file > Porto Theme.zip file that you want to upload.

  • Click Upload.

Choose the Demo

  • After importing the .zip file, go to Online Stores > Themes > Actions > Edit HTML/ CSS > Config folder > settings_data.json.

  • Go to the package folder: porto-v2.2 > Presets, then open the demo file you want to use and copy the content

  • Replace this content with the content in the file settings_data.json

  • Choose Save to finish.


Here is the installation guide video for Porto Shopify theme

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).

Update

About the update, please download the package from ThemeForest. Please note that:

  • When you import the new updated version, the settings on the Customize theme of the old theme can’t be converted.
  • If you didn’t done any custom on your theme, please import and config like normal
  • If you have done any custom, please:
    • Backup all your files you have done custom. 
    • After backup file, you can import the updated demo version like normal and replace by the backup files
      OR See the changelog to know which files were fixed or updated, then, only update those files.

Basic Configuration

Enable Customer Registration Form

To make the Top LInks on the Header works, you need to enable the customer registration first.

  • Go to Admin Panel > Settings > Checkout

  • Find the Customer Account section.

  • Choose Account are optional.

Install Apps

To have the Product Reviews works, please install the Shopify app, called Product Reviews

View in Shopify App Store

Create a new product

Refer the Shopify guide

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

Refer the Shopify guide

Create a new collection

Refer the Shopify guide

Navigation, Menus and links

Refer the Shopify guide

Payment Methods

Refer the Shopify guide

Homepage Configuration

Drag & Drop Sections

Add Sections

In the newest version 2.0, Porto Shopify theme allows the users to add ALL of the sections from the other demos.

Go to Admin Panel > Online Stores > Themes > Customize theme > Add 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

Link to the Porto Demo 1 Site : Click Here

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>

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.

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-md-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-md-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 Shopify 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-md-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="https://obest.org/shopify/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-md-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 - New

Link to the Porto Demo 3 - New Site : Click Here


Recommended Size
  • Slider image: 1170 x 538
  • Banner image: 360 x 304
  • Product Image: 400 x 8400
  • Parallax background image: 1970 x 1028
  • Newsletter image: 700 x 320

Slideshow

The default design settings


Slider Content

  • Class Content: Choose 1 of 2: content_1 or content_2

  • Content 1:

    <em style="font-size:15px;">Elegant Collections</em>

  • Content 2:

    <h2>for him & Her</h2>

  • Button content:

    <a href="#" class="btn btn-default"><span>SHOP NOW</span></a>

Home Banner

Home Banner Content:

<h3><a href="#">SUNGLASSES</a></h3>
<span>Lorem Ipsum is simply dummy<br>text of the printing and typesetting industry.<br>Lorem Ipsum has</span>

Featured Products

Parallax Slider

  • Slider Content 
    <em>Men’s</em>
<div class="clearer"></div>
<h2>Watches</h2>
<div class="clearer"></div>
<a href="#" class="btn btn-default"><span>SHOP NOW</span></a>

Instagram Feed

  • To get the Instagram Feed works, you need to insert the right AccessToken and UserID of your Instagram account. Ahout how to get those info, please follow this guide

  • Limit: The number of Instagram posts you want to display on the Instagram Feed.

  • Content

    <i class="fa icon-instagram"></i>
<h3>Instagram</h3>
<span>@PORTOECOMMERCE</span>
<a class="btn btn-default" href="#">Follow</a>

Demo 4 - New

Link to the Porto Demo 4 - New Site : Click Here

Recommened size

  • Slider image: 870 x 412

  • Banner image 1: 270 x 304

  • Banner image 2: 270 x 344

  • Banner image 3: 270 x 244

  • Banner image 4: 570 x 367

  • Banner image 5: 570 x 226

  • Banner image 6: 570 x 287

  • Banner image 7: 270 x 216

  • Banner image 8: 270 x 476

  • Banner image 9: 270 x 200

  • Product image: 400 x 400


Sidebar and Slideshow
  • Sidebar Content: 
    <ul>
<li><a href="#"><i class="icon-cat-shirt"></i> Fashion</a></li>
<li><a href="#"><i class="icon-cat-computer"></i> Electronics</a></li>
<li><a href="#"><i class="icon-cat-gift"></i> Gifts</a></li>
<li><a href="#"><i class="icon-cat-garden"></i> Home & Garden</a></li>
<li><a href="#"><i class="icon-cat-computer"></i> Music</a></li>
<li><a href="#"><i class="icon-cat-sport"></i> Sports</a></li></ul><div class="action">
<a href="#" class="btn btn-default">HUGE SALE - 70% Off</a></div>

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 - New

Link to the Porto Demo 5- New Site : Click Here


Recommended Size

  • Slider background image: 1900 x 482

  • Banner image: 370 x 183

  • Product image: 280 x 280

  • Parallax background image: 1970 x 808


Slideshow

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 & New Products

Those sentions can be called Filter Product Collection, you can refer the detail configuration in the section General > Homepage Configuration > General Sections > Filter Product Collection


Custom Support

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

  • Content 1

    <i class="icon-earphones-alt" style="line-height:58px;font-size:40px;"></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-credit-card" style="line-height:58px;font-size:40px;"></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-action-undo" style="line-height:58px;font-size:40px;"></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>

Parralax Slide

  • Background Image: Update or Remove the backgound image of the Parralax slide.

  • Slideshow : The time for the autoplay.

    For example: set 5000 = 5 seconds.

    Leave empty to disable autoplay.

  • Show Paging : Choose to show the paging.

Slider Title Content:

<h2 style="font-weight:400;">fashion show collection</h2>

Demo 16 - New

Link to the Porto Demo 16- New Site : Click Here


Slideshow

Class Content: content1

Slider 1

  • Content 1: 
    <div class="text1" style="">up to<br><b class="inner1">50</b><span class="inner2">%<br><b class="inner3">Off</b></span></div>
  • Content 2: 
    <h2 class="text2">summer sale</h2>
  • Content 3: 
    <p class="text3" style="">Now starting at <b style="font-weight:700;">$99.00</b></p>

Slider 2

Class Content: content2

  • Content 1: 
    <h2 class="text1">COOL SHOES</h2>
  • Content 2: 
    <p class="text2">$ 199</p>
  • Content 3: 
    <p class="text3">* blue of orange while it last</p>

Home Banner

Go to Online Stores > Themes > Customize theme > Home Banner, then upload the banner image and insert the URL to the Banner Link to make the Banner Image to be clickable.


Collection Banner

  • Home Banner Content Position: Choose the position of the Banner Content to be Left or Right.

  • Collection Title: Add the title. Ex: NEW MENS COLLECTION

  • Collection text: Add the content below the Title.

  • Collection: Choose the Collection of which you want to show the products.

  • Insert number in Number of products to show field and Products per row field.

  • Choose the checkbox Hide Action Links to disable the action links, includes 'Add to Cart', 'Add to Compare' and 'Add to Wishlist' button.

  • Choose the checkbox Move Actions to move the action links into the product image area.

  • Slideshow: The time for the autoplay.

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

Demo 17 - New

Link to the Porto Demo 16- New Site : Click Here


Slideshow


Homebar

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


  • Content 1

    <i class="icon-shipping" style="font-size:35px;"></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-us-dollar" style="font-size:37px;"></i>
<div class="text-area">
<h3>MONEY BACK GUARANTEE</h3>
<p>100% money back guarantee.</p>
</div>

  • Content 3

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

Featured Products

This section contains a sidebar and a products collection section.

Sidebar

  • You can choose to Enable/ Disable the sidebar by ticking the checkbox Sidebar Enable.

  • Add the Categories title in Sidebar Categories Title field.

  • Choose the Navigation menu to display on the Menu Categories.

  • You can add up to 10 Menu icons in front of each menu. Porto Shopify theme support Porto fonts icon and Awesome Icons.


Featured Box

  • Content 1: 
    <i class="icon-star-empty"></i>
<h3>DEDICATED SERVICE</h3>
<p>We really care about you and your website as much as you do Purchasing.</p>
  • Content 2: 
    <i class="icon-reply"></i>
<h3>FREE RETURNS</h3>
<p>Your website as much as you do. Purchasing Porto or any other theme.</p>

Products Collection

You can refer the details configuration in Genral > Homepage Configuration > General Sections > Filter Products Section Settings


Featured Brands

You can refer the details configuration in Genral > Homepage Configuration > General Sections > Featured Brand Settings



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>
<p class="category-image"><img src="https://cdn.shopify.com/s/files/1/1717/8315/files/fashion-banner.jpg?3608479570195024491" alt="" /></p>

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('https://cdn.shopify.com/s/files/1/1729/3671/files/Untitled-1_bbe64bc8-768a-43f7-ab2f-1acccb53b805.jpg?1944167043157625151')  70% 100% no-repeat; background-size: cover; height: 300px;">
<div class="container">
<div class="content" style="position: absolute; z-index: 1; top: 35%; text-align: left;">
<p style="color: #fff;">check out over <b style="font-size: 26px; font-family: 'Oswald';">200+</b><</p>
<h2 style="color: #fff;">incredible deals</h2>
<a href="#" class="btn btn-default">shop now</a></div>
</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 .

Product page Layout

There are 6 Product page layouts for you to choose.


1. Extend Layout


2. Fullwidth


3. Grid Image


4. Sticky Both side


5. Sticky Right Side


6. Wide Grid

Choose layout for the specific product page

You can choose the different product layout for the specific product.

Please go to Shopify Panel > Products > Product configuration page > Theme Templates


* NOT choose product.quickview template.


Note:: If you choose the Template products, the product layout will follow the config on Customize theme > Product page > Product layout type.


Choose layout for all product page

Please check the option Product Page Type.

Note : This config ONLY apply for the product which has the Theme Templates was chosen as product (see the guide above).


Product Page Custom Html

* This section is NOT applied for the product has product template ( Shopify Panel > Products > Product configuration page > Theme Templates).


1. Go to the Customize theme > to Product page > Product Page custom HTML.



2. Choose Add Product Custom > Add Product.
You will choose the product that you want to display the Custom HTML section.



Custom HTML sample:

After choose Add Product Custom, the sample content is already added on the box Content.



Product Page Video

THe section allows the customer to add the Video to the Specific product page.

* This section is NOT applied for the product has product template ( Shopify Panel > Products > Product configuration page > Theme Templates).


1. Go to the Customize theme > to Product page > Product Page Video.



2. Choose Add Product Video > Add Product.
You will choose the product that you want to display the Video section.



3. Adding the Video URL:
It supports Youtube and Vimeo video.

For example: //player.vimeo.com/video/xxx4537?autoplay=1


Product Video sample:


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.
Color Swatches Settings

  • Color Swatches Type

  • Product Swatches Type: There are 2 options: Color Swatches & Image Swatches.

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.


Additional Tab

You can add the unique product tab for different product.

The Description tab content and Additional tab content are inserted on the Product description configuration.

The Additional tab content uses the [additional]...[/additional] to add.


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-md-12"><i class="icon-phone"></i>
<p>0201 203 2032</p>
<p>0201 203 2032</p>
</div>
</div>
<div class="row">
<div class="col-md-12"><i class="icon-mobile"></i>
<p>201-123-3922</p>
<p>302-123-3928</p>
</div>
</div>
<div class="row">
<div class="col-md-12"><i class="icon-mail-alt">
<p>porto@gmail.com</p>
<p>porto@portotemplate.com</p>
</div>
</div>
<div class="row">
<div class="col-md-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
(Obest)

Customization Service(additional cost)

nicework125@gmail.com
(OBest)

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 RTL language.

    • Version 1.2 (02/19/2017)

    Fixed

  • Small logo issue. 
    • 

  • Duplicate notice text when disable multi language
    • 

  • Displaying search result page issue. 
    • 

  • Duplicate products 
    • 

  • Continue shopping button & process checkout button
    • 

  • Sale label issue.
    • 

  • Disable product zoom issue.
    • 

  • Undefined in inventory issue. 
    • 

  • Light box issue.

    • Updated

  • Adding cart note feature.
    • 

  • Demo 3 New design.
    • 

  • Demo 4 New design.
    • 

  • Demo 5 New design.
    • 

  • Demo 6 New design.
    • 

  • Demo 7 New design.
    • 

  • Demo 8 New design.
    • 

  • Demo 12 New design.
    • 

  • Demo 13 New design.

    • Fixed file

    
All demos:
      

    • top-newsletter.liquid
      • 

    • footer_newsletter_subscribe.liquid
      • 

    • en.default.json
      • 

    • lang2.js
      • 

    • customers/addresses.liquid
      • 

    • settings_schema.json
      • 

    • search.liquid
      • 

    • theme-scripts.js
      • 

    • product-grid-item.liquid
      • 

    • owl-lazyload-product-grid-item.liquid
      • 

    • lazyload-product-grid-item.liquid
      • 

    • product.liquid
      • 

    • frontend.js
      • 

    • frontend.min.js
      • 

    • styles.scss.liquid
      • 

    • cart.liquid
    
Demo 3

    • slideshow.liquid
    
Demo 6

    • main_section.liquid

    Version 1.3 (05/15/2017)

    Fixed

      

    • The Banner images of Demo 8 - new are blurry.
      • 

    • The image show $NaN in Best Seller sidebar of Product page and Collection page.
      • 

    • Set “None” in showing Categoried on Collection page but the title doesn’t disappear.
      • 

    • The product code - SKU doesn’t display on the product page.
      • 

    • Add to cart button on the Sticky doesn’t update to sold out when the product is out of stock.
      • 

    • Can’t translate the mini Cart-total.

    Updated

      

    • New design of Demo 16.
      • 

    • New design of Demo 17.
      • 

    • Add Filter checkbox.
      • 

    • Add more Color options to modify the background color, text of the specific button.
      • 

    • Add Video Sider feature.

    Version 2.0 (06/26/2017)

    Fixed

      

    • The page on the collection page can’t be clicked.
      • 

    • Header mobile on the cart page can’t be clicked.
      • 

    • The broken add to cart button on the search result page.
      • 

    • The sticky menu issue on homepage mobile.
      • 

    • The sticky add to cart is overlapping issue on the product page on mobile.
      • 

    • On the product detail page, add the space between the review stars and the star number.
      • 

    • On the cart page, fixing the style of ‘Continue Shopping’ button to be same with the ‘Update Shopping cart’ button.
      • 

    • Make the homepage slider on the Demo 2 - New design to be in full-screen mode.
      • 

    • On mobile mode, modify the mini-cart icon to be vertically aligned with menu and search icons.
      • 

    • Fixing the demo 7 - New Design categories page style to be the same with the demo 12 - New design.
      • 

    • Changing to show 2 products per row on Homepage mobile
      • 

    • Fixing the style of the size and color swatches on the collection page.

    Updated

      

    • Major update version 2.0 - change the process to import demo.
      • 

    • Able to add all the sections from Porto Shopify demos.
      • 

    • New design of Demo 9.
      • 

    • New design of Demo 18.
      • 

    • New design of Demo 19.
      • 

    • New design of Demo 20.

    Version 2.1 (10/12/2017)

    Fixed

      

    • The margin issue of the carousel. 
      • 

    • Can’t translate the next/prev button text on the product page
      • 

    • Can’t navigate the link of Banner Text 2 & 4 section.
      • 

    • The issue with the banner onepage collection. 
      • 

    • The issue with the onepage collection.
      • 

    • The zoom function doesn’t work on the product page.
      • 

    • The minor style issue on the demo19-new
      • 

    • The minor style issue on the all collections page.
      • 

    • The sticky menu for the header type 28 doesn’t work.
      • 

    • The discount price for the bestseller product on the product page sidebar shows wrong price or show NaN error.

    Updated

      

    • Updating the Wishlist feature.
      • 

    • Adding the Compare product feature. 
      • 

    • Adding the Menu image icon disable option. 
      • 

    • Adding the Gallery zoom feature.
      • 

    • Adding the Image swatches feature for the product page. 
      • 

    • New design of Demo 10.
      • 

    • New design of Demo 11.
      • 

    • New design of Demo 14.
      • 

    • New design of Demo 16.

    Version 2.1.1 (3/25/2018)

    Fixed

      

    • Minor style issues when changing the theme headers.
      • 

    • On product page, the variant box is broken when the name is long.
      • 

    • On Mobile product page, when tapping on the product image, user can’t scroll the page.
      • 

    • The bug ‘Undefined in Stock’ of the availability on the product page.
      • 

    • The blog image isn’t responsive on the mobile mode.
      • 

    • The search page result when there is no result is broken on the mobile mode.
      • 

    • The banners on demo8-new are not clickable.
      • 

    • The banners on demo8-new displays in low quality.

    Updated

      

    • Update Header type and header struture
      • 

    • Feature: Search by categories on the header search box
      • 

    • Able to add the additional tab on product page, which is different for each product.
      • 

    • Able to choose view by grid/list mode by default on the collection page.
      • 

    • Able to display the products variant with 3 styles: dropdown variant, box variant, and underlined variant.
      • 

    • Able to display Color swatches or Image swatches by default.
      • 

    • Able to choose the popup or widget addtocart
      • 

    • Able to display cart icon or bag icon
      • 

    • Style menu options are available.
      • 

    • Able to enable/disable ajax add to cart
      • 

    • Update new ewsletter popup style
      • 

    • Update new mobile menu style
      • 

    • Made sidebar collection content as popup in below 991px width mode.
      • 

    • Made sidebar product content as popup in below 991px width mode.
      • 

    • Loop feature for the slideshow section.

    Version 2.2.0 (4/09/2018)

    Fixed

      

    • The issue with header in mobile: menu, search, minicart icons were not aligned correctly
      • 

    • Adjust position of breadcrumb in all theme pages
      • 

    • Style issue of checkboxes in Sidebar section in category page
      • 

    • Fix the issue with header in mobile of Demo 1. It didnot look good
      • 

    • Adjust position of minicart icon in header of demo 4. It was showing correctly
      • 

    • Fix the issue with search icon, minicart icon & some other icons style and color on both desktop and mobile (Demo 6)
      • 

    • Edit the style of Newsletter section in the footer of Demo 6
      • 

    • Change header and menu's style, adjust the height, font, padding and some sections on homepage of demo 5
      • 

    • Fix the issue while loading quickview popup
      • 

    • Fix the issue with "Sort By" section. "Sort by" and Featured" were not centered vertically. Same for Grid and list view icons
      • 

    • the issue when hovering over Tabs- "Details", "Reviews", "Size Guide" etc were not smoothing
      • 

    • Edit the appearance of homepage banner in Demo 7 new

    Updated

      

    • Add Menu Active Feature to theme
      • 

    • Add Disabled button in Quickview popup
      • 

    • Add an option to adjust the space of sections
      • 

    • Add Simple line icons to theme
      • 

    • Add an option to adjust the space between products

    Version 3.0 (6/08/2018)

    Fixed

      

    • Fix the issue when newsletter popup's image loads very slow
      • 

    • Fix the issues relating featured products, shop by section, banner *& footer section on homepage of demo 11
      • 

    • Banner fullwdith in collection was broken (Demo 11)
      • 

    • Fix the issues relating featured products, latest products, header search box style on homepage of Demo 12.
      • 

    • Remove toplink's border on demo 12
      • 

    • Pagination in collection page was broken (Demo 12)
      • 

    • Change the style of related product in detail page of Demo 12
      • 

    • Edit the style of top border on header of demo 12
      • 

    • Remove top links's border, currency, language on header of demo 13
      • 

    • slider's pagnitation on demo 13 was broken
      • 

    • Remove rating star section from group products on homepage (Demo 13)
      • 

    • Fix the issue with footer-bottom on all page of demo 13
      • 

    • Change the content in text block section on homepage (demo 13)
      • 

    • Fix the issue with dots of related product section (detail page- demo 13)  showing in wrong position.
      • 

    • Remove top links's border on header (demo 14, demo 15)
      • 

    • Edit the style of search box, and related product section (Demo 14, demo 15)
      • 

    • The footer- bottom section was not responsive (demo 14)
      • 

    • Fix the issue with featured/group product slider section on homepage (demo 15)
      • 

    • Change font style of title in Footer

    Updated

      

    • Update the product form to support dynamic checkout buttons
      • 

    • Remove all old designs and styles relating classic demos
      • 

    • Add an option to change icon color following theme colors

    Version 3.1 (7/05/2018)

    Fixed

      

    • Fix the responsive issue of mobile header (demo16)
      • 

    • Fix the not-display issue of the related products on product page (demo16)
      • 

    • Fix the not-display issue of the related products on product page (demo17)
      • 

    • Fix the responsive issue of mobile header (demo18)
      • 

    • Fix the border issue of banner content section on homepage (demo18)
      • 

    • Fix the not-display issue of the related products on product page (demo18)
      • 

    • Fix the minicart popup style issue (demo19)
      • 

    • Fix the minicart popup style issue (demo20)
      • 

    • Fix the search radius border and fix the not-responsive issue of the search box on mobile (demo20)
      • 

    • Fix the responsive issue of mobile header (demo20)
      • 

    • Fix product list flex grid style issue
      • 

    • Fix the responsive issue of footer header (demo20)
      • 

    • Fix the layout issue of related products section when enable flex grid

    Updated

      

    • Update the design postion of the header search icon (demo16)
      • 

    • Update the design postion of header search (demo17)
      • 

    • Update the design of the categories sidebar on homepage (demo17)
      • 

    • Update the font style of the section title on homepage (demo17)
      • 

    • Update the search icon, custom block (demo18)
      • 

    • Update the option to config the space between carousel product in parallax banner section (demo18)
      • 

    • Update the design of the icon minicart on header (demo19)

    Version 3.2 (8/27/2018)

    Fixed

      

    • The space issue between the product items
      • 

    • The image link of the Banner text 3 section didn't work.

    Updated

      

    • Restored all Classic Demos
      • 

    • Update 6 layouts for  the Product page.
    Extended Layout
    Fullwidth Layout,
    Grid Image layout,
    Sticky Both Side Info,
    Sticky Right Side Info,
    Wide grid layout
      • 

    • Update the font style of the section title on homepage (demo17)
      • 

    • Update the search icon, custom block (demo18)
      • 

    • Update the option to config the space between carousel product in parallax banner section (demo18)
      • 

    • Update the design of the icon minicart on header (demo19)

    Version 3.3 (11/12/2018)

    Updated

      

    • Upgrade Bootstrap 3.x to 4.x