Shopify.dev Assistant - not working at all

Polaris
1

Hey all,

what am I doing wrong here?

Or is the Assistant completely useless?

image
image619Ă—754 47.5 KB

2

Hi @perice

It looks like the dev assistant didn’t run a tool because the question wasn’t precise enough, I tried this with " i want to add a margin to a section" and I got this response:

You can’t add margin through a s-section prop (there’s no margin property on the component), but you can use regular CSS to give it margin, since it’s just a web component. The best reference for this component is the Section web component docs.

There are three common patterns, depending on whether you’re writing plain HTML or JSX.

1. HTML: add margin directly via style or a class

In plain HTML (like in your examples), you can treat <s-section> like any block element and use margin in a style attribute or via a CSS class.

a) Inline style

<s-section
  heading="Customer information"
  style="margin-block: 1.5rem; margin-inline: 1rem;"
>
  <s-text-field label="First name" value="John"></s-text-field>
  <s-text-field label="Last name" value="Doe"></s-text-field>
</s-section>
  • margin-block adds margin above and below.
  • margin-inline adds margin to left and right.
  • You can also use margin, margin-top, margin-bottom, etc., like with any other element.

1.2 Using a CSS class (recommended for consistency)

<s-section class="section-with-margin" heading="Customer information">
  <s-text-field label="First name" value="John"></s-text-field>
  <s-text-field label="Last name" value="Doe"></s-text-field>
</s-section>

.section-with-margin {
  margin-block: 1.5rem;
  margin-inline: 1rem;
}

This keeps styles centralized and easier to adjust.

2. Use a wrapper element to control spacing

If you don’t want to touch the s-section styling directly (or you want consistent spacing across many different sections), wrap it in a container element and put the margin on that container.

HTML example

<div class="section-wrapper">
  <s-section heading="Customer information">
    <s-text-field label="First name" value="John"></s-text-field>
    <s-text-field label="Last name" value="Doe"></s-text-field>
  </s-section>
</div>

.section-wrapper {
  margin-block: 1.5rem;
}

3. JSX (App Home): wrap in a <div> and style that

When using the Polaris App Home React bindings, you still don’t get a margin prop on s-section. Instead, wrap the section in a native element and style that element:

const Extension = () => {
  return (
    <div style={{ marginBlock: 'var(--p-space-4)' }}>
      <s-section heading="Customer information">
        <s-text-field label="First name" value="John" />
        <s-text-field label="Last name" value="Doe" />
      </s-section>
    </div>
  );
};

Note: var(--p-space-4) uses the Polaris spacing token, which keeps spacing consistent with the Polaris design system.

4. When to use margin vs Polaris layout components

Given how s-section is designed (nested sections, built-in spacing, etc., as described in the Section docs), a good rule of thumb is:

  • Use layout components (like s-stack or s-box) for spacing between sections:
    • e.g. gap="base" on s-stack to separate multiple sections.
  • Use margin only when you need spacing around a single section relative to other non-section content, or to align with a specific layout container.

Example: multiple sections with consistent spacing

<s-stack gap="base">
  <s-section heading="Customer information">
    <s-text-field label="First name" value="John"></s-text-field>
  </s-section>

  <s-section heading="Shipping details">
    <s-text-field label="Address" value="123 Main St"></s-text-field>
  </s-section>
</s-stack>

Here you don’t need manual margins; gap="base" handles the spacing.

5. Summary

  • s-section itself does not offer a margin prop.
  • You can add margin via:
    • style="margin..." on the <s-section> in HTML.
    • A CSS class applied to <s-section>.
    • A wrapper container (div, s-box, etc.) that has the margin.
  • For layouts with multiple sections, consider using layout components (s-stack with gap) to maintain consistent spacing.
1 Like
3

thanks @Liam-Shopify !