Build Swirl creatives

You can make a Swirl creative by using the Swirl component. To make the process easier, Google Web Designer includes templates where you can switch in your own assets and adjust an existing design to suit your needs.

Upload your 3D model

To make your 3D model available for use in a Swirl creative, first publish it to Google Poly, an online library for sharing and discovering 3D assets. The asset should have link sharing turned on, using the Manage access  button next to the asset's name when viewing it in Poly. Watch the video below to learn more.

Customize a Swirl template

For inspiration or a jump start on your creative design, you can use a pre-built layout in Google Web Designer. Swirl templates can be found in the Template Gallery, in the Swirl for Display & Video 360 category. The following layouts are available:

  • Swirl Standard - A 300x600 Swirl creative with standard elements (a 3D model, logo, CTA button, and gesture cue).

  • Swirl Standard Expandable - A 300x250 Swirl creative that can expand to full screen, with standard elements.

  • Swirl Expanding - A 300x250 Swirl creative that can expand to full screen, with standard elements, a header, and parallax images.

  • Swirl Color Selector - A 300x600 Swirl creative with standard elements and color chips to change the 3D model’s color.

  • Swirl Color Selector Expandable - A 300x250 Swirl creative that can expand to full screen, with standard elements and color chips to change the 3D model’s color.

  • Swirl Hotspot - A 300x600 Swirl creative with standard elements and hotspots that display additional information about the 3D model.

  • Swirl Hotspot Selector Expandable - A 300x250 Swirl creative that can expand to full screen, with standard elements and hotspots that display additional information about the 3D model.

Watch this video and read below for common workflows to customize a Swirl template.

Swirl creative walkthrough - Google Web Designer

The Outliner panel may be useful for finding and selecting nested elements that you want to change.

Use your own 3D model

  1. Double-click the gwd-swirl_1 Swirl component to open the Swirl editing dialog.
  2. In the Layers panel, select the 3D model.
  3. In the Properties panel, enter the Poly ID of the model in the URL field.
  4. Click Save.

Use your own images

You can swap out the images in the template. For example, to replace the template's logo image with your own, follow these steps:

  1. Double-click the Tap Area component on the stage that contains the logo image.
  2. Right-click the logo image and select Swap image...
  3. Click the Import assets... button to select an image from your file system, then click OK.

You can resize and reposition the new image as necessary.

Use your own parallax images

The process differs for parallax (scroll-sensitive) images:

  1. Double-click the gwd-swirl_1 Swirl component to open the Swirl editing dialog.
  2. Either swap out any existing parallax images with your own, or delete them and add new ones.
    • Swap out the parallax images:
      1. Right-click each image and select Swap image...
      2. Click the Import assets... button to select an image from your file system, then click OK.
    • Delete the parallax images and add your own:
      1. In the Layers panel, select the image layers (everything except the 3D model layer) and click the Delete trash can icon button.
      2. Click the Add images button to select images from your file system, then click OK.
  3. Set your image animation by adjusting their position and opacity on the Start and End tabs.
  4. Click Save.

Use your own text

You can replace the text content with your own, such as for a call to action. (Some CTA buttons may use an image instead.)

  1. Make sure you can select the text element that you want to edit. You may need to double-click the parent element before you can directly select the text element.
  2. Select the Text tool from the left-hand toolbar.
  3. Hover over the text element until a dashed outline appears around it, then click.
  4. Edit the text.

If you don't see a blue dashed outline around the gesture cue text (such as "Swipe to rotate") when hovering over it with the Text tool, go to the CSS panel, disable the pointer-events: none property, and try again. Remember to re-enable the property after editing the text.

Set the exits

  1. Open the Events panel.
  2. Double-click an event with the action Exit.
  3. Enter your exit URL and click OK.
  4. Repeat for any other events with the action Exit.

Change an element's background color

  1. Select the element that you want to change.
  2. Open the Properties panel and click the color chip under Fill.
  3. Select the new background color.

Edit color chips

You can change a color chip to different color, then adjust the effect on the 3D model when the user selects that color chip.

  1. To make a color chip a different color, follow the instructions above for changing an element's background color.
  2. Open the Events panel and double-click the event that is configured for the color chip element.
  3. Make sure that the Material name matches the material name in in the 3D model, as found in Google Poly's Materials panel.
  4. Change the Red, Green, and Blue values to match the new color.

Edit hotspot titles and descriptions

Hotspots should be added in Google Poly, where you can specify the coordinates and the hotspot indicator image. Once added, you can edit the hotspot titles and descriptions in Google Web Designer, which makes it easier to localize the ad into different languages.

  1. Switch to Code view.
  2. Search for the variable named HotspotDetails.
  3. Edit the hotspot titles and descriptions, making sure that the hotspots are listed in the same order as in Google Poly.

Example hotspot code

var HotspotDetails = [{
  name: 'Hotspot 1',
  title: 'Personalize',
  description: 'Easily changeable watch bands for switching things up.'
}, {
  name: 'Hotspot 2',
  title: 'Health check',
  description: 'Inbuilt heart rate sensors provide fitness monitoring support.'
}, {
  name: 'Hotspot 3',
  title: 'Touchscreen',
  description: 'Emails, texts and more are just a tap or swipe away.'
}, {
  name: 'Hotspot 4',
  title: ' Dial it up',
  description: 'New watch faces, flight and silent modes at the turn of the screen.'
}];

Edit the hotspot close icon

The hotspot close icon displays when a hotspot is selected. (Unselected hotspot indicator images should be specified within Google Poly.)

  1. Expand the Tap Area with an ID of hotspot_close_taparea.
  2. An image is nested under this Tap Area. Swap this image for the one you want to use.
Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue