Porto Shopify Theme Documentation

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.

Online Shopify guide - Online Shopify documentation that describes about Shopify in detail.
Shopify Forum - Shopify forum site.

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

Watch video

NOTE : Please consider before updating to the newest version 3.7. 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 31 demos
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.7 > 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.7 > 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.

Go to Product > Products > choose a product.
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 :

Shortcode Configuration

In this tutorial, you can learn how to set up Shortcode and create unlimited shortcodes, which you can use on any section pages.

Watch video

Create a new page

Go to Pages -> Add page->Enter Title, Content and Choose Template -> Save

Go to Customize view of Porto theme

You can find the list of shortcode like below:

How to use Shortcode for Shortcode product

Configure the options which show in the left sidebar of this page first. After that, copy the Shortcode below into the section which you want to show on homepage

Code:


                  
                  [product title="Featured Products" title_align="left" title_style="border-bottom" limit="6" cols="4" space="10" loadmore="false" view_mode="products-slider" product_layout="outimage_aq_onimage" creative_layout="1" extra_class="" aspect_ratio="true" img_size="400x400" layout_height="600" autoplay="5000" arrows="true" arrows_side="nav-pos-outside" arrows_type="nav-style-4" arrows_onhover="true" positionArr="nav-center-images-only" dots="false" positionPag="show-dots-title-right" handle_collection="caps" ]

Homepage Configuration

Drag & Drop Sections

Theme sections

Sections enable users to easily add or move content on their homepage with a few mouse clicks. You can see a real-time preview of your changes in either desktop or mobile mode.

There are over 23 sections to choose from. Any section can be added, updated, reordered, or deleted at any time based on your needs.

Online stores 2.0 make it very simple to add sections to every page without requiring any coding knowledge.

Note! Some shopify pages such as Checkout page, Account page, Password page, Order page will not support sections on these pages due to the structure of Shopify
We’re going to show you how to add a section, slideshow section in collection page for an example. Please check out this video

Add Sections

From version 4.0, 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

Watch video

Theme Configuration

Menu Configuration

General Information

Porto eCommerce provides powerful and most advanced menu, we're going to describe detailed instructions how to use this powerful menu features as our demo site.

Necessary Menu Settings

To create the Menu for any Shopify theme, there are some necessary menu settings that you need to know.
Please refer the Shopify guide here.

How to create new menu:

You can create a link list of collections,products,pages or blogs in menu Go to: Online Stores -> Navigation -> Select Add Menu button

How to add the Mega Menu?

Display menu column up to 6
Display image banners on left,right, top or bottom
Preview of a Megamenu:

Go to Online Stores -> Navigation -> Main Menu > add menu with Sub Menu Items As display below ( below screenshot is only for reference ) > Save button

Porto theme allows you to add dynamic blocks, videos, images and external links to mega menu.

In this example, we'll show you how to display a banner image in the right side of a megamenu by uploading the image directly or by using a image HTML in custom block.

Now, Let’s Go to Online Store > Theme Customize > Theme Settings > Main Menu > Menu Item 2 (select menu item number which you want to set up)

Note: If you just want a simple megamenu with a banner image, the "Upload Image" option is a quick way to do it.

However, if you want to show something else in addition to the banner image, such as text, video, or any other effect..., you should use HTML custom block.

How to upload a video/image to Shopify store Link here

Once you have a video/image uploaded, Copy url and go back where you set up MegaMenu

Below is our sample content for Block Right


                      <div style="background-position: -15px center;background-image: url('https://cdn.shopify.com/s/files/1/1613/0109/files/menu-banner.jpg?v=1604723000');background-repeat: no-repeat;background-size: cover;width: 100%;height: 100%;"></div>
                      <style>
                      .ulmenu-block-right * {
                      height: 100%;
                      }
                      </style>

Don’t tick “Banner Right Enable” in this case.

Many customers prefer to see products on the left/right/bottom side of the mega menu rather than video/images. You can use the Product shortcode in this case. Here's a video tutorial on how to use Shortcode on the Porto theme.

Watch video

Create a drop-down menu

A drop-down menu displays a list of links when your customer hovers their mouse over it.

You can make drop-down menus on your storefront from any link in the Main Menu.

Go to Online Store –> Navigation –> Main menu –> Add Menu item –> enter the name and choose an item to link.

Let’s create a menu item “test” under About Us item

So, Pages- level 1; About Us- level 2, and Test - level 3

This is very easy, please repeat this steps for all menu items you want to display.

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:

Edit and Manage Collection in Products > Collections
Add and assign products to each collection, go to Products > Products
Go to: Customize theme > Collection Page to configfiltering & set the column number in collection page.
Configure to show filter by attributes (color, size or manuafacture): Customize Theme > Collection Filtering.
Configure to show collection side-bar in collection page: Customize Theme > Collection Sidebar.
Configure to show collection side-bar collection in collection page: Customize Theme > Sidebar Bestseller Collection.

Collection Filtering

