Do you need to open your products in a new page when customers click the product link?
I will show you a way to do that.
For category pages login to the control panel and navigate to Design->Edit HTML/CSS and look for CategoryProductsItem.html snippet. Look for the %%GLOBAL_ProductName%% and %%GLOBAL_ProductThumb%% variables. If the a tag is already there, add an attribute target with _blank as the value. If the tag is not there add it yourself.
On the theme I have enabled, here is how the code looks on my end, after adding the links with the target attribute:
<div class="ProductImage QuickView" data-product="%%GLOBAL_ProductId%%">
<a href="%%GLOBAL_ProductLink%%" target="_blank">%%GLOBAL_ProductThumb%%</a>
</div>
<div class="ProductDetails">
<a href="%%GLOBAL_ProductLink%%" class="%%GLOBAL_SearchTrackClass%% pname" target="_blank">%%GLOBAL_ProductName%%</a>
</div>
You need to repeat the process for the other snippets as well.
The featured products use HomeFeaturedProductsItem.html snippet. You can find this under Design->Edit HTML/CSS.
The code for it is the following one:
<div class="ProductImage QuickView" data-product="%%GLOBAL_ProductId%%">
<a href="%%GLOBAL_ProductLink%%" target="_blank">%%GLOBAL_ProductThumb%%</a>
</div>
<div class="ProductDetails">
<a href="%%GLOBAL_ProductLink%%" class="pname" target="_blank">%%GLOBAL_ProductName%%</a>
</div>
Where I only added the link with the target.
Next change is for top sellers which use SideTopSellersFirst.html snippet under Design->Edit HTML/CSS. And here is the code:
<div class="ProductImage QuickView" data-product="%%GLOBAL_ProductId%%">
<a href="%%GLOBAL_ProductLink%%" target="_blank">%%GLOBAL_ProductThumb%%</a>
</div>
<div class="ProductDetails">
<a href="%%GLOBAL_ProductLink%%" class="pname" target="_blank">%%GLOBAL_ProductName%%</a>
</div>
Another change, for new products requires modifications under Design->Edit HTML/CSS->HomeNewProductsItem.html snippet:
<div class="ProductImage QuickView" data-product="%%GLOBAL_ProductId%%">
<a href="%%GLOBAL_ProductLink%%" target="_blank">%%GLOBAL_ProductThumb%%</a>
</div>
<div class="ProductDetails">
<a href="%%GLOBAL_ProductLink%%" class="pname" target="_blank">%%GLOBAL_ProductName%%</a>
</div>
And the last change is for the brand pages. The snippet needed is BrandProductsItem.html and can be found under Design->Edit HTML/CSS. The code for it is the following:
<div class="ProductImage QuickView" data-product="%%GLOBAL_ProductId%%">
<a href="%%GLOBAL_ProductLink%%" target="_blank">%%GLOBAL_ProductThumb%%</a>
</div> <div class="ProductDetails">
<a href="%%GLOBAL_ProductLink%%" class="%%GLOBAL_SearchTrackClass%% pname" target="_blank">%%GLOBAL_ProductName%%</a>
<em class="p-price">%%GLOBAL_ProductPrice%%</em>
</div>
Adding these changes to the store allows the system to open the items in a new tab, leaving the category/home page/brand still opened for the customer.
Thank you for taking time to read the article!