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


Video Guide

We introduced a new way to install our theme using shopify app - portoist and one-click install is now available for all demos.

Following video shows how to install the app in your store and import demos.


Manual Guide

NOTE : Please consider before updating to the newest version 3.5.1. 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 41 demos: 20 old skins demos + 21 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 Theme dialog, click Choose File to select Porto-3.5.1 > Theme Files > Porto.zip file that you want to upload.
  • Click Upload.

Choose the Demo

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

  • Go to the package folder: Porto-3.5.1 > 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.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

Portoist

We recommend to upload and install theme automatically using our app.

Portoist lets you upload/install theme automatically and create pages such as about-us, blog/article, contact us pages.

Also you can create sample products and collections in order to create and test demo like site.

Watch this video to see how to install and use the app.

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

From version 3.2, Porto Shopify theme supports bunch of sections. Users can choose and add sections to homepage as their need.

Go to Admin Panel > Online Stores > Themes > Customize theme > Add sections


Banners

Parallax Fixed Text

  • Background Content Color : Set background color of content area.
  • Text 1 Color : Set text 1 color.
  • Text 2 Color : Set text 2 color.
  • Button Text Color : Set color of button text.
  • Button Background Color : Set background color of button.
  • Button Border Color : Set border color of button.
  • Banner Image : Set banner image.
  • Text 1 : Input content text 1.
  • Text 2 : Input content text 2.
  • Button Text : Button title.
  • Link Button : Set banner link.
Parallax Fullscreen

  • Text Banner Content 1 Color : Set text 1 color.
  • Text Banner Content 2 Color : Set text 2 color.
  • Text Banner Content 3 Color : Set text 3 color.
  • Button Text Color : Set color of button text. Button is displayed in banner type 2 mode.
  • Button Hover Text Color : Set color of button text when cursor is over it.
  • Button Background Color : Set background color of button.
  • Button Hover Background Color : Set background color of button when cursor is over it.
  • Banner Type : Set banner type. There are two types Type 1 & Type2.
  • Background Image : Set parallax background image.
  • Banner Text Content 1 : Input content text 1.
  • Banner Text Content 2 : Input content text 2.
  • Banner Text Content 3 : Input content text 3.
  • Button Text : Input button title.
  • Button Link : Set button link.
  • Use One Banner Content : Use Banner Text Content for banner content. If checked, above configuration related to banner text will not be applied.
  • Banner Text Content : Custom HTML input box. If Use One Banner Content field is checked, content of this box will be used for banner text.

Blog

Blog Posts

  • Title Color : Set title color.
  • Post Day Color : Set post day color.
  • Background Post Day Color : Set background color of post day.
  • Posts Month Color : Set color of month characters.
  • Background Post Month Color : Set background color of month text when cursor is over it.
  • Content Color : Set content color.
  • Button Text Color : Set color of button text.
  • Button Text Hover Color : Set color of button text when cursor is hover it.
  • Butotn Background Color : Set background color of button.
  • Butotn Hover Background Color : Set background color of button when cursor is hover it.
  • Blog Post Type : Select blog post style.
  • Title Type : Select title style.
  • Title : Title of this section.
  • Blog : Select blog you want to show.
  • Number of article to show : Input number of articles to show.
  • Columns : Input number of articles to show at once.
  • Slideshow : Input autoplay speed of carousel. If nothing inputted, autoplay doesn't work.
  • Show Paging : Show/hide pagination dots.
  • Show Navigation : Show/hide navigation icons.
  • Prev Navigation : Previous navigation icons.
  • Next Navigation : Next navigation icons.
  • Margin : Set margin between items.

Collection

Collection List

  • Section Title: The title of the section.
  • Collection Label Color: Text color of title
  • Title Font Size: Font size of title.
  • Collection Label Color: Text color of collection label.
  • Collection Label Background Color: Background color of collection label
  • Label Font Size: Font size of collection label
  • Select Collection: Select one of the collections to show.
  • Image: Set banner image
  • Select Width: Select width of collection banner. Total width is 12. Default value is 4.
  • Select collection height: Set height of collection banner. Unit is pixel.
