Explore

Building a hybrid listicle page

⁠

Open Replo template⁠

Open Figma template⁠

⁠

Open your Listicle AI generator

Upload your Product Research Document

Confirm your page’s angle

Confirm the author of the page

Confirm discount code (10-15% off recommended)

Confirm magazine name

Generate the hero section copywriting

Generate the 7 key selling points

Make sure they are genuinely the best 7 points you can use

Make sure they relate the angle you have chosen

Make sure they are RANKED in order of most important

You can remove weak ones if you prefer, but at least have 5 key selling points

Check that you’ve added a caption text for under each image

Tips on writing Image Captions To maximize the impact of your listicle, here are four quick tips for prompting the AI to write high-converting image captions: Upload the Final Image and Section Context: Always provide the specific render alongside a screenshot of the entire section, including the headline and body copy. This ensures the AI understands the visual and narrative context it needs to support. Enforce a Character Limit: Explicitly tell the AI to keep the caption under 150 characters. This keeps the text scannable and ensures it fits the visual container of your layout. Treat the Caption as a "Mini-Ad": Because captions receive 3-5x more readership than body copy, they must do more than describe; they should "resell" the user on the core benefit of that section. Align Visuals with the Primary Promise: Instruct the AI to bridge the gap between the image and the text, reinforcing the specific "mechanism of action" or proof point shown. For example, instead of "Pink MimiBelt," the caption should read: "MimiBelt safely anchors the belt to the thighs, keeping all crash force away from the baby bump".

Generate the copy for your offer section

⁠

A guide on how to setup discount codes on Shopify⁠

⁠

Make sure the correct discount code is used in the listicle offer section

Generate the copy for the FAQ section

Generate / upload the images for each section

Use our

figma template⁠

for the correct size dimensions for the image assets

Export at 3-4x resolution to ensure images are not blurry

⁠

Compress images using a tool like this⁠

to optimize loading speed

⁠

Important tips on generating images: To get the most professional results for your listicle, use Gemini, as its natively integrated image model is specifically optimized for following complex design instructions. For the best outcome, follow these three rules: Always Upload a High-Definition Reference: You must provide a high-quality, clear image of your product. Without a visual baseline, the AI cannot accurately replicate your product's specific branding, textures, or mechanics. Define Your Shot Type & Context: Be explicit about whether you need a Close-up Shot (to show detail/durability) or a Lifestyle Shot (to show the product in use, like in a car interior), etc... Giving the AI a descriptive example of the setting helps it place your product naturally. Specify Your Layout Ratio: Ensure your images fit the listicle template by telling the AI the exact dimensions or aspect ratio you need. For this listicle template, use a 2:3 landscape ratio for hero section and step images. Generate One Image at a Time: Do not attempt to generate a "Dual Image" (side-by-side split) in a single prompt. For maximum control, generate each side of the comparison separately, then manually combine them into a split-screen graphic afterward. This prevents the AI from blending the two concepts and ensures both "Before" and "After" shots remain crisp and accurate to your brand.

Update the branding and fonts (it shouldn’t look identical to your own branding, but don’t go too crazy either)

Hide Shopify header/footer (very important)

Right click on the page to Edit Page Settings

⁠

Click on “Shopify Theme”

⁠

We recommend choosing to Hide Announcement Bar if you don’t want that visible

We recommend choosing to either Hide Header/Footer or just to Show Footer Only

SEO information

Right click on the page to Edit Page Settings

⁠

Click on the “General” tab

⁠

Simplify the URL slug

Add a relevant page title (this will be visible in browser tab)

Add a SEO description

Set a featured image (use the same as the one in the hero section)

You can enable or disable “Show page in SEO” — this is optional

QAing the page

Test every CTA button and ensure it redirects to the correct product page.

Confirm all links on the page work and open the intended destination.

Verify the discount code works correctly and is properly configured in Shopify.

Complete a full test order to confirm checkout flow, pricing, shipping, and confirmation emails function properly.

Ensure headlines clearly communicate all key selling points when read on their own.

Confirm each headline aligns with and accurately represents the section beneath it.

Make sure captions directly support and explain the image they are paired with.

Ensure images reinforce the sales message and are not decorative without purpose.

Review all body copy for clarity, persuasion, grammar, and flow.

Verify the offer details are accurate, compelling, and consistent with Shopify settings.

Check that FAQs are clear, objection-handling focused, and properly formatted.

Confirm the correct author name is displayed in the hero section.

Verify the published date is accurate and formatted correctly.

Check spelling, punctuation, spacing, and formatting consistency across the page.

Ensure mobile responsiveness is clean with proper spacing, font sizing, and button visibility.

Check desktop responsiveness for layout consistency and visual hierarchy.

Confirm page load speed is acceptable and no assets are broken.

(pagespeed checker)⁠

⁠

Publish the page in Replo and re-check all functionality on the live version.

Review the live page on your own mobile device.

Review the live page on your own desktop device.

Have at least one additional team member complete a full QA review before traffic is sent.

Do a test order

Publish the page and run your traffic

Optional bonus steps

Optional: Come up with 3 hero section angles to test and split-test them (Isolate the winner after 10,000 sessions)

Optional: Do a V2 refinement of all of the copy and image assets after 7 days of running ads

Optional: Duplicate the entire page and create a new listicle page from a different author perspective and angle (Expert, Specific Customer Case Study, etc)…

Designing a listicle page from scratch?

Follow our SOPs here, if you want to design and develop a listicle page from scratch:

⁠

Design SOP: Building a hybrid listicle page⁠

⁠

Development SOP: Building a hybrid listicle page⁠

⁠

QA SOP: Building a hybrid listicle page⁠

⁠

Frequently asked questions

Q. Should you use a custom domain?

You can if you want, but it’s extra work for little ROI.

There’s not much harm at all keeping the listicle on your root domain. Only a very small amount of shoppers will ever look at the URL properly.

Q. How can you guarantee compliance?

Depending on the market you are in, your product, and your advertising strategy, you may need to add a terms & conditions section to the page.

⁠

We’ve added an advertising disclaimer at the bottom of the page in the FAQ section — but we highly advise you to study the laws and regulations of your industry as you may need to provide further context and disclaimers in order to fully comply.

⁠

ConversionAlchemy.com⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.