Learn Shopify 10 Best AI Listicle Generators for Blog Content & DTC Landing Pages

10 Best AI Listicle Generators for Blog Content & DTC Landing Pages

GemPages Team
Updated:
13 minutes read
ai listicle generator

Listicles do double duty in ecommerce. They rank on Google as blog posts, and they pre-sell cold ad traffic as "7 reasons why" pages. An AI listicle generator can draft either one in minutes, but most tools only handle half the job.

Some write the article and stop there. Others act as a DTC listicle generator that builds the full page, with images, CTAs, and a product section. Pick the wrong type, and you'll still be designing pages by hand.

To help you choose, we tested 10 tools with the same briefs, from Shopify page builders to SEO writers. We ran every tool through a real listicle brief, then scored the output on 8 criteria. Each tool got a brief that matches its type.

Ready to dive in? Let's get started.

Selling on Shopify for only $1
Start with 3-day free trial and next 3 months for just $1/month.

What Is an AI Listicle Generator?

An AI listicle generator is an AI tool that turns a topic, keyword, or product URL into list-based content. It drafts the headline, the numbered items, and the copy under each item. Some tools also build the full page layout around that copy.

Listicles do two different jobs in ecommerce, so you need to know which one you're after:

Listicle article Listicle landing page
Example "10 Best Gifts for New Moms" "7 Reasons Moms Are Switching to [Product]"
Main goal Rank on Google and inform readers Pre-sell one product before the product page
Traffic source Organic search Paid ads on Meta, TikTok, or native networks
What you need from AI Well-researched, SEO-friendly text Copy plus layout, images, CTAs, and a live page
Success metric Rankings and organic traffic Click-through rate and conversion rate

Because of this split, AI listicle tools fall into three groups:

  • Text generators (e.g., Claude, ChatGPT, Koala AI) write the list content only. You still need a place to design and publish it.
  • DTC listicle generators (e.g., Landra, Atlas), also called listicle landing page generators, take a product URL and return a ready-made listicle landing page.
  • Shopify page builders with AI (e.g., GemPages, Replo) combine AI generation with templates and a full editor. You publish natively on your store and keep full design control.

In short, bloggers usually need the first group. DTC brands running paid traffic get more value from the second and third.

How Does an AI Listicle Generator Work?

Most AI listicle generators follow a three-step workflow: input, draft or design, then human review.

how an ai listicle generator works 3 step workflow

The three-step workflow behind most AI listicle generators: your input, an AI draft or design, then your review.

Step 1: You provide the input. This can be a topic, a keyword, a product URL, or a reference listicle you like. Add your audience, ad angle, and real customer reviews. The more specific the input, the less generic the output.

Step 2: The AI creates a draft or a design. A text generator returns a headline, an intro, and numbered items. A Shopify listicle generator or page builder also lays that copy out with images, CTAs, and a sticky product section.

For example, with GemPages MCP, you connect Claude or ChatGPT to your GemPages account. Your AI assistant drafts the listicle as HTML, then converts it into an editable GemPages page.

Step 3: You review and finalize the content. AI often repeats one benefit, invents claims, or skips real buyer objections. Before you publish:

  • Fact-check every claim and remove anything you can't verify.
  • Balance the items with benefits, answered objections, and proof.
  • Swap in real assets like product photos and customer reviews.
  • Add an ad disclosure and preview the page on mobile.

Once the page is live, A/B test the headline and item order to find the version that converts best.

Different Types of AI Listicle Generators

There are 4 types of AI listicle generators: listicle writers, AI assistants, SEO platforms, and DTC landing page tools. Each type stops at a different point:

1. Dedicated AI Listicle Writers

Dedicated AI listicle writers turn a keyword or title into a full list-style article in one click. You enter a topic, choose the number of items, and pick a tone. Some tools also add images, links, and up-to-date facts for you.

  • Best for: Bloggers and content teams who need SEO listicle articles fast
  • Watch out for: The output is text only, so you still design and publish the post yourself.

2. General-Purpose AI Assistants

General-purpose AI assistants like ChatGPT and Claude work as a free AI listicle generator with the right prompt. They have no fixed listicle template. Instead, you describe your product, audience, angle, and number of items, then refine the draft in chat.