With Porto 4.0 product filtering are dynamic. When Collection filtering is enabled, the filter options appear on collection page and search result page.

Customers can filter their products by availability, product types, product vendors and Variant options(colors,size,height..)to find the products that interest them the most.

With Dynamic product filters, you do not need to go with that lengthy time consuming process of filter setup.

Click on Enable Filtering and click on blue filters text.

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

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

Create different color, size or style variants (swatches) for product by clicking Add Variants
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.

Translation

Edit Language

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

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

Second Language

Enable Multi Language

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

Choose Multi language enable?
Choose Icon? if you want to display the Language Flat.
Add the Language Name and upload the Language Flat

Language Flag

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

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

Second Language

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

Go to: Online Store > Themes > ... > Edit HTML/CSS > Assets folder.
Upload your new icon, name: favicon.ico and replace the old file.

Header

Go to: Online Store > Themes > Customize theme > Theme Settings tab > Header

Watch video

Header Notice

Step 1 : Go to: Online Store > Themes > Customize theme > Theme Settings tab > Header

Then. Enable the Site Notice

Step 2 : Go to: Online Store > Themes > Customize theme > Sections > Header

Then. Add Content

Topbar

Header Topbar Disable?: Choose if you don't want to show the Topbar.
TopBar Text Color: There are 2 options: Light as white text, Dark as black text.
TopBar background: There are 2 options: choose the background color OR upload the background image.
Below are the 4 options that helps on configuring the Topbar background Image.

Logo

You can choose to upload the PNG logo image OR SVG logo image. We recommended you to use the SVG file to get the best logo quality.

SVG Logo: Since Shopify does not support to upload SVG file on the configuratio. Please follow the steps
1. Go to Online Stores > Themes > Actions > Edit code > Assets folder > upload the SVG file.
2. Go to Customize theme > Header > Logo > Logo SVG > insert the SVG file name that recently was uploaded.
PNG Logo: Upload directly on the option Logo Image.
Logo Max Width: Insert the number to modify the logo width.

Note: Insert the number without px.

Logo Sticky

You can choose to upload the PNG logo image OR SVG sticky logo image
Logo Max Width: Insert the number to modify the logo width.
Note: Insert the number without px.

Header Search

Watch video

Header Layout

You can choose to Enable the Header Full-Width

OR Disable
You can choose to Enable or Disable the Sticky Header.
Compare Icon, Ajex search, Search by collection, Header Custom

Header Custom text

<i class="icon-phone-1" style="margin-right: 7px;font-size:30px;color:#40aee5;"></i>
<span style="margin-top:-2px;">CALL US NOW<br><b style="color:#fff;font-size:18px;font-weight:600;display:block;line-height:27px;">+123 5678 890</b></span>

Header Type | Header Design

At this time with Porto Shopify theme, we offer you 24 Header Layouts. You can choose layout for your

Site: Preview header styles

To customize look of header

Go to : Online Stores –> Select Theme –> Click Customize –> Theme settings (On left sidebar scroll down to bottom) –> Header (On right sidebar)

Start customizing header as per your needs.

Please feel free to create a support ticket (Support)if you find any difficulty to set header styles as available on demo stores

Customization Settings

Important !

If you want to do the customization on the theme style, please go to Online Stores > Themes > Customize theme > Customization Settings and insert the code on the Custom Style box.

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="#">[email protected]</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.

Watch video

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 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>[email protected]</p>
<p>[email protected]</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 [email protected]. 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.

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

Getting Started

Welcome to Porto Shopify Theme!

Compatible with Shopify:

Shopify Information

Installation & Error

Shopify Installation

Theme Installation

Video Guide

Manual Guide

Important!

Note!

Choose the Demo

Here is the installation guide video for Porto Shopify theme

Publish Theme

Errors in Installation

Update

Basic Configuration

Enable Customer Registration Form

Install Apps

Portoist

Create a new product

Add Product Countdown

Import/ Expoxt products

Create a new collection

Navigation, Menus and links

Payment Methods

Shortcode Configuration

Create a new page

Go to Customize view of Porto theme

How to use Shortcode for Shortcode product

Homepage Configuration

Drag & Drop Sections

Theme sections

Add Sections

Theme Configuration

Menu Configuration

General Information

Necessary Menu Settings

How to create new menu:

How to add the Mega Menu?

Create a drop-down menu

Collection Page Configuration

Basic Settings

Collection Filtering

Creating Sub Collections

Video Guide

Manual Guide

Product Page Configuration

Product page Layout

Choose layout for the specific product page

Choose layout for all product page

Product Page Custom Html

Product Page Video

Basic Settings

Enable Addtocart Sticky?

Color Swatches

Reminder!

Color Swatches Settings

Media Slide

Media Zoom

Lightbox

Product Tab

Additional Tab

Review Tab

Sidebar

Sidebar Product

Related Products

Newsletter

Newsletter Footer

Newsletter Popup

Translation

Edit Language

Second Language

Admin Options

General

Layout

Currencies

Favicon

Header

Top Link Menu

`Important!`