I need two image links from separate collections to point to the same URL

[somevegasdude]

Hi,

Can I hard-code a URL when a user clicks a Category (collection) image on the Home Page or a sub-page?

I need to show 9 categories (collections) on my Home Page using simple 'item' images on a white background and show the same 9 categories on my "Products" page, but with 'lifestyle' images with people, scenery, etc. In my Minimal-themed website, I accomplished this by duplicating the 9 category collections so I could change the image on each copied collection (collections only allow 1 image). Then I referenced the copied collections on my "Products" page. These pages look fine and display the 'item' or 'lifestyle' image correctly.

But the URL for a category on the Home Page (i.e., Dog Blankets) is different from the same URL on the Products page. I do understand that this is because they're physically DIFFERENT collections, but I only need the images to be different, not the URL. If the user clicks "Dog Blankets" from either page, they should navigate to the same URL.

This is the rule from the Google SEO Starter Guide that I'm trying NOT to violate. I need the reputation to be tied to a single URL for the product list under each category.

-------------------------------------------
Provide one version of a URL to reach a document

To prevent users from linking to one version of a URL and others linking to a different version (this
could split the reputation of that content between the URLs)
-------------------------------------------

So the question is...

Where can I overwrite the URL that's called when a user clicks a Category (Collection) image?
OR where can I overwrite the image that's displayed, based on which page I'm on (Home Page or Products)?

Thanks!

[tewe · Accepted solution]

Hi @somevegasdude ,

all the ideas you expressed in your question should work.

You can hard-code a URL because in the end Shopify is working with HTML. To do that in your theme code you might have to add templates for each collection and then code it into each template.

But there are more elegant solution available: For example you can extend your collection template so that two images are possible. Then you can check with LIQUID which page you are about to render, i.e. product page, and steer which image is shown on this page. This would allow that you can use the customizing to set up your extended collection pages. 

For someone without programming knowledge this might be a little daunting but for someone with good Shopify knowledge this can be done within one or two hours. If you want us to support you here please send me a private message.

Regards
Thomas

[somevegasdude]

Thank you, I like that more elegant solution as well and I think I can modify the code to do that. If not, I'll definitely reach out.

Another, probably the 'least elegant' solution would be to block Google from indexing the "Products" menu option at all. Since it's basically a duplicate of the same categories available from the Home Page, blocking it altogether would not result in any 'unreachable' pages, and Google's index would still be complete. 

That excerpt from the Google Guide mentions that Google will show the URL in the Search Engine Results Page and that could lead to two users seeing two different URLs for the same target page. This could result in different external links pointing to the same page on my site (bookmarks, backlinks, blogs, emails, etc.) If I block the Products page with a 'nofollow' or whatever, then THAT URL would never be displayed in the SERP, avoiding the chance of duplicitous external links.

What do you think of that solution?

Thanks again for your timely and informative response!

[tewe]

Hi @somevegasdude ,

that might work as well but it does not seem to be less complicated. Please let me know which solution you chose.

Regards
Thomas 

[somevegasdude]

Hi @tewe 

I ended up modifying the file 'collection-grid-item.liquid' to detect the page we're on and change the duplicate URL if necessary. First, I set a variable 'page_mode' in the calling code, which I discovered uses this file hierarchy:

•     Home Page
•       collection-list.liquid                            <-- set page_mode here
•         collection-grid-item.liquid               <-- read page_mode here
•     Products Page
•       list-collections.liquid
•       list-collections-template.liquid         <-- set page_mode here
•         collection-grid-item.liquid               <-- read page_mode here

--- this is my change in 'collection-grid-item.liquid ---

{% comment %}

  Remove the last underscore from the link URL so we're using the same URLs as the Home Page.

  For example: change "_bolster_beds_" to "_bolster_beds". These URLs (with the ending underscore) 

  were created by shopify when defining the second collection of Bolster Beds (for example). These 

  duplicate collections were needed to show different images for each collection than those shown 

  on the Home Page

{% endcomment %} 

{% assign item_url = collections[featured].url %}

{% if page_mode == "Products Page" %}                     

  {% assign url_len = item_url | size | minus: 1 %}

  {% assign item_url = item_url | slice: 0, url_len %}

{% endif %} 

----------------------------------------------

The only difference in the URLs was that the duplicate collections appended an underscore, so I only had to remove that underscore if on the Products page.

Thanks for your feedback! I appreciate it.

[somevegasdude]

After poking around a bit more... I have another question...

Could this all be handled by setting up Redirects in Shopify from the duplicate category pages to the original category pages (i.e. from /_dog-beds_ to /_dog-beds)?

(note, I removed the trailing underscore)

Wouldn't that also work? Because Google would never see the duplicate page, right?

Thanks