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
![](https://www.portotheme.com/shopify/porto/documentation/assets/images/product-layout1.png)
2. Fullwidth
![](https://www.portotheme.com/shopify/porto/documentation/assets/images/product-layout2.png)
3. Grid Image
![](https://www.portotheme.com/shopify/porto/documentation/assets/images/product-layout3.png)
4. Sticky Both side
![](https://www.portotheme.com/shopify/porto/documentation/assets/images/product-layout4.gif)
5. Sticky Right Side
![](https://www.portotheme.com/shopify/porto/documentation/assets/images/product-layout5.gif)
6. Wide Grid
![](https://www.portotheme.com/shopify/porto/documentation/assets/images/product-layout6.png)
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.
![](https://www.portotheme.com/shopify/porto/documentation/assets/images/product-layout-option.png)
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
![](https://www.portotheme.com/shopify/porto/documentation/assets/images/product-page.png)
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...
![](https://www.portotheme.com/shopify/porto/documentation/assets/images/color-sw1.jpg)
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
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
![](https://www.portotheme.com/shopify/porto/documentation/assets/images/related-product.png)
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.