Clickito

Clickito

Create reusable calls to action and product carousels for Shopify blog posts.

Getting started

Clickito turns a short line of text in a blog post into a designed call to action or product carousel. Before a block can appear, the Clickito app embed must be enabled in your theme.

To publish your first block:

  1. Open Clickito in Shopify admin and choose a plan.
  2. On the Blocks page, select Open theme editor.
  3. Enable the Clickito app embed and select Save.
  4. Return to Clickito and select Create block.
  5. Choose a block type, add its content, and save it.
  6. Copy the shortcode and paste it into a blog post.
  7. Open the post on your storefront and check the block.

Create a block

Clickito provides two block types.

Call to action: combine a title, description, image, and up to two buttons.
Meet our Brazil filter blend
A smooth filter blend with notes of chocolate, caramel, and roasted nuts.
Bag of Brazil filter blend coffee
Product carousel: show up to 20 selected product variants that readers can open or add to their cart.
Featured products
A few customer favorites for every day.

Set Visibility to Visible to show the block. Set it to Hidden to remove it from the storefront without deleting its shortcodes.

Add blocks to blog posts

A shortcode is a small piece of text that tells Clickito which saved block to display. Copy it from the block editor or the Blocks page.

[click id="summer-story"]

The block name creates its shortcode ID when you first save it. You can rename an existing block later without breaking shortcodes already added to your posts.

Add a block to an article

  1. In Shopify admin, open the blog post you want to edit.
  2. Paste the shortcode on its own line in the post content.
  3. Save the post and open it on your storefront.

Add a block to a blog template

You can also place a shortcode in a theme section or block that renders text on a blog template. This displays the same Clickito block wherever that template is used.

Keep each shortcode on one line. The app embed must remain enabled for Clickito to replace it with the saved block.

Reuse a block with different text

You can use the same block in several posts and change its title or description for one placement.

[click id="summer-story" title="Last chance" description="Ends Sunday"]

Wrap attribute values in quotes when they contain spaces. These attributes only change that placement. They do not update the title or description saved in Clickito.

Configure a block

The editor has three tabs: Content, Desktop, and Mobile. The preview updates as you edit the block.

Content

  • Block details: name, shortcode, and storefront visibility.
  • Block type: call to action or product carousel.
  • Copy: title and description.
  • Image: choose an image from Shopify Files for a call to action.
  • Actions: add up to two buttons and choose what each button does.
  • Product carousel: products, click behavior, prices, and sold-out text.
  • Advanced settings: custom CSS.

Desktop

Use this tab to style the desktop block. Each section can be copied to mobile with Apply to Mobile.

  • Container: background, maximum width, and content alignment.
  • Title: visibility, color, size, and font weight.
  • Description: visibility, color, size, and font weight.
  • Border: color, width, and corner radius.
  • Shadow: shadow size and color.
  • Padding: top, bottom, left, and right spacing inside the block.
  • Outer spacing: top, bottom, left, and right spacing around the block.
  • Image: position, width, and corner radius for a call-to-action block.
  • Button 1 and Button 2: colors, typography, border, spacing, and alignment for each added button.
  • Product card: card appearance, product text, price, button, and spacing for a product carousel.
  • Arrows: carousel arrow colors, size, border, and position.
  • Animation: choose a desktop hover animation and the direction for Image pan.

Mobile

Use this tab to style the mobile block. Each section can be copied to desktop with Apply to Desktop.

  • Container: background, maximum width, and content alignment.
  • Title: visibility, color, size, and font weight.
  • Description: visibility, color, size, and font weight.
  • Border: color, width, and corner radius.
  • Shadow: shadow size and color.
  • Padding: top, bottom, left, and right spacing inside the block.
  • Outer spacing: top, bottom, left, and right spacing around the block.
  • Image: position, width, and corner radius for a call-to-action block.
  • Button 1 and Button 2: colors, typography, border, spacing, and alignment for each added button.
  • Product card: card appearance, product text, price, button, and spacing for a product carousel.
  • Arrows: carousel arrow colors, size, border, and position.

Sections for images and buttons appear for call-to-action blocks. Product card and arrow sections appear for product carousels. Use Reset to restore a section's last saved settings.

Button and product actions

Each call-to-action button can perform one of four actions.

  • Open a page: enter a storefront path or full URL and choose whether it opens in a new tab.
  • Add product to cart: select a product variant and set the confirmation text.
  • Copy discount code: select a Shopify discount code and set the copied confirmation.
  • Run custom JavaScript: execute your own code when a reader clicks the button.

Product carousel cards can open the selected product page or add the selected variant to the cart. Sold-out variants remain visible with your sold-out label and cannot be added.

Manage blocks

The Blocks page keeps your saved blocks in one place.

  • Edit a block by selecting its row or edit action.
  • Hide or show a block without changing its shortcode.
  • Duplicate a block to use its content and styles as a starting point.
  • Copy the shortcode without opening the editor.
  • Select the number under Used in to view matching blog posts and blog templates.
  • Delete a block when you no longer need it.

