AppSections
Download AppSectionsWebsite
  • HOME
  • GETTING STARTED
    • Get Started Here
    • Installation
    • Themes Compatibility
  • IN-APP
    • Application Overview
    • Library
      • Sections Library
      • Templates Library (Coming Soon)
      • Brand Styles Library
      • Wishlist
      • My Library
        • My Sections
        • My Templates (Coming Soon)
        • My Brand Styles
    • Switching Shopify Themes
    • Switching Pricing Plans
    • Uninstallation
  • Basics
    • Layers
    • Styles
      • Add Brand Style
      • Duplicate Brand Style
      • Hide Brand Style
      • Move Brand Style
      • Remove Brand Style
    • Templates (Coming Soon)
      • Add Template (Coming Soon)
      • Duplicate Template (Coming Soon)
      • Hide Template (Coming Soon)
      • Move Template (Coming Soon)
      • Remove Template (Coming Soon)
    • Sections
      • Add Section
      • Duplicate Section
      • Hide Section
      • Move Section
      • Remove Section
    • Groups
      • Add Group Block
      • Duplicate Group Block
      • Hide Group Block
      • Move Group Block
      • Remove Group Block
    • Blocks
      • Add Content Block
      • Duplicate Content Block
      • Hide Content Block
      • Move Content Block
      • Remove Content Block
  • Settings
    • Layout
      • Sections / Blocks
        • Column Widths Repartition
        • Display Device
    • Content
      • Sections / Blocks
        • Button Content
          • Button Layout
          • Button Style
          • Content
          • Custom Icon
          • Icon Button Presets
          • New Tab
          • URL
        • Color Content
          • Background Fill
          • Pattern Presets
          • Pattern Scale
          • Swap Color Order
        • Headline Content
          • Content
          • Select the Headline Font
        • Image Cover Content
          • Brightness
          • Select Image
        • Image Parallax
          • Brightness
          • Direction X
          • Direction Y
          • Distance
          • Movement
          • Select Image
        • Text Content
          • Content
          • Select the Text Font
        • Video Content
          • Brightness
          • Controls
          • Select Poster
          • Select Video
          • Style
        • YouTube Content
          • Autoplay ?
          • Brightness
          • Select Video
    • Slider
      • Styles
        • Effect
        • Position
        • Infinite Loop ?
        • Autoplay ?
        • Autoplay Delay
        • Pagination
        • Navigation ?
        • Pagination ?
      • Sections / Blocks
        • Type
        • Custom (Coming Soon)
        • Direction
        • Slide Number
    • Colors
      • Styles
        • Primary Color Schema
        • Secondary Color Schema
        • Tertiary Color Schema
        • Neutral Color Schema
      • Sections / Blocks
        • Alpha
        • Color Schema
        • Color Schema Hover
        • Lightness
    • Typographies
      • Styles
        • Body
          • Custom Font
          • Custom Font Choice
          • External Font Weight
        • Button
          • Custom Font
          • Custom Font Choice
          • External Font Weight
        • External Custom Fonts
        • Heading
          • Custom Font
          • Custom Font Choice
          • External Font Weight
        • Overwrite current font
    • Font Scales
      • Styles
        • Body
          • Font Size
          • Letter Spacing
          • Line Height
        • Button
          • Font Size
          • Letter Spacing
          • Line Height
        • Heading
          • Font Size
          • Letter Spacing
          • Line Height
    • Texts
      • Styles
        • Link
          • Custom Underline Thickness
          • Underline Skip Ink
          • Underline Style
          • Underline Thickness
        • Text Case
        • Underline
          • Underline Skip Ink
          • Underline Style
          • Underline Thickness
          • Custom Underline Thickness
    • Icons
      • Styles
        • Icon
        • Icon Custom
    • Design / Shapes
      • Styles
        • Border Width
        • Custom Shape
        • Shape Accentuation
        • Shape Preset
        • Shape Standard Direction
      • Sections / Blocks
        • Design Direction
        • Select Shape
    • Size
      • Styles
        • Button Size
          • Min-Width
        • Sections Width
      • Sections / Blocks
        • Button Size
        • Button Width
        • Full Height
        • Min Height
        • Width
    • Margin
      • Styles
        • Margin Top/Bottom
      • Sections / Blocks
        • Extra Margin Bottom
        • Extra Margin Top
    • Padding
      • Styles
        • Padding Right/Left
      • Sections / Blocks
        • Horizontal Padding
        • Vertical Padding
    • Positionning
      • Styles
        • Buttons Positionning
          • Horizontal Alignment
          • Horizontal Padding
          • Text Align
          • Vertical Alignment
          • Vertical Padding
      • Sections / Blocks
        • Horizontal Alignment
        • Position
        • Text Align
        • Vertical Alignment
        • Z Index
    • Gap
      • Styles
        • Horizontal Gap
        • Vertical Gap
      • Sections / Blocks
        • Gap
    • Slider Gap
      • Styles
        • Gap
      • Sections / Blocks
        • Gap
    • Transform
      • Sections / Blocks
        • Perspective
        • Rotate X
        • Rotate Y
        • Rotate Z
    • Media Adjustment
      • Sections / Blocks
        • Horizontal Adjustment
        • Media Zoom
        • Vertical Adjustment
    • Shadows
      • Styles
        • Alpha
        • Blur
        • X
        • Y
      • Sections / Blocks
        • Shadow
    • Children Alignment
      • Sections / Blocks
        • Align
        • Direction
        • Distribute
        • Relative Behavior
    • Sticky
      • Sections / Blocks
        • Sticky Behavior
        • Sticky Position
    • Animations
      • Styles
        • Appear Animation
          • Amplitude
          • Delay
          • Duration
          • Once?
          • Opacity Start
          • Timing Function
        • Hover Color Animation
          • Animation Duration
          • Hover Primary Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
          • Hover Secondary Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
          • Hover Tertiary Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
          • Hover Neutral Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
        • Triggered Animations
          • Amplitude
          • Duration
          • Infinite?
          • Preset & Variant
          • Timing Function
          • Trigger
      • Sections / Blocks
        • Appear Animation
        • Appear Animation Direction
        • Triggered Animation
    • Code Overrides
      • Sections / Blocks
        • Code Overrides / Custom CSS
    • Extra Style
      • Styles
        • Custom Cursor
          • Activate Custom Cursor
          • Icon Custom Cursor
          • Icon Custom Cursor on Click
          • Cursor Background
          • Cursor Size
        • Custom Scrollbar
          • Activate Custom Scrollbar
          • Scrollbar Color
          • Scrollbar Background
          • Scrollbar Width
  • Resources
    • Helpful resources
    • Privacy Policy
    • Changelog
    • Affiliate Program
    • AppSections Shopify Apps
    • AppSections Website
    • BlockLoads Website
    • AppSections Instagram
    • BlockLoads YouTube
    • BlockLoads Threads
    • BlockLoads X (Twitter)
    • AppSections Pinterest
    • AppSections Facebook
    • AppSections Linkedin
    • BlockLoads Linkedin
    • AppSections Tiktok
Powered by GitBook
On this page
  • How to Adjust Custom Shapes in AppSections Brand Style
  • Custom Shape
  • Steps to Adjust Custom Shapes
  • Preconstructed Custom Shapes List
  • Custom Shape with Clip-path
  • Ensuring the Right Custom Shape
  • Summary

Was this helpful?

  1. Settings
  2. Design / Shapes
  3. Styles

Custom Shape

Last updated 8 months ago

Was this helpful?

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:

  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.

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.

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.

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.

Enter the Clip-path value to create the desired shape for your element.

Click here to show the list.
Click here to show the methode.
CSS Clip Path Generatorplantcss
Logo