Collection Slider

  • Background Content Color: Background color of text content area.
  • Title Color: Text color of section title
  • Text Content Color: Text color of content.
  • Title: Title of this section
  • Columns: Number of columns
  • Slideshow: Autoplay speed of carousel. If not specified, autoplay doesn't work.
  • Show Paging: Show/Hide pagination dots
  • Show Navigation: Show/Hide navigation icons
  • Prev Navigation: Left navigation icon
  • Next Navigation: Right navigation icon
  • Margin: Space between each item
  • Use Custom Title Collection: If checked, custom style works for collection title.
  • Slider Image: Background image of collection banner.
  • Link: Set link of collection banner
  • Title Collection: Displaying text of collection label.
  • collection: Actual collection of this banner.

Collection Products Section


  • Section background color : Background color of this section.
  • Title Collection Color : Color of the section title.
  • Section margin top : Space between current section and before section. Unit is pixel.
    For example: 40px
  • Section margin bottom : Space between current section and next section. Unit is pixel.
    For example: 40px
  • Section padding : Set top, right, bottom and left space of this section. Unit is pixel.
    For example: 10px 10px 0 0
  • Collection Title : Title of the section.
    For example : FEATURED PRODUCTS
  • Collection Text : Description of the section.
  • Collection : Choose one of the collections which you want to display on this feature.
    You can create new collection by clicking Create collection button on the top 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 at once.
    For example: 8 products.
  • Space between products : Set space between items.
  • Hide Action Links : Action links include 'Add to cart' button, 'Add to compare' link and 'Add to wishlist' link.
  • Flex Grid : Show product items in flex grid mode. This only works when Enable Carousel is not checked.
  • Move Actions : If choose, all of the action links will be moved onto the product image.
  • Enable Carousel : Enable/disable carousel. When disabled, products are showed in flex grid mode.
  • Slideshow : The time for the autoplay.
    For example: set 5000 = 5 seconds.Leave empty to disable autoplay.
  • Show Paging : Choose to show the paging.
  • Paging Position : Set position of the paging.
  • Show Navigation : Show / hide navigation links.
  • Navigation Position : Set position of the navigations.
  • Prev Navigation : Set icon or letter of the prev navigation.
  • Next Navigation : Set icon or letter of the next navigation.

Slideshow

Slideshow

  • Layout: Choose layout of slideshow.

    There are three types of layout - Default, FullScreen, Fullwidth

    • Default
    • FullScreen
    • Fullwidth
  • Transition: The transition effect of switching sliders.
  • Autoplay: The time for the autoplay. For example: set 5000 = 5 seconds.
    Leave empty to disable autoplay.
  • Navigation : The left/ right arrow
  • Pagination
  • Prev Navigation: Left navigation icon.
  • Next Navigation: Right navigation icon.
  • Copy Right slideshow: Copyright text.
  • Background Image

    Choose background image to show. Showing image as background means image covers entire slide area.

  • Background Image Use?

    Select wheather you are going to show image as background or not.
    If this is set to No, background image you selected will not be displayed.

  • Image

    Choose image to show. This will show entire image, but the image will not be fit to screen size.

  • Image Use?

    Select wheather you are going to show image or not.
    If this is set to No, image you selected will not be displayed.

  • Lazyload Background Color

    If you enabled lazyload option from Admin > Theme Customize > Theme Settings > General > Lazyload Images, you can also select background color for every image of slider.

  • Show Slide Content

    Check this option to show text content.
    If disabled, slider will show only the image you selected above.

  • Content Style

    Each demo has different content style. You can browse demos from here and select one of them to show in its form.
    If you choose one of them, check that demo to see how to customize the content like in that demo.

  • Content Position

    Select where to show the content.

  • Main Title

    <br> from the input box means line break.

  • Button Title

    Title of the button. If nothing inputted, button will not be displayed.

  • Link To

    Select or paste target url of the button. If button title is empty button will not be shown and entire slider will be clickable link.

  • Custom HTML

    If any of the styles does not meet your requirement and if you know a bit of html/css, you can write down your own html/css as you like.

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

    Warning:Custom HTML will only be displayed when you choose Custom HTML from the Content Style option above.

