Shared blocks and block areas
Radian 4.0 has a library of shared blocks. They look and work the same in every section that takes them, so a Testimonial block in the footer has the same settings as one in an Image banner. Sections list them under Add block, next to their own blocks.
How to set it up
Step 1: Add a shared block
- Select a section that takes shared blocks, such as Contact form, and click Add block.
- Pick a block from the list. The shared blocks are Heading, Subheading, Text, Split text, Icon, Icon with text, Image, Button, Spacer, Divider, Product card, Collection card, Accordion, Social links, Newsletter form, Testimonial and Press quote.
- Drag the block to where you want it. Most blocks have their own alignment and top and bottom spacing for desktop and mobile.
Step 2: Know which sections take them
- The Footer, Popup, Newsletter, Contact form, Video, Image banner and Image with text sections take the shared blocks next to their own.
- App blocks from installed apps can be added in the same places.
Step 3: Use the block areas
- The Cart drawer and the Cart page have a block area under the products. Use it for delivery notes, an Accordion of shipping questions or Social links.
- The Search drawer has a block area under popular searches and featured products. It shows while nothing is typed.
- Select the section in the editor and click Add block to fill the area.
Settings reference
Testimonial
| Rating | 0 hides the stars. |
|---|---|
| Quote | |
| Author | |
| Detail | |
| Avatar | An image from your files. |
| Show card background | Turns this on or off. |
| Content alignment | Options: Inherit, Left, Center, Right. |
| Spacing | |
| Top spacing (desktop) | Slider. |
| Bottom spacing (desktop) | Slider. |
| Top spacing (mobile) | Slider. |
| Bottom spacing (mobile) | Slider. |
Accordion
| Question | |
|---|---|
| Answer | |
| Show the start of the answer while collapsed | Turns this on or off. |
| Spacing | |
| Top spacing (desktop) | Slider. |
| Bottom spacing (desktop) | Slider. |
| Top spacing (mobile) | Slider. |
| Bottom spacing (mobile) | Slider. |
Divider
| Width | Slider. |
|---|---|
| Alignment | Options: Inherit, Left, Center, Right. |
| Thickness | Slider. |
| Opacity | Slider. |
| Spacing | |
| Top spacing (desktop) | Slider. |
| Bottom spacing (desktop) | Slider. |
| Top spacing (mobile) | Slider. |
| Bottom spacing (mobile) | Slider. |
Spacer
| Height (desktop) | Slider. |
|---|---|
| Height (mobile) | Slider. |
How it works
- Accordion can show the start of the answer while collapsed, so shoppers see there is more to read.
- Product card and Collection card use the same cards as product and collection grids, so they follow Theme settings > Product cards.
- Spacer and Divider add room or a line between blocks, with their own height on desktop and mobile.
- The Product, Featured product and Quick add sections have their own Divider, Image and Testimonial blocks for the product details. See Product page.