Category: Blog

This guide shows you how to create a custom Shopify Flow that can be used to integrate Vendrux with your preferred loyalty program in Shopify.

The idea is simple, we will check if the user has a specific tag assigned to his Shopify profile once an order is placed, and if so, we will grant him extra points.

The tag is only assigned to his profile when he is using the app, so this means that if our check passes, the user placed the order while in the app.

Before we Begin

Before we jump into the Flow creation, make sure you have the Vendrux Shopify App installed with the tags configured as follows:

Overview

This Flow action will:

• Check if a customer has a specific tag
• Return a boolean result that can be used in Flow conditions

Setup Steps

1. Create the Flow Action

Go to Apps > Flow in your Shopify admin

Create a new Flow or edit an existing one, add a Run code action.

Configure the code action as follows:

2. Input Schema (GraphQL)

query {  
	order {    
		id    
		customer {
			id      
			tags    
		}  
	}
}

Note: If your Flow is triggered by a customer event (not an order), use:

query {  
	customer {    
    	id    
        tags  
    }
}

3. Output Schema (SDL)

type Output {  
	hasCanvasTag: Boolean!
}

4. JavaScript Code

export default function main(input) {
  // Get customer from order (adjust path based on your trigger)
  const customer = input.order?.customer;
  const customerTags = customer?.tags || [];
  
  // Tag to check for (case insensitive)
  const targetTag = 'App User'; // Change this to your desired tag
  
  // Check if customer has the target tag (case insensitive)
  const hasTargetTag = customerTags.some(tag => 
    tag.toLowerCase() === targetTag.toLowerCase()
  );
  
  // Return a plain object
  const result = {
    hasCanvasTag: hasTargetTag
  };
  
  return result;
}

Your “Run Code” action will look like this:

Using the Result

After the “Run Code” action is created, you can use the result in Flow conditions:

Add a Condition action after your code action, then search for the “Run Code” step you just created:

Select the “hasCanvasTag” variable:

Adjust the condition to “Equal to” “true”, as follows:

The idea is to check if the user has the “App User” tag in his profile, and if that is the case, proceed with adding the extra points to his account.

The next steps will vary depending on your preferred loyalty program, but here are some guides from the most popular ones to assist with the final steps of the setup:

This guide will walk you through the process of setting up app-exclusive products in your Shopify store using our app. By following these steps, you can ensure that certain products are only visible and purchasable within the mobile app.

Step 1: Install the Vendrux Shopify App

In your Shopify Admin Dashboard, install the Vendrux Shopify App, found here: https://apps.shopify.com/mobile-push-notifications

Step 2: Create the Metafield

To mark products as app-exclusive, you need to make sure the required metafield is created.

1. Open your Shopify admin panel.
2. Navigate to Apps > Vendrux
3. Under Settings, if the metafield is not already created, click Create Metafield.

Once this is set up, you will be able to assign specific products as app-only.

Step 3: Assign Products as App-Exclusive

1. Open the Products section in your Shopify admin.
2. Select a product you want to make available only in the app.
3. Scroll down until you find the “Metafield” area.
4. In the “Mobile App Exclusive” metafield, set the value to “true“

Step 4: Edit Your Theme

To ensure app-exclusive products are hidden from the online store but visible in the app, you need to modify your Shopify theme.

Enable the App Embed

1. Go to Online Store > Themes.
2. Click Customize.
3. Navigate to App Embeds.
4. Enable the Mobile App Products embed.
5. Save the settings.

Step 5: Modify the Theme Template File

This is a more technical step, and if you are not familiar with your theme code, we suggest asking a web developer to implement these changes for you.

Vendrux is also available to help if needed, just let us know!

1. In the Online Store > Themes section, click the 3 dots button, then Edit Code.
2. Locate the appropriate template file where products are listed.
   • In the default Dawn theme, this is found under Sections > main-collection-product-grid.liquid.

Now, you will need to find the “loop” where the products are being displayed, it will usually look like this:

{%- for product in collection.products -%}

Inside that “loop”, you will need to find a “wrapper” element, which is usually an HTML tag that wraps all the product related elements, such as title, image, pricing, etc. In the “Dawn” theme, that wrapper looks like this:

li
  class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
  {% if settings.animations_reveal_on_scroll %}
  	data-cascade
  	style="--animation-order: {{ forloop.index }};"
  {% endif %}
>

You will need to adjust the code that is inside the “class” attribute of that wrapper, adding the following right before the closing double quotes:

{% if product.metafields.vendrux.mobile_app_exclusive %} mobile-app-exclusive {% endif %}

The final code will look like this:

li
	class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}{% if product.metafields.vendrux.mobile_app_exclusive %} mobile-app-exclusive {% endif %}"
	{% if settings.animations_reveal_on_scroll %}
		data-cascade
		style="--animation-order: {{ forloop.index }};"
	{% endif %}
>

Step 5: Test the Implementation

Once you’ve completed the setup, verify that the feature works as expected:

1. Open the store on a desktop browser.
   • The app-exclusive product should not appear.
2. Open the store in the mobile app.
   • The app-exclusive product should be visible.

By following these steps, you ensure that certain products are only available in your mobile app, creating a unique shopping experience for your app users.

Important

This feature uses HTML and CSS to hide products on your website; however, these products may still be accessible if a user navigates directly to the product URL.

‍