Build a Landing Page with GemPages

Build a conversion-optimized product landing page on Shopify with GemPages.

Introduction

30 Second Summary

Think about the last time you bought something online after scrolling a product page that just clicked. Every section, badge, and button was intentionally placed to guide you toward "Add to Cart."

In this project, you will build a high-converting product landing page for "Yerba Magic" yerba mate tea using Shopify and GemPages V7. You'll follow a proven direct-to-consumer funnel framework with 20+ conversion-optimized sections designed to turn visitors into buyers.

What You'll Build

A mobile-first optimized product landing page built with GemPages V7 on Shopify, featuring image carousels, accordion FAQs, comparison charts, social proof sections, and bundle offers.

By the end of this project, you'll have:

A live Shopify store with the Yerba Magic product, variants, and images fully configured.
A complete GemPages landing page with a DTC funnel structure including urgency elements, social proof, objection handling, comparison charts, and FAQ sections.
Kaching Bundle quantity breaks configured and displayed directly on your product page.
Secret Mission: A sticky mobile Add-to-Cart bar and custom CSS micro-interactions for a polished, professional finish.

Are there any prerequisites?

None. This project walks you through everything from creating your Shopify account to publishing your finished page. All you need is a web browser and a willingness to build.

Set Up Shopify, GemPages, and Kaching Bundle

Before you can build a high-converting landing page, you need a foundation. That means a live Shopify store with your product ready to go, plus the page-building tools installed.

In this step, you will create a Shopify free trial store, add the Yerba Magic product with all its variants and images, then install GemPages V7 and Kaching Bundle so you have everything wired up for building.

In this step, get ready to:

Create your Shopify store and configure the Yerba Magic product with variants and images.
Install GemPages and create a blank Product-type page connected to your product.
Install Kaching Bundle and configure quantity break deals.

Create your Shopify store and add the Yerba Magic product

Your Shopify store is where all your product data lives. GemPages pulls product information (title, price, images, variants) directly from Shopify, so the product must exist first.

Open your browser and go to shopify.com.
Click Start free trial and follow the signup wizard to create your store.
Complete any prompts about your store name and business type.

What about the Shopify trial?

Shopify offers 3 days free, then $1/month for 3 months. You do not need to enter payment details to start the trial. During the free trial, your store is automatically password-protected.

Once your Shopify Admin dashboard loads, you will create the Yerba Magic product.

In the left sidebar of Shopify Admin, click Products.
Click Add product in the top right corner.
In the Title field, enter Yerba Magic - Yerba Mate Tea Instant Powder Super Drink.
In the Description field, write a product description covering the key benefits: nootropics, prebiotics, probiotics, clean energy, mental clarity, gut wellness, low sugar, and natural caffeine.
Scroll down to the Media section and upload your product images: product shot with money-back guarantee badge, before/after images, testimonial image, and ingredients list image.
Click Save to create the product.

What images should I use?

Use the product images provided in your trial task brief. If you do not have specific images yet, use placeholder images that match the descriptions. You can replace them later.

Now add variants so customers can choose between pack sizes.

On the product page you just saved, scroll down to the Variants section.
Click + Add options like size or color.
In the Option name field, enter Size.
In the Option values section, enter 1-Pack, 3-Pack, and 6-Pack as three separate values.
Click Done.
Set pricing for each variant (e.g., $29.99 for 1-Pack, $79.99 for 3-Pack, $149.99 for 6-Pack) using the variant fields that appear.
Click Save.

Why create variants?

Variants let customers select between pack sizes directly on the product page. GemPages will pull these variant options automatically when you connect the product to your landing page.

Finally, confirm the store password so you can share it with the evaluator.

In the left sidebar, click Online Store.
Click Preferences.
Scroll to the Store access section. You will see Password protection is already enabled (this is automatic during the free trial).
Note the password shown in the Password field. You can change it to something memorable if you like.
Click Save if you made any changes.

Keep your password handy

You will share this store password along with your store URL when you submit your trial task. Save it somewhere you can find it later.

Install GemPages and create your landing page

GemPages is the drag-and-drop page builder you will use to design the landing page. By choosing a "Product" page type, GemPages automatically connects to your Shopify product data.

In Shopify Admin, click Apps in the left sidebar.
Click Shopify App Store (or the search bar if shown).
Search for GemPages and click on the GemPages app result.
Click Install and approve any permissions prompts.

What does the GemPages free plan include?

