Adding the Materials & Care block to your product page

Nothing appears on your storefront until the Materials & Care block is on your product page. This is a one-time job.

Adding it

1. Open your theme editor and go to a product page.
2. Find the section that holds your price.
3. Select Add block inside that section and pick Materials & Care.
4. Drag it so it sits just under the price, then save.

The setup step on the home page turns green once the app can see the block on your product page. It checks your theme rather than taking your word for it, so give it a moment after saving and reload the app.

You added it and the step is still not green

Two things to check, in this order:

1. Is that theme live? The app only looks at your published theme. If you added the block to a copy you are still working on, publish it and the step turns green on the next reload.
2. Is the block switched on? A block you have hidden with the eye icon does not show to shoppers, so the app does not count it.

If both are fine and the step is still not green, open it and press Mark as done. Some themes store their pages in a way the app cannot read, and you should not be stuck on a step you have already finished. Your materials still show on your product page either way - the setup step is a tracker, not a switch.

Why it goes next to the price

Shoppers have to be able to see what an item is made of before they buy - EU law asks for that. Putting it right next to the price is the clearest way to do it. A block at the bottom of the page or hidden inside a tab is easy to miss.

What you can change

The block's settings come in two groups, headed What to show and Design.

What to show has three switches, all on to begin with: Show care instructions, Show tags and Show product safety details. Show tags means the tags you add in this app, not Shopify's own product tags.

How to show care instructions sits under the first of those switches. It has three choices and starts on Show all of it:

• Show all of it - the care rows sit on the page with everything else.
• Shoppers click to open it on the page - the care rows fold away behind their heading.
• Shoppers click to open it in a popup - the heading opens a small window over the page.

Only care can move like this. What a product is made of is always printed in full, because that is the part EU law asks shoppers to be able to see before they buy.

Design starts with Style, which has four choices. It starts on Plain text.

• Plain text - headings and text, nothing around them. Fits most product pages.
• Boxed - the whole thing in a bordered card, with a line between each part. Use it when your product page is busy and the materials need to stand out.
• With icons - a small icon in front of each heading.
• Badges - your tags become rounded pills. The materials line itself is never turned into pills, because the wording of it is the part the law cares about.

The icons are not washing symbols. They are plain shapes - a tag, a droplet, a shield, a leaf. The washing symbols you see on clothing labels are trademarks that need a licence, which is why this app writes care as words. A few tags pick up a matching shape of their own whichever style you choose: any tag with vegan, organic, bio, recycled or free in its wording.

The rest are sizes and colours:

• Text size, from 80% to 150%. It starts on 100%, which is the same size as the text around it.
• Text color, Background color and Border color. Leave one empty and it follows your theme, which is what keeps the label readable on a light or a dark theme.
• Padding inside the box, which only shows on Boxed, or once you have picked a background or border colour.
• Space above and below, for the gap between the label, the price above it and whatever comes next.

Everything else comes from what you typed into the app - including all four headings, which you change in Settings, Labels rather than here.

If your theme does not support it

Older themes cannot take app blocks. The setup step will say so rather than showing you a button that does nothing. Moving to a newer theme is the only way to place the block.