Dynamically update product title based on color swatch

[twsmith]

Hi

I’ve worked out how to update my product images based on using the color variant swatch!

However title and description remain the same.

For example

I land on blue t shirt I then choose Yellow T shirt - Images update, stock updates, but title and description remain the same!

Hopefully someone can help with a coding fix using the latest version of the Dawn theme 15.4.0

THANKS!!!

[twsmith]

Hey @The_ScriptFlow this is the store URL bleueburnham.com but I can’t share the pw unfortunately.

I implemented the following script to allow for multiple variant image updates based on adding variant selector metafield, could it be something along those lines with the product-title?

Thanks!

;

{% if product.metafields.custom.selected_variant == true or product.metafields.custom.selected_variant == null %}

.hidden { display: none; }

{% endif %}

[twsmith]

{% if product.metafields.custom.selected_variant == true or product.metafields.custom.selected_variant == null %}

.hidden { display: none; }

{% endif %}

[The_ScriptFlow]

Hey, I found that the requested changes requires to do the custom code in your theme file.

Could you please share the collab code in the p/m so that I can take a look into it.

[PaulNewton]

Then just use the same type of logic but in javascript to target the element.

Dynamic behaviors are advanced theme customizations , teaching you web development is beyond the scope of the forums.
Sometimes there might be existing posts for such things so just search.

If you need it implemented you can reach out to me for services.

[oscprofessional]

Hi @twsmith ,
In Dawn (including 15.4.0), Shopify only auto-updates:

• Images
• Price
• Inventory

But NOT:

• Title
• Description

Because Shopify treats titles & descriptions as product-level, not variant-level.
To change them when a variant is selected, you must add variant metafields and small JS code to swap the content.

[Tapita-support2]

Hi @twsmith,

Sophia here from Tapita AI SEO & Speed Optimizer.

Regarding your question, Shopify doesn’t allow each variant to have its own title and description. A variant can only change price, inventory, SKU, and images. Title/description always stay the same.

If you want each variant to have a different name, different description, and act like its own product, then they must be created as separate products.

Some merchants create each variants as separated products because they want:

• Have unique URLs
• Manage inventory separately
• Track analytics and conversions more accurately
• Write SEO-optimized content per product
• Get better search rankings because each variant is its own listing
• Sync cleanly with marketplaces like eBay / Etsy, etc.

Then they group them back together into one combined product experience using a grouping app like: G: Combined Listings & Variant.

• Those products can appear with different title and description, switching between them remains smooth as normal.
• And, you can also bypass Shopify’s 100-variant limit

Hope this is helpful.

[tim_1]

Theme itself updates only some elements on variant update.

You can, however, add code to update an element you add with variant change.

I’ve shared solutions for Horizon family themes here – Please help me with this variant metafield code fix - #2 by tim_1

And another for Dawn family themes – Variant Metafield reference is Giving Invalid Error

[twsmith]

Hi @tim_1 thanks for the advice, I tried and ran into an error any tips?

[tim_1]

Share a preview link.
I see nothing – you mean this is an error?
Screenshot with the definition of ‘realism’ would be helpful too.

[twsmith]

right worked out this issue, thanks for your help

however i still come across the same issue.

after some research what id like to do is link the product variant images to seperate unique products via hyperlink - is this something achievable via custom coding?

thanks

[tim_1]

You want to implement product “siblings” when on product page swatches are not variant selectors, but rather links to different product pages?

Can do that in “Custom Liquid”, but need to know better criteria

[twsmith]

@twsmith

Yes sorry after some research siblings is the option I would like to implement, comfortable with coding if I can be guided in the right direction Yes exactly I would like product page links rather than variant selectors which link to different product pages, this would allow cart information etc to update in Dawn theme

Thanks for your suggestions great to learn more

Yes sorry after some research siblings is the option I would like to implement, comfortable with coding if I can be guided in the right direction

Thanks for your suggestions great to learn more

[tim_1]

People often have product titles like “BFCM tee - red”, “BFCM tee - blue”.

I’ve put together some code to fetch products with titles which start with “BFCM tee” (with storefront API) and output the siblings right below the current product title.

The code can be put into “Custom liquid” section.