The free plan allows 1 published page and unlimited drafts. It includes the drag-and-drop builder, responsive design tools, and GemAI Image-to-Layout (60 sections). This is perfect for building a single landing page.

Now create a blank page connected to your product.

Once GemPages finishes installing, open the GemPages Dashboard (you may be redirected automatically, or find it under Apps in Shopify Admin).
In the GemPages Dashboard, click Pages in the left menu.
Click Create New Page.
You will see three options. Select Start from Scratch and choose Use as product page (this sets the page type to Product).
The GemPages V7 Editor opens with a blank canvas.

Connect the Yerba Magic product to this page so GemPages can pull in your product data.

In the GemPages Editor top bar, click the 0 Product Assigned button.
Select Apply to selected products.
Find and select your Yerba Magic product from the list.
Click Confirm.

What does assigning a product do?

Assigning a product tells GemPages which Shopify product data to use on this page. Once assigned, any Product elements you add (title, price, images, variants, Add to Cart button) will automatically pull data from your Yerba Magic product.

Take a moment to familiarize yourself with the GemPages V7 editor layout.

The left sidebar is your elements panel where you drag components onto the canvas.
The top bar contains device preview toggles (desktop, tablet, mobile) and save/publish controls.
The right panel shows settings for whatever element you have selected.

Don't see the GemPages Dashboard?

If GemPages does not appear after installation, go back to Shopify Admin, click Apps in the left sidebar, and look for GemPages in your installed apps list. Click it to open the dashboard.

Help me find GemPages in my Shopify admin.

Install Kaching Bundle and configure quantity breaks

Kaching Bundle creates volume discount offers that display directly on your product section. When a customer sees "Buy 2, Save 10%" it increases average order value without extra design work.

In Shopify Admin, click Apps in the left sidebar.
Click Shopify App Store.
Search for Kaching Bundle and click on the result.
Click Install (the app is free to install and free for development/trial stores).

Now configure a quantity break deal for Yerba Magic.

Once Kaching Bundle opens, click Add new deal.
Choose a quantity break template (e.g., "Volume Discount" or similar).
Select the Yerba Magic product as the target product.
Configure two quantity break tiers: Buy 2 items, Save 10%. Buy 3 items, Save 20%.
In the styling settings, adjust colors to match your brand: use green or earth tones for a wellness product feel.
Click Save to activate the deal.

How does Kaching integrate with GemPages?

Kaching Bundle uses Shopify's native app blocks (Online Store 2.0). It injects automatically into any product section that has the Yerba Magic product connected. You do not need to manually add it to your GemPages layout.

When you create a Product-type page in GemPages and add a product section, the Kaching widget will render automatically within that section.

Kaching Bundle not showing in your product section?

Make sure the deal is set to Active and the correct product is selected. Kaching only displays on pages with a product section connected to the matching Shopify product.

Help me troubleshoot my Kaching Bundle deal not appearing.

Your foundation is set. You have a live Shopify store with the Yerba Magic product ready, GemPages open with a blank product page, and Kaching Bundle configured to inject volume discounts. Next up, you will build the product hero section that visitors see above the fold.

Build the Product Hero

Your Shopify store is live, GemPages is installed, and Kaching Bundle is ready to go. Now it's time to build the most important part of your landing page: the above-the-fold hero section.

The hero is the first thing a visitor sees before scrolling. It needs to instantly communicate what the product is, why it matters, and make taking action effortless.

In this step, get ready to:

Build an announcement banner with urgency-driving countdown timer.
Set up a product image carousel and info hierarchy.
Add the bundle offer, Add to Cart button, and trust badges.

Add the announcement banner and header

The announcement banner creates urgency with a limited-time offer and countdown. This sits at the very top of the page so every visitor sees it immediately.

