Display selected variant options as a single line of text

Store Design
1

Theme: Dawn 15.2.0

[Problem: Product Page requires manual refresh to display correct selected options]

I’m attempting to have all selected variants for products display as a single line of text like this (which is working and outputting properly). Each variant option is automatically being separated by a “/”

Your selected specifications are:
18x9J+6 / Bronze / Polished / 5x100

The following is entered as <> Custom Liquid within the theme customiser:

Your selected specifications are: 
 {% assign current = product.selected_or_first_available_variant %}
  {{ current.title }}

After the page initially loads, if the user changes to a different variant option than what was selected/appeared by default, the page must be manually refreshed to show the correctly selected options.

I’ve tried using ChatGPT to find solutions, but nothing is working.

I’d also like to load this code from within the Theme code after the displayed Price within the product Information section on the Product Page, but I’m unsure which file to insert it into, and where within that file. Alternatively, if anyone is able to advise how to add this as a block within the theme customiser, this would be a desirable solution too.

2

[Still not working]

Update: Using Shopify’s Built-In variant.change Event

I’ve downloaded a fresh copy of Dawn to rule out any conflicts.

Added the following code at (Line: 117) into Main-product.liquid:

{% comment %} Displays selected product variant names {% endcomment %}

Your selected specifications are: 

  {% assign current_variant = product.selected_or_first_available_variant %}

{% comment %} Display the selected variant title (option combination) {% endcomment %}

**Variant Title:** {{ current_variant.title }}

Then added this into Theme.liquid just before :

{% comment %} CODE ABOVE THIS LINE IS ORIGINAL {% endcomment %}

document.addEventListener("DOMContentLoaded", function() {
  // Listen for Shopify's built-in variant:change event
  document.addEventListener('variant:change', function(event) {
    // Get the selected variant from the event detail
    const variant = event.detail.variant;
    
    // Update the variant title
    const variantTitleElement = document.getElementById('variant-title');
    if (variantTitleElement) {
      variantTitleElement.innerHTML = `**Variant Title:** ${variant.title}`;
    }

    // Update the variant price
    const variantPriceElement = document.getElementById('variant-price');
    if (variantPriceElement) {
      variantPriceElement.innerHTML = `**Price:** ${Shopify.formatMoney(variant.price, Shopify.money_format)}`;
    }

    // Update the variant image
    const variantImageElement = document.getElementById('variant-image');
    if (variantImageElement) {
      variantImageElement.src=variant.featured_image ? variant.featured_image.src : '';
      variantImageElement.alt = variant.title;
    }
  });
});
3

Hi @SouthGround ,

Please send the website link, I will check it for you

4

Hi @namphan . this is a development store. I have sent you a DM with access details.

I managed to have variant-title update if I input my original code within the ‘product-variant-options.liquid file’ however it then outputs my code for each of the variant types each product has.

I only need the code to display once, and above all of the variant option selectors

5

Hi @SouthGround ,

Please follow these steps:

  • Step 1: Go to main-product.liquid file and change code here:

Screenshot.png
Screenshot.png1768×906 127 KB

  • Step 2: Go to product-info.js file and add code here:

Screenshot.png
Screenshot.png2028×904 166 KB

6

Hi @namphan

I’ve updated the code as displayed in your images. Unfortunately it doesn’t work the same as it did within the link you sent me via messages.

It looks like our ‘main-product.liquid’ files are different (Lines: 118-128) do not display the same on my screen.

7

Hi @SouthGround ,

I changed it, please check and let me know.

Screenshot.png
Screenshot.png1276×442 64.8 KB

8

Sorry @namphan , I’m unable to identify what you changed between your first and second screenshot. Below is the code I have written into my main-product.liquid file:


  {% assign current_variant = product.selected_or_first_available_variant %}
  **Variant Title:** {{ current_variant.title }}
9

My aplogies @namphan . Too many tabs open here on my end, and I was editing code for a different/fresh version of Dawn that I downloaded.

Thank you so much for all of your help!

10

Hi @SouthGround ,

Everything worked fine?

1 Like