Slideshow & Collection

  • Sidebar Title 1: Input first sidebar title. Usually users can add 2 sidebars.
  • Navigation 1: Select first sidebar navigation.
  • Sidebar Title 2: Input second sidebar title. Usually users can add 2 sidebars.
  • Navigation 2: Select second sidebar navigation.
  • Sidebar Content: Custom HTML for sidebar content.
  • Autoplay: The time for the autoplay. For example: set 5000 = 5 seconds.
    Leave empty to disable autoplay.
  • Transition: The transition effect of switching sliders.
  • Navigation : Show/Hide navigation icons
  • Pagination : Show/Hide pagination dots
  • Prev Navigation: Left navigation icon.
  • Next Navigation: Right navigation icon.
  • Image

    Choose slider image to show.

  • Lazyload Background Color

    If you enabled lazyload option from Admin > Theme Customize > Theme Settings > General > Lazyload Images, you can also select background color for every image of slider.

  • Show Slide Content

    Check this option to show text content.
    If disabled, slider will show only the image you selected above.

  • Content Position

    Select where to show the content.

  • Content Style

    If you select Custom HTML, slider will show content as you write in the custom html input box.

  • Promotion Text
  • Main Title
  • Sub Title
  • Button Title

    Title of the button. If nothing inputted, button will not be displayed.

  • Button Link

    Select or paste target url of the button. If button title is empty button will not be shown and entire slider will be clickable link.

  • Custom HTML

    If any of the styles does not meet your requirement and if you know a bit of html/css, you can write down your own html/css as you like.

    For example:
    <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>

    Warning:Custom HTML will only be displayed when you choose Custom HTML from the Content Style option above.

Slideshow & Sidebar Menu

  • Title: Sidebar Menu Title
  • Autoplay: The time for the autoplay. For example: set 5000 = 5 seconds.
    Leave empty to disable autoplay.
  • Transition: The transition effect of switching sliders.
  • Navigation : Show/Hide navigation icons
  • Pagination : Show/Hide pagination dots
  • Prev Navigation: Left navigation icon.
  • Next Navigation: Right navigation icon.
  • Background Image

    Choose background image to show. Showing image as background means image covers entire slide area.

  • Background Image Use?

    Select wheather you are going to show image as background or not.
    If this is set to No, background image you selected will not be displayed.

  • Image

    Choose slider image to show.

  • Image Use?

    Select wheather you are going to show image or not.
    If this is set to No, image you selected will not be displayed.

  • Lazyload Background Color

    If you enabled lazyload option from Admin > Theme Customize > Theme Settings > General > Lazyload Images, you can also select background color for every image of slider.

  • Show Slide Content

    Check this option to show text content.
    If disabled, slider will show only the image you selected above.

  • Content Position

    Select where to show the content.

  • Content Text Color

    Set content text color.

  • Content Style

    If you select Custom HTML, slider will show content as you write in the custom html input box.

  • Promotion Text
  • Main Title
  • Sub Title
  • Button Title

    Title of the button. If nothing inputted, button will not be displayed.

  • Button Link

    Select or paste target url of the button. If button title is empty button will not be shown and entire slider will be clickable link.

  • Custom HTML

    If any of the styles does not meet your requirement and if you know a bit of html/css, you can write down your own html/css as you like.

    For example:
    <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>

    Warning:Custom HTML will only be displayed when you choose Custom HTML from the Content Style option above.

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.
  • Space between products : Space between product items
  • 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.
  • Show Navigation : Show / hide navigation links.
  • Prev Navigation : Set icon or letter of the prev navigation.
  • Next Navigation : Set icon or letter of the next navigation.

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. : Dots

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

Section: Slideshow

Slider Options

  • Layout : FullScreen
  • Show Paging : No
  • Show Navigation : Yes
  • Prev Navigation :
    <i class="icon-chevron-left"></i>
  • Next Navigation :
    <i class="icon-chevron-right"></i>
  • Copy Right slideshow : COPYRIGHT 2019 PORTO. ALL RIGHTS RESERVED.

