There are times when store owners might want to use an image as a hyperlink. This allows store owner to post an image (like product catalog, product gallery etc) and link a web page to it so that particular page will open when the image is clicked by the customer.

Today, we will go over the process of linking an image with a topic page as a hyperlink in nopCommerce.

In this example, we will add the image hyperlink on the public store homepage.

Nop.Web\Views\Home\Index.cshtml

Let’s open the “index.cshtml” and place the image link here:

@{
    Layout = "/Views/Shared/_ColumnsOne.cshtml";
}
<div class="page home-page">
    <div class="page-body">
        @Html.Widget("home_page_top")
        @Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
 
        <!--Let us place the image link here-->
         
 
        @Html.Widget("home_page_before_categories")
        @Html.Action("HomepageCategories", "Catalog")
        @Html.Widget("home_page_before_products")
        @Html.Action("HomepageProducts", "Product")
        @Html.Widget("home_page_before_best_sellers")
        @Html.Action("HomepageBestSellers", "Product")
        @Html.Widget("home_page_before_news")
        @Html.Action("HomePageNews", "News")
        @Html.Widget("home_page_before_poll")
        @Html.Action("HomePagePolls", "Poll")
        @Html.Widget("home_page_bottom")
    </div>
</div>

For this example, we will use nopCommerce logo as an image:
http://www.nopcommerce.com/images/logo.png

A simple, image hyperlink will look like this:

<!--Let us place the image link here-->
       <!-- start -->
       <a href="http://www.nopcommerce.com/images/logo.png"><img src="http://www.nopcommerce.com/images/logo.png" alt="nopCommerce logo" border="0"></a>
       <!-- end -->

But, we need to link a topic page with the image so we will use this code:

<!--Let us place the image link here-->
      <!-- start -->
 
      <a href="@Url.RouteUrl("ContactUs")">
          <img src="http://www.nopcommerce.com/images/logo.png" alt="nopCommerce logo" border="0">
      </a>
 
     
      <!-- end -->

As per the above code, “ContactUs” page has been linked with the nopCommerce logo image. This is how it looks on the homepage:

 Looking for quality nopCommerce Web Hosting? Look no further than Arvixe Web Hosting!