Taiga
documentation

Divider

"Divider" section serves as a stylish tool to visually separate elements within your store, enhancing the overall design with a touch of creativity. It allows you to choose from a selection of pre-made divider styles or add a custom SVG for a truly unique look.

✅ Steps

  1. Open the Theme Editor.
    Navigate to your Shopify dashboard and open the Theme Editor for your store.
  2. Add the Divider.
    Click on 'Add section' and select 'Divider' to integrate this section into your page layout.
  3. Save your changes.
    After customizing the Divider, click 'Save' to implement your adjustments.

Edit Settings:

Desktop Layout:

Margin Top & Bottom: Adjust the space above and below the divider to fit the layout of your page seamlessly.

    Mobile Layout:

    Similar margin adjustments for top and bottom ensure the divider looks great on any device.

      Customize Blocks:

      Standard divider

      Divider Graphics Styles:

      Choose from various designs such as Curve, Elliptic, Jagged, Tilted, Wave, and Waves (nonsymmetric) to match your site's aesthetic or create a dynamic visual flow.

      Color Options:

      Customize the top, middle, and bottom parts of standard dividers with different colors to establish a cohesive look across different sections.

      Position Options:

      Place the divider On top of the previous section, Between sections, or On top of the next section for optimal placement.


      Additional Settings:

      Flip Horizontally/Vertically: Add a creative twist to the divider's orientation.
      Desktop & Mobile Settings:
      Height Slider: Adjust the divider's height, with the option to maintain the default aspect ratio by setting it to 0.
      Width Slider (Mobile Only): Fine-tune the width of the divider on mobile devices for perfect alignment.

      Custom divider

      The Custom Divider block provides a way for enhancing a store's design with the addition of unique graphics via custom SVG code. It's necessary to remove any existing standard dividers before adding a custom block, as both cannot be used at the same time.

      Position Options: Choose to position your custom divider On top of the previous section, Between sections, or On top of the next section, providing flexibility in how your content flows and transitions.
      Flip Horizontally/Vertically: These options offer additional control over the orientation of your custom graphic, enabling a mirrored effect or an upside-down appearance to match your design vision.


      Layout Settings:

      Desktop Layout - Custom Graphics SVG: Directly input or paste your SVG code tailored for desktop viewing to ensure your divider displays correctly on larger screens.
      Mobile Layout - Custom Graphics SVG: Adjust or utilize a different SVG for mobile devices, accommodating responsive design and optimizing the visual impact across all user experiences.