Slider Content

  • Content Style : New Demo 1 Style
  • Main Title : WINTER SALE<br>GET 30% OFF<br>ON JACKETS.
    <br> here means line break.

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

Section: Slideshow

Slider Options

  • Layout : FullScreen
  • Show Paging : Yes
  • Show Navigation : No
  • Slider 1

    • Content Style : New Demo 2 Style
    • Content Position : Right
    • Main Title : Dress
    • Sub Title :
      <b>Up to </b><b class="text-large">30%</b><b>OFF in the<br>collection</b>
      <br> here means line break.
    • Button Content
      SHOP NOW
  • Slider 2

    • Content Style : New Demo 2 Style
    • Content Position : Left
    • Main Title : Dress
    • Sub Title :
      <b>Up to </b><b class="text-large">30%</b><b>OFF in the<br>collection</b>
      <br> here means line break.
    • 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 16


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

Section: Slideshow

Slider Options

  • Layout : Default
  • Show Paging : No
  • Show Navigation : Yes
  • Prev Navigation :
    <i class="icon-left-open-big"></i>
  • Next Navigation :
    <i class="icon-right-open-big"></i>
  • Slider 1

    • Content Style : New Demo 3 Style
    • Content Position : Right
    • Main Title : New Summer
    • Sub Title : Collection
    • Button Content : SHOP NOW
  • Slider 2

    • Content Style : New Demo 3 Style
    • Content Position : Left
    • Main Title : Elegant Collections
    • Sub Title : for him & Her
    • Button Content : SHOP NOW

Home Banner

Section: Banner Text 1


Featured Products

Parallax Slider

Section: Parallax Fixed Text


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: 600 x 600

Sidebar and Slideshow

Section: Slideshow & Collection

  • 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: 600 x 600
  • Parallax background image: 1970 x 808

Slideshow

Section: Slideshow

  • Layout : Fullwidth
  • Show Paging : Yes
  • Show Navigation : No
  • Slider 1

    • Content Style : New Demo 5 Style
    • Content Position : Left
    • Main Title :
      <span style="border-color:#a2ccd7;"></span>80% off for select items
    • Sub Title :
      <span style="background-color: #bce3f2">fashion mega sale</span>
    • Button Content : SHOP NOW
  • Slider 2

    • Content Style : New Demo 5 Style
    • Content Position : Right
    • Main Title : up to 70% off
    • Sub Title : women’s hats
    • Button Content : SHOP NOW

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

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

Recommened size
  • Slider image: 870 x 412
  • Product image: 600 x 600

Sidebar and Slideshow

Section: Slideshow & Collection


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 rowfield.
  • 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 17- 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

Demo 21 - New

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

Slideshow

Content:

Slider 1

<h2 style="margin-bottom:0;color:#151515;font-size:52px;font-weight:600;text-transform:uppercase;">Chairs</h2>
<p style="color:#151515;font-family:Oswald;font-size:22px;font-weight:400;line-height:1.6;text-transform:uppercase;">Custom Designs<br> you can afford</p>

Slider 1

<p><span style="color:#010204;font-size:18px;font-weight:700;text-transform:uppercase;">up to <b style="font-size:26px;font-family:Oswald;">40%<b> off</span></p>
<h2 style="margin-bottom:10px;color:#151515;font-family:'Open Sans';font-size:44px;font-weight:900;letter-spacing:-.025em;line-height:.9;text-transform:uppercase;">New Arrivals</h2>
<p style="color:#585b5f;font-size:14px;font-weight:300;line-height:1.6;text-transform:uppercase;">Starting at $9</p>

Filter Products by Collection and Product Types



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 configfiltering & 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 Banners in Collection Pages?

Navigate to Admin -> Products -> Collections and click one of the collections from the collections list.
Click <> button on the top right corner of description panel and the editor will switch into HTML editor.

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

Boxed slider banner
(View Sample)

