Built-in shapes
Book
Curve
Curves
Diagonal
Hills
Mountains
Rays
Triangle
Wave
Waves
Zigzag
Custom shapes
Clouds
View code 843f37e58c7e4b02c1dc267f721e05c577af0cc9da9a09c70f39c99133eeb2827b64edefd6fc1b13a46bd8e188149e7f238d5a1038860c8f414252eace0df328b767d530ec7212194b3958d65ea45a970039b66c634478573c6d8b07172cb29a2ddd7a566d9760a29e28fceaf54de217972b716fc3bf176d5b86d0a70b14e983fdd02228de976cc56fa7b8db1b939e092ceb41afba7f660d812d150fce69c14881f89ea6b14d344c591a75bbfff3643456368b95d726093b798188a419826186e006fbbc72bc722b74de40d627d45f621ba2f27c385d5fb2c56dbe006f8b0f655f2cf2d1d266e81361daf11ffd9647834d0c984f77a9b78a238932f8147bf7b2d80ebf3f9499273b84dcc481e5f7139ee558006c2bdc496acefc9a3b89f40944e7966374d930ea0a5c2020cca0f1d034aedd6e71658b86f9b0839b581eae203e23f929eb8e95a35f78fd558551d5b38803f6511017f5dcaccdcb416085a52fc4395e7bb43e4c6cd220e3de432c76b341a61f832ac150fc86d1f369502112427859f17fa97ec7fefd8cb66c36064c19c4f2f569ee8d5fcc78deddf59ea7b9728d861a42a3a0642ad00d566d92e93050ab14d6918dc6315bf10fd244637b5f8fe50111503452983cc125190c2d853f86755fcc8b62a20006ec1e7a60a71e7fc39573ac2159c060b06c314de4499717fb6738aff89550ffb51630e496940070fb23cda53b0f238bbeaf659588028cb8c7cee365f286c3410f691cb5a48e9d7dfc5a0db24f3e4ba2458bb852b8c5c5522fca6b38bebe7b71c2d384eca4230f373ce06795b0f6c4debdb8b12fd874578764c1961a679f3e2193fa1958acb12ac96f52de60399da3b20831432ccd7dc1145da288dac0d94c61c28eccc4361b4d8b698369f4ee23652cd121f40432f4ced3850de4fd04d6615b0f710a06ac75308aee28fcb1bc6271fb198a445a2c5057f5ba1cbfee15f3c698c95dea8a2f068d448597e71dbe78a34b373d55b77670b7c1783653938a49e7e54bc9dab993bcb4abc5f71415918b6a6a9d5d942d4f3e0e71f2504f491fb5da9b9e2d7972aeeeff53ec35c56168243e6d45ee0c9f9a79497962fd6de2c6e6617ed3f94849fc4f9d3e53dcedb4a0c7d1c2b13726b096000d3d9de8fa9b42257336191ff602a7bcbacc2532ce00bb9d7121aea3ffe9ffa58622bb29bfd3821966319f819d549369a63164f1eff14f20126870c7354102dba84b059149f7e55f1c9b6ba1fa55f6c7d6912cf4cc8e64c6e6d5f974239a3f00f1bd89a4f0bc180a69732c8b0b154c7e8225787e795b7298ea81e771ce8498b0d9b108992c098ca718acbd0126cda2d15405796fdc201eeb506a6f1e8e13ed93d4e30bfa3ea499347cb8654f1c16affffb450f2f77cfeacb235b88b4878b5db7da8605a8ce5c07f17ff930993d58c84ada8e5b521f40b28a86a00784a22b151d6fbd7826899ae0ee2bd7d431c45640443e833012612b0e34c09dbdbb631583e03bbc744c1648719ba0402a22b69b95f6398a2c456e6d63cc10ae4bfbac36d5a8b173bfa7728991847e2685a87d1a1c6aaa5940be23433ffa726b45002571acbcbd06e13fb632bf089096ea7d809640a5d956dbf68baeb16375e9aaf2f7919a0d185a8fdde43c0897ec6866be83444d53b2d9d3790a5f0beb2438b6ba6b1ca3a94dc23023df1b9d38e1d63a4a86cfdddf1863174dac1b64aedebdc160e45bd34496894d8e777724971030e2edc2f832d46574808a34d5413a4573ada7fe0042692605f9b3aefbb577a587a8edd292828ab87424738e589e4e71da86dde8893a8b44408eaaf22b8067e47bbe1bb91572fd1e7477222d83ac815dcc0e3ab5733e71e7f6f554b99202410f03fb5fed9929cbd109bc1e062f434afca52fdf249b8e77ba34f916ca1d515285e992dc24a0ba341904f7edcd949c4d8600c57a066b2379301c12b21815058a0adcee23dde9978dc9609936c8db93018db6e0f3e3dbddc71b2004520a7dbc5cd115a1d0912aeae1fcc8ba71bfca06db5b95b189e24701064d632e88aa1bc4b5e7ad26ae8f306c0572ea9fac
Triangle (asymmetric)
View code 1854db8dbe683f6f56bc4bd62807df019439be32d9c03e939653c4524544d2bcc434f41fca15d0043c85b3d4031ff72c9abf69355cad7a10734e98188ae196c6ebfcddff565adf4917ebf3a8e3e78c0a6083cb4695f57c7909b6d72c73078c5180135e0d2c93593a0acf10ac1aac3d320d1abf0eb819d294dbe9d2866fad7728cd6fa9063d66398cf8b3a49b943c35d45fcffca8e6b69d1e398a12727af6de39b61136b4005fc9d6817d3e570828e011ca86754dcb1a75eea2314b08bfd17a9037ecb2766a8ec7d6f1b0ceddd2061cdbb10840b3d00b60aeef6d6d7d23c111343f9cc7b4a31c1e4f2f5c0df61fd0e4139576d0c8f043a9665807a28f2a97c60a11ab548f124b7c2718bc9f583b309cbf3eeba4fc3d0db4662a96012e11015df72cf1d6481fec781f44031192ea553d5defd049a8cffb5cd659cdf97ee727bf4b2e3b2d92c3723e345a7bf29e3487a98aa552a8d8c2aa7bb0df12061189d0c236b0a8f2188f75a46b7ec25b2c845d9356bdfc715e2cb5663aaa5553c527a84827ce5ec2ed4615a62c7f9d8517ec67db05d92cc40a7d8ef49f32c72d8902b342d04e8fc5194338c0f635cc8a86fb743c84624e27123c8c798799ea98b38a4ebc5f8d5808bf32026a52439507d699a65ddc
Wave shallow
View code 878ec26e64a2fb77193287ff06adca7c939c241629913cfab2b74a2112c00c861979e0a46d4f3b14449c299c73807d04b5eebf31dc3c10b6618ce27b5991dc44ea05d719467f4bca6e0124a445a4e19af5c237bbf4c96dc2c09aa7de88e1f7889dcd7193aeccfa7e24ac1b9e7af2a32e10ff4799347bb9c4f29844b92943bc9ff50411390dc73c4886b9385f69561736ea564430a912f49714d0271ddeb0d369c0c40fc93314d72518cbad281ef917125d4553a9f8f06e6cbb78a697b9c33bf2d3ed4f0f1b059625793601756d5eebdd69534d2b31f820558ab8a3d71b2e7ac30847fb4cbe7d8ce311d4707b18bbbf2da22c9b3520054b564f0e6d627280eea6ef6dec3b5fc72e8f799f4aa4b3c8c60fb2dcb799ad1618e16b03240b8df88ce6b25f91e1628c80f57fa535b24125b2f3df77762aacb52b431cb777e0f4e401f1c453cb093643ca6d6fae3038060fc1ec9d6c400c752d40276863427445c6026ba0e1325f297bfd4c236423d325d590fcc6681218432db71f307ad76c2fbb172f5bbcd7dbb5d08c0289b863809729e7d0c5774f5209d9b413e6f4f8cb1052030b6b528568b1b13860f53467e276b0b61ee1139c86d3b5e0feec0d9f62ba0ae74a17441c13dc31cc148e6aa9e4c174face438c3c16b10f29bbe2c54a49138f0424077b8a6bca626beaa17a20d6becaa3c1aef05d2cc01dd96edd1014188a4fd46a2501f080bcd7df2e3c4b36ff4d24dc7a29b44c3489332199e027078ffd523e3e
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.
