Skip to main content
All CollectionsWidgets
How to Use the Testimonials Widget for Debutify Theme Version 7?
How to Use the Testimonials Widget for Debutify Theme Version 7?

A guide on how to use the Testimonials widget for Debutify Theme Version 7

Micah Quinto avatar
Written by Micah Quinto
Updated over 2 weeks ago

What is the Testimonials Widget?

Testimonials is a new widget that allows you to showcase customer testimonials on your store. This widget offers the ability to display star ratings and more, enhancing the credibility of your products or services through authentic customer feedback.

Benefits of Adding Testimonials to Your Store

By featuring testimonials from satisfied customers, you establish trust and credibility with potential buyers, reassuring them of the quality of your offerings. Positive testimonials act as social proof, influencing purchasing decisions by showcasing real experiences and satisfaction from previous customers. Testimonials can boost conversion rates by providing reassurance and confidence to hesitant buyers, nudging them towards making a purchase.

Displaying testimonials can help strengthen your brand's reputation, demonstrating a track record of customer satisfaction and positive experiences. Engage visitors with compelling testimonials that highlight the benefits and value of your products or services, encouraging them to explore further and make a purchase.


Disclaimer for Using Debutify Theme Widgets

When using widgets in the Debutify Theme, you are fully responsible for their configuration, content, and compliance with applicable laws and regulations. Debutify is not liable for any outcomes or consequences resulting from their use.

For the full disclaimer and additional details, please read the complete article here: Disclaimer for Using Debutify Theme Widgets.

Your commitment to transparency and ethical practices is crucial for building trust and maintaining a compliant online presence.


How to Enable/Disable the Testimonials Widget?

The enablement or disablement of widgets depends on the version of your Debutify Theme. Please follow the correct guide based on your theme version:

How to Enable or Disable the Debutify Theme Widgets on versions 7.1 and above?

STEP 1

Access your Shopify Admin's Theme Library to open the theme customizer.

STEP 2

Click on the Theme settings icon.

Click on the Theme settings icon.

STEP 3

Scroll down and locate the Debutify Widgets tabs. You’ll find the following categories:

  • Debutify Free Widgets

  • Debutify Paid Widgets

Expand the relevant widget category by clicking on the arrow next to the tab name.

STEP 4

To enable a widget, check the box next to the widget name. To disable it, simply uncheck the box.

How to Enable or Disable the Debutify Theme Widgets between versions 6.0 and 7.0.2?

STEP 1

Sign in to your Debutify Theme Login Portal at platform.debutify.com, and navigate to the Widgets section.

STEP 2

Choose your widget from the Widgets menu, either by searching or filtering by category.

STEP 3

To enable or disable your chosen widget, click on the toggle switch.

STEP 4

  • To enable the widget, confirm by clicking Enable in the confirmation message that appears.

  • To disable the widget, confirm by clicking Disable in the confirmation message that appears.

Note: Enabling or disabling widgets on Debutify Login Portal is available only in Debutify Theme versions 6.0 to 7.0.2. Please make sure your theme is within this version range to access this feature.


How to Manage Testimonials Settings?

STEP 1

Access your Shopify Admin's Theme Library to open the theme customizer.

STEP 2

Go to Sections, scroll down, and then locate Template.

STEP 3

Click Add section, then choose Testimonials.


How to Customize Section Header Settings for Testimonials?

STEP 1

Go to Heading and Subheading to add a heading and subheading text.


How to Customize Display Settings for Testimonials?

STEP 1

Go to Testimonials display type and select how you want your testimonials to appear.

You can choose from the following display types:

  1. Grid:

    • Testimonials are displayed in a structured grid layout.

    • Best for showcasing multiple testimonials at once in an organized format.

  2. Carousel:

    • Testimonials are displayed as a rotating carousel.

    • Great for saving space and maintaining a sleek, modern design.

  3. Rotator:

    • Displays one testimonial at a time in a rotation.

    • Ideal for drawing attention to individual testimonials.

  4. Cards:

    • Testimonials appear as individual cards with distinct styling.

    • Provides a polished, professional look.

  5. List:

    • Testimonials are shown in a straightforward vertical list.

    • Perfect for simplicity and readability.

  6. Story:

    • Mimics a social media story layout, making it visually appealing and interactive.

    • Great for storytelling and engaging customers.

STEP 2
Input a number to set the maximum number of characters for each testimonial.

  • This helps keep the testimonials concise and easy to read.

  • Longer testimonials will be automatically truncated.

💡 Pro Tip: Use a character limit of 100-150 for a clean and visually appealing display.

STEP 3

Check the box labeled Show read more if you'd like to give customers the option to read the full testimonial.

  • When enabled, a “Read More” link will appear for testimonials that exceed the character limit.

  • Clicking the link will expand the testimonial, allowing users to read the full content.


How to Customize Button Settings for Testimonials?

STEP 1

Go to Button style and choose your preferred button style from the following options:

  • Default: A simple and classic button design.

  • Primary: A bold button style that draws attention.

  • Outline: A minimalist button with an outlined design.

  • Link: A text-based button styled as a hyperlink.

💡 Pro Tip: Choose a button style that complements your store's overall design and makes important actions stand out.

STEP 2

Input the text you want to display for the Read more link.

Examples include:

  • “Read More”

  • “View Details”

  • “See Full Testimonial”

💡 Pro Tip: Keep the text short and action-oriented to encourage users to click.

STEP 3

Input the text you want to display for the Read less link.

Examples include:

  • “Read Less”

  • “Collapse”

  • “Show Less”

💡 Pro Tip: Use clear and intuitive text to make it easy for users to collapse expanded content.


