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 theState
in theShopping 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.