[Skip to main content](#vessel-content)

#   Next/Previous buttons image

##

- **[verzevoul](/forum/user/8351-verzevoul "View verzevoul's Profile")**
- [![verzevoul's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/8351-verzevoul "View verzevoul's Profile") Topic Author
- [ Offline](/forum/user/8351-verzevoul)

Less More

- Posts: 1195
- Thank you received: 13
-
-

6 months 2 weeks ago [\#371701](#371701) by [verzevoul](/forum/user/8351-verzevoul "View verzevoul's Profile")  *[Next/Previous buttons image](/forum/26-product-category-display/910481-next-previous-buttons-image#371701 "-- HikaShop version -- : 6.4.1 -- Joomla version -- : 5.4.5 -- PHP version -- : 8.3  Hi!  I want to change the arrow icons of the product's Next/Previous buttons and replace them with custom images. Is there an HTML somewhere or can i do it with CSS?  Thank you")* was created by *[verzevoul](/forum/user/8351-verzevoul "View verzevoul's Profile")*

-- HikaShop version -- : 6.4.1
-- Joomla version -- : 5.4.5
-- PHP version -- : 8.3

Hi!

I want to change the arrow icons of the product's Next/Previous buttons and replace them with custom images.
Is there an HTML somewhere or can i do it with CSS?

Thank you

- [ ![Next-Previous buttons.jpg](/forum/attachment/63124) ](/forum/attachment/63124 "...us buttons.jpg") [ ](/forum/attachment/63124?download=1 "...us buttons.jpg")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA0ODEtbmV4dC1wcmV2aW91cy1idXR0b25zLWltYWdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")**
- [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Away](/forum/user/63-nicolas)

Less More

- Posts: 86540
- Thank you received: 14301
-
-

6 months 2 weeks ago [\#371702](#371702) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Next/Previous buttons image](/forum/26-product-category-display/910481-next-previous-buttons-image#371702 "-- HikaShop version -- : 6.4.1 -- Joomla version -- : 5.4.5 -- PHP version -- : 8.3  Hi!  I want to change the arrow icons of the product's Next/Previous buttons and replace them with custom images. Is there an HTML somewhere or can i do it with CSS?  Thank you")*

Hello,

The arrow icons are produced by Font Awesome inside the Previous / Next blocks of front/views/product/tmpl/show.php (lines 37 and 47), wrapped in &#96;.hikashop_previous_product&#96; and &#96;.hikashop_next_product&#96; divs. You can replace them either with CSS only (no override).

Add this to your HikaShop custom CSS via Components &gt; HikaShop &gt; Configuration &gt; tab "Display" &gt; "Custom CSS", or to your template CSS:
Code:

.hikashop_previous_product .fa-caret-left, .hikashop_next_product .fa-caret-right { display: none; } .hikashop_previous_product::before { content: url('/images/my-prev-arrow.png'); display: inline-block; } .hikashop_next_product::before { content: url('/images/my-next-arrow.png'); display: inline-block; }

Replace the two image paths with your own files. The default Font Awesome arrows are hidden and replaced by your custom images.

Template override option. If you prefer to edit the markup directly, copy front/views/product/tmpl/show.php to templates/YOUR_TEMPLATE/html/com_hikashop/product/show.php and replace the two &#96;&lt;i class="fas fa-caret-left fa-2x"&gt;&lt;/i&gt;&#96; / &#96;&lt;i class="fas fa-caret-right fa-2x"&gt;&lt;/i&gt;&#96; lines with your own &#96;&lt;img src="..."&gt;&#96; tags. The override survives HikaShop updates.

The following user(s) said Thank You: [verzevoul](/forum/user/8351-verzevoul "View verzevoul's Profile")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA0ODEtbmV4dC1wcmV2aW91cy1idXR0b25zLWltYWdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop Install &amp; Update Product &amp; Category Display Content Creation Sales and Orders Orders management Reports &amp; Statistics Customers Checkout Payment Methods Shipping Methods Import &amp; Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel &amp; Slider Mass Actions Filters &amp; Search Discount &amp; Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to?

[](/forum/topics/feed/mode-topics?format=feed&type=rss)

Time to create page: 0.052 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)
