Customizing the Badges Section

Customizing the Badges Section

Badges Section Overview

  1. 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 increased sales.
  2. Tapita's Badges Display Section builds upon this concept by offering a customizable and easily integrated solution for showcasing key product features and promotions, such as "Best Seller," "New Arrival," or "Free Shipping."
With Tapita's Badges Display Section, you can:
  1. Highlights key promotions and features with customizable badges.
  2. Adapts seamlessly to match any store theme.
  3. Enhances product visibility and consumer trust.
  4. Drives conversions by emphasizing important product details.

Badges Section Customization

For instructions on how to add a badges section to your store, please refer to the Getting Started guide for Tapita Theme Sections Builder.
After adding your desired badges section to your store, you can customize its content as follows within the Shopify Theme Editor:

Step 1: Under the Badges section, click "Add item."

Step 2: Image customization
  1. "Select Image" (choose the image for your badge).
  2. "Select Image Type" (choose either "Icon" or "Default").
  3. "Preload Image": Enable or disable image preloading.
Step 3: Information customization
  1. "Heading": Enter the badge heading text (e.g., "Free Delivery").
  2. "Description": Enter a brief description for the badge.
  3. "Link Text": Enter the text for a link associated with the badge.
  4. "Link": Enter the URL for the badge link.


You can configure the badges section as follows:
  1. Click on the badges section
  2. Configure the section header
    1. Heading: Enter the main heading text for the section (e.g., "Why Choose Us"). This is the primary title that will appear at the top of the badges section.
    2. Heading Size: Select a heading size ("Small," "Medium," or "Large").
    3. Sub-Heading: Enter a sub-heading text.
    4. Description: Enter a section description.
    5. Alignment: Choose the text alignment ("Default" or "Center").
    6. Button Label: Add text for the button label (optional).
    7. Button Link: Add a URL for the button (optional).

  1. Configure the section body
    1. Item Alignment: Choose the alignment for badge items ("Default" or "Center").
    2. Item BG Color: Insert a hexadecimal color code for the badge item background. This sets the background color for each individual badge. (e.g. #FFFFFF for white)
    3. Item Text Color: Insert a hexadecimal color code for the badge item text.
    4. Border Radius: Set the border radius for badge items. This controls the roundness of the corners of the badges.
    5. Hidden Border: Enable or disable the visibility of borders around badge items. This allows you to show or hide a border around each badge.
    6. Number of Columns: Select the number of columns for displaying badges on desktop, tablet, and mobile devices. This controls how many badges are displayed per row on different screen sizes, helping with responsive design.
  1. Configure the section footer
    1. Button Label: Enter the text for the button label (optional). This will add a button in the section's footer, if desired. Leave blank for no button.
    2. Button Link: Enter a URL for the button (optional).
  1. Configure the section layout
    1. Background image: Choose a background image for the section (if desired).
    2. Section Full Width: Toggle this setting to make the section span the full width of the screen. If disabled, customize the size at "Section max width."
    3. Content Full Width: Toggle this setting to make the content within the section span its full width. If disabled, customize the size at "Content max width."
    4. Padding and Margin: Adjust the padding and margin for the section on mobile, desktop, and tablet screens to control spacing.
  1. Configure the section color
    1. Background: Choose a color for the section background.
    2. Background Gradient: Set a background gradient. This allows you to create a subtle color transition in the background instead of a solid color.
    3. Foreground: Choose a color for the foreground elements.
    4. Title: Choose a color for titles.
    5. Button Background: Choose a color for button backgrounds. This determines the background color of any buttons within the section.
    6. Button Text: Choose a color for button text. This sets the color of the text displayed on the buttons.
    7. Input, button radius: Set border radius for input and button elements.
  2. Configure the section optimize
    1. Lazy Load Speed: The section will only load when it is scrolled to on the page, improving initial page load times.


Now you know how to customize the Tapita's Badges Section to highlight trust signals, key product benefits, and make customers feel confident when shopping at your store! If you have any questions or need assistance, please don't hesitate to contact Tapita support.

    • Related Articles

    • Customizing the Testimonial Section

      Testimonial Section Overview In Shopify stores, displaying customer testimonials is essential for building trust and social proof. Tapita's Testimonial Section provides a modern and visually appealing way to highlight these testimonials, enhancing ...

    • Customizing the FAQ Section

      FAQ Section Overview In Shopify stores, FAQ sections are commonly used to address customer inquiries, reduce support requests, and improve the overall customer experience by providing quick access to answers for frequently asked questions. Tapita's ...

    • Customizing the Video Section

      Video Section Overview In Shopify stores, video sections are powerful tools for showcasing products, tutorials, testimonials, and more. Tapita's Video Section provides a dynamic hub for this multimedia content, offering users a rich and engaging ...

    • Customizing the Slideshow Section

      Slideshow Section Overview In Shopify stores, slideshow sections are often used to showcase multiple products, promotions, or key messages in a visually engaging format. Tapita's Slideshow Section offers a sleek, interactive design to display these ...

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