Their biggest strength is flexibility. You can ask for 10 headline options, rewrite one item for colder traffic, or turn the final copy into HTML. With GemPages MCP, your assistant can then convert that HTML into an editable GemPages page.

  • Best for: Brainstorming angles, headlines, and copy variations for any listicle type
  • Watch out for: Output quality depends on your prompt, and AI may invent stats or reviews.

3. SEO and Content Platforms

SEO and content platforms build listicles from search data, not just a prompt. They analyze top-ranking pages for your keyword, then suggest an outline, related terms, and internal links. Some, like Jasper, focus more on brand voice and team workflows.

  • Best for: Content teams whose main goal is ranking listicle articles on Google
  • Watch out for: Higher monthly costs, and you still get an article, not a sales page.

4. DTC Listicle Landing Page Builders

DTC listicle landing page builders create the full page, not just the words. They're made for paid traffic, where a "7 reasons why" page warms up shoppers before the product page. You get copy, layout, images, CTAs, and a sticky product section in one place.

This type can split into two approaches:

  • URL-to-page generators: A DTC listicle generator reads your product URL and returns a ready-made listicle page. It's the fastest route, but you get less design control.
  • Page builders with AI: A listicle generator pairs AI with templates and a visual editor. Pages run natively on your store, and many let you A/B test each ad angle.

Many of these tools also build advertorials, the story-led cousin of the listicle, where a single narrative replaces the numbered items. If that format fits your angle better, we tested the tools for it in our roundup of AI advertorial generators.

The usual three points for this type:

  • Best for: DTC brands, media buyers, and agencies running Meta, TikTok, or native ads
  • Watch out for: You still need to fact-check claims and add an ad disclosure before going live.

10 Best AI Listicle Generators At a Glance

Below is a quick comparison of the 10 tools we tested:

Tool Type Best for Main output Publishes to Shopify Starting price Free plan / trial
GemPages Shopify page builder with AI Shopify listicle landing pages with full design control Editable Shopify page Yes, natively $29/month Free plan (1 published page)
Replo Shopify page builder with AI Building and editing pages through AI chat Listicle page built via chat Yes $99/month Free plan (1,000 one-time AI credits)
Instant Shopify page builder with AI Listicles plus product pages and cart upsells Shopify page or theme section Yes, natively $39/month Free for dev stores; 7-day trial
Atlas Shopify page builder with AI Single-product and dropshipping stores Store pages, listicles, and advertorials Yes, natively $39/month + usage fees Free for dev stores; 7-day trial
RightBlogger Dedicated listicle writer Quick blog listicles with little setup Listicle article No $49/month (billed annually) Free to try; 7-day trial
Koala AI Dedicated listicle writer SEO and affiliate product roundups SEO article Blog posts only $25/month 5,000 free words
Claude General AI assistant Angles, headlines, and copy variants Copy and HTML Via GemPages MCP $20/month (Pro) Free plan
Surfer AI SEO and content platform Ranking on competitive keywords SEO article with Content Score No $49/month Not stated
Jasper SEO and content platform Brand-consistent content at scale On-brand article and marketing copy No $69/seat/month 7-day trial
Landra URL-to-page generator Fast presell pages from a product URL Full listicle landing page Yes (or Landra URL, HTML) $19/month 14-day trial

10 Best AI Listicle Generators

We start with Shopify page builders, since they take you furthest: from AI draft to a live listicle landing page. After those come the writing tools, which are better suited to blog listicles and copy.

Each review follows the same format, so you can compare tools quickly:

  • Main output: What the tool actually gives you
  • Listicle-related features: Features that help you plan, write, or build a listicle
  • Best for: The type of user or store that gets the most value
  • Limitations and what you still need to do: The gaps you'll fill yourself
  • Pricing: Plans and free options

DTC landing page builders (Shopify page builders with AI)

1. GemPages

GemPages is a Shopify page builder for conversion-focused pages, including listicles and advertorials. Its AI workflow now runs through GemPages MCP, which connects Claude or ChatGPT directly to your GemPages account.

gempages mcp ai listicle generator

GemPages MCP connects Claude or ChatGPT to your GemPages account to research, draft, and build a listicle page.

Main output: An editable listicle landing page that runs natively on your Shopify store.

