What is the Image with Text Widget?
The Image with Text widget is a versatile tool designed to enhance your store by combining impactful visuals with descriptive text. This feature allows you to pair a prominent image with relevant text, enabling you to highlight specific products, collections, or blog posts effectively.
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 Image with Text 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.
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 Image with Text 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 Image with Text.
How to Customize Display Settings for Image with Text?
STEP 1
Check the box to control where the section appears:
Desktop: Display the section on desktop devices only.
Mobile: Display the section on mobile devices only.
Both Desktop and Mobile: Ensure the section appears across all devices.
STEP 2
Go to Section style and choose your preferred background style:
Blank Background: A clean, minimalist look for a simple and professional design.
Accent Background: Adds a splash of color or visual texture to make the section stand out.
Border Top: Features a decorative border at the top of the section for a subtle visual element.
💡 Pro Tip: Use an Accent Background to highlight promotional content or a Blank Background for a modern, uncluttered appearance.
STEP 3
Go to Container size and select your preferred container size:
Default: A standard-width container that maintains a structured layout and works well for most stores.
Fluid: A full-width container for a more expansive, modern look that spans the entire screen.
Full: Extends the section fully across the page, creating a bold and immersive display.
💡 Pro Tip: Use the Full option for impactful visuals and the Default option for structured, professional layouts. The Fluid option works best for designs that need a balance between structure and expansiveness.
How to Customize Image Settings for Image with Text?
STEP 1
Upload an image, or click Explore free images to browse Shopify’s library for professional, high-quality images.
💡 Pro Tip: Use high-resolution images that align with your branding to make the section visually appealing.
STEP 2
Go to Image Size (Desktop) and select your preferred image size from the following options:
Small: Ideal for minimalistic designs or when the text is the main focus.
Medium: A balanced option that works for most designs.
Large: Best for impactful visuals when the image takes center stage.
💡 Pro Tip: Test different sizes to find the best fit for your layout and ensure the image complements the text.
STEP 3
Go to the Image link and add a link to your image by pasting a URL or searching for a specific page or product in your store. When customers click the image, they’ll be directed to the link you’ve added.
💡 Pro Tip: Use this feature to link to promotional pages, featured products, or blog posts for seamless navigation.
STEP 4
Go to Image placement to customise how the image appears relative to the text.
Choose your preferred placement:
Desktop: Options include Left or Right to position the image beside the text.
Mobile: Options include Top or Bottom to position the image above or below the text.
💡 Pro Tip: Use the placement options to create a design that’s responsive and visually balanced across all devices.
How to Customize Content Settings for Image With Text?
STEP 1
Go to Desktop content position and choose where the content will be positioned relative to the image on desktop:
Top: Displays the content at the top of the section.
Middle: Centers the content vertically within the section.
Bottom: Positions the content at the bottom of the section.
STEP 2
Go to Text alignment and set text alignment for both desktop and mobile devices by choosing from:
Left: Aligns the text to the left edge of the content area.
Center: Centers the text within the content area.
Right: Aligns the text to the right edge of the content area.
💡 Pro Tip: Use Center alignment for attention-grabbing headers or Left alignment for more traditional layouts.
How to Customize Image Loading Settings for Image with Text?
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 Image with Text 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.