Layouts

Layouts let you create different versions of a design, so shoppers can choose which one they want.

For example, if you offer the same design with 1, 2, or 3 dogs, you can create a separate Layout for each version. This way, only the Layout your shopper selects will appear in the final design.

How Layouts work

• In the Design Studio: Layouts organize layers together, allowing you to work on one version of your design at a time. When you switch between Layouts, you'll only see the layers belonging to the selected Layout.

• Layouts are mutually exclusive: By default, only one Layout at the same level can be active at a time.

• Options are created automatically: Customily creates a Choose Layout option in your Option Set, with each Layout as an available choice. All personalization options belonging to each Layout are automatically conditioned to appear only when that Layout is selected.

• Shoppers choose their Layout: When shoppers select a Layout, the live preview updates to show only that Layout, along with its corresponding personalization options.

You can also create more advanced personalization experiences using:

• Groups: Organize Layouts into separate groups, allowing shoppers to make independent choices. Layouts within each group are mutually exclusive, but shoppers can select one Layout for each group.

• Nested Layouts: Place Layouts inside other Layouts to create additional choices based on a previous selection.

Create a layout

To create a Layout from existing elements in your design:

1. In the Layers Panel, select the layers you want to include in the Layout.

2. Click the Create Layout button.

3. Double-click the new Layout's name to rename it. Choose a descriptive name, such as 3 Dogs, since this will be the choice shoppers see in the corresponding personalization option.

Create additional Layouts

You can create additional Layouts from scratch using the same method described above. Each Layout can contain completely different elements and designs.

If your Layouts share similar elements, you can save time by cloning an existing one and modifying it.

To clone a Layout:

1. In the Layers Panel, select the Layout you want to duplicate.

2. Click Clone Layout to create a copy with all its layers and settings.

   

3. Change the new Layout's ID so it's different from the original. Each Layout should have a unique ID.

4. Rename the new Layout to identify the variation, such as 2 Dogs.

5. Modify the new Layout by removing, adding, or rearranging elements as needed.

6. Repeat the process to create as many Layouts as your design requires.

For example, if you started with a 3 Dogs Layout, you can clone it and remove one dog to create 2 Dogs, then clone that Layout and remove another dog to create 1 Dog.

Create independent choices with groups

Groups let you organize Layouts into separate sets of choices, so shoppers can select one Layout from each group.

For example, imagine you're creating a personalized family portrait. You could have:

• Number of people: Layouts for 1, 2, or 3 people.

• Number of pets: Layouts for 1, 2, or 3 pets.

Shoppers can choose 2 people and 3 pets, and both Layouts will appear in the design.

How to create a Layout group

1. In the Layers Panel, select the Layouts you want to include in the group.

2. Click the Create Group button.

3. Double-click the new group's name to rename it. Choose a name that describes the question shoppers will answer, such as Number of pets.

4. To add more Layouts to the group, simply drag them inside it in the Layers Panel.

Customily automatically creates an option for each group in your Option Set. The group's name becomes the option name, and the Layouts inside it become the available choices.

You can create additional groups by selecting other Layouts and repeating the process.

Create nested Layouts (sublayouts)

You can place Layouts inside other Layouts to create sublayouts, allowing shoppers to make additional personalization choices based on their previous selection.

For example, imagine you're creating a design where shoppers can choose 1, 2, or 3 pets, and then decide whether each pet is a cat or a dog.

You could organize your Layouts like this:

• 1 Pet: Contains one group with Cat and Dog Layouts.

• 2 Pets: Contains two groups, one for each pet, each with Cat and Dog Layouts.

• 3 Pets: Contains three groups, one for each pet, each with Cat and Dog Layouts.

If a shopper selects 3 Pets, they'll see three separate options to choose whether each pet is a cat or a dog. Once they make their selections, the corresponding personalization options for each pet will appear, allowing them to customize each one individually.

How to create sublayouts

The easiest way to work with sublayouts is to start with the Layout that contains the most elements and choices, then clone it to create simpler versions.

For our pet example:

1. Start by creating the 3 Pets Layout, selecting all the layers you want to include and clicking Create Layout.

2. Inside this Layout, select the layers for your first cat and click Create Layout to create the Cat sublayout.

3. Repeat with the dog layers to create a Dog sublayout.

4. Select the Cat and Dog sublayouts and click Create Group. Rename it Choose dog or cat.

5. Repeat to create Pet 2 and Pet 3, each with its own Cat and Dog sublayouts.

6. Once your 3 Pets Layout is complete, clone it.

7. Change the new Layout's ID so it's different from the original. Each Layout should have a unique ID.

8. Rename the new Layout to identify the variation, in this case 2 Pets.

9. Modify the new Layout by removing, adding, or rearranging elements as needed.

10. Repeat with as many layouts as it's necessary.

This way, you only need to build the sublayouts and their personalization options once. Cloning preserves the IDs of shared elements, so shoppers' choices can carry over when switching between the 1, 2, and 3 Pets Layouts.

Customily automatically creates the corresponding personalization options, displaying the nested choices only when their parent Layout is selected.

Manage Layouts and groups

You can hide, lock, remove, or delete Layouts and groups while working in the Design Studio.

Hide, lock, or remove

Select a Layout or group in the Layers Panel to access these controls:

• Hide: Hide all layers inside the Layout or group.

• Lock: Prevent accidental changes while editing.

• Remove Layout / Remove Group: Remove the Layout or group structure while keeping all the layers and other elements inside it.

Delete a Layout or group

To permanently delete a Layout or group, select it and use the Delete action.

Deleting a Layout or group also deletes everything inside it, including its layers, sublayouts, and nested groups.

If you want to keep those elements, use Remove Layout or Remove Group instead.