Listicle-related features:

  • GemPages MCP with three chainable workflows: Content Research, Content to HTML, and HTML to GemPages
  • Content to HTML supports advertorials, listicles, and comparison articles
  • Converted pages come with a preview link and an editor link, so nothing goes live without your review
  • Listicle and advertorial templates with hero, customer results, how-to-use, and sticky product sections
  • A/B testing with GemX to compare headlines, angles, and item order
  • Live Shopify product data, bundles, and integrations with popular review and upsell apps

Best for: Shopify brands that want AI speed plus full design control, native publishing, and testing across many ad angles.

Limitations and what you still need to do:

  • You need an MCP-compatible AI assistant, such as Claude or ChatGPT desktop, to use the AI workflow
  • Research output is a working draft, so you verify sources and claims yourself
  • You still review each converted section and add your own reviews, photos, and offer
  • The free plan includes only one published page

Pricing:

  • Free: $0 (1 published page, GemPages MCP included)
  • Build: $29/month
  • Optimize: $59/month
  • Enterprise: $199/month

How to Build an AI Listicle Landing Page With GemPages MCP

  1. Install GemPages from the Shopify App Store.
  2. Connect GemPages MCP to Claude or ChatGPT by following the setup guide.
  3. Research your angles. Prompt your AI: "Use GemCommerce MCP. Research content angles for [product] in [target market]."
  4. Draft and approve the listicle copy in chat, then save the final version.
  5. Turn the copy into HTML. Prompt: "Turn [approved-article.md] into landing-page HTML."
  6. Convert the HTML into a GemPages page. Ask your AI to convert the file, then open the editor link.
  7. Finish and test. Add a sticky product section, reviews, and CTAs, then publish and A/B test each angle with GemX.

2. Replo

Replo is an AI page builder that many DTC brands use for landing pages and funnels. You build and edit pages by chatting with its AI, and it has a dedicated listicle guide with ready-made prompts.

replo ai listicle landing page

Replo builds and restyles listicle landing pages through an AI chat interface. Source: Replo.

Main output: A listicle landing page built and edited through AI chat.

Listicle-related features:

  • Start from a prompt, a reference URL, a screenshot, or a Figma design
  • Starter prompts for "X reasons why" listicles, with audience and tone fields
  • Brand fonts and colors applied to the output automatically
  • Chat commands to restyle sections or update every CTA link at once
  • A large template library from DTC brands

Best for: DTC teams who prefer editing pages through chat instead of a drag-and-drop canvas.

Limitations and what you still need to do:

  • You still replace AI copy and placeholder images with your real reasons and product photos
  • The free plan includes a one-time batch of AI credits, so heavy testing needs a paid plan
  • Results depend on prompt detail, and complex layouts may take several rounds of edits

Pricing:

  • Free: $0 (1,000 one-time AI credits)
  • Starter: $99/month (10,000 AI credits/month)
  • Pro: $499/month (50,000 AI credits/month)
  • Custom: contact sales
  • Save 17% with annual billing

3. Instant

The next AI listicle generator in this list is Instant. Instant is a Shopify page builder with an AI assistant that drafts pages in seconds. It also covers store-wide elements like cart drawers and bundles.

instant ai page builder listicle

Instant drafts a Shopify page in seconds, then lets you refine it against its CRO template library. Source: Instant.

Main output: A Shopify page or theme section created from an AI draft or a CRO template.

Listicle-related features:

  • AI that generates a first draft of a page in seconds
  • A large library of CRO templates, plus Figma import
  • Built-in A/B testing that tracks revenue, CTR, and AOV
  • Custom cart drawer with upsells and add-ons for the post-listicle step
  • Integrations with review apps like Judge.me, Loox, and Yotpo

Best for: Shopify brands that want one builder for listicles, product pages, and the cart experience.

Limitations and what you still need to do:

  • Listicles aren't a dedicated workflow, so you structure the "reasons why" flow yourself
  • AI credits and A/B test sessions are capped by plan
  • You still write or verify each list item and add your own proof

Pricing:

  • Developer: free for development stores
  • Starter: $39/month
  • Pro: $99/month
  • Business: $249/month

4. Atlas

Atlas is an AI store builder for Shopify. It turns a product link into store pages, copy, and photos, and includes an AI builder for listicles and advertorials.

atlas ai listicle advertorial builder

