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.
Image
Sections 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). |
Common Block settings in section settings
| 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 |
| Underline Color | Pick a color for dividers between sections |
| Card Background | Set a color behind your text—use slight transparency |
| Card Border | Add a thin outline around the card. Set to #00000000 for no border, or match your brand colors. |