Product title should change with different variants

Store Design

Topic summary

Goal: Update the product title based on the selected variant (e.g., color) in the Fashionopolism (Haute) Shopify theme using code only, no apps.

Context: When a customer selects “Off-white,” the product’s color changes and the user wants the title to reflect that selection. Screenshots illustrate the current behavior and the issue.

Proposed approach: Edit theme code (Online Store > Themes > Edit code) and modify product.liquid. Replace or augment the title (e.g.,

{{ product.title }}

) to append the selected variant’s option using Liquid (Shopify’s templating language), such as {{ variant.option1 }} when not “Default.”

Issue encountered: After implementing the provided snippet, the title does not update dynamically; instead, an identifier (appearing as an ID) is shown in place of the expected variant label. A screenshot shows this result.

Definitions: “Variant” = a specific combination of product options (like color/size). “Liquid” = Shopify’s server-side templating language.

Status: Unresolved. Key open question is how to correctly reference the currently selected variant and update the title dynamically in this theme without using apps. Images are central to illustrating the problem.

Summarized with AI on December 30. AI used: gpt-5.
1

Hi Team,

As you can see in the image, I want to change product title as per different variants. Suppose If i click on off-white variant then it should change the color of the product but also i need product title should change. I don’t want apps. Would love if it can be done by code.

theme name:- Fashionopolism (Haute)

RoshanWeb_1-1714480388192.png
RoshanWeb_1-1714480388192.png1839×572 216 KB

2

Hi @RoshanWeb ,
This is Theodore from PageFly - Shopify Page Builder App.

  • Edit theme code: Go to Shopify admin > Online Store > Themes > Edit code for Fashionopolism (Haute) theme.
  • Locate product.liquid: Find the product.liquid file in Assets.
  • Modify title section: Find the code that displays the product title (might look like

    {{ product.title }}

    ).
  • Add variant logic: Use Liquid code to check the selected variant’s option (e.g., color) and modify the title accordingly. Here’s an example:
# 
  {{ product.title }}
  {% if variant.option1 != 'Default' %}  - {{ variant.option1 }}
  {% endif %}

Best regards,
Theodore | PageFly

3

Hi Theodore,

Thank you for your reply, but I am not able to dynamically change title of the product. I put the snippet of code which you sent me but it is not helping, instead of title change there is id which can be seen on the product.

RoshanWeb_0-1714715827951.png
RoshanWeb_0-1714715827951.png830×185 11.9 KB