Benefits
The Benefit Section is a fantastic way to showcase what makes your brand or products stand out. Whether it's fast shipping, clean ingredients, or exceptional customer service — this section helps you highlight those key selling points in a clean, visual, and engaging layout!
Perfect for building trust and boosting conversions, the Benefit Section is fully customizable, responsive for mobile, and fits seamlessly into your store’s branding.
Sections settings and Common Block settings in section settings
| Heading | Add a clear, bold title that highlights the benefits, (like “ingredients” for example) . Keep it short and catchy! |
| Description | Give a quick little explanation under your heading—why this benefit matters to your customers. |
| Heading & Description Inside the Circle | Want your text to appear inside the image circle in center without image , Flip this ON. Prefer it outside? Leave it OFF. |
| Content Width | Use the slider (or type in a number) to control how wide your text area is. Handy for keeping things tidy (only works when text is out side of the circle) |
| Desktop Alignment | Pick how you want the text to align on desktop: Left, Center (most popular), or Right. |
| Mobile Alignment | Same as above, but for mobile screens. Choose what looks best for phone shoppers. |
| Image (Desktop) | Upload a wide image that looks great on large screens. 2880 x 880px is the sweet spot. |
| Mobile Image | Add a square image that fits nicely on mobile. Recommended size: 740 x 740px. |
| Image Fit | - Contain: Shows the whole image neatly inside the box - Image width will be available in contain layout , Set how wide your image appears (as a %). 100% fills the space, smaller sizes give more padding - Cover: Fills the whole space for a bolder look |
| Background Color | Choose a color behind your image circle—super helpful if you’re using “Contain” mode and if your using content inside circle instead of image |
| Show Border Circle | Turn this ON to wrap your image in a circular border. |
| Border Circle Color | Pick a color for the circle outline (if border is on). |
| Show counter | You want to show numbers instead of images for the benefit card, Flip this ON, Prefer adding images for the benefit card , Leave it OFF. |
| Text Color | Change the text color for the counter text , this will be showing if show counter is enabled |
| (Block) Background Color | Set a background color for image or counter behind the benefit block card |
| Border Color | Add a soft border around the circular image or counter card —totally optional! |
| Heading Size | Choose how big your heading text should be for benefit card (H4 is a great default). |
| Image Width on Desktop / Mobile | Fine-tune how big your image or counter appears on each device—especially useful for getting the look just right! |
| Collapsible | Want the section to be expandable? Choose: • Open – fully visible on load • Closed – collapses until clicked |
| Card Layout on Mobile | Choose how cards stack on phones: • Carousel – swipeable cards • Grid – stacked blocks |
Block level settings : (benefit card settings which is not common)
| Count | Enter the number you want to mention for the specific benefit card .( this will show if show counter is enabled) |
| Custom Image | Add image to the card instead of counter , make sure show counter is disabled in section settings if you need to show image |
| Heading | You can add the heading for each benefit card as required |
| Text | Add the text you need to show or explain the benefit |
| Text color | Pick a text color for the benefit card which matches for the card background color |
| Truncation | These settings give you control over how your text appears on different devices, helping to keep your design clean and consistent.
|
| Underline Color | Pick a color for dividers between sections |
| Color scheme | Choose a pre-set color scheme that works best for this block. This ensures that the text and background colors are perfectly coordinated to match your brand's style. |