how to add arrow button product page in warehouse shopify theme

Shopify Discussion
,

Topic summary

A user asks how to add navigation arrow buttons to a Shopify product page in the Warehouse theme to move between next/previous products.

Solution provided involves code modifications:

  1. Access theme code editor via Online Store → Themes → Edit Code
  2. Modify snippets/card-product.liquid by updating all product URL references to include | within: collection filter
  3. Edit sections/main-product.liquid by adding navigation code at the top of the file
  4. The code creates previous/next arrow buttons using SVG icons and conditional logic to check if adjacent products exist in the collection
  5. Includes CSS styling for the navigation elements

Status: The response appears incomplete as the code snippet is cut off mid-implementation. The solution requires manual theme customization and basic Liquid/HTML knowledge. No confirmation whether the original poster successfully implemented the solution.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

how to add arrow button on product page? Like I want to next or previous product from current product page.

2

Hi @shifatmolla

To add arrow buttons for navigating to the next or previous product on a Shopify product page, you’ll need to modify the theme’s code. Here’s a step-by-step guide:

  1. Go to Store Online-> theme → edit code : https://prnt.sc/4WDaX6fKWJEe

  2. Snippets/card-product.liquid

  3. update all ‘href="{{ card_product.url }}’ to ‘href=“{{ card_product.url | within: collection }}”’. NOTE: added “| within: collection”

  4. Go to sections/main-product.liquid

  5. Add code below to top of file

{% if collection.previous_product or collection.next_product %}

{% if collection and collection.previous_product %} Prev {% endif %} {% if collection and collection.next_product %} Next {% endif %}
.product-next-prev .next-prev-icons { display: flex; justify-content: space-between;} .product-next-prev .next-prev-icons svg { width: 20px; height: auto;} .product-next-prev .next-prev-icons a { color: #000; display: flex; text-decoration: none; } {% endif %}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,