Atlas turns a product link into store pages, including listicle and advertorial sales pages. Source: Atlas.

Main output: AI-generated store pages, including listicle and advertorial sales pages.

Listicle-related features:

  • Paste a product link to generate pages, copy, and product photos
  • An AI listicles and advertorials builder for paid-traffic campaigns
  • Bundle offers like quantity discounts and BOGO deals
  • Cart upsells with A/B testing
  • Pages that can be imported into your Shopify theme

Best for: Single-product and dropshipping stores that want a full store and presell pages in one app.

Limitations and what you still need to do:

  • Pages share a similar look, so stores can feel alike without customization
  • Some plans add charges as your store's revenue grows
  • Only use product content you have the rights to, and rewrite generic AI copy

Pricing:

  • Free to install for development stores
  • All-in-One: $39/month, with a 7-day free trial
  • Extra usage-based charges as your store's revenue grows

Dedicated listicle writers

5. RightBlogger

RightBlogger is an AI writing toolkit for bloggers. Its Listicle Writer turns a single topic or keyword into a full list post.

rightblogger ai listicle writer

RightBlogger's Listicle Writer turns one keyword into a full list post, with optional audience and tone settings. Source: RightBlogger.

Main output: A complete listicle article with a title, subheadings, list items, and SEO metadata.

Listicle-related features:

  • Optional fields for primary keyword, target audience, point of view, and internal links
  • Toggles for stock images (via Pexels), external links, and real-time knowledge
  • 16 tone presets and over 100 languages
  • An SEO tab that writes the meta title, meta description, and URL slug

Best for: Bloggers and small content teams who want a quick listicle draft with little setup.

Limitations and what you still need to do:

  • It writes blog articles, not landing pages with CTAs or product blocks
  • You'll likely copy the post into your Shopify blog or CMS by hand
  • Chat-based rewrites are only available on paid plans
  • You still fact-check every item and swap stock photos for your own visuals

Pricing:

  • Free to try
  • Solo: $59/month ($49/month billed annually)
  • Pro: $89/month ($69/month billed annually)
  • Agency: $299/month ($199/month billed annually)
  • 7-day free trial on all paid plans

6. Koala AI

Koala AI is an SEO article writer that checks what ranks for your keyword before drafting. Its KoalaWriter can produce full listicles and Amazon product roundups in one run.

koala ai listicle generator

KoalaWriter analyzes the current SERP before drafting, then builds the article around what already ranks. Source: Koala AI.

Main output: A long-form SEO article, including "best of" product roundups with pros and cons.

Listicle-related features:

  • Real-time SERP analysis to match the structure of top-ranking pages
  • Amazon product roundups that pull live product details and insert affiliate links
  • KoalaImages for AI-generated images in several styles
  • One-click publishing to WordPress and Shopify
  • A choice of AI models, including GPT and Claude

Best for: Affiliate marketers and Shopify blogs that publish product roundups at volume.

Limitations and what you still need to do:

  • It builds SEO articles, not presell pages with sticky add-to-cart or product sections
  • Bulk output can read as generic without a human edit
  • Premium AI models use up your credits faster
  • You still add first-hand experience and real product photos to compete on tough keywords

Pricing:

  • Free: 5,000 words and 25 credits for new accounts, no credit card needed
  • Starter: $25/month (45,000 words)
  • Professional: $49/month (100,000 words)
  • Boost: $99/month (250,000 words)
  • Higher-volume plans from $179/month; save 20% with annual billing

General-purpose AI assistant

7. Claude

Claude is Anthropic's AI assistant. It isn't built for listicles, but it's the most flexible AI listicle generator on this list, since you can shape any format through prompts.

claude ai listicle prompt

With the right prompt, Claude can draft listicle copy in any format and hand the HTML straight to a page builder. Source: Anthropic.

Main output: Listicle copy in any format, from blog articles to "reasons why" page copy and HTML.

Listicle-related features:

  • Brainstorm angles, headlines, and item orders in one chat
  • Rewrite single items for a different audience, tone, or traffic temperature
  • Projects to store your brand guidelines, product details, and customer reviews for every new listicle
  • Artifacts to preview a listicle page as HTML right in the chat
  • Web search to research your product category before drafting
  • Connectors, including GemPages MCP, to turn that HTML into an editable GemPages page

