Skip the First (Choose A Design) Step of the Gift Card Pro Builder Form

If you are offering your customers only a singe design to use for the Gift Card Pro builder, you may want to skip the Choose A Design Step altogether and direct them to Step 2.

To get this in place, go to Online Store –> Themes –> Theme you want to add it on –> Edit.

In the theme.liquid file, add the following snippet of code above the closing </body> tag:

<style>
  #gcpRoot.loaded {
    display: block;
  }
  
  .gc__breadcrumbs li:first-of-type {
    display: none;
  }
</style>

<script>

  (function() {

    var GCP = {

      events: function() {

         document.addEventListener('gcp-page-loaded', GCP.functions.skipGreetingCardStep);
        
      },

      functions: {

        skipGreetingCardStep: function() {

          const currentPage = window.GCPSDK.page.get();
          
          if (currentPage.step === "greeting_card") {
            document.querySelector('#_gcp-purchase-form-continue').click();
            document.querySelector('#gcpRoot').classList.add('loaded');
          }
          
        },
        
      },

      init: function() {

        GCP.events();
        
      },
      
    }

    GCP.init();
    
  })();
  
</script>

Once this in place, the first card design will be auto-selected, and the Choose A Design step will be skipped.

If you need to change the numbers for the next steps 2 and 3, this can be done by going to Gift Card Pro –> Language –> and finding those input fields and editing.