In the GemPages editor, click Add blank section to add a new section at the top of the page.
From the left sidebar, drag a Row element into the new section.
Click on the section to open its settings panel on the left.
Under Background, set the background color to a dark green (hex code #1B5E20 or similar brand color).
Toggle Full Width on so the banner stretches edge to edge.
Drag a Text element into the Row.
Enter the sale text: SUMMER SALE: 25% OFF + FREE SHIPPING | Code: YERBA25.
Style the text as white, centered, and bold so it stands out against the dark background.
From the left sidebar, search for Countdown Timer and drag it next to the text inside the same Row.
Configure the timer with a future end date (e.g., 3 days from today) to create urgency.

Why start with a countdown timer?

Urgency is one of the most powerful CRO techniques in e-commerce. A ticking countdown timer triggers fear of missing out, encouraging visitors to act now instead of bouncing.

Now add the header section below the banner.

Click Add blank section to add another section below the announcement banner.
Drag an Image element into this section for your store logo.
Upload or select a logo image, then center it and keep it small (around 120-150px wide).
Ensure both sections are set to full-width and check mobile responsiveness by clicking the mobile icon in the top bar.

Check mobile after every section

Click the mobile device icon in the GemPages top bar after building each section. This ensures your text remains readable and elements do not overflow on smaller screens.

Build the product image carousel and info column

The product hero section uses a two-column layout: images on the left for visual impact, and product details on the right for quick scanning. On mobile, these columns stack vertically so the images appear first.

Click Add blank section to create a new section below the header.
From the left sidebar, drag a Row element into the section.
In the Row's Settings tab, select the 2-column layout.
Verify the mobile layout shows columns stacked (this is the default responsive behavior).

Now set up the image carousel in the left column.

In the left column, drag a Carousel element from the left sidebar.
Click on the Carousel to open its settings.
Configure 5 slides with these images in order:
Set Items per slide to 1 so each image fills the carousel frame.
Enable Dots navigation under the carousel navigation settings.
Enable swipe gestures so mobile users can swipe between slides.

Why 5 specific slides in this order?

Each slide serves a conversion purpose. The first slide shows the product with a trust badge overlay. Before/after images demonstrate results. The testimonial image provides social proof. The ingredients image addresses the "what's in it" objection.

Now populate the right column with product information.

In the right column, drag a Heading element and enter the product title.
Below the heading, add a Text element for the star rating display (e.g., five star icons plus a review count like "4.9 (2,847 reviews)").
Below the stars, drag an Item List element from the left sidebar.
Add 4-5 benefit items with checkmark icons: clean energy, gut health, mental clarity, low sugar, natural caffeine.
Below the Item List, drag the Product Variants & Swatches element from the left sidebar into the right column.
This element must be nested inside a Product Element to function. Since your page is a Product page type connected to Yerba Magic, the variants (1-Pack, 3-Pack, 6-Pack) appear automatically.
In the element settings, set Product source to Separated so each pack size displays as a distinct selectable option.

What is the Product Variants & Swatches element?

This GemPages element pulls variant data directly from your Shopify product. Visitors can select between your 1-Pack, 3-Pack, and 6-Pack options without leaving the page. The price updates dynamically based on their selection.

Add the bundle offer, Add to Cart button, and trust badges

The final piece of the hero section drives the actual purchase. A bundle offer, prominent button, and trust reassurance work together to reduce friction at the decision point.

Below the variant selector in the right column, the Kaching Bundle widget renders automatically because your page is a Product page type with Kaching installed.
Preview the page to confirm the quantity break offer (Buy 2 Save 10%, Buy 3 Save 20%) appears below the variants.
If the Kaching widget does not appear, switch to Preview mode. App blocks often render only in preview or on the live page, not inside the editor canvas.

Why does Kaching render automatically?

Kaching Bundle uses Shopify's Online Store 2.0 app blocks. When you create a Product page type in GemPages, Shopify injects installed app blocks into the product section automatically. No manual placement is needed.

Now add the Add to Cart button.

From the left sidebar, search for Product Add-to-Cart Button and drag it below the variant selector area in the right column.
Click the button to open its settings.
Under the Design tab, set the background color to a bright green (e.g., #4CAF50 or similar) for high contrast.
Increase the button height and padding so it is large and easy to tap on mobile.
Set the button text to bold white for maximum readability.

Finally, add the trust badges row below the button.

Below the Add to Cart button, drag a new Row element.
In the Row settings, select the 4-column layout.
In each column, add an Image element (icon) and a Text element (label) for these four badges:
Switch to mobile view using the device toggle in the top bar.
In the Row's mobile layout settings, change the layout to a 2-column arrangement so badges display as a 2x2 grid on smaller screens.
Click Save in the top right corner of the editor.

Why a 2x2 grid on mobile?

Four items in a single row become unreadable on a phone screen. A 2x2 grid keeps icons and text large enough to read while still fitting above the fold.

Elements not showing in preview?

Make sure each element is dropped inside the correct column. Check the Layer Tree on the left to confirm element nesting. If the Kaching widget is missing, it will appear on the live/preview URL. App blocks do not always render in the editor canvas.

If the Product Variants element shows an error, confirm it is nested inside a Product Element (required for product child elements to function).

Help me troubleshoot why my GemPages product hero elements are not displaying correctly.

Your above-the-fold hero is complete. Next up, you'll build the objection-handling and social proof sections that keep visitors scrolling deeper into the funnel.

Add Objection Handling and Social Proof

Your hero section grabs attention, but visitors scrolling past the fold still have doubts. They wonder whether Yerba Magic is really different from regular mate, whether it will agree with their stomach, and whether the energy actually lasts.

In this step, you will address those objections head-on and then reinforce confidence with social proof. By the time a visitor reaches the bottom of these sections, their hesitation should be replaced with trust.

In this step, get ready to:

Build a collapsible Accordion section that answers top buyer objections.
Add an "As Seen In" Marquee section with auto-scrolling publication logos.
Create a social proof section with a UGC video carousel.

Add collapsible objection answers

Shoppers who hesitate usually have 2-3 specific concerns they need answered before buying. An accordion keeps these answers accessible without cluttering the page.

In the GemPages editor, click the + button below your trust badges section to add a new section.
In the left sidebar, expand the Content list category.
Drag the Accordion element into your new section.

What is an Accordion element?

An Accordion is a collapsible content block where visitors click a heading to reveal the answer underneath. It keeps your page clean by hiding detail until someone actively wants it.

Click the first accordion item to edit it.
Set the heading text to: How is this different from regular yerba mate?
In the body, type the answer: nootropics + pre/probiotics blend for cognitive and gut benefits, not just caffeine.
Click the second accordion item.
Set the heading text to: Will it upset my stomach?
In the body, type: probiotics and prebiotics support gut health, low acidity formula designed for sensitive stomachs.
Click the third accordion item.
Set the heading text to: How quickly will I feel the energy?
In the body, type: within 15-20 minutes, sustained for 4-6 hours without a crash.

Now configure the accordion so only one item opens at a time.

Click the Accordion element to select it (not an individual item).
In the settings panel on the right, find Expand Mode.
Select Single so only one answer is visible at a time.

Why Single mode?

Single mode prevents multiple answers from expanding simultaneously. This keeps the section compact and guides the visitor through one objection at a time, reducing cognitive overload.

Still in the settings panel, adjust the Border Radius to add rounded corners (try 8-12px).
Set the background color to match your brand palette (a light green or earth tone works well for a wellness product).
Choose a clear expand icon style (chevron or plus/minus) so visitors know each item is clickable.

Click the mobile preview toggle in the top bar to verify the accordion looks clean on smaller screens.

Accordion items not expanding in preview?

Make sure you clicked Preview mode (the eye icon in the top bar), not just the device toggle. The accordion only expands/collapses interactively in preview mode.

If the expand icons are missing, re-select the Accordion element and confirm the icon style is set in the settings panel.

Why isn't my GemPages accordion expanding in preview?

Add an "As Seen In" marquee slider

Publication logos create instant credibility by associating your product with trusted brands. A scrolling marquee displays them without taking up static real estate.

Click the + button below the Accordion section to add another new section.
Drag a Heading element into the section.
Set the heading text to: As Seen In
In the left sidebar, find the Marquee element (under Content elements).
Drag the Marquee element below the heading.

Add logo images or text items for each publication: Healthline, MindBodyGreen, Well+Good, and Men's Health.
Style the logos in monochrome (greyscale) for a sophisticated, understated look.
In the Marquee settings panel, confirm the direction is set to scroll left.
Adjust the speed to a smooth, readable pace (not too fast for visitors to register the names).

Why monochrome logos?

Greyscale logos prevent any single publication from visually dominating the section. The uniform style keeps the focus on the collective credibility rather than individual brand colors competing with your product palette.

No official logos? Use text placeholders

If you do not have permission to use actual publication logos, add the publication names as styled text elements inside the Marquee instead. Set them in a neutral grey colour with consistent font sizing.

Switch to mobile preview to confirm the marquee scrolls smoothly without any text getting cut off.

Build the social proof section with a UGC carousel

Customer testimonials in a video-style carousel format feel authentic and relatable. This section converts skeptics by showing real people who already love the product.

Add a new section below the Marquee section.
Drag a Heading element into the section.
Set the heading text to: Join 10,000+ Happy Customers
Style the heading bold and large so it stands out as a confidence statement.

Below the heading, drag a Carousel element into the section.
In the Carousel settings, set Items per slide to 1 for mobile and 3 for desktop.
Enable Navigation Arrows and Dots for easy browsing.

Now populate each carousel slide with UGC-style content.

Click the first carousel item to edit it.
Add a placeholder image or video embed representing a customer video testimonial.
Below the image, add a short quote text (e.g., "I replaced my morning coffee and never looked back.").
Below the quote, add a customer name (e.g., "Sarah K.").
Repeat for 3-4 total carousel items, varying the quote and name for each.

What makes UGC-style content effective?

User-Generated Content (UGC) feels less like marketing and more like a genuine recommendation from a friend. Even placeholder content should mimic the casual, authentic tone of real customer testimonials rather than polished brand copy.

Toggle the mobile preview in the top bar.
Swipe through the carousel to confirm only 1 slide shows at a time on mobile.
Switch to desktop view and verify 3 slides display side by side.
Click Save in the top right corner of the GemPages editor.

Carousel showing wrong number of items?

Double-check the Items per slide setting in the Carousel settings panel. The mobile and desktop values are configured separately using the device toggle.

If slides look cramped on mobile, ensure you set mobile to 1 item, not the desktop value of 3.

Help me fix my GemPages carousel items per slide settings

Do a final scroll-through of all three new sections in mobile preview. The accordion should expand and collapse, the marquee should scroll continuously, and the carousel should swipe smoothly between testimonials.

Your objection handling and social proof sections are locked in. Next, you will build out the selling points, ingredient details, and product usage visuals that turn curiosity into desire.

Add Selling Points, Ingredients, and GIF Sections

Your landing page now has social proof and objection handling working together to build trust. The next challenge is giving visitors concrete reasons to choose Yerba Magic over alternatives.

In this step, you'll build three content-rich sections that sell the product's benefits visually. You'll use Carousel elements for swipeable selling points and ingredients, plus image rows that show the product in action.

In this step, get ready to:

Build a "5 Reasons to Switch" carousel with swipeable selling point slides.
Add product usage GIF and image sections showing how to prepare and enjoy Yerba Magic.
Create an ingredient benefits carousel with autoplay highlighting key ingredients.

Build the "5 Reasons Why" selling points slider

A selling points carousel gives visitors bite-sized reasons to buy without overwhelming them with a wall of text. Each slide delivers one clear benefit they can swipe through at their own pace.

In the GemPages editor, click the blue + icon below your Social Proof section to add a new section.
Drag a Heading element into the new section.
Set the heading text to: 5 Reasons to Switch to Yerba Magic.
Below the heading, drag a Carousel element from the left sidebar.
Configure the Carousel to show 1 item per slide on mobile and 3 items per slide on desktop.

Now populate each of the 5 carousel slides. Each slide needs three elements stacked vertically: an icon or illustration image at top, a bold reason headline, and 1-2 sentences of supporting copy.

Click the first carousel slide to select it.
Drag an Image element into the slide for the icon or illustration.
Below it, drag a Heading element and set it to: Clean Energy Without the Crash.
Add a Text element below with 1-2 sentences explaining how yerba mate provides sustained energy from natural caffeine.
Repeat for the remaining 4 slides with these headlines:

Slide 2: Gut Health in Every Sip (probiotics and prebiotics support digestive wellness).
Slide 3: Mental Clarity from Nootropics (Lion's Mane and L-Theanine boost cognitive function).
Slide 4: Low Sugar Natural Ingredients (no artificial sweeteners or fillers).
Slide 5: Replaces Coffee and Energy Drinks (a single scoop replaces your daily coffee run).

In the Carousel settings on the right panel, enable Dots navigation and swipe gestures.
Style the section background and text with your brand colors (green and earth tones).

Why a Carousel instead of a list?

On mobile, vertical lists push content far down the page and cause visitors to abandon. A swipeable Carousel keeps benefits compact and interactive. GemPages Carousels support up to 12 items per slide, so 5 selling points fit comfortably.

Click the mobile preview toggle in the top bar to verify your carousel shows 1 slide at a time and swipes smoothly.

Carousel not showing all 5 slides?

Check that each slide has content inside it. Empty slides are auto-hidden by GemPages. Also confirm the Items per slide setting matches the device you're previewing (1 for mobile, 3 for desktop).

Help me troubleshoot my GemPages Carousel not displaying all slides

Add product usage GIF and image sections

Showing the product in use helps visitors picture themselves using it. These sections bridge the gap between reading about benefits and imagining the daily ritual.

Add a new section below your 5 Reasons carousel.
Drag a full-width Image element into the section.
Upload a GIF or image showing the product being used (mixing powder into water, stirring, drinking). If you don't have a GIF, a static product-in-use image works.
Set the image to full width in the element's Size settings.

Below the GIF, you'll add a step-by-step preparation row that breaks the process into 3 simple actions.

Below the full-width image, drag a Row element and select the 3-column layout.
In the first column, add an Image element (scoop image) and a Text element with caption: Step 1: Scoop.
In the second column, add an image (mixing) and text: Step 2: Mix.
In the third column, add an image (enjoying) and text: Step 3: Enjoy.

What does the 3-column Row do here?

The Row element in GemPages V7 supports up to 6 columns. Using 3 columns for a step-by-step visual creates a natural left-to-right flow on desktop. On mobile, the columns stack vertically so each step appears in sequence.

Now add a before/after comparison below the preparation steps to show the transformation.

Below the 3-column Row, drag another Row element and select the 2-column layout.
In the left column, add an image and text showing: Morning without Yerba Magic (e.g., groggy, reaching for coffee).
In the right column, add an image and text showing: Morning with Yerba Magic (e.g., energized, focused, productive).
Use contrasting styling between the two columns (muted tones on the left, vibrant brand colors on the right) to emphasize the transformation.

Switch to mobile preview and confirm all images are properly sized and not overflowing horizontally.
Verify the 3-column Row stacks into a vertical layout on mobile.

Images overflowing on mobile?

Select the image element and check its width is set to 100% (not a fixed pixel value). Fixed widths cause horizontal scroll on narrow screens. Also check the Row's Responsive settings to ensure columns stack on mobile.

Help me fix images overflowing on mobile in GemPages

Create the ingredient benefits slider

Health-conscious buyers want to know exactly what they're putting in their body. An ingredient carousel highlights each key ingredient individually, giving it space to shine rather than burying it in a paragraph.

Add a new section below your product usage section.
Drag a Heading element and set the text to: What's Inside Every Scoop.
Below the heading, drag a Carousel element from the left sidebar.

Configure 5 slides, one for each key ingredient. Each slide contains an ingredient image, the ingredient name as a heading, and a single line describing the benefit.

Click the first slide and add an Image element (ingredient photo or illustration).
Below the image, add a Heading element: Yerba Mate Extract.
Add a Text element with the benefit: natural caffeine and antioxidants for clean sustained energy.
Create the remaining 4 slides with these ingredients:

Slide 2: Lion's Mane (cognitive function nootropic for focus and memory).
Slide 3: Probiotics Blend (gut microbiome support for digestive wellness).
Slide 4: Prebiotic Fiber (feeds good bacteria for long-term gut health).
Slide 5: L-Theanine (calm focus without jitters, balances caffeine).

In the Carousel settings panel on the right, enable Autoplay.
Set the autoplay interval to 4 seconds.
Enable Dots navigation so visitors can jump between ingredients.
Style each slide with consistent brand colors and ensure ingredient names are large enough to read on mobile.

Why autoplay for ingredients?

Autoplay draws attention to the carousel without requiring visitor interaction. At 4-second intervals, visitors absorb each ingredient's benefit before the next one appears. They can still swipe manually if they want to move faster.

Click Save in the top right corner of the GemPages editor.
Switch to mobile preview and swipe through each carousel section to confirm they work.
Check that ingredient cards are legible with clear visual hierarchy (image, name, then benefit).
Verify the autoplay cycles through all 5 ingredient slides.

Autoplay not cycling through slides?

Autoplay only works in Preview mode, not in the editor canvas. Click Preview in the top bar to see the live behavior. Also confirm the interval field has a number value (4) and that the autoplay toggle is switched on.

Help me get autoplay working on my GemPages Carousel

Section count check

GemPages allows up to 25 sections per template. After this step, you've used roughly 10-12 sections. You still have room for the authority, comparisons, and closing sections coming next.

Your page now educates visitors on why Yerba Magic works, how to use it, and what's inside. Next up, you'll add authority sections with comparisons and celebrity endorsements that close the sale.

Add Authority, Comparisons, and Closing Sections

Your page already walks visitors through product benefits and ingredients. Now it's time to close the deal.

Visitors who scroll past your selling points are interested but not yet convinced. Authority signals (endorsements, comparisons) and closing elements (FAQ, guarantee) address the final hesitations that stand between interest and purchase.

In this step, get ready to:

Build celebrity endorsement and product comparison sections.
Add pricing comparisons and a reviews carousel.
Create a FAQ accordion, money-back guarantee, and publish the page.

Add celebrity endorsements and a solutions comparison chart

Third-party endorsements and side-by-side comparisons give visitors the external validation they need to justify a purchase decision.

In the GemPages editor, click the + icon below your ingredient carousel to add a new section.
Drag a Carousel element into the section (or use a 2-column Row if you prefer a static layout).
For each slide or column, add an Image element for the endorser photo.
Below each image, add a Text element with the endorser's name and a short quote.
Create 2-3 endorsement slides featuring health or wellness influencers relevant to the yerba mate niche.

Now you'll build a comparison chart that visually positions Yerba Magic against competitors.

Add a new section below the endorsements.
Add a Text element as a heading with the text Why Yerba Magic?.
Drag a Row element below the heading and set it to 5 columns in the Row settings.

Why a Row instead of a table?

GemPages does not have a dedicated comparison table element. A multi-column Row (supporting up to 6 columns in V7) with text and icons achieves the same visual result while giving you full control over styling each column independently.

In Column 1, add Text elements listing the feature names vertically: Energy, Gut Health, No Crash, Low Sugar, Nootropics.
Label Columns 2-5 at the top: Yerba Magic, Coffee, Energy Drinks, Other Mate Brands.
Under the Yerba Magic column, add checkmark icons for every feature row.
Under the competitor columns, add X icons where the feature does not apply (Coffee gets X for Gut Health, No Crash, and Nootropics, for example).
Select the Yerba Magic column and give it a highlighted background color (use a light green or your brand accent color) to draw attention.

Keep it scannable on mobile

Switch to mobile preview using the device toggle in the top bar. If 5 columns feel cramped, consider reducing to 3 columns on mobile (Yerba Magic vs Coffee vs Energy Drinks) and hiding the other columns using responsive settings.

Add a pricing comparison chart and reviews slider

Price-per-serving math makes the value obvious at a glance. Pairing it with verified reviews removes the last layer of skepticism.

Add a new section below the solutions comparison chart.
Drag a Row element and set it to 3 columns.
In Column 1, add a Text element with: Coffee Shop: $5/day = $150/mo.
In Column 2, add: Energy Drinks: $3/day = $90/mo.
In Column 3, add: Yerba Magic: $1.50/serving = $45/mo.
Select Column 3 and apply a highlighted background color (matching the brand accent you used in the comparison chart above) to make Yerba Magic stand out.

Now add a reviews carousel below the pricing section.

Add a new section and drag a Carousel element into it.
For each carousel slide, add: a customer photo (Image element), a 5-star rating (text or image), review text (Text element), and a Verified badge.
Create 3-4 review slides with realistic placeholder content.
In the Carousel settings, set Items per slide to 1 for mobile.
Enable Swipe gestures and Dots navigation.

Why 1 review per slide on mobile?

A single review per slide gives each testimonial room to breathe. Visitors can focus on one story at a time, which feels more authentic than a cramped grid of tiny text.

Build the FAQ accordion, money-back guarantee, and publish

The final sections address lingering questions and remove risk. A strong guarantee paired with a clear CTA gives hesitant visitors one last reason to click.

Add a new section below the reviews carousel.
Add a Text element as a heading with: Frequently Asked Questions.
From the Content list section in the left sidebar, drag an Accordion element below the heading.

Where is the Accordion element?

In GemPages V7, the Accordion element is located under the Content list section in the left sidebar. It supports Single mode (one item open at a time), Multiple mode, and Auto expand.

Create 5-6 FAQ items covering: shipping times, return policy, ingredients sourcing, subscription options, how to prepare, and caffeine content.
Set the Expand Mode to Single so only one answer shows at a time.
Style the accordion items with your brand colors and clear expand/collapse icons.

Now add the final closing section with your money-back guarantee.

Add a new section below the FAQ.
Set the section layout to centered alignment.
Drag an Image element and upload or select a guarantee badge image.
Below the badge, add a Text element with the heading: 30-Day 100% Money-Back Guarantee.
Add another Text element below with a supporting paragraph explaining the risk-free promise.
Drag a Button element below the text.
Set the button text to Try Yerba Magic Risk-Free and link it to your add-to-cart action.
Style the button with a prominent contrasting color (matching your main ATC button from the hero section).

Your page is complete. Time to publish and verify.

Click Save in the top right of the GemPages editor.
Click Publish to make the page live on your Shopify store.

What about the 1 published page limit?

The GemPages free plan allows 1 published page. Since your entire landing page is a single page, this is all you need. You can create unlimited drafts but only have one published at a time.

Open your Shopify store URL in a new browser tab.
Enter your store password when prompted.
Navigate to your published Yerba Magic page.
Switch to mobile view using your browser's developer tools (press Cmd+Option+I on macOS or Ctrl+Shift+I on Windows, then click the device toggle icon).
Scroll through the entire page from top to bottom, confirming every section loads.
Test that all carousels swipe, both accordions expand and collapse, and the page scrolls smoothly with no horizontal overflow.
Copy your full store URL with the password. This is your shareable submission link.

Page not loading or sections missing?

Make sure you clicked both Save and Publish in GemPages. Saving alone does not make the page live.

If carousels are not swiping, check that you enabled swipe gestures in the Carousel settings panel. If you see horizontal overflow on mobile, look for elements wider than the screen (often images without max-width constraints or rows with fixed pixel widths).

Help me troubleshoot my GemPages page not displaying correctly after publishing.

Secret mission

Sticky Mobile CTA Bar and Custom CSS Polish

This mission elevates your submission from competent to impressive by adding interaction details that show you understand mobile UX deeply. You will add a sticky Add-to-Cart bar that follows mobile users as they scroll, apply hover micro-interactions to trust badges, and add fade-in animations to section headings.

Clean Up Your Resources

Your Yerba Magic landing page is complete and published on a live Shopify store URL. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Cost warning

Your Shopify free trial lasts 3 days. After that, you'll be charged $1/month for 3 months if you don't cancel. GemPages and Kaching Bundle are free on trial stores, so they won't incur charges.

If you only need the store URL long enough for your trial task submission, consider letting the trial expire naturally or cancelling before the 3 days end.

Resources you used:

Shopify store (free trial: 3 days free, then $1/month for 3 months).
GemPages app (free plan, no ongoing cost).
Kaching Bundle app (free for development/trial stores).

Keep everything running

No action needed. Choose this if you're still waiting for feedback on your trial task submission and need the live URL to remain accessible.

Your Shopify free trial continues for up to 3 days. After that, the promotional rate of $1/month applies for 3 months.
GemPages stays on the free plan indefinitely. Your published page remains live.
Kaching Bundle remains free on your trial store.
Your password-protected storefront URL keeps working for the evaluator.

Pause - I'll come back to this later

After receiving feedback on your trial task, you can let the Shopify trial expire naturally. The store freezes, your data is preserved, and you won't be charged.

If you haven't chosen a paid plan by the end of your 3-day trial, the store is automatically frozen with no charge. Your products, pages, and settings are preserved.
If you did select a paid plan during the trial, you can cancel it from your Shopify admin. Go to Settings, then Plan, and click Cancel plan. Select the Pause and build option and click Switch to Pause and build.
GemPages and Kaching Bundle remain installed but inactive while the store is paused.

Delete - I don't want to use this again

Remove all project resources if you no longer need the store. This cancels your Shopify subscription and removes access to the admin.

In Shopify Admin, go to Settings, then click Plan.
Click Cancel trial (if still on the free trial) or Cancel plan (if on a paid plan).
Select Cancel my plan and uninstall all apps, then click Continue. All apps (GemPages and Kaching Bundle) are automatically uninstalled at cancellation.
Select a reason for the deactivation, click Continue, enter your password, and confirm by clicking Cancel trial or Cancel plan.
You'll receive a confirmation email. Your store data is preserved for up to 2 years if you ever want to reactivate.

That's a Wrap!

Nice work! You just built a complete, conversion-optimized product landing page for Yerba Magic using Shopify and GemPages V7.

You've learned how to:

Built a 20+ section landing page following a proven DTC funnel framework with Carousel, Accordion, Marquee, Countdown Timer, comparison charts, FAQ, and social proof sections.
Set up a Shopify store from scratch with product variants, images, and Kaching Bundle quantity break upsells integrated directly into the page.
Delivered a shareable password-protected URL with mobile-first responsive design verified across every section of the page.
Secret Mission: Added a sticky mobile CTA bar and custom CSS micro-interactions for a polished, professional finish.

Ready to quiz yourself?