How to update local storage when new product variants are selected?

Technical Q&A

Topic summary

Issue: Local storage does not update when a user selects new product variants; changes only appear after a page refresh. The goal is to refresh stored product data on variant selection without reloading the page.

Context: A product tear sheet is populated from Shopify Liquid variables and saved to localStorage inside a currentProduct() function after localStorage.clear(). A code snippet is central to understanding.

Data stored includes:

  • Title, price, featured image and resized image
  • SKU (selected_or_first_available_variant), barcode (current_variant.barcode)
  • Description, variant metafield (details_specs), and variant title

Technical terms:

  • localStorage: Browser key-value storage persisting across sessions.
  • Product variant: A specific option/SKU of a product.
  • Shopify Liquid: Templating language generating HTML/JS variables server-side.

Status: No solution or action decided yet; the poster asks whether a function can reload localStorage with the selected variant on click/change without page refresh. Discussion remains open; key question is how to trigger updating localStorage on variant selection events.

Summarized with AI on February 8. AI used: gpt-5.
1

Hi!

I’m currently working on creating a product tear page that displays all product information, however I’m having trouble with updating my local storage when new variants are clicked. Currently in order to update the tear sheet I have to select the variants and then refresh my page in order for the changes to show.

Is there a function that will reload my local storage with the selected variants without having to refresh? I’ve added a code snippet as to how I’m setting variables to my local storage currently.

TIA!

 var titlePrint = `{{ product.title }}`;
              var pricePrint = `{{ product.price | money }}`;
              var imgGet = `{{ product.featured_image }}`;
              var imgPrint = `{{ product | img_url: '720x720' }}`;
              var skuPrint = `{{ product.selected_or_first_available_variant.sku }}`;
              var dimensPrint = `{{ current_variant.barcode }}`.toString();
              var descPrint = `{{ product.description }}`;
              var detailsPrint = `{{ product.selected_variant.metafields.variant.details_specs }}`;
              var variantPrint = `{{ product.selected_variant.title }}`

              localStorage.clear();
            
              function currentProduct() {

                  //   VARIANTS
                localStorage.setItem(variantStore, variantPrint);
                            // console.log('VARIANTS' + localStorage.getItem(variantStore));
            
                //  TITLE
                localStorage.setItem(titleStore, `{{ product.title }}`.toString());
            //             console.log('TITLE: ' + localStorage.getItem(titleStore));   
            
            
                //  DESCRIPTION
                localStorage.setItem(descStore, descPrint);
            //             console.log('DESC: ' + localStorage.getItem(descStore));
            
                //  IMAGE
                localStorage.setItem(imgStore, imgPrint);
            //             console.log('IMAGE: ' + localStorage.getItem(imgStore));