different url & meta title for each color variant

[cozydeliver]

Hi there, 

I'm wondering how I can have different URL with the color variant at the end of the URL & also how to show the color variant in the meta title?

For example, for alo yoga,for each color variant selected, corresponding URL shows up.

Also in their meta title, it will show the corresponding color at the end.

<title>Renown Hoodie - Black | Alo Yoga</title>

Thanks,

Vincent

[ThomasBorowski]

Variants don't have their own URLs except for the variant ID parameter. Only way to have variant-specific URLs would be to create the variants as individual products. You'd also have to customize your theme to make the color swatches on the product detail page switch between products instead of variants.

[cozydeliver]

Hi Thomas,

Thank you for your response. Really appreciate it. I have two follow-up questions:

(1) Any idea on how to customize your theme to make the color swatches on the product detail page switch between products instead of variants?

(2) Assuming #1 is done, on the collection page, are these two variants going to show up as one product with two color variants or two separate products?

Thanks,

Vincent

[ThomasBorowski]

(1) Any idea on how to customize your theme to make the color swatches on the product detail page switch between products instead of variants?

That will be different from theme to theme and likely more than just a couple of minutes of work. I'd recommend hiring a Shopify Expert.

(2) Assuming #1 is done, on the collection page, are these two variants going to show up as one product with two color variants or two separate products?

They'd show up as separate products, one for each color.

[PaulNewton]

---

@cozydeliver wrote:

I'm wondering how I can have different URL with the color variant at the end of the URL & also how to show the color variant in the meta title?

---

AKA friendly urls , a longstanding complaint [google shopify variant friendly urls]

Why?

XYProblem, what is the actual goal? 

1. To have inbound human friendly urls that point to specific variants just use redirects.
2. If it's purely an aesthetics preference or trying to implement some SEO strategy first audit the themes canonical urls, Schema.org microdata, sitemap, robots.txt,  and header meta tags as some themes should already give per variant info when there's a variant deeplink (?variant=123456) and crawlers should pick that up. Or it can be customized to do so either statically , or also dynamically with javascript. This is also useful for customers that want to bookmark variants.
3. If this is the outcome of other systems you can be much better first investigating creating an adapter to fit product data to shopifys variant model.
4. If you need actual full control over the url format you need to go headless with the storefront api , or make a feature request to shopify for friendly variant urls and hope it ever gets added.

Flat Products

For the online sales channel to get per variant urls is a flat product model, standalone variant products , non-hierarchical, optionless, "product family", "product families", product of products etc, or collection based product variants.

I've done this customization in multiple ways to wire them together on the frontend for the online sales channel on the product description page: when there's less than 25 options of a product then tags, or metafileds can be used to build the relations with the all_products object. More than 25 you pretty much need to use a a collection as a container, or a custom app.

Caveats 

If you "flatten" your products it will impact things like Reporting, and you need to figure out if one product needs to be the canonical/prime product all others point to for SEO, or navigation sanity, then there's theme wide UI and UX consistency, product recommendations,etc.

Additionally you will then not have variant options on other channels as well , unless you run both a flat model published on the online sales channel, and a set of products using variants for other channels.

Then there's the matter of pretty much every shopify app is built assuming variants.

So the total cost of ownership of doing this on shopify can add up pretty quickly as there will be continuous side effects.

For more search the forums for some of the terms I've used here, and "ERP" as that's a more common reason merchants have to do this.

[cozydeliver]

@PaulNewton 

HI Paul,

Thank you for  your detailed response.

The goal is to improve SEO for the product page. If user search for "black shirt" (color + product type), then if the meta title has color information, it is more likely to show up in the search result. 

You have a good point regarding publishing into other sales channel. I'm going to publish shopify products to Amazon. I prefer to have color variants listed in the same product page rather than multiple product pages.

Question:

1. Therefore I'm wondering if it the meta title can be achieved similar to Amazon: (selected color will be added to meta title, and it will be changed dynamically if another color is selected)?

2. I'm also wondering from a SEO perspective, will the Amazon product page(one canonical for one product, dynamic meta title,show up as one product in collection page) better than Alo Yoga's product page(flat products,multiple canonical for each variant,show up as multiple products in collection page)? 

Amazon Example:

<title>MINIDORA Men&#39;s Color Block Long Sleeved Casual Hoodies Loose Cozy Pullover Sweatshirts with Pocket Denim Blue Medium at Amazon Men’s Clothing store</title>

[NMaskey]

Hello! Were you able to achieve this?