Dividers

Shape dividers allow you to separate sections of content in visually engaging ways.

Built-in shapes

Book
Curve
Curves
Diagonal
Hills
Mountains
Rays
Triangle
Wave
Waves
Zigzag

Custom shapes

c08e63fde5b5ddc53a50d61a98c257e02acccb495e4328c418b149ed1d5f6de8629f64b5482a304bf334e71cd2072ca1c4c6bd1443911a8f0d9abe521f4aa74552b5907ac16d5bd958f7b9b18928c2676d173a476be483ddcee469cbb05f156b617641e955820c493f2f6d0437842af9dd5983725ffb70d266676e46fc466c59131bc8e7acf114eb4df8361b1f386e02bcca71c408920a341be1ba59acb03a9b2bd045762f89c16d1d7f2fc28345c21729816031a634a50dfab4e7cf6a5b28b373414d9820b6794b37f97f88654dfbe0ae76d85aced95002375a902207ebf7e14b42982989dfdd20e75889262ae5d74a381714d9c103c3b42d57ded930fa76602f069680eb77e460aa11422ac7e9bd4787ee4a2c404171204efcd3b04038e78b19f40e1e2573d4862b42cee64b3619e276b62b26e3a7f92ed6b91b9261ca48da7e2e66c8e780ea4e829fd840afbfc3ccab284aa387e8e4af3329f94039280a8cd9bc46be5b589aebbe862d6372f5ea91f8a4bda7d4a2fc9b1271b17790d80f79acef8f491c204fc8d109adb0d89469a63ed3c8266c920c88e6ef545274066ddfcd2b6a1646f53e8e6de9cc3d7b108a21134832c71da7345744d107d5e8be16c08f05d0ed7440e1c15777ef44c0fa0013a3e7405e8adc89dc52fe07db605340cc64c809f3460a2a775ba6cc445ba25c7dfca4ec945c0255e6f6842fcd5770a6c6831891d8a5f1b3f3faed4a299f35a229f8450f8bfb74099c1ef8a5832b97a8860a8c893353304c55860242e1d25ce828d76895e071ed3f4bdec2dc0f0df6215af041bac15b8d25cf67ecfd7f804ec16f633dc1ece8c83a619d331d10b36a36da6901f69c4c5f6bb1e8723304e47f53e377b04d526821d5eb6d704ae37f2aee73b73d5bc356342237006279bfb1241a54b36d06666ee2dbe7e6c827d8dcc325734559cd01c4b590063b89ee3fde8c87b41726bff272bc521c16701dc7685a083e757f91f75ce7cc27a2a4e7c8d82173edf85c0e8b3e188036709802f546cdf3d9dd06bf7bb6938d3352b2eaccc803aa18750fd8ffc14e99e41eebc34abe1d726e0c2c8911ae009f0fc41b6468cbde6670ce63978328e111530ea0b3e06a0cbfcede8a83306ecc0d8cc9763b1efdee904493428b4b50088aa81943e82dd53d907054dce0fa93e7533d09189bf6197d46dc382fddc69427220a3892855f79178d898642ffe1e04c6c394d7b8d78928ac8f64ccffd98fa20a918e1f96b0698b3a7f1f6fec20e31effb4621bab65b212bf75b4999db1077b1c1ab7b88381c1e58f9553621aeb49cecc28734f21b1cb8ffc0d3b16867456e8fe74f52e76b602547bdd648997b616b064f1e9771a9e8fa78d26af8a9489ff42616c693dca38826b618d06f261f198ad3a4f9c8b50695c1066148ac546ee72e2d30d67200520575b4d21521044b16998c5401c8ee64a186a3a79614b46fcf85d0710d210137580cb2f5f31ceda28b8db2fac9def2d2796bf20ee62c3b5f2426816f784a55c764aa21791e78c8898dc94f6b8cb90580fbf0c806540615dc66ca2320d2c59743caa35b9b3e798f5860191a5d1cbc62cc14a8e4652248c2e4467c5ee732d5ba1b81bd55dc6f3a133d66d4f0d1b82aa70367bbb8920f8b9b2f31cb68c38e4307f13c12594a867dbbf208817c3364d215a459037206c9dc63e4cacf6aaf2d041c12f801a04bf35bcf60e7ec1b4835c237fbd310a22ebed0aba259e5fc5bd8d536c061eaae57e17483212d7273455ca1eaac2ef5998f87b4b47076970e764b54d1f8a4db6dba6fb59bd0782ed7e386df320ae095918ff295c33706be65ca2b73c376b6037c9f1e34fbcb3c37843adc9852d9466b1ddd69dc8f615f6f81599f8bec68505add0262ae3bf28534dcea5b9f25dade539172aeb98411715a5a8d0f3e7a1ccfd580d2aadb181fbda26df08eb484d376ca65ca8a75a09c0ecb34e918b8e17ac21657477ac60ff1803907e5f9a76f8672c7113d1a0b250b8f771181541036e52ebda460f599438a9385e75b6f70d74f9cfa5c09a271b03f27247d45f11600ea2ae92d9453
Triangle (asymmetric)
View code
0328f37caf04e9aa8f939ca1fbac8d84a1ff7ab4899506cb3aebefd5da0f4535bf31469b5630a5e0778c11140013a24b23e86079695bc82297076dabb7d6d98f7b3d62c70f8045367874f346bb7106cb3909eb2c295d701b24335753aee68c8c6989fb4af6455a84a99d5aba48eec52c5a46d3b81985ab544cea37b9b4ac4ce2c2c115109bc1739cc0df85d7df8d59930e05d5fbf32153262ef778f278c4088fa4a97d8cff1d17f0a09c2a34bc46df4862713e7461b44c12de01597dee90210ddf09cd9f03ba39a8550f6061f00523024bda0c9808de012d5079670f77199433b8caa30f95af8a365ebc6165bfdb54248b7565caef00cda9ffae69c6218031804220fdbd95909bade84265beb14936ebe8e2e859050307eda5ebb3501003f1767107807d21e9596f9651551f4d9837d7cbd8b9b58f6daeaa97c7148a9c64098df9a07d96998bb65baee93dbe198e091bb580ed67de611bda1207d6e874f4cbc6a6c54279d14144ba254a17f6f9c4d27ec940b44364f131847359e52fd40f27b7a8c42de9032e792e73ee51b942af78bdb80d77fa9360a5bcdfa31059d82ca31364b0d901ce136510e7ad9ed56831d1a6a180223c0dfd24fd543d656f39e65f7b6b021bd7e258312f6dd37e17bf3f328c
daf6cd2d29d58ba9c17212d267a4113e43f4bb7ea45eb04011d7c0099328abb94dcc0c9869432e10362ed8adf11ddca1a49804771aea624c7c316ba0936fa7da22d783c0762e0c5e09bae25f3eb0afa47ee9815633594eda10d629c4517f4cd1e7e53d46c2c94f3cf5d44652b11ea6bad28a1fd28ed0892f2e7e395b8601a7f3dbe3d6d7888c51a8da694299dba49a5e62910a33846f876f0adb5d4993e0c620f60ccbf8bbeeb5f2dc2a5c7876ba90e261d8fc7ee7cdb85c7f0cabc17a6f42e86cd782761dc5d30c1e0b1e5f4c99b41f6841b00ebec82082650c0505bd8814abad75c5c72e17385448d68077cb45d1fc568a984371f4f0613aaf7d54b09866320d943d3826cf321cd4470500012c909f4718c1d6487032f233268b0d0021a0e9c50c2a22d36c8731429b2593088f1ddf512a30501a410c2441ee71c920720d83ac25a4c9346efadc825213a45157653916292c7baf3fa80adea1ee9d9697c3cbdde60197300429b3c09a2bde91829ea28e836fa0a969be772f683f7a758279d0cc42da19f884d6c2ed60b26ee4a0960a49c9e7712398ae67e10edf0f1444409c6da23ee6c03238b29ead69bdf3f87c16073b0466172c3806b80e561403c6e2e8a52b248ef66ab4e2eec9c3e8362bed0646d9f073dbc2e9a046ba511ecc9bfd71efa1b25cceb7cc84841f63e3e708098358eda0af8436072e6bb2295d5fa4b98e58275671ef808e382c849e30f6fde328cac12ddc92aab221e01e1e199075357a

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.

Related patterns

Footers

Footers

6 patterns

Headers

Headers

4 patterns