You have a lot of great products, but what should you do to tell customers how outstanding your products are?

Showcase your feature products with product highlight sections from Tapita Theme Sections. Easy and quick customization, this product highlight section comes with 3 design options, each serves a different way of highlighting your product features. Let’s explore how each product highlight theme section makes your store shine!

1.   Product Highlight Designs and Functions

Tapita Product Highlight Section is a powerful, flexible highlight section that lets you display your products with text and image blocks. You can showcase collections’ details, key features, etc. with product images for visitors to get a sense of what you offer and how outstanding your products are.

1. Flexible Text Display: Freely customize text display to show your merchandising purpose (e.g. for apparel products: collection name, model size, materials).
2. Visual Illustration Enhancements: Add images to categories and featured content to create a more engaging and intuitive experience
3. Fully Customizable Design: Tailor every aspect – layout, typography, spacing, and colors – to stay consistent with your brand identity
4. Responsive & Speed-Optimized: Works seamlessly across all devices while maintaining smooth performance and fast load times
   

For instructions on how to add a product highlight section to your store, please refer to the Getting Started guide for Tapita Theme Sections Builder.

2. Customize Product Highlight #2 Section

👉 View section demo

After adding your desired Product Highlight Section to your store, you can customize its content as follows within the Shopify Theme Editor.

1, Section Header

• Heading

• Defines the main heading text for the section header.

• Enter and format text using the rich text editor (bold, italic, link).

• Heading size

• Sets the size of the heading text.

• Select from options: Small, Medium, Large.

• Sub-heading

• Defines the sub-heading text below the main heading.

• Enter and format text using the rich text editor (bold, italic, link).

• Description

• Adds descriptive text below the sub-heading.

• Enter and format text using the rich text editor (bold, italic, link, lists).

• Alignment

• Controls the text alignment for the header elements.

• Select from options: Default, Center.

• Button label

• Defines the text label for the header button.

• Enter text for the button display.

• Button link

• Sets the URL destination for the header button.

• Paste a link or search for the target URL.

2, Section Body

• Main heading

• Defines the primary heading text for the section body.

• Enter and format text using the rich text editor (bold, italic, link).

• Main heading size

• Sets the size of the main heading text.

• Select from options: Small, Medium, Large.

• Main image

• Uploads the primary image for the visual section.

• Image maximum height

• Limits the maximum height of the main image.

• Enter a pixel value (e.g., 500 px).

• Image border radius

• Controls the roundness of the main image's corners.

• Enter a pixel value (e.g., 70 px).

• Image object fit

• Determines how the image fits within its container.

• Select from options: Contain, Cover, Fill, Scale Down, None.

• Visual section minimum height

• Sets the minimum height for the visual (image) section.

• Enter a pixel value (e.g., 400 px).

• Info section alignment

• Controls the horizontal alignment of the info section content.

• Select from options: Start, Center, End.

• Info vertical alignment

• Controls the vertical alignment of the info section content.

• Select from options: Top, Center, Bottom, Stretch.

• Reverse layout (image first)

• Swaps the order to display image before text.

• Toggle on to reverse; off for default text-first layout.

3, Label Settings

• Label text color

• Sets the color of the label text.

• Enter a HEX color code (e.g., #FCFBFB7).

• Label background color

• Sets the background color for the label.

• Enter a HEX color code (e.g., #507070).

• Label font size

• Sets the font size for the label text.

• Enter a pixel value (e.g., 14 px).

• Label font weight

• Adjusts the boldness of the label text.

• Select from options: Normal, Medium, Semi Bold, Bold.

Labels 

4, Tooltip Settings

• Tooltip font size

• Sets the font size for tooltip text.

• Enter a pixel value (e.g., 14 px).

• Tooltip font weight

• Adjusts the boldness of tooltip text.

• Select from options: Normal, Medium, Semi Bold, Bold.

• Tooltip text color

• Sets the color of tooltip text.

• Enter a HEX color code (e.g., #FCFBFB7).

• Tooltip background color

• Sets the background color for the tooltip.

• Enter a HEX color code (e.g., #000000).

• Tooltip border width

• Sets the thickness of the tooltip border.

• Enter a pixel value (e.g., 0 px).

• Tooltip border color

• Sets the color of the tooltip border.

• Enter a HEX color code (e.g., #CCCCCC).

• Tooltip border radius

• Controls the roundness of the tooltip's corners.

• Enter a pixel value (e.g., 8 px).

5, Section Footer

• Button label

• Defines the text label for the footer button.

• Enter text for the button display.

• Button link

• Sets the URL destination for the footer button.

• Paste a link or search for the target URL.

6, Section Layout

• Background image

• Uploads a background image for the entire section.

• Select an image file or explore free images.

• Section full width

• Expands the section to full page width.

• Toggle on to enable; off for contained width.

• Section max width

• Limits the maximum width of the section.

• Enter a pixel value (e.g., 1600 px).

• Content full width

• Expands the content area to full section width.

• Toggle on to enable; off for contained content.

• Content max width

• Limits the maximum width of the content area.

• Enter a pixel value (e.g., 1440 px).

• Padding desktop

• Adds space around the section content on desktop.

• Enter a pixel value (e.g., 60 px).

• Padding tablet, mobile

• Adds space around the section content on tablet and mobile.

• Enter a pixel value (e.g., 40 px).

• Margin desktop

• Adds external space on the left of the section on the desktop.

• Enter a pixel value (e.g., 60 px).

• Margin tablet, mobile

• Adds external space  on the left of the section on tablet and mobile.

• Enter a pixel value (e.g., 40 px).

7, Section Color

• Background

• Sets the background color for the section.

• Enter a HEX color code (e.g., #FFFFFF).

• Background gradient

• Applies a gradient background to the section.

• Select colors or choose from presets (e.g., No color chosen).

• Foreground

• Sets the general foreground color for section elements.

• Enter a HEX color code (e.g., #333533).

• Title

• Sets the color for title and heading text.

• Enter a HEX color code (e.g., #507070).

• Button background

• Set the background color for buttons.

• Enter a HEX color code (e.g., #000000).

• Button text

• Sets the text color for buttons.

• Enter a HEX color code (e.g., #FFFFFF).

• Input, button radius

• Controls the roundness of input fields and buttons.

• Enter a pixel value (e.g., 0 px).

Product feature

1. Feature icon
1. Add an image as the icon for each product feature.
   

1. Feature title
1. Add the title for the product feature.
2. Feature description
3. Add the description for the product feature. 
   

Now you know how to customize Tapita’s Product Highlight #2 Section to effectively showcase your product features. If you have any questions or need assistance, don’t hesitate to reach out to Tapita support here support@tapita.io