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

b62009a32ef73bd4b24ac7faf3b8b1c2c472050be82182b24d1ecc36b5a588c44b450a9842cb64a1981c9552672d6a6dde6598227f6a0f8af941e8112890840b985e7db9ec15f732b4c3c88e82ced139b97afaa2ee7ae6bf4e4b07e5ba58c65dce327334b8eb5f36ad128b7eccc875a6451de540a883e146c4092df53103ace09aab524faaae5c9263304e7ef7c5fffb55ef85e84fd69a1c582209f088fa469cd8fd6cf8bb47f00affc74dae43b412da1afd23c72ac9f01c2335f4fe52aee78ef84e4942fde70a79f70b5962bc4d4a7325b49608d1462f975fd680075282ef691ca003dcbd83e337871277448a1b5229f1f2b125b4772d1fd77184714eb554aacca93316d9f972871d36684b5fb26e5d6fb73ddfc3ef569591b998233ac6feadeebe41e58182e098a2cc014ba21ab5e1ed11e694d3f743061daeaa20c687e699df921ab74e52e88cab01e1249e18db55299cdaac4483968e7131aaa7a53db5a9d7da1ba37175e463092ab976ebb87700a7e2a8ad3d90edf80e2842aeac6437cefba454f0cb5d2d6d67e6e9fec47123ec8670fc6c49fe6bbe3bf0a5543a0c0f050ee75a781d54e684720859e74b4f19d245c60205243b2d5d0a71ef83f4ceb4e57c0774c1090a9bca72286bbb4e4110ecdc1fd86559d4b71bb750d68055a1d4c651cfd911a5d7f3108e5bc41fdee935c4384020e924e4135fdeabd3b6e2261d6b38ad45707c223bf135460252d59a6aa984353ad653c00ab88d36cd47d30f16cde368114b4db1ec8cb59580faec4cee09c0338b76622b397f0289407f2ad2142d0352bb35cb87078b7c6bab64a60b865975045513df957729d337f3bef68ad4117ed15fc4ea151b0151ea5774c1aaf325b6cde59a29d36e0aedc42d0cd8ac94ec5c8b22886a05322bf52d6f3434737c868fc27e7cd6407239aa09ff68cbb38653dcb7920fa84f3b9bed17cf2cd9aedf8489a35c74c7fed8e21ec7a29f212925c6b663064886becb540138505f3a6dcaf64900d48df135eb47e251ee8a3bf21abf06a119be6cf9bf635ce4716939c6f3a0e9671c218a6e40d6a360c46c15805b88db753828fa1f43fe06ac85025a9424f3d873edcbac02c0948e40f85e2f07ac88d591fe546ca5b8946dda53ace796cd1406af6d4f69e1c9c15b706260a93970ba225ffa85fdbd90a99516b62ad8e3833798f011e4533bfe7d7a600e3382f78fc936872289ec79db852e0034c0c74568ac7eef0dcfa408527426ccd6a5e9feb2e8aae1b6ed5078b1ecf775965f5ff120296c0fa28cb9d69265201ec42e42a0c696a283593173c4b819eeb5c4651754c2835111dade886d4a9cd5d9fd9e42bb41fdfaea87f0694513bb1593313afa9e6bd72b3c8e5fd803042ed2f74612eb3d80b9ec835e69c1a53f68db00390d1ae53ed3abf32deed599fde2d953b1fbaf8df20ba53146ad7f2954ace803a80cc87f9f25d38e7c3ecee86b893f7cf89fa68c3d9b93b8ea0cba205c008d72977cf408042d90b5d8475f2853c2b6f710dcbb2c8598f146044d1a1b4e58c2e4b8ff43278985e953e8422767d7fd69e8e269fcd2b64a31880b07922f6d6f5c1fbd934d7fae126330b9fc0bbc4c8abf360f51ea55637c6ca8eb553c4b7123394c44e251c86b5c24af3027d9790527e261f99d0baef3df66170e2b33eac96a267535a046cd5164d9a6f482025a7c286e0565ccc642fce4ea0aefcc807c35fa4691f9afa8b0e61dfbcd735b84ce7f0357aa811c17e8d5748c8107430d216f2201f57da6a9ca0a674081e48ae31d1c012d97c944fcac57bf2dc949e0311bd8fbee28c400237a17d51f549e455e10700f072966e19ca65c55dfd8b079eefede8c464258d68f0227a09f96cb6f9e4e92f2371f3cc9203c7e4f7bad0655af57fbfb4b9ccf7bdbe65c6e04dd4b034e85145899b2f7b8c9f4d22a2143402c9da77d0ac304e48481ca6ae8b22d45d0cbe8d66291d6e28e3f46c9462adeef86e119ff23cd24b59fdd6443a98d684f9f9246ac0d7bf16e34a3f40c4e3bfc5ecf3dbb636690eb75078662ca462aca210beeb123084d73f22f6583f463
Triangle (asymmetric)
View code
5caef3e11b6b00f1d0a055761ebeea194c999ca04be9e76daf838e1e3840f78c5a0d27947619e92c1ca1d5ca1d35d6881a5e3f22120a0da058308b8a9e5f76dcbd07faf5de830b1c48ec4c8f4a3ce12542cf18c3fd78c1e204b3ef953731f73f5845fb7d8bc38a9f4b49654938aeda71a1862d094c92b21247e007385e9f14f5b2e4ed248bec6254777ddd1e0dd5f9fc339b26c47b2998f921b3e6ceadc00d9523ae815ea934e3b140e0a9577b76084763ff45959789f6e186ced94224724bfac965ff71cc150b1ea77c53da0ce630d8f7315b576b31501873bcb52888a68859888ed97ae46b6ed5a43d22f9610484011e8ee915a0b17bf08ed932a70909dea6b4518d2325cd89b675e737f2a77fb2deb08ccec2254fbb3ac8ca8ebed9c10dca30c1fb05b0f14703358664b560952b323ebdd59b5ecd073390a72d0ee758765f69c6f7054a27190e9976355b5f5b6e7ce9e7bc00758e0197531e4536afd200f3fa210177cb1d4521935e3989aef9d94063faf477c68bf977a87995dc1211dcc339bdc7cc066ff4646da02e401fadaf4e60a59afceec69c4de39b5d62d4d6a12f5a0f9b14834c7982305dc9b737a7b08c3bca8ee3cab74713d1c09dff9c0f5291c7595f929de82a68fd16b3e9dd706ece
fa5e91f7d20f7dabc13f3078a62add719bb49c685f4cc8fbc02d5424f0e6c601cef49216766b270ae395dfab2bc8f1b03551b99e0244ce2ee4b46c35ccdfeaf81ef1a19b80e31fb32fc375fcb4273f6601fab5d497716e28fde9e9963af8be439fe92c34ac2144f9056c571d2b1cbaafce89f5853f848e4f820047a56b5ba7948e6b394525903bc06121b4f18cf9db43b3ae1fe5919ee3ccb9ab8876eeadf66de1b094db81c72f72cc32647d2ea6952aa55aa58f27e611d0d10f53c4b31a777d76928ee8635036b568a2ebd1d23372d20650cde119d0a243d438381713b3cf9c3cdd7f3828cfb8b2cff9c7dcec7e7090720c6c676d1a36d90ac6b322e1f44492833515385b26d73aad2b60ded37a858809a5f577803cf9012dec1debe86468a1b1b384fc809609d90b87fb3a8d77fa69d1f8508758786e77d8488c33cf73230188ce74d8f04fec34578e151510bc76174e276e003eede7bb57365e98e6316563be1a782ebde3e201f41af7218f6df8d4ed3dc9efd3d12ccfbff53d36c1d2a21eef56922f265a2863c1e5e0c2479fd836cfd46b8c87b4ebcab3ee89fe0646ba84a3a61e5c91e6957bbf986ba4c3672897192883e5d15f97310209269e5c7372a8affffd0c20a117cb4516b1613de4b5e1d10f0ada107378746c3c3cc84c896af0fc3109569f28216d9c2c176a4f8b9e871ce2936d7cba8ce3f20781ea3094c8c11e46619c4d6b19fed12e154ed73c90019f4953109d8bbd9f19b76d37cccb049e

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