# Custom Shape {% embed url="" %} ### How to Adjust Custom Shapes in AppSections Brand Style The "Custom Shape" setting in the AppSections Brand Style allows you to apply unique preconstructed shapes or create custom shapes using Clip-path. This setting provides flexibility in defining the appearance of elements, enhancing the visual appeal and uniqueness of your components. Here is how you can adjust the custom shapes: ### **Custom Shape** * **Purpose:** This setting allows you to add unique preconstructed shapes or create custom shapes with Clip-path. * **Usage:** Select a custom shape from the predefined list or create your own using Clip-path. ### Steps to Adjust Custom Shapes 1. **Select the Brand Style:** * Open your Shopify theme editor. * Navigate to the Brand Style settings. 2. **Locate the Custom Shape Setting:** * In the Brand Style settings, find the **Custom Shape** option. 3. **Select Preconstructed Custom Shape:** * Choose from the list of preconstructed custom shapes. The names of these shapes are provided in the page with a comprehensive list of available options. [**Click here to show the list.**](#custom-shapes-list) 4. **Create a Custom Shape with Clip-path:** * If you prefer to create a custom shape, use the Clip-path CSS property to define your shape. * Enter the Clip-path value to create the desired shape for your element. [**Click here to show the methode.**](#custom-shape-with-clip-path) ### Preconstructed Custom Shapes List The preview are currently not available. #### Squiggle 1 ``` #csquiggle-1 ```

#### Squiggle 2 ``` #csquiggle-2 ```

#### Squiggle 3 ``` #csquiggle-3 ```

#### Squiggle 4 ``` #csquiggle-4 ```

#### Squiggle 5 ``` #csquiggle-5 ```

#### Squiggle 6 ``` #csquiggle-6 ```

#### Squiggle 7 ``` #csquiggle-7 ```

#### Squiggle 8 ``` #csquiggle-8 ```

#### Squiggle 9 ``` #csquiggle-9 ```

#### Squiggle 10 ``` #csquiggle-10 ```

#### Squiggle 11 ``` #csquiggle-11 ```

#### Squiggle 12 ``` #csquiggle-12 ```

#### Squiggle 13 ``` #csquiggle-13 ```

#### Squiggle 14 ``` #csquiggle-14 ```

#### Squiggle 15 ``` #csquiggle-15 ```

#### Squiggle 16 ``` #csquiggle-16 ```

#### Squiggle 17 ``` #csquiggle-17 ```

#### Squiggle 18 ``` #csquiggle-18 ```

#### Squiggle 19 ``` #csquiggle-19 ```

#### Snowman ``` #csnowman ```

#### Window ``` #cwindow ```

#### Event Large 1 ``` #cevent-large-1 ```

#### Event Large 2 ``` #cevent-large-2 ```

#### Event Med 1 ``` #cevent-med-1 ```

#### Event Med 2 ``` #cevent-med-2 ```

#### Event Med 3 ``` #cevent-med-3 ```

#### Event Med 4 ``` #cevent-med-4 ```

#### Event Sm 1 ``` #cevent-sm-1 ```

#### Event Sm 2 ``` #cevent-sm-2 ```

#### Event Sm 3 ``` #cevent-sm-3 ```

#### Event Sm 4 ``` #cevent-sm-4 ```

#### Event Sm 5 ``` #cevent-sm-5 ```

#### Event Sm 6 ``` #cevent-sm-6 ```

#### Event Sm 7 ``` #cevent-sm-7 ```

#### Event Sm 8 ``` #cevent-sm-8 ```

#### Space Sm 1 ``` #cspace-sm-1 ```

#### Space Sm 2 ``` #cspace-sm-2 ```

#### Space Sm 3 ``` #cspace-sm-3 ```

#### Space Sm 4 ``` #cspace-sm-4 ```

#### Space Sm 5 ``` #cspace-sm-5 ```

#### Space Sm 6 ``` #cspace-sm-6 ```

#### Tenant Med 1 ``` #ctenant-med-1 ```

#### Tenant Med 2 ``` #ctenant-med-2 ```

#### Tenant Med 3 ``` #ctenant-med-3 ```

#### Tenant Med 4 ``` #ctenant-med-4 ```

#### Tenant Sm 1 ``` #ctenant-sm-1 ```

#### Tenant Sm 2 ``` #ctenant-sm-2 ```

#### Tenant Sm 3 ``` #ctenant-sm-3 ```

#### Tenant Sm 4 ``` #ctenant-sm-4 ```

#### Tenant Sm 5 ``` #ctenant-sm-5 ```

#### Tenant Sm 6 ``` #ctenant-sm-6 ```

#### Tenant Sm 7 ``` #ctenant-sm-7 ```

#### Tenant Sm 8 ``` #ctenant-sm-8 ```

#### Tenant Sm 9 ``` #ctenant-sm-9 ```

#### Tenant Sm 10 ``` #ctenant-sm-10 ```

#### Drink 1 ``` #cdrink-1 ```

#### Drink 2

#cdrink-2

#### Drink 3 ``` #cdrink-3 ```

#### Drink 4 ``` #cdrink-4 ```

#### Drink 5 ``` #cdrink-5 ```

### **Custom Shape with Clip-path** **Go to this website or type “clip path css generator” into a search engine.** {% embed url="" %} **Create your custom shape and copy the percentage value :**

**Paste it in your brand style in the custom shape area :**

**Now your custom shape is setup in your website :**

### Ensuring the Right Custom Shape 1. **Preview Changes:** * After selecting or creating a custom shape, preview your store to see how the changes look. * Check various elements to ensure the shapes are applied consistently and enhance the visual appeal and uniqueness. 2. **Check Consistency:** * Ensure that the custom shapes align with your brand’s aesthetic and provide a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the custom shapes on different devices to ensure they look good and maintain visual appeal on all screen sizes. ### Summary By using the "Custom Shape" setting, you can apply unique preconstructed shapes or create custom shapes with Clip-path for your elements in your Shopify store. This flexibility allows you to enhance the visual appeal and uniqueness of your components, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.appsections.com/settings/design-shapes/styles/custom-shape.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.