How to Customize Details Settings for Testimonials?

STEP 1

Check the boxes to display specific details for your testimonials.

You can choose to enable:

  • Show Star Rating: Displays a star rating alongside the testimonial, perfect for highlighting customer satisfaction.

  • Show Author Image: Displays the image of the testimonial author.

  • Show Default Avatar When Image Is Empty: Displays a default image in place of the author image if none is provided.

  • Show Author Name: Displays the name of the customer who submitted the testimonial.

  • Show Paragraph: Displays the main text content of the testimonial.

  • Show Company/Profession: Displays the customer’s company name or profession, adding credibility.

  • Show Date: Displays the date when the testimonial was submitted.

💡 Pro Tip: Enable only the details that are most relevant to your audience for a clean and focused presentation.

STEP 2

If you enabled the Show Default Avatar When Image Is Empty option, upload an image to use as the default avatar for testimonials without a customer image.

  • Click Upload Image to add your own custom avatar.

  • Alternatively, click Explore Free Images to select a suitable image from Shopify’s library.

💡 Pro Tip: Use a professional and neutral avatar image to maintain a polished look for your testimonial section.

STEP 3

Select the preferred date format to display when the testimonial was submitted.

💡 Pro Tip: Choose a date format that aligns with your audience's preferences and regional standards.

STEP 4
Go to the Profile Picture Style setting and choose how the profile picture for testimonials will appear:

  • Square: Displays the picture in a clean, square frame.

  • Rounded: Applies slightly rounded edges for a softer look.

  • Circle: Frames the picture in a full circle for a modern, minimalist style.

STEP 5

If you’ve chosen the Rounded style for profile pictures, drag the slider to adjust how rounded the edges of the profile picture should be.

💡 Pro Tip: A slight radius adds a touch of softness while maintaining a professional look.

STEP 6

Go to User data location setting and choose where to display the user data (e.g., name, company, or profession).

  • Above the Review: Displays the user’s information above the testimonial text.

  • Below the Review: Displays the user’s information below the testimonial text.

STEP 7

Go to Profile content alignment and choose how the profile content (e.g., user data and picture) is aligned.

STEP 8

Go to Review content alignment setting and select how the review text is aligned.

STEP 9

Go to Media position and select how the media (e.g., profile picture) is positioned in relation to the testimonial text:

  • Image First: Displays the media before the testimonial text.

  • Image Last: Displays the media after the testimonial text.

  • Top: Displays the media above the testimonial text.

Note: The following settings apply only for the 'Stories' layout.


How to Customize Icon Settings for Testimonials?

STEP 1

Check the box labeled Show quotation icon to enable the display of quotation icons in your testimonials.

STEP 2

Select a custom icon if you prefer to use one instead of the default quotation icon. Click View All Available Icons to browse the icon library.

💡 Pro Tip: Custom icons can help align the testimonial section with your brand’s style.

STEP 3

Upload your own custom image or click Explore Free Images to browse Shopify’s library. Use a high-quality image to ensure it looks professional on your site.

STEP 4

Go to the Quotation icon position setting and select the icon’s position from the following options:

💡 Pro Tip: Centered icons work well for testimonials with minimal text, while left-aligned icons suit longer testimonials.

STEP 5

Check the boxes to specify where the quotation icon should appear.

💡 Pro Tip: Ensure the icons enhance readability on smaller screens when enabling them for mobile.

STEP 6

Go to Section style and choose your preferred background style for the testimonial section.

  • Blank Background: A clean, minimalist look.

  • Accent Background: Adds a splash of color or visual texture.

  • Border Top: Features a decorative border at the top of the section.

STEP 7

Go to Container size and select the preferred size for your testimonial container.

  • Default: A standard container width that maintains a structured look.

  • Fluid: A full-width container for a more modern, expansive design.

STEP 8

Go to Icon height and set the height for the icon separately for desktop and mobile versions to ensure responsiveness and consistent design.

💡 Pro Tip: Larger icons may work well on desktop, but keep them smaller on mobile for better readability.


How to Customize Slide Settings for Testimonials?

STEP 1

Check the boxes to enable the following features:

  • Show Arrows: Adds navigation arrows for users to move between testimonial slides.

  • Show Dots: Displays dots beneath the testimonial carousel to indicate the number of slides and their positions.

  • Enable Autoplay Speed: Activates autoplay, where slides transition automatically.

💡 Pro Tip: Enabling both arrows and dots provides users with multiple ways to navigate through testimonials.

STEP 2

If autoplay is enabled, locate the Autoplay speed in the settings. Use the slider to set the speed at which slides transition.

  • A lower value will make slides transition faster, while a higher value will slow the transitions.

💡 Pro Tip: Choose a speed that allows users enough time to read each testimonial comfortably.


How to Customize Image Loading Settings for Testimonials?

STEP 1

Choose your preferred image loading type:

  • Lazy: Loads images only when they appear in the user’s viewport, reducing initial page load time and improving performance.

  • Eager: Loads all images immediately when the page is opened, ensuring all content is fully visible right away.

💡 Pro Tip: Use Lazy Loading for faster load times, especially on pages with multiple images or slower internet connections. Choose Eager Loading if you prioritize immediate visibility for all content.


How to Select a Color Scheme for the Testimonials Widget?

STEP 1

Click Change under Color scheme to choose your preferred colors from the dropdown options provided.

Note: If your store does not have any color schemes set, please refer to the article How to Add and Customize Your Theme's Colors?


Final Step: Save Your Changes

After completing your customizations, click Save to apply the changes.

Did this answer your question?