Jump to content

Product click direct to url

Go to solution Solved by paul2009,

Recommended Posts

Sorry I should have mentioned, this is on my squarespace store.

I would like there to be an image where the red square is and when it is clicked I would like it to link to a URL instead of linking to a product. 

Link to comment
On 2/21/2024 at 1:26 PM, ElleR said:

I have a subcategory called office chairs within the office category. I would like there to be an image (where the red square is) on the main office navigation that I can click and it will take me to the office chair subcategory. 

HI @ElleR 👋

The first step is to add a "placeholder" product called "Office Chairs" so that a tile will appear on the Product List Page (PLP) where the red square is!

To do this:

  1. Go to the Product Composer to add a new product.
  2. Add a product called "Office Chairs". This will be the caption that appears in the grid of tiles.
  3. Add the thumbnail that you'd like to use for the "Office Chairs" sub-category.
  4. Add the product to the "Office" category so it appears when this category is selected.
  5. Add a Tag of "placeholder" or something similar to indicate that this isn't a real product, it's just a placeholder for this category.
  6. In the MarketingSEO and URL section of the Product Composer, check that the new product has the URL https://pavone-design.com/pavone-collection/p/office-chairs. If any other random characters added to the URL, click EDIT to remove them.
  7. Save the new product.

You should now find that an "Office Chairs" tile appears in the Office category.

image.thumb.png.2b99d300ab93472e8c53160c8f96eba0.png

After you've done this, the next steps will be to add some some JavaScript (JS) that will substitute the product URL for the category URL. Note that to use JavaScript, your website must be in a trial or on a Business plan or above (as Personal plans don't support code). 

Did this help to get you started? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Hi @paul2009 , thank you.

I've done those stages. Can you please provide me with the JS? I'm on a business plan. 

 

I tried my own but it didn't work. I put this into the site heading code injection: 

image.png.7aa6532eb66f1599f9b6ecd0743e78b0.png

Edited by ElleR
made clearer
Link to comment
  • Solution
On 2/26/2024 at 4:52 PM, ElleR said:

Can you please provide me with the JS?

You should be able to use this:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var targetElement = document.querySelector('.grid-item.hentry.tag-placeholder.post-type-store-item a[href="/pavone-collection/p/office-chairs"]');
    function modifyHref() {
      targetElement.setAttribute('href', '/pavone-collection/office/office-chair');
    }

    if (targetElement) {
      modifyHref();
    } else {
      console.log('Office Chairs tile not found');
    }
});
</script>

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.