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

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.


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:


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


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


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

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


[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

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.

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

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.


  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


    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




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.





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 Block

    <i class="icon-truck"></i>
    <h3>FREE SHIPPING</h3>
    <p>Free shipping on all orders over $99.</p>
    <i class="icon-dollar"></i>
    <p>100% money back guarantee.</p>
    <i class="icon-lifebuoy"></i>
    <h3>ONLINE SUPPORT 24/7</h3>
    <p>Lorem ipsum dolor sit amet.</p>
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.


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.


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


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

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

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.

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.



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


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


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.


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: Find your font in search field on the left hand

Click Quick-use button


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


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

    Here is an example key for localhost :

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 class="row">
<div class="col-md-12"><i class="icon-mobile"></i>
<div class="row">
<div class="col-md-12"><i class="icon-mail-alt">
<p>[email protected]</p>
<p>[email protected]</p>
<div class="row">
<div class="col-md-12"><i class="icon-skype"></i>

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


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.

Free Support for Questions and Issues

Themeforest Support Page

Customization Service(additional cost)

[email protected]

Change Log

Version 1.1 (01/18/2017)


  • 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


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

  • Version 1.2 (02/19/2017)


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


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


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


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


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


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


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


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


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


    • 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


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


    • 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


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


    • 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


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


    • The space issue between the product items
    • The image link of the Banner text 3 section didn't work.


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


    • Upgrade Bootstrap 3.x to 4.x

    Version 3.4 (12/12/2018)


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


    • 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


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


    • 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


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


    • 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


    • 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