Content:
<div class="data-slideshow" data-auto="5000" data-paging="true" data-nav="false" style="display: none;"></div>
<div class="owl-carousel carousel-init category-boxed-banner style1">
    <div class="item">
        <picture>
            <source media="(max-width: 640px)" srcset="//cdn.shopify.com/s/files/1/1717/8329/files/banner-boxed-mobile.jpg?1531972329999142457" />
            <img src="//cdn.shopify.com/s/files/1/1717/8329/files/banner-boxed_1223560b-57d8-4592-b797-0bf66708b8e6.jpg?5087540434893152866" />
        </picture>
        <div class="banner-text offset-1">
            <h2>check out over <b>200+</b></h2>
            <h3>Incredible Deals</h3>
            <a href="#" class="shop-now">Shop now</a>
        </div>
    </div>
    <div class="item">
        <picture>
            <source media="(max-width: 640px)" srcset="//cdn.shopify.com/s/files/1/1717/8329/files/banner-boxed-mobile.jpg?1531972329999142457" />
            <img src="//cdn.shopify.com/s/files/1/1717/8329/files/banner-boxed_1223560b-57d8-4592-b797-0bf66708b8e6.jpg?5087540434893152866" />
        </picture>
        <div class="banner-text offset-1">
            <h2>check out over <b>200+</b></h2>
            <h3>Incredible Deals</h3>
            <a href="#" class="shop-now">Shop now</a>
        </div>
    </div>
</div>
Boxed image banner
(View Sample)
<div class="category-boxed-banner style2">
    <picture>
        <source media="(max-width: 640px)" srcset="https://cdn.shopify.com/s/files/1/1729/3671/files/banner-boxed-mobile.jpg?13956207092208800243" />
        <img src="https://cdn.shopify.com/s/files/1/1729/3671/files/banner-boxed.jpg?10236610519075672398" />
    </picture>
    <div class="banner-text offset-1">
        <h2 style="color: #fff;">check out over <b>200+</b></h2>
        <h3 style="color: #fff;">Incredible Deals</h3>
        <a href="#" class="shop-now" style="background-color: #65829d;">shop now</a>
    </div>
</div>
                
Full width top banner
(View Sample)
<div class="category-content move-below-header">
    <div class="full-width-image-banner style1" style="background: url('https://cdn.shopify.com/s/files/1/1717/8329/files/banner-top.jpg?1531972329999142457') 50% 50% no-repeat; background-size: cover; height: 300px;">
        <div class="container">
            <div class="banner-text">
                <h2>check out over <b>200+</b></h2>
                <h3>incredible deals</h3>
                <a href="#" class="shop-now">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 Shopify guide
    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.

Collection Product Swatch
  • Show product swatch grid? :

    Choose if you want to display the swatch and its type.

  • No : Hide product swatch from product items

  • Color : Show product swatch as color

  • Image : Show product swatch as product image

Creating Sub Collections

Now from version 3.5.1, it's possible to create sub-collections using our theme.

Video Guide

Manual Guide

  • Navigate to Admin > Products > Collections and click Create collection button at the top right corner.

    1. Input collection name.
    2. Select collection type as manual.
    3. Select collection template to collection.sub-collection.
    4. Click Save button.
    This collection is the parent collection which will have child collections.


  • Navigate to Admin > Online Store > Navigation and then click Add menu button.

    1. Input navigation title.
    2. Click Add menu item button and set menu link to the collection we created in the previous step.
    3. Click Add button.
  • Now let's include sub collections.

    1. Add menu items with collection link type.
    2. Click and drag the menu items to be included in the parent collection.
    3. Click Save menu button.


  • Navigate to Admin > Online Store and click Customize button of Porto theme.

    Go to Theme settings > Collection Page > SIDEBAR CONFIG and click Select menu button of Menu categories.

    From the menu list, select one we created in the previous step. In our example, that is Collection Sidebar Menu.

    Click Save button to save theme configuration and visit collection page to see the result.

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 > Product Swatch

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

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
  • Ajax Cart Use?

    Shows cart status using ajax when user adds product to cart.

  • Show Scroll Back To Top

    Show/hide scroll back to top icon at the right bottom of page.

  • Lazyload Images

    Enable/disable lazyload effect for images and backgrounds.

  • Login Popup?

    Use login popup instead of redirecting to login page.

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

About Us Page

We're supporting demo specific about us pages.

There are 12+ different prebuilt about us pages.

