Built-in shapes
Book
Curve
Curves
Diagonal
Hills
Mountains
Rays
Triangle
Wave
Waves
Zigzag
Custom shapes
Clouds
View code 53d9fa77cdc8158bdbd1913cd881cfb41dd7dd5b4385fddbec430fffd05287c88e2fa9be040e94cd3bab8625159e0b5feceb25e58e86b175ff90fe012d1379acbbdd96d8e946be343104d549b151e3fbe6b66aef2703e76b739f2638ed376fdf3816073e27a874fc3955cb3d60206de5e577a1c3067bb01c7f3c2d4114a7b60a4998939f8e626e9f1c700ba87b85688c6b9125dddc73f21820b4256c5b7fb22908acd0626dcdfbf2b0c4e62dee86e54778206138056c8fb7ad67191b4b4717a5b4e432be570e424f8ce043c073f0b82f68025560cbd16abafd721cb9859c93bbd06191c27f24b7db69d692d6027a745ae15abf3bcdd65f8811ec623d215c98fedc5e995e75524f9465233328f1a3923e9fce885d1e6f1d883141bdd3599837dae090ca352222c89b50b69a253ff95eb8f69e3a70b1c61cfbc8be9550bafcc2f77f9db9761796207973e059f001017cf961b12a57652e5134f273b3904343b8ff1b6b3d8d8a03bc3852a7837e09d1acd4e7f36b4e133f87f33723f770bc5aab56446bbe6a04cf186a9306f17c9b0773dfe9b51b1d5865f23b5ad9b4b07a69bd61e0d119916baf620c083eb86162e37885e6b82bf6e43ed18b6458c57f7724ab9e1f972c2aab3e9f871590d05bcde1401e9388413efa77b145c2a6981582d755a5fd950fdcd7db17634e32405c6ec13bc4f2a663d59f2e38a60c03c8ec772e9b8122ef5b386dc40999a6e79d461c12751396f8c274fa3dab1ffe6b1034a9882e6129ddef3d4c4a0dd1d12f19acd145a78c1753f2d20184cb853b17b32c8a1d40f7fe1e2609349a192a5e638d569dfc30d0b2115b1ff2c897ecf0d1c140a23466427631c049bc9436844d3ebdfa762520529b798c744b19ad1a9c6a3f9ac98e5fc6cc3955c65f426ad6c565c2d8be72fb6c6ad696b3aa0fe19b1e77f47a6d23cd70a8753db1ad99667c64ace83a91e494a7ee6f7a13f333130b460376fafc61903dd8b28bb035cff58eee762f3bc927b3d8d87caf86a4b0aa96f3dfa63b2d418ba05d75e4ac0d3fbdc6a43c7f6e8f7698f8440669ae361848a83ccc766a8ea2cccb679649acb1b01fcb87366e766f580b795fa1fc3d18e441aa6c127ab4e167c9b4ff25f98722b09e4bf23e840f19f6fde109a1ae91f26e28defca9335ecbae92eaf886d294f38f8a9b60d2d424f7cd495807740b752aba88f2bfce61459a0ab182d423bb27d5d40b07db4087bb4533c6e35d8bf092262e8d976a34059283d0759a3ff39ff4fbeed4ca4180bd0f43d197fc48bf680042120d1cd37e3cfa9c5d8154f0f612133af070a82ea6d2ca93894628d90617486ea00dd861019948d411bdf6c9d9290cc3700a76b31239b673a174feed13a3388122403ee115ab2dc38a7f1322101589dc9a93f2fc2e6f062f53e4b9c4513f11c815f9529d0301c95933e485f8c15fec279e018648781833410b3794a3a23287a1da7ea8acc1188026d972efaa9b84af07501a8a2a4c60816fb113e3081f93e1817dbe0d3f89d6445f50009c6852a993c6c0d855752ee388e7817c879ad41d5019cf6c1787498d9e761ae7154965f4292696ed88cb20f294dbaa5c81de2454bf20d912b5cd053149f31de819b92da1e671afbb6bb1ec1efac542546b18e7b3a2872efe3d825501664e889d8cc222d161339c953da07a8af13dabe56013a30589be636ca42b0f53750ddda6a2b57f018dcee7df701a50a38d413493a3b24ca80020a18c93434b05ec8cc67f81bc50c93a8b5fbc5182cdafe12580f690f3a58e2de9617f22a09b0d5bcd24b065b9edaa448a9835dbd59f2ad2b03bdac2bdb2f1a9bcc102c8e1c510abe53ca5f545ee025249096234275001fb5233aa84266663e7ff39877db8ad149364ad3706e4c3361cd8506cc296d73dd03ec59d1da1c5443f9fb817a7bf152b3b791b8adc5ee99c9333175764d811ca48e392b7eae368bea09a1d8de55577153007b824f0e9c703eeb1b21ebe43ee2433660ec41b4ac611473aa3314868a43ce7106c01c30fb6d4ed4c489e1d451aefdb949d4d9e76cf942566a0fd5ccec8745f2e00454e
Triangle (asymmetric)
View code 5f154d3596d906b12395025584633a4ab51d37f1270be4c9158b5ccd8795ad56e8eae1b6f92aa93d6802270fd10abd16d262c8a6b47fa152368bc857527fe53888f2c8e4f3bedbdc75738c195cbff0041f087ac383945c69edf98a6ad7a7936ea3f6724dd4a93c531ce33ed74823615dad37a1222480908eb61a8b61147fa31a952a18264380c0c9236c10d87018101ae4d18d43653566a9a086224703517487c4fe48b1d737fd5a4bb44b4d6a7d1d487b97915b94f7d5e36d7d4b7e8ed65f85fcb8119e8f9c9364650d089d244626e7983fee1c59cdc746dbec00acebc0161675ccd6b3c9a29a7a7fce897ba8019a64a7f1b7a63ebc47b62e97f8ddcbf1e5a12b8e4c72d76fd0684b479c0d5405a20133cec2692f518f99a3d93202f3549fa45374ebf2ac71f49ad7b23ab7485e5fcc4133c946bd664733aafeb977c62c2fd498d3e0b4c8133579e321ffe5f6ac1d000ebb7e0826a4a30c12c3e941d0dd811a97a9de008d43f067818bcecb611d2730b00d6ce2e73b47414e63dc40213f5b0fd2408e401dd088f11dcf56b50a094f3c07528c7f534f3ffa20986aaa436f5048cc03284438ba68b5fa985fa67d7342176452c699ea3c8ed76a89b2a195b115efb3a70921918392088d3c4f8fe6eb0c96
Wave shallow
View code 4b7d0d2422df5318777063ff918484c9b708e869f6250c8c66a2ff2225353cb8413bbc4b836cd0159f4ed55bdd55982cc8bcc61c23938b65951d427cf9a7177926c9a6cb562d3ac26ccf636d01ebeb85c3bc2d585e28e0557d044d98bc76319a677e41a10914cb0cffeed856854cf5d22f1905ff4a779cbc3582a823efe14a387840ddea5484fc1ed93e85d181c4c52f31bbd00d80e074274e01c7ffadde7c12d2749455d7beab7978357bf224925415e7fffc4a1ffdd586b1fba9db5eb1a91e7f9c26874d4126e764f9ab4adc9ed536692a60d953e96136747fc5745faff1ce2b16ad6683ba499beb702b70bdf27ef684b88ea0b34d3ea518674fac9b24f545055fe8f4b2875d3d246a59c1a9073f33a316fb444f046dbf5102741e3ff973d4a939a30823868e7c1e5374d891fada85c6ea5b4935120bf0d82e65667b8071892425b9be6f253786ff2c9eac71c1128a9509427ca3c596dd60a01c8f5f76a59e85ee2fc0151cf009ff229eb8746b6de094bfeb90062b5759cbf83b3fa18d200d9119d17644fc21d4486442b94cf520f6e490e4b20797fea214e5caaefe27f1692b788ab3d1031a0bd3e910227eab1d063a69a527fc788d18d5c91a916f5944dec77ca97c57d5611e0b42649a0b4e6c0284b843bd863f2254057d81e029a5ee99a0e1c70667989c997ba2b813a4207d0c5ce73a532b122a93f94448046a3122f36b1b97cf551d5abad8ae67e97d2ba6b0602653826cd7dd64ceb4f166cfde0b55
Shape dividers can be applied to the Home page hero section and page footer using the Hero shape divider and Footer shape divider theme settings, respectively. Because they are all inline SVG they can be easily styled using CSS and (re)positioned using utilities.
Replace the following part of the home_page.hbs template with the code of the pattern:
{{~#isnt settings.hero_element_shape 'none'}}
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" ... >
<use xlink:href="#shape-{{settings.hero_element_shape}}" />
</svg>
{{/isnt~}}}
There are even online SVG shape generators available that you can use to add even more shapes to your theme.