Deleting a block does not remove its shortcode from Shopify content. Remove those shortcodes manually if the block will not be replaced.

Analytics

Clickito records a view when a visible block enters the reader's viewport. It records clicks on call-to-action buttons, carousel products, and their configured actions.

  • Views: how many block instances readers viewed.
  • Clicks: interactions with buttons and products.
  • Engagement rate: the percentage of tracked views with at least one click. Multiple clicks in one view count once.

Choose a period and select blocks in the chart legend to compare performance. Hover over chart points to see details by button, product, and blog.

Custom CSS and JavaScript

Custom CSS

Use Custom CSS when the built-in controls are not enough. The editor provides selectors for the block, content, title, description, buttons, image, product cards, and carousel controls.

Use {{mobileBreakpoint}} in mobile-only media rules. Test changes in both previews and on your storefront before publishing.

Custom JavaScript

JavaScript can run as a button action or before a standard button or product action. Button code can use event and widget. Product code can also use product. Call event.preventDefault() in before-action code when you need to stop the standard action.

widget is available in every JavaScript field. These are its most useful content fields; saved style settings are omitted here.

{
  "name": "Summer sale",
  "slug": "summer-sale",
  "type": "cta",
  "status": "active",
  "currencyCode": "USD",
  "title": "Save 20%",
  "description": "Ends Sunday",
  "buttons": [
    {
      "id": "button-1",
      "label": "Shop now",
      "action": "link",
      "value": "/collections/sale"
    }
  ],
  "products": []
}

product is also available when code runs before a product carousel action.

{
  "id": "gid://shopify/Product/1234567890",
  "title": "Canvas backpack",
  "handle": "canvas-backpack",
  "imageUrl": "https://cdn.shopify.com/...",
  "price": "49.00",
  "variantId": "gid://shopify/ProductVariant/1234567890",
  "variantTitle": "Black",
  "availableForSale": true
}

You can use this code to send custom events to an analytics service already installed on your storefront, including Seline, Google Analytics, Google Tag Manager, or another provider.

// Seline
window.seline?.track?.("Clickito: button clicked", {
  block: widget.slug,
});

// Google Analytics
window.gtag?.("event", "clickito_button_click", {
  block_id: widget.slug,
});

// Google Tag Manager
window.dataLayer?.push({
  event: "clickito_button_click",
  blockId: widget.slug,
});

Clickito does not install or configure these analytics services. Their storefront scripts must be loaded before the calls above can send events. Use only code you understand and trust: custom JavaScript runs in your visitors' browsers.

Billing

Clickito offers three ways to pay.

  • Basic Monthly: $3 every 30 days.
  • Basic Annual: $30 per year.
  • Lifetime: $50 one-time purchase.

A 10-day free trial is available once per shop for a new Basic subscription. Open Billing in Clickito to view your current plan or switch between monthly and annual billing. Lifetime access does not require future payments.

Troubleshooting

Start with these checks if a block does not work as expected.

The shortcode remains visible as text

Make sure the Clickito app embed is enabled and saved in the active theme. Clickito runs on blog and article pages, so also confirm that you are viewing a supported page.

The block does not appear

Check that the block is Visible and that the shortcode ID matches the one shown in Clickito. Keep the complete shortcode on one line.

Saved changes do not appear

Confirm that Clickito showed Block saved, then refresh the storefront page. If your theme or storefront uses a cache, allow it to refresh before checking again.

A product cannot be added to the cart

Confirm that the selected variant is available for sale. If the product is available but the cart does not update, test the action with your live theme and contact support with the theme name and product URL.

A discount code cannot be copied

Check that the selected discount still exists and is active in Shopify. Try the button in a current browser on the secure storefront URL.

The storefront style differs from the preview

Theme styles can affect the space around a block. Check Desktop, Mobile, and Custom CSS settings. Test custom rules at both screen sizes.

Analytics has no data

A view is recorded only after a visible block enters the viewport. Check the selected date range and confirm that the block is active on a published storefront page.

Block locations could not be updated

Refresh the Blocks page and reconnect Clickito if Shopify asks for updated permissions. Previously detected locations may remain visible while the next scan runs.

Disable or uninstall Clickito

Disable Clickito in the theme

Use this option to stop displaying blocks while keeping the app and its settings. Open the Shopify theme editor, go to app embeds, disable Clickito, and save the theme.

Uninstall Clickito

Uninstall Clickito from Shopify admin when you no longer want to use the app. Clickito will stop running on the storefront, but its shortcodes may remain in articles and theme settings as plain text. Remove those shortcodes manually.

Support

Need help? Email us at [email protected] or open the .

Include your shop domain, block name, affected blog post URL, and a short description of what you expected to happen. This helps us investigate faster.