> ## Documentation Index
> Fetch the complete documentation index at: https://pitchprint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Smart Sizes

> Hold several canvas sizes and layouts in one design, then let customers pick a size in the app or from a product page selector.

<Frame>
  <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/6275193aa65f844e77f89cde/file-Z81CAx0Uem.png" alt="Smart Sizes feature in PitchPrint" />
</Frame>

This is a feature that allows a designer to create multiple variations of a single design by varying the canvas size and elements' properties to come up with entirely different looking layouts.

So, imagine you have a card product in three sizes: Landscape, Portrait and Square. In the past you would have to create these as three separate designs and find ways to wire them to a single product.

Well, using this feature, you start by creating the first size, placing every element nicely to your taste.

<Frame>
  <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/62751aa5c5cfff5d83fcdb74/file-vZmNI5DetI.png" alt="First card size laid out on the canvas at 8.6cm by 5.4cm" />
</Frame>

***Size 1 -*** *8.6cm by 5.4cm*

Next, you simply enable the Smart Sizes on that page and click the plus sign to add a new size:

<Frame>
  <img src="https://mintcdn.com/pitchprint/lFqp-OsyXnf1Fc9b/docs/images/image-2.png?fit=max&auto=format&n=lFqp-OsyXnf1Fc9b&q=85&s=69c3e3d45779245585621652ad5a82c2" alt="Smart Sizes enabled on a page with the plus sign for adding a new size" width="552" height="283" data-path="docs/images/image-2.png" />
</Frame>

By design, the next size is a swap of the Width and Height but you can always adjust the values in the page configuration as you would resize a page.

<Frame>
  <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/62751b43ed262d106f73f576/file-zBBcTFybSn.png" alt="Second size with the width and height swapped, 5.4cm by 8.6cm" />
</Frame>

***Size 2 -*** *5.4cm by 8.6cm*

After adding a new size, it's necessary to reposition or resize the elements to fit well with the new size.

And you can add a third or forth size as you wish.

### In-App Size Selection

The panel below will be shown on the App product page if Smart Canvas is enabled. With this, your customers can pick which design layout  they love.

<Frame>
  <img src="https://mintcdn.com/pitchprint/lFqp-OsyXnf1Fc9b/docs/images/Group-83.png?fit=max&auto=format&n=lFqp-OsyXnf1Fc9b&q=85&s=fd00e8b50875b0612c0e5b8dd7407175" alt="In-app panel where customers choose between the available design layouts" width="728" height="410" data-path="docs/images/Group-83.png" />
</Frame>

### Product-side Size Selection

You can also have your customers change sizes from the product page, by providing the selector to an element that provides the list of sizes that your customers can choose from, example:

PPCLIENT.smartSizeSelector = '#dimensions';

The above should be inserted in your PitchPrint Admin Settings, under Custom Javascript. Note '#dimesnoins' is just an example, you would need to provide your own selector that can be found on your product page, if it has a size selection.

### Positioning

When adding new elements to the canvas they need to be positioned in both instances, for it to display correctly.

To enable Smart Canvas go to your [designs](https://admin.pitchprint.com/designs) page in the admin, open the design where you would like to enable Smart Canvas. You should see the below option on your left enable it and start by adding a new smart page by clicking the plus icon⊕

<Frame>
  <img src="https://mintcdn.com/pitchprint/lFqp-OsyXnf1Fc9b/docs/images/Screen-Shot-2021-09-20-at-13.25.45.png?fit=max&auto=format&n=lFqp-OsyXnf1Fc9b&q=85&s=8807c8368b428e599b8e701c089a2d9d" alt="Smart Canvas option in the left panel of the design editor with the plus icon for adding a smart page" width="306" height="651" data-path="docs/images/Screen-Shot-2021-09-20-at-13.25.45.png" />
</Frame>

And for it to appear in the Front App, you will need to update your [Layout](https://admin.pitchprint.com/layouts) to the latest.

<Frame>
  <img src="https://mintcdn.com/pitchprint/lFqp-OsyXnf1Fc9b/docs/images/image-3.png?fit=max&auto=format&n=lFqp-OsyXnf1Fc9b&q=85&s=dfb2489f2a265a18a6afa0aa9bbc0cb0" alt="Layouts page in the admin with the option to update to the latest layout" width="297" height="117" data-path="docs/images/image-3.png" />
</Frame>

A sample demo can be seen here [Smart Sizes demo product](https://wp.demo.pitchprint.io/product/smart-sizes/).

Do give it a try and be sure to let us know if you require any assistance setting this feature up on your products.

## Related articles

<CardGroup cols={2}>
  <Card title="Smart Size Design" icon="expand" href="/docs/tutorial/smart-size-design">
    Create multiple size variations of a single design from one layout.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.