Benefits product

Announcement Bar
Benefits product
Brands
Collage
Collection feature
Collection list
Feature collection
Featured navigation
Features banner
Grid view
Header
Image banner
Image with text
Image with video
Logo banner
Lookbook
Multicolumn
Newsletter with image
Parallax section
Rich text with image
Shoppable image
Shoppable video
Shoppable video reels
Slideshow

What is the Benefits product section?

The Benefits Product section is crafted to showcase your products in a visually elegant and informative way. This feature allows you to add high-quality images optimized for both mobile and desktop views, ensuring your product presentation is clear and attractive across all devices. You can set up to 6 benefit blocks to highlight key product features, each accompanied by an icon or image of your choice. On mobile, these benefits are displayed in a streamlined column format, enhancing readability and user engagement.

Main settings

General

  • Heading: Enter the main title for the Benefits Product section.
  • Make section full width: Enable this option to expand the section across the entire container width.
  • Mobile image: Upload an image specifically for mobile view, optimizing the section for smaller screens.
  • Desktop image: Upload an image optimized for desktop view to ensure clear and attractive display on larger screens.
  • Desktop image width: Adjust the percentage width of the desktop image.
  • Desktop image max width: Set a maximum width in pixels for the desktop image to control its display size.

Button

  • Button label: Define the text that appears on the button.
  • Button link: Enter a URL or select a link for the button to direct users to a specific page.
  • Quick buy product: Select a product for a quick-buy option. Note: if a product is chosen, the button link is disabled.
  • Button style: Choose the visual style of the button (e.g., primary, secondary).

Benefit Blocks

  • Heading scale large screen: Adjust the heading size for larger screens as a percentage of the default.
  • Heading scale mobile: Adjust the heading size for mobile screens as a percentage of the default.

Colors

  • Heading color: Set the color of the section heading text.
  • Background color: Choose a background color for the section.
  • Background opacity: Control the opacity level of the background color.
  • Text color: Define the color for the text in this section.

Section Spacing

  • Distance from the top: Adjust the space between the section and the top of the page.
  • Distance from the bottom: Adjust the space between the section and the bottom of the page.

Customize Benefit block

Click one of the preloaded Benefit block to customize it.

‍

Mobile view example

Back