Skip to main content

Adding Barcode Scanning to Your Gift Registry (Expert Plan)

Updated

With barcode scanning, your customers can scan products in-store and add them to their registries from their own devices, with no app required! 

To set this up, you’ll need to be on the Expert Plan.

 

Step 1: Create the Template (if you haven’t already)

  1. Go to the Preferences > Templates Page

  2. Select the proxy_registry_classic_view.liquid from the tabs. If you don't see it you'll need to create it by clicking  New Template and choosing proxy_registry_classic_view.liquid from the drop-down.

Step 2: Include the base code.

  1.  On the first line you'll add {% include 'snippet_barcode_modal' %}. This add all the code in the page for the modal but not the buttons for the user to click that will add will be the next thing we add.

Step 3: Adding the Open Barcode Scanner Buttons

The next part is subjective to where you would like the button to be placed on the page. The Default Template Example will guide you to where we recommend placing it. If you have access to theme developers we recommend they place the below snippet with the appropriate CSS into the template.

{% if is_admin %}
<button hidden class='gift-reggie-add-by-barcode-js'>{{ 'gift-reggie.barcode.open_barcode_scanner' | t }}</button>
{% endif %}

It is important to place the <button .... inside {% if is_admin %} so only registry owners and managers can see it.

 

Default Template Example

We will add the button in two places.

Locate the following section of code near the top
 

{% if products.size == 0 %}
<p class="giftreggie-no-products">{{ 'gift-reggie.wishlist.no_products' | t }} {% if is_admin %}<a href='{{ browsing_link }}'>{{ 'gift-reggie.registry.browsing' | t }}</a>{% endif %}</p>

{% endif %}

 

Add the following section of code between the  </a> and the first {% endif %} at the end of the line
 
<span><button hidden class='gift-reggie-add-by-barcode-js'>{{ 'gift-reggie.barcode.open_barcode_scanner' | t }}</button></span>
 

the resulting code should look like this

{% if products.size == 0 %}
  <p class="giftreggie-no-products">{{ 'gift-reggie.wishlist.no_products' | t }}
  {% if is_admin %}
    <a href='{{ browsing_link }}'>{{ 'gift-reggie.registry.browsing' | t }}</a>
    <span><button hidden class='gift-reggie-add-by-barcode-js'>{{ 'gift-reggie.barcode.open_barcode_scanner' | t }}</button></span>
  {% endif %}
  </p>
{% endif %}
 
The second button placement is all the way at the bottom there's a snippet of code that looks like the following
 
{% if is_admin %}<p class='giftreggie-browse-add-products'><a href='{% if language %}{% unless cart.attributes["language"] %}/{{ language }}{% endunless %}{% endif %}{{ browsing_link }}'>{{ 'gift-reggie.registry.browsing' | t }}</a></p>{% endif %}

{% endif %}

you want to add it the following between the </a> and the </p>
<span><button hidden class='gift-reggie-add-by-barcode-js'>{{ 'gift-reggie.barcode.open_barcode_scanner' | t }}</button></span>
 
so it should look like this
 
{% if is_admin %}

<p class='giftreggie-browse-add-products'>

<a href='{% if language %}{% unless cart.attributes["language"] %}/{{ language }}{% endunless %}{% endif %}{{ browsing_link }}'>{{ 'gift-reggie.registry.browsing' | t }}</a>

<span><button hidden class='gift-reggie-add-by-barcode-js'>{{ 'gift-reggie.barcode.open_barcode_scanner' | t }}</button></span>

</p>

{% endif %}

{% endif %}
 

 

 

 

 

 

Related articles