Build a Listicle

Step 1: Start Your Listicle with a Prompt

Starter prompt

The more info and context you add here, the better the output will be.

Create a landing page listicle inspired by https://theturmeric.co/pages/7-reasons-why, titled [‘5 Reasons Why Our Vitamin Gummies Are Better Than Capsules.’]
Target [busy adults looking for easy wellness solutions]. Use a [friendly, trustworthy tone].

Step 2: Customize Your Copy and Images

Don’t feel locked into Replo’s first draft. Use it as a starting point, but personalize the content to be on-brand and relevant to your business.

Update your listicle content

Replace the generated content with your actual reasons, headlines, and supporting copy.

Please replace the content with the following:

Listicle title: [Catchy listicle title]

Reason 1: [Headline or short statement]
Supporting copy: [2-3 sentences explaining this point]

Reason 2: [Headline or short statement]
Supporting copy: [2-3 sentences explaining this point]

Reason 3: [Headline or short statement]
Supporting copy: [2-3 sentences explaining this point]

Add your images

Replace placeholder images with your actual product photography, lifestyle shots, or supporting visuals.

Update the images:

Reason 1 image: https://yourstore.com/images/reason1.png
Reason 2 image: https://yourstore.com/images/reason2.png
Reason 3 image: https://yourstore.com/images/reason3.png

Use high-quality images that visually support each reason. Product shots work well for feature comparisons, while lifestyle images work better for benefit-driven listicles.

Step 3: Personalize the Design

The output will incorporate your brand’s font and color styles automatically. But if you have a specific design vision, you can customize it further.

From a URL
From a Screenshot
From a Prompt

You can reference any URL, whether it’s your own site or inspiration you found online.How to:

Can you replicate the styles from [input URL] and apply it to my page?

I like how it uses [dashed borders, bold headlines, card layouts, etc.]

This works well when you want to match an existing page style or apply design patterns from successful examples.

Drop an image to show the exact visual direction you want.How to:

Can you apply the styles from this image to my page?

I like how it uses [dashed borders, bold headlines, color scheme, etc.]

This is especially useful when you have a design comp or specific visual reference you want to match.

Use natural language to describe the visual feel you want your page to have. Be specific about design elements and styles you want to include.Example:

I want my page to [feel less flat and incorporate more visual design elements].

Use [rounded corners, subtle shadows, and gradient backgrounds] to make the sections more distinct.

Make the headlines [larger and bolder] to improve scannability.

The more specific you are about design elements, the better the output. Instead of “make it modern,” say “use clean sans-serif fonts, generous white space, and subtle shadows.”

Step 4: Set Up Your Links

Use select mode to select buttons on the page. Once your button is selected, enter the following prompt:

This button should redirect to [Enter URL].

Or if you want all the buttons on this page to redirect to the same URL, enter the following prompt:

Update all the buttons on this page to redirect to [enter URL].

Step 5: Publish

Once you’re happy with the design and content, click Publish in the top-right corner of the Site Builder:

Publish to your Replo domain: every workspace gets a default domain (e.g. yourshop.replosites.com). This is great for quick testing or sharing preview links.
Add a custom domain: connect your own store domain to publish live pages directly under your brand’s URL.

Read more about Publishing and Custom Domains. Once you’ve selected where to publish, click Publish again to make your listicle live.

Walkthroughs

Introduction

Principles

Templates

Ecommerce

Build a Listicle

Step 1: Start Your Listicle with a Prompt

Starter prompt

Step 2: Customize Your Copy and Images

Step 3: Personalize the Design

Step 4: Set Up Your Links

Step 5: Publish

Listicle Examples

​Step 1: Start Your Listicle with a Prompt

​Starter prompt

​Step 2: Customize Your Copy and Images

​Step 3: Personalize the Design

​Step 4: Set Up Your Links

​Step 5: Publish

​Listicle Examples

Step 1: Start Your Listicle with a Prompt

Starter prompt

Step 2: Customize Your Copy and Images

Step 3: Personalize the Design

Step 4: Set Up Your Links

Step 5: Publish

Listicle Examples