<script>
document.addEventListener( 'readystatechange',
 async function() {
  let title = document.title.split('-')[0];
  let productSection = document.querySelector('main .shopify-section:has(h1):has(form[action*="/cart/add"])');
  if (!title || !productSection) return;

  if (document.querySelector('.siblings') || window.siblings) return;  // already loaded -- for repeated events

  window.siblings = true;

  let titleContainer = [...document.querySelectorAll(':has(h1):not(:only-child)')].pop();

  let cached = sessionStorage.getItem( "fetched-" + title );

  let query = `{
        products(first: 10, query: "title:\\"${ title }\\"") {
          edges {
            node {
              title
              onlineStoreUrl
              variants(first: 20) {
                nodes {
                  title
                }
              }
              featuredImage {
                transformedSrc(maxHeight: 50, maxWidth: 50, crop: CENTER)
              }
            }
          }
        }
      }`.replace(/\n/g, " ");

  let resp = cached
    ? JSON.parse(cached)
    : await fetch(`${ location.origin }/api/2025-07/graphql.json`, {
        method: 'POST',
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          query: query
        })
      }).then (r=> r.json());

  console.log( cached ? "Cached --" : "Fetched --", resp );

  if (!cached) {
    sessionStorage.setItem( "fetched-" + title, JSON.stringify(resp) );
  }

  const products = resp.data.products.edges;

  let output = "";

  for (let product of products) {
    if (product.node.title.indexOf(title+ "-") == 0 ) output+=`
      <li class="sibling-product
      ${ (location.origin + location.pathname) == product.node.onlineStoreUrl ? "active": ""}
      ">
      <a href= ${product.node.onlineStoreUrl}>
        <img src=${product.node.featuredImage.transformedSrc}>
        <p>${product.node.title}</p>
      </a>
    `;
  }

  titleContainer.insertAdjacentHTML('afterend', `
    <ul class=siblings>
      ${ output }
    </ul>
  `);
}) //();
</script>
<style>
.siblings {
  list-style: none;
  padding: 0 0 0 10px;
}

.sibling-product {
  border: 1px solid transparent;
}

.sibling-product.active {
  border-color: rgba(0,0,0,0.35);
  pointer-events: none;
}

.sibling-product a {
  display: grid;
  grid-template-columns:  1fr 4fr;
  gap: 1rem;
  margin:0;
  img { height: 100px; width: 100px; object-fit:cover; }
  p { margin:0;}
}

</style>  

The CSS code is very basic.
Here is how it looks – fetches all “Lot x5” products.

Note that if your store is password protected, API returns null instead of product URL…

[Easify-Ariel]

Hi @twsmith

When you switch colors using a swatch, Shopify only updates the product images and inventory, while the title and description remain unchanged — this is the default behavior of Shopify themes, including the latest version of Dawn. To solve this easily without modifying any theme code, I recommend using Easify Product Options, an app that can fully meet your needs.

Here’s an example I’ve created so you can see how it works:

• This is the result:

• This is the app setting:

To create this layout, you simply need to add an Image Swatch option to display all your T-shirt designs. Each design appears as a small thumbnail, allowing customers to instantly recognize and compare the styles without having to read long descriptions.

Inside each option, all you need to do is add the image and paste the URL of the corresponding product page, just like in the example screenshot. When a customer selects a design, they’ll be taken directly to the correct product page — where the title, description, price, images, and inventory all match the chosen style. This ensures a seamless experience and keeps all product information perfectly consistent.

This setup is especially effective if you have multiple designs and want customers to switch between them quickly without editing theme code or being limited by Shopify’s variant system. Everything is managed directly through the app and displays smoothly on the storefront.

Easify offers a clean, intuitive interface that makes customizing products effortless. The support team is always there to ensure everything runs smoothly.

[GetAllTool]

@twsmith For your use case, the best approach is to split the products by color into separate products. This allows each product to have its own URL, title, and description, which is beneficial for SEO.
You can then use our app LinkedOption to link these independent products together as variants. The setup is very simple—just add the related products to the same product group. Once configured, a color option will appear on each product page, and clicking a color will redirect customers to the corresponding product page.