Download AppSectionsWebsite

Custom Shape

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.

  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.

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.

LogoCSS Clip Path Generatorplantcss

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.

Last updated