Best for: Marketers who want full control over angle and copy, or need many variations for ad testing.

Limitations and what you still need to do:

  • It doesn't publish pages on its own, so you need a page builder or CMS
  • Output quality depends heavily on your prompt and the context you provide
  • It may invent stats, reviews, or product claims, so fact-check every item

Pricing:

  • Free: $0
  • Pro: $20/month ($17/month billed annually)
  • Max: from $100/month
  • Team: from $25/seat/month ($20/seat/month billed annually)

SEO and content platforms

8. Surfer AI

Surfer AI is the article generator inside Surfer SEO. It studies top-ranking pages for your keyword before writing, so your listicle follows what already ranks.

surfer ai listicle content score

Surfer's Content Editor scores a draft in real time against the pages currently ranking for your keyword. Source: Surfer SEO.

Main output: An SEO-optimized article draft with a live Content Score.

Listicle-related features:

  • Pick which competitor pages the AI learns from
  • An editable H2/H3 outline based on SERP analysis
  • Custom Knowledge and Writing Points to steer the draft with your own input
  • A Content Editor with real-time scoring and keyword suggestions
  • Internal link suggestions, plus Google Docs and WordPress integrations

Best for: SEO teams targeting competitive "best of" and roundup keywords.

Limitations and what you still need to do:

  • It has a learning curve and isn't a one-click tool
  • Each plan includes a limited number of AI article credits
  • Scoring can favor keyword coverage over readability, so edit for flow
  • It outputs an article only, with no page design or CTA blocks

Pricing:

  • Discovery: $49/month
  • Standard: $99/month
  • Pro: $182/month
  • Peace of Mind: $299/month
  • Enterprise: custom pricing

9. Jasper

Jasper is an AI marketing platform for teams that care about brand consistency. It isn't a dedicated listicle tool, but its Blog Post app and Canvas workspace can handle list-style content.

jasper ai listicle brand voice

Jasper's Brand Voice keeps tone and terminology consistent across listicles written by different people. Source: Jasper.

Main output: On-brand blog posts and marketing copy, including listicle articles.

Listicle-related features:

  • Brand Voice and Brand IQ to keep tone and terminology consistent
  • Knowledge to ground content in your product docs and guidelines
  • Canvas, a workspace for drafting and editing with AI
  • Agents to automate multi-step content workflows
  • SEO and AEO tools to optimize finished drafts

Best for: Marketing teams producing listicles across several brands or products with one consistent voice.

Limitations and what you still need to do:

  • It costs more per seat than single-purpose listicle writers
  • Long-form output can get repetitive without refined prompts
  • You still handle fact-checking, final SEO checks, and publishing

Pricing:

  • Pro: $69/seat/month ($59/seat/month billed annually)
  • Business: custom pricing
  • 7-day free trial on the Pro plan

DTC landing page builder (URL-to-page generator)

10. Landra

The last AI listicle generator in this list is Landra. Landra is a DTC listicle generator built for presell pages. You paste a product URL, and it returns a finished, ranked listicle in minutes.

landra listicle generated

Landra turns a product URL into a finished presell listicle, with ranked items, per-item CTAs, and an ad disclosure. Source: Landra.

Main output: A complete listicle landing page with copy, layout, and AI images.

Listicle-related features:

  • Ranked items that mix benefits, answered objections, differentiators, and proof
  • Problem-led or product-led framing, based on the traffic you send
  • AI product images placed into each item
  • Per-item CTAs and a built-in ad disclosure
  • A click-to-edit editor, then publishing to Shopify, a Landra URL, or HTML export

Best for: Founders and media buyers who need a ready-to-test presell page fast, with little design work.

Limitations and what you still need to do:

  • It's a newer tool, still labeled beta
  • Lower plans include only a few generations per month
  • You get less layout freedom than a full page builder
  • You still check AI images and claims, especially for health or beauty products

Pricing:

  • Starter: $19/month (2 generations/month)
  • Pro: $79/month (20 generations/month)
  • Pro Plus: $199/month (100 generations/month)
  • 14-day free trial on all plans

How to Choose the Best AI Listicle Generator for Your Store

The right AI listicle generator depends on three things: what you're building, how much AI help you need, and how much layout control you want. Answer these before you compare prices.

1. Scope of Work: Blog Listicle or Shopify Landing Page?

Start with where your listicle will live. A blog listicle sits on your blog and brings in organic traffic. A listicle landing page sits between your ad and your product page.

  • Choose RightBlogger, Koala AI, Surfer AI, or Jasper if you need SEO listicle articles for your blog.
  • Choose GemPages, Replo, Instant, Atlas, or Landra if you need a presell page with CTAs and product sections for paid traffic.
  • Choose Claude if you need copy for either format and plan to design the page elsewhere.

2. Level of AI Involvement: Research or Just a Draft?

Next, decide how much of the thinking you want the AI to do. Some tools only write from your brief. Others research angles, competitors, or search results first.

  • Choose Claude with GemPages MCP if you want AI to research angles and customer pain points, then build the page.
  • Choose Surfer AI or Koala AI if you want the draft based on what already ranks on Google.
  • Choose Landra or Atlas if you want to paste a product URL and get a finished draft fast.
  • Choose RightBlogger if a quick draft from one keyword is enough.

3. Layout Customization: Ready-Made or Full Control?

Finally, think about how much you'll change the design. For blog listicles, your blog theme handles most of the layout. For landing pages, design control shapes how well the page matches your brand and ad.

  • Choose GemPages or Instant if you want a drag-and-drop editor with control over every section.
  • Choose Replo if you'd rather make design changes by chatting with AI.
  • Choose Landra or Atlas if you're happy with a ready-made layout and only need light edits.

Final Recommendation

There's no single best AI listicle generator, because each tool produces a different type of output. The right pick is the one that matches the job in front of you.

Besides, a practical setup for many DTC brands is to pair two tools. Use an AI assistant for research and copy, then a page builder for layout, publishing, and A/B testing. Whichever tools you choose, keep the human review step: fact-check claims, use real reviews and photos, and test each angle.

If that two-tool setup fits your store, GemPages connects both sides. GemPages MCP lets Claude or ChatGPT turn your approved listicle into an editable Shopify page, ready to customize and test. For more guides on building pages that convert paid traffic, browse the GemPages blog.

Not ready to commit but still want to kick the tires?
No problem! Get started with GemPages' free plan. Explore wonderful features that can amaze for your store.

FAQs about AI Listicle Generators

Is there a free AI listicle generator?
Yes. Claude has a free plan, Koala AI gives new accounts 5,000 free words, and RightBlogger is free to try. For listicle landing pages, GemPages' free plan lets you publish one page and includes GemPages MCP. Free plans have usage limits, so expect to upgrade if you publish often.
Does Google penalize AI listicles?
No, not just for using AI. = 0; i--) { if (scrollTop > $(anchors[i]).offset().top - 400) { // $('a[title="' + "#" + $(anchors[i]).attr('id') + '"]').parent().addClass('active'); /* Harry Ha - fix anchor links on the table of contents don't work correctly */ if( $('a[title="' + "#" + $(anchors[i]).attr('id') + '"]').length ){ $('a[title="' + "#" + $(anchors[i]).attr('id') + '"]').parent().addClass('active'); var item = $('a[title="' + "#" + $(anchors[i]).attr('id') + '"]').parent(); var itemHeight = item.height(); var itemOffsetTop = item.offset().top - $('#left-content').offset().top; if (st > lastScrollTop) { // downscroll code if(itemOffsetTop + itemHeight > $(window).height()){ var adjust = (itemOffsetTop + itemHeight) - $(window).height(); $('#left-content').css('top', - adjust); } else { $('#left-content').css('top', '5px'); } } else { // upscroll code if(itemOffsetTop + itemHeight > $(window).height()){ var adjust = itemOffsetTop - $(window).height(); $('#left-content').css('top', - adjust); } else { $('#left-content').css('top', headerHeight + 5); } } }else for (var j = i - 1; j >= 0; j--) { if( $('a[title="' + "#" + $(anchors[j]).attr('id') + '"]').length ) { $('a[title="' + "#" + $(anchors[j]).attr('id') + '"]').parent().addClass('active'); break; } } break; } else { if (scrollTop < $(anchors[0]).offset().top) { if (st > lastScrollTop) { // downscroll code $('#left-content').css('top', '5px'); } else { // upscroll code $('#left-content').css('top', headerHeight + 5); } } } } lastScrollTop = st; }); /* Harry Ha - support open external links in new tab */ Array.from( document.querySelectorAll( '#right-content a' ) ).forEach( a => { if( location.hostname !== a.hostname && a.hostname.length ) a.setAttribute('target', '_blank'); }); var leftContent = document.getElementById("left-content"); var rightContent = document.getElementById("right-content"); var sticky = leftContent.offsetTop; // progress bar $(function () { $(window).scroll(function () { const winScroll = document.body.scrollTop || document.documentElement.scrollTop; const height = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrolled = (winScroll / height) * 100; $('#myBar').css({width: scrolled + "%"}) }); }); // social share const shares = { facebook: "https://facebook.com/sharer/sharer.php?u={url}", twitter: "https://twitter.com/share?url={url}&text={text}", linkedin: "https://www.linkedin.com/shareArticle?mini=true&url={url}", reddit: "https://www.reddit.com/submit?url={url}" } $(document).ready(function () { // if (! $('.gf_blog-navigation').first().hasClass('isScrollingUp')) { var headerHeight = $(".gf_blog-navigation").first().outerHeight(); $('#left-content').css('top', headerHeight + 5); } else { $('#left-content').css('top', '5px'); } $('.social-share__item').click(function () { // const url = "https%3A%2F%2Fwww.shareaholic.com%2Fwebsite-tools%2Fsocial-share-buttons%2Freddit%2F%3Futm_campaign%3Dshareaholic%26utm_medium%3Dreddit%26utm_source%3Dnews&title=Get%20Reddit%20Share%20Button%20and%20Icons%20for%20Your%20Website%20-%20Shareaholic" const url = window.location.href const socicalUrl = shares[`${$(this).data("social")}`] const _text = "" // name or title var sharedUrl = socicalUrl.replace('{url}', url).replace('{text}', _text); window.open(sharedUrl, null, "width=600, height=400, location=0, menubar=0, resizeable=0, scrollbars=0, status=0, titlebar=0, toolbar=0"); }); // On window scroll - Desktop & Laptop progressBarAnimation(); window.addEventListener('resize', function () { progressBarAnimation(); }); function progressBarAnimation(){ var lastScrollTop = 0; $(window).scroll(function(event){ if( $(window).width() > 991 ) { var st = $(this).scrollTop(); if (st > lastScrollTop){ // downscroll code $('.gf_blog-navigation, .gt_header, .progress-container, #left-content').removeClass('isScrollingUp').addClass('isScrollingDown'); } else { // upscroll code $('.gf_blog-navigation, .gt_header, .progress-container, #left-content').removeClass('isScrollingDown').addClass('isScrollingUp'); } } else { $('.gf_blog-navigation, .gt_header, .progress-container, #left-content').removeClass('isScrollingUp isScrollingDown'); } lastScrollTop = st; }); } // Show table of contents on tablet and mobile if( $('.table-content-mobile-wrapper').length ) { $('.button-show-tablecotents').click(function(){ $('.table-content-mobile-wrapper').removeClass('isClosingNow').addClass('isShowingNow'); var closeBtnPosition = $('.table-content-mobile-container').outerHeight() + 6; $('.table-content-mobile-wrapper .btn-close-tablecontents').css('bottom', closeBtnPosition + 'px'); }); $('.btn-close-tablecontents, .table-content-mobile-wrapper, .table-content__item a').click(function(){ $('.table-content-mobile-wrapper').removeClass('isShowingNow').addClass('isClosingNow'); }); $('.table-content-mobile-container').click(function(event){ event.stopPropagation(); }); } }) // FAQ $(".faq__item .faq__item_heading").on("click", function () { event.preventDefault(); const $this = jQuery(this).parent(".faq__item"); $this.addClass("isOpening"); if (!$this.hasClass("opened")) { $this.find(".faq__item_description").stop(true, false).slideToggle('fast', function () { $this.removeClass("isOpening").addClass("opened") }); } else { $this.find(".faq__item_description").slideUp({ duration: "fast", easing: 'linear', complete: function () { $this.removeClass("opened isOpening") } }); } })

Start selling

Create your Shopify Store with $1/mo in first 3 months

Start using GemPages

Explore our brands