Shopping Template

The Shopping Template provides you with a starting point for building a Shopping Lens. A Shopping Lens is a special Lens that is connected to a Product Catalog, allowing you to dynamically update product information, create a link out for each product, and more.

Since Shopping Lenses require a connection to a Product Catalog, they are only applicable on some accounts. Before you get started, take a look at what you need here.

The template comes with an example of three products displayed in a surface in front of you, that can be switched through via the Lens Product Cards.

While this template’s example demonstrates swapping through objects on a surface, you can reuse the scripts in this template to make Shopping Lenses specific to your needs. For example, you can instead swap through objects attached to the face (e.g. sunglasses)!

To get started, first download the Shopping Template, and open the project!

Workflow

A Shopping Lens consists of two key pieces:

• the Lens which contains the AR product experience.
• the Product Catalog which populates the Lens Product Card with product information dynamically.

These two pieces are linked together through a Product Tagging process that happens after Lens Submission, in the Snapchat Business Account.

In this guide, we will take a look at the Lens creation process. Take a look at the Product Tagging and publishing guide to learn how to distribute your Shopping Lens.

Guide

Each Shopping Lens contains all the AR visuals needed to display your product. In the template, we have a Hoodie, Sneakers, and Baseball Cap as our product. They are listed in the Objects panel, under Shopping Objects.

Next, the Lens needs to know what this object should be referred to as. To see this association, select the Shopping Controller objects in the Objects panel, and check out the Inspector panel.

For example, you can see that the State with the name Hoodie, has a list of Objects it corresponds to—in this case the Hoodie object.

Right click on a field, and click Select in the popup menu to see what the reference is to.

You can have more than one AR object per product–for example, you can add a pedestal where your product will sit on that will show up when that product is chosen.

Now that the Lens knows how to refer to each product and their AR visuals, we need to associate it to the Shopping Module. The data in the Shopping Module is shown in the Product Tagging process so that each product in your Product Catalog can be associated with each state of the Shopping Lens.

In the Resources panel, select the Shopping Module. Then, in the Inspector panel, note that we have some of the same information we saw in the Shopping Controller.

Make sure the names of the states exactly match (including casing), otherwise the Lens will be broken.

The Shopping Module includes several fields for you to define as you create your Shopping Lens. The fields include:

• Domain: name of the product line (e.g., Running Shoes).
• Description (of the domain): description of the domain (e.g., Winter Season Collection).
• State(s): name of the single product displayed in that state (e.g., Shoe ABC).
• Description (of each state): description of the product in the state (e.g., SKU ID 12345, red shoe).

As you can see, these fields are all freeform.

The purpose of these fields is to help the person that will be tagging this Lens identify the right products during the Product Tagging process.

For reference, see below for what the person will see in Snapchat Business Manager when Tagging the Lens. You will want to make sure they are aware of which AR experiences map to the “State” name for this reason:

Adding your own Product

To add your own product, we’ll first import our model into Lens Studio. Take a look at the 3d model exportxw and import guide to bring your product’s model in Lens Studio.

If you have an FBX, GLTF, or other common 3D model format, you can import it into Lens Studio by dragging-and-dropping them into the Objects panel. You can customize the look of your model using different materials, or customizing them with the Material Editor.

You can resize the size of your assets in the Scene panel. However, the size of the object is not necessarily real world scale accurate. The Lens will automatically size the object so that it’s visible regardless of the surface that the product is placed on–i.e. So you can see the detail of a hat whether you place it on the table, or on the floor. If you'd like your object to be accurately scaled, take a look at the True Size Objects template

With your model imported, let’s bring it under the Shopping Objects. To do this, click and drag our newly imported model over the Shopping Objects in the Objects panel.

We’ll replace our Baseball Cap with our new product. Right click on the Baseball Cap object in the Objects panel, and choose Delete.

You can add animation to your product (for example having it rotate) by using Tween. Take a look at the Hoodie product to see an example.

Now we’ll connect it to the Shopping Controller so the template knows how to refer to it. Select the Shopping Controller object, then in the Inspector panel, click on the field next to the Values  section of State 2 (where the baseball Cap object was). We’ll update the state name to our new product as well.

You can also add additional effects when a product is selected by enabling the Use Trigger option. Then, in the Custom Trigger field, put the Behavior that you want to happen when the product is selected. In the template we added a behavior that makes the product bounce using Tween when it is selected.

Finally, we’ll expose this information in the Shopping Module. In the Resources panel, select the Shopping Module. Then, in the Inspector panel, replace the State name to match the one we used in the Shopping Controller!

Testing your Lens

It’s important to note that you won’t be able to see the Product Cards in Lens Studio since it needs to be connected to the product catalog.

You can see placeholder product cards when you Push to Device.

To make things easier, the Shopping Controller script comes with a debug mode where you can simulate the user changing a Product Card when you tap in the Preview panel. The Lens will automatically use "tap to change" when previewing in Lens Studio.

Previously, you had to check a box to enable or disable tab to change. The template will now handle this automatically, depending on the device the Lens is being used in.

Changing the Number of Products in the Lens

By default, the template has slots for up to three products.

• If you want to have less than three, simply press the X button next to the State in the Shopping Module.
• If you want to have more than three, follow the guide below:

First, we’ll add the state in the Shopping Module, click Add State.

Next, we’ll add a corresponding state in the Shopping Controller. To do this, find the Shopping Controller script in the Resources panel (Scripts > Shopping Controller), and double-click on it to open the script in the Script editor.

Then, set const NUM_STATE_INPUTS to your desired number of states/products.

Then, we’ll add new input fields so you can specify what’s in the new state. To do this, duplicate the 4 @ui and @input lines of code near the top of the script and increment each numerical value present in the code by 1. For example, to add a 4th state, duplicate the 6 lines and change to:

// @ui {"widget":"group_start", "label":"State 3"}
// @input string state3name
// @input bool state3useTrigger = false {"label" : "Use Trigger"}
// @input string state3Trigger {"showIf" : "state3useTrigger","label" : "Custom Trigger"}
// @input SceneObject[] state3objects
// @ui {"widget":"group_end"}

Learn more about these input fields in the Custom Script UI guide.

Remember to save the script after editing to apply the changes and surface the new set of states (press cmd+s (Mac) or ctrl+s (Windows))

Repeat as necessary until you have all desired products in your Shopping Lens.

Publishing Your Lens

Once you’re satisfied with your Lens, you can publish the Lens by pressing the Publish button in the top left corner of Lens Studio:

Make sure to set up your Lens Name, Icon, and Preview through the Project Info, so people can find your Lens. Please note, the business will not be able to change the name of the Lens after you have submitted--so make sure you have named the Lens based on their guidance.

You’ll be prompted to select a Lens Folder or create a new Lens Folder in order to submit your Lens. Lens Folders are a new solution to help Lens Developers to manage and distribute your Lenses.

Alternatively, you can select the Legacy Submission Flow if you want to submit directly to the Community or to an ad account/profile in an organization that is not yet using Lens Folders.

Set up an organization and a Lens Folder

You need to set up an organization to create a Lens Folder. If you do not yet have an organization, you will be asked to create a new organization in the submission flow.

You can select an existing organization if you already have one, and set up a Lens Folder under your selected organization.

Select a Lens Folder

Once you have set up your Lens Folder, you can select the Lens Folder to submit your Lens. You can set up multiple Lens Folders under one organization to manage the permission and access of your Lenses.

With the Lens uploaded, you will now be able to tag your Lens with the products from your Product Catalog or Store! Please visit the Snap Business Help Center article here that maps out the steps to associate your Product Catalog with your Shopping Lens.