How to add Previous/Next button on Studio theme?

Store Design
1

Hello,

How can I add a previous/next button on the studio theme? I don’t want to pay for any apps and have tried may of the suggested codes but no success. Thanks for your help!

2

Hi,

Where do you want to add previous/next button?

Thanks

3

Hello @NYIRI

Before we can provide you with an exact solution, we would like to learn where you won’t actually to render the prev and next buttons.

Coming back to your query, In the studio theme, there are certain ways that are similar to adding the previous/next button.

  1. Collections Pages (by Theme)
  2. Default Product (by theme customization)
  3. Other by code optimization

  • Collection page pagination:

  • Set the URL after your valid domain (/collections/all).

  • At the bottom, you will find the prev and next (pagination) functionality by default that is provided by the theme itself.

  • Refer to the image below.

Cedcommerce_0-1658407835897.jpeg

  • Default Product settings:

  • In your theme section, open the customization panel

  • Select the default product from the top of the dropdown.

  • Find the settings regarding products.

  • Now click on the product information and change it as in the image below.

Cedcommerce_1-1658407835963.jpeg
Cedcommerce_1-1658407835963.jpeg254×466 16.9 KB

  • By Code optimization method:

Open your product-card-grid.liquid under the snippets folder.

At around line 12, find this href=“{{ product.url }}”

Now Add this: | within: collection

It should look like this after added: href=“{{ product.url | within: collection}}”

Once you are done, you will get the output.

Please let us know if you need any more help with this.

All the best,

Team CedCommerce

4

Hello @NYIRI

Can you share your website URL so that I can check and provide you with the appropriate solution? And also let me know where you wish to add the previous/next button on your website?