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.

• Flexible Text Display: Freely customize text display to show your merchandising purpose (e.g. for apparel products: collection name, model size, materials).

• Visual Illustration Enhancements: Add images to categories and featured content to create a more engaging and intuitive experience

• Fully Customizable Design: Tailor every aspect – layout, typography, spacing, and colors – to stay consistent with your brand identity

• 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. Product Highlight #1 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.      Product Highlight Settings Configuration

Step 1: Section header

• Heading
  

• Enter heading for the product highlight section or you can get AI generated heading by clicking on the sparkles symbol.

• Format your heading in Bold, Italic, or insert a hyperlink.
  

• Heading size

• Select your heading size: Small, Medium, Large.
  

• Sub-heading
  

• Enter sub-heading for the product highlight section or you can get AI generated sub-heading by clicking on the sparkles symbol.

• Format your sub-heading in Bold, Italic, or insert a hyperlink.
  

• Description

• Enter description for the product highlight section or you can get AI generated content by clicking on the sparkles symbol.

• Format your description in paragraph heading style, Bold, Italic, insert a hyperlink, bullet list or numbered list.
  

• Alignment

• Choose alignment for heading and subheading.

• Select Default for left alignment, Select Center for center alignment.
  

• Button label
  

• Enter the text for the button label. (e.g. Shop now)
  

• Button link
  

• Insert or search for a link for the button.

Step 2: Section body

• Border radius

• Adjust the corner rounding for image blocks.

• Enter a number from 0 (no border) to 100. 

• Image height

• Adjust height for image blocks.

• Images are automatically resized for an even alignment.

• Image object fit
  

• Toggle ‘Contain’ for images to fit in their containers.

• Toggle ‘Cover’ to prevent any distortion of the images that may be due to the gap between the container size and image size.
  

• Text column

• Adjust the width of text column

• Enter a number in percentage.
  

           Step 3: Section footer

• Button link

• Create a call-to-action button by pasting a link or searching for an internal link.

           Step 4: Section layout

• Background image
  

• Select image for the section background.

• You can choose among these options: upload a local file, select in your Shopify library, explore free images, or connect dynamic sources.
  

• Section full width

• Toggle this ON to display the product highlight section in full width.

• Section max width

• Set the maximum width for the section. Enter a number in pixels.

• Content full width

• Toggle this ON to display the content in full width.

• Content max width

• Set the maximum width for the content. Enter a number in pixels.

• Padding desktop

• Adjust padding space for desktop view. Enter a pixel number to set the breathing space.

• Padding tablet, mobile

• Adjust padding space for tablet and mobile view. Enter a pixel number to set the breathing space.

• Margin desktop

• Adjust left margin indent for desktop view. Enter a pixel number to set the breathing space.

• Margin tablet, mobile

• Adjust left margin indent for tablet and mobile view. Enter a pixel number to set the breathing space.
  

           Step 5: Section color

• Background color
  

• Set the color for the whole background.

• Example: Use HEX (e.g. #FFFFFF for white).
  

• Background gradient

• Set a gradient color for the whole background.

• After choosing the original gradient color, you can continue to customize it with available configurations to make a new gradient set.
  

• Title

• Set the color for the section title (heading).

• Example: Use HEX (e.g. #FFFFFF for white).
  

• Button background

• Set the background color for the button.

• Example: Use HEX (e.g. #FFFFFF for white).
  

• Button text

• Set the color for the button text.

• Example: Use HEX (e.g. #FFFFFF for white).
  

• Foreground

• Set the color for the section foreground (sub-heading).

• Example: Use HEX (e.g. #FFFFFF for white).
  

      Step 6: Section optimize and Custom CSS

•  Section lazyload

• Toggle ON to defer the loading of this section until the visitors scroll to it. This can increase loading speed for the whole page.
  

• Custom CSS

• Add your custom CSS to this section.
  

2.      Text Block Configuration

Step 1: Text Heading

• Heading

• Enter heading for the text block

• Content
  

• Enter content for the product highlight section or you can get AI generated content by clicking on the sparkles symbol.

• Format your content in paragraph heading style, Bold, Italic, insert a hyperlink, bullet list or numbered list.
  

Step 2: Text Image

• Image

• You can add image illustration to the text block.

• The image is displayed on the left side of the text block.

• Image size

• Adjust the size of the text block image.

• Enter a pixel number (e.g. 60px).

• Image border radius

• Adjust the corner rounding for the image of the text block.

• Enter a pixel number.

• Image alignment

• Adjust the image alignment with the text block. 

3.      Image Block Configuration

• Image:

• Add product image for the product highlight.

• Each image block contains 1 image only.