How to redirect a page

[charlness]

Hi all,

I want to know how can I redirect my collections button to a particular page? I want my fourth collection to my “service/ collaboration” page (https://studiocharlness.com/pages/service-and-collaboration)), as I am a freelance artist and my service do not have a fixed price, how can I edit the button so that people could still get a quote from my art service while able to shop my art product.

[Rohail_Ali_12]

Hi @charlness ,

Based on your screenshot, it looks like you are using the collection list section, which only displays links to the collections you’ve created in your store. However, if you want to add a page link, you may use the image-with-text section, or you will need to create a new section through coding to support links for both pages and collections.

Best regards,

[Rony_ShopiDevs]

Hi,

These are two way to do that, One is you can add setting to put external link on fourth collection and another is you can do that with custom js.

You can paste below js code to your theme js file end line

const redirectElements = document.querySelectorAll('.collection-list .full-unstyled-link');

redirectElements.forEach(element => {
  element.addEventListener('click', () => {
    window.location.href = 'https://studiocharlness.com/pages/service-and-collaboration';
  });
});

Thanks

[charlness]

I’m sorry, but do you know how to edit the code in the collection button? I’m kinda lost so I’m not sure what to do now…

[websensepro]

Hi @charlness

• Access the Theme Editor:

  • Go to your Shopify Admin > Online Store > Themes.
  • Click Actions > Edit Code on the theme you are using.

• Locate the Theme’s JavaScript File:

  • In the Assets folder, look for a file like theme.js or custom.js.
  • Copy the JavaScript code provided above.

document.addEventListener('DOMContentLoaded', function () {
  const collectionButton = document.querySelector('.full-unstyled-link');
  if (collectionButton) {
    collectionButton.setAttribute('href', 'https://studiocharlness.com/pages/service-and-collaboration');
    collectionButton.setAttribute('role', 'link');
    collectionButton.setAttribute('aria-disabled', 'false');
    collectionButton.classList.remove('aria-disabled');
  }
});

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[Wilkerson43]

I am also having the same Issue. Did you get any solution?

[Bundler-Manuel]

Hey there @charlness find your way to the Edit Code section of your store then head to Asset->/theme.liquid then Paste below code before in theme.liquid file

This should settle everything

[Rony_ShopiDevs]

I need to investigate your theme code, then I can tell you where need to edit in the collection button.

[Wilkerson43]

I am also having the same Issue. Did you get any solution?

Brevard County Property Appraisers