If you want to import about us page, we recommend to install and use our app - portoist

From the app, choose one of the demos and check Import pages and blog/articles.

Click Import button.

Go to Online Store > Pages > About Us.

Customize contents as you want.

Blog pages can be also imported by theme app loader - portoist which is used for theme upload, creation of pages, sample products and collections.

You can edit imported blogs and articles as you want.

We're supporting 3 prebuilt sample blog and article pages.

Post formats are video, image gallery, and image slideshow.

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 pages can be also imported by theme app loader - portoist which is used for theme upload, creation of pages, sample products and collections.

You can edit imported blogs and articles as you want.

We're supporting 3 prebuilt sample blog and article pages.

Post formats are video, image gallery, and image slideshow.

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

Customization Service(additional cost)

nicework125@gmail.com

Change Log

Version 1.1 (01/18/2017)


Fixed

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

Fixed files

All demos:
  • styles.scss.liquid
  • search.liquid
  • theme.liquid
  • settings.schema.json
  • responsive.css
  • media.liquid
  • media-quickview.liquid
Demo 3
  • home_banner_content.liquid
Demo 8
  • main_section.liquid

Updated

  • Update demo 1 new design.
  • Update demo 2 new design.
  • Support 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

    Version 3.4 (12/12/2018)


    Fixed

    • Category View Mode Icon
    • Smoothy sticky header menu
    • Fix full-width layout of product page in demo-13
    • Fix small ui bugs

    Updated

    • Update HeaderType - 3
    • Sidebar Style of Collection Page - Customers can select sidebar style from theme settings -> collection page -> sidebar setting
    • Update Product filtering number from 44 to 36, 22 to 24
    • Update category page pagination
    • Update instagram section - Customers can select instagram style from theme customization panel

    Added

    • New Demo - 21
    • New Section - Collection List (demo21)
    • New Section - Slideshow with filterbox (demo21)
    • Fade in and out effect to popups

    Version 3.5.0 (1/4/2019)


    Updated

    • Update Daily Deal Label in product pages and collection pages
    • Enable image zoom on quickview popup dialog
    • Update Image swatch to be available in collection pages as well as in product pages
    • Update button and image styles in collection list view mode
    • Update collection page banners > Update boxed slider banner, image banner and full width banner in collection pages > Sample template codes are given in documentation
    • Hide extra name letters overflowed in small products like bestseller sidebar product or grouped products
    • Update position and design of Sold Out Label of product grid items
    • Update Daily Deal label for product items in collection pages and product carousel
    • Update Blog page and Article page > Added brief author information to blogs > Added featured products carousel to sidebar > Added recent posts carousel to the bottom of each article > Updated minor ui designs

    New

    • Added image lazyload feature for homepage carousels
    • About Us page variations > 12+ new variations are available
    • Set container width to full on mobile devices

    Other Changes

    • Update Owl-carousel version from 2.2.1 to 2.3.4

    Version 3.5.1 (1/29/2019)


    Fixed

    • Remove loading icon from lazy-loading images
    • Add space between blocks of product sidebar on mobile
    • Adjust gap between banner images of Modern Demo4 home page to have same space
    • Demo2 homepage - fix text banners to be shown on mobile
    • Refactored HeaderTypes and created showcases of them
    • Updated style of error messages from login/register page
    • Classic Demo19 - Fixed cart-icon which was losing padding on sticky header
    • Fixed Modern Demo19 and classic Demo19 index page in which side header bottom part is hidden on mobile
    • Updated Sections/collection-products > If "Number of products to show" is not inputted, all products will be shown. > Position of pagination buttons are working on the carousel
    • Show left sidebar menu of blog page on mobile devices

    New

    • Add lazy-loading effect to all images. This feature can be enabled/disabled from admin panel.
    • Creation of Subcollection is available
    • Search Box Customization - Customers can set border radius
    • Add Customization options to alter text banner of sliders
    • Customers can add text content for video sliders
    • Add Login Popup feature - Customers can enable/disable this feature from admin dashboard

    Other Changes

    • Update imageLoader plugin to version 4.1.4
    • Update file structure for mobile speed