How to link an image with a topic page as a hyperlink in nopCommerce

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.



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.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
        <!--Let us place the image link here-->
        @Html.Action("HomepageCategories", "Catalog")
        @Html.Action("HomepageProducts", "Product")
        @Html.Action("HomepageBestSellers", "Product")
        @Html.Action("HomePageNews", "News")
        @Html.Action("HomePagePolls", "Poll")



For this example, we will use nopCommerce logo as an image:

A simple, image hyperlink will look like this:

<!--Let us place the image link here-->
       <!-- start -->
       <a href=""><img src="" 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="" alt="nopCommerce logo" border="0">
      <!-- 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!

Tags: , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Lavish Kumar

Founder, developer and owner of - By profession, he is a software programmer / web developer, web designer & DBA. He is passionate about technology and electronic gadgets. He enjoys writing tech articles and developing web applications. He is a nopCommerce MVP and author of official nopCommerce Designer's Guide.

Leave a Reply

Your email address will not be published. Required fields are marked *