Customizing the Product Highlight #3 Section

Customizing the Product Highlight #3 Section

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 #3 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 #3 Configuration Settings

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.

Section body

  • Layout

    • Decide how the product highlight layout is arranged.

    • Select between 2 options: ‘Content left, video right’ or ‘Video left, Content right’.

  • Video

    • Select the video for highlighting the product.

    • Upload a video in MP4 format.

  • Video autoplay: Toggle ON to play the video automatically once the page finishes loading. 

  • Video loop: Toggle ON to play the video on loop.

  • Video muted: Toggle ON to play the video with no sound.

  • Video width on desktop

    • Adjust the width of the video on the desktop view.

    • Enter a percentage number (e.g. 50%).

  • Video aspect ratio

    1. Adjust the video aspect ratio.
    2. Choose from the following options: Auto, 1:1 (square), 3:5 (portrait), 9:16 (Vertical), 2:3 (portrait), 3:4 (standard portrait). 

  • Video control color

    • Adjust the color for the play / pause button border and icon.

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

  • Content sub-heading

    1. Enter content sub-heading for the product highlight section or you can get AI generated heading by clicking on the sparkles symbol.
    2. Format your content sub-heading in Bold, Italic, or insert a hyperlink.

  • Content heading

    1. Enter content heading for the product highlight section or you can get AI generated heading by clicking on the sparkles symbol.
    2. Format your content heading in Bold, Italic, or insert a hyperlink.

  • Content description

    1. Enter content description for the product highlight section or you can get AI generated content by clicking on the sparkles symbol.
    2. Format your content description in paragraph heading style, Bold, Italic, insert a hyperlink, bullet list or numbered list.

  • Content background color

    • Adjust the color of the content background.

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

  • Content text color

    • Adjust the color of the content text.

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

  • Content vertical alignment

    • Choose alignment: Top, Center, Bottom.

  • Content alignment

    • Choose alignment: Top, Center, Bottom.



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.

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).

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).

2. Accordion Item Configuration Settings

  • Icon

    • Choose an icon for each accordion item.

    • Upload an image. 

  • Title

    1. Enter accordion item title for the product highlight section or you can get an AI generated heading by clicking on the sparkles symbol.
    2. Format accordion item title in Bold, Italic, or insert a hyperlink.

  • Content

    1. Enter accordion item content for the product highlight section or you can get AI generated content by clicking on the sparkles symbol.
    2. Format your accordion item content in paragraph heading style, Bold, Italic, insert a hyperlink, bullet list or numbered list.

  • Open by default 

    • Toggle this ON to open the full accordion by default.

  • Toggle this OFF to expand the full content by click. 


Now you know how to customize Tapita’s Product Highlight #3 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

    • Related Articles

    • Customizing the Product Highlight Section

      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 ...

    • Customizing the Product Highlight #2 Section

      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 ...

    • Customizing the Badges Section

      Badges Section Overview In Shopify stores, badge sections are often used to highlight key product attributes, promotions, or trust signals to potential customers. These visual cues can draw attention to specific products and ultimately contribute to ...

    • Customizing the Featured Collection Section

      Featured Collection Section Overview In Shopify stores, it is common practice to highlight specific product collections to draw attention to top-selling items, new arrivals, or promotional offers. Tapita's Featured Collection Section provides a ...

    • Customizing the Lucky Wheel Section

      Delight your customers with a spin of excitement that could unlock exclusive rewards, while growing your email list! Welcome to the Tapita Lucky Wheel Section, a dynamic and creative tool designed to show your appreciation to customers in a fun, ...