Skip to main content

Content

With the Advanced Content (Content) section, you essentially have a mini page builder in your hands. This section is extremely flexible; instead of a fixed layout, you determine entirely yourself which elements you add and how you arrange them using columns.

Because this section offers so many possibilities, it comes with a number of handy 'presets' (ready-made layouts) that allow you to immediately set up a solid foundation.

Ready-made Layouts (Presets)​

When you add this section, you can choose from the following pre-programmed designs in the list of sections:

  • Heading: An impressive, page-wide title.
  • Heading text: A screen divided in two, with a large title on the left and an accompanying text on the right.
  • Text image (1 & 2): A classic layout with text and an action button next to a large image. You can choose the preset with the image on the left or on the right.
  • Images: Two images presented neatly next to each other.
  • FAQ: A ready-made overview for frequently asked questions, built with handy dropdown menus (accordions).

After choosing a preset, you can still fully customize, remove, or further expand its content to your liking.

General Layout & Background​

Set the basics of your content section so that it fits perfectly on the page:

  • Color scheme: Choose a fitting color scheme for the background and text color of the section.
  • Section display (Type): Determine whether the background of this section spans the full width of the screen (Full width / Edge-to-edge) or is centered within a neat frame (Box / Container).
  • Height & Background height: Choose whether the section should automatically grow in height with the content (Auto) or work with a fixed height (Fixed). If you choose a fixed height, a slider (0-100%) appears that lets you set exactly how far the background color extends. You can set this separately for desktop and mobile, which is perfect for designs with overlapping elements.
  • Custom Class: Add your own CSS class for advanced styling options by developers.

Spacing (Whitespace)​

Ensure the section connects seamlessly to the elements above and below it:

  • Margin (Outer space): Manage the distance directly outside the section at the top and bottom.
  • Padding (Inner space): Manage the distance inside the section for the top and bottom.

For each of these settings, you can choose the default spacing of the theme, or omit the space completely (None).

Adding & Organizing Blocks​

The real power of this section lies in the blocks. This section supports so-called 'Theme blocks' and 'App blocks'.

This means you can stack elements yourself via the menu on the left, such as:

  • Title, Text & Buttons: For your core message.
  • Images: To visually support your story.
  • Columns: This is a special block that allows you to place other blocks (such as text or images) next to each other on the screen.
  • FAQ: Add frequently asked questions and directly customize the color scheme of the dropdown menu.
  • App integrations: Load widgets from your favorite Shopify apps.