Skip to main content

How to use the Shopify plugin

Connect your Shopify store directly to your app so users can browse, search, and purchase products seamlessly within your mobile experience.

Amr Alshareef avatar
Written by Amr Alshareef
Updated today

The Shopify plugin integrates your Shopify store with your Buildfire app, allowing you to display collections, individual products, and custom groups. You can also create promotional banners, connect deep links, and provide a full shopping experience—from browsing to checkout—all inside your app.

The following steps are for managing the Shopify plugin inside the Buildfire Control Panel. If you are connecting through the Shopify Storefront instead, you can skip to step 4.


Requirements

  • This is a Boost plugin, available on the Standard, Growth, and Business plans.

  • Requires an active Shopify store with a valid Storefront Access Token

    • You can find in your Shopify Admin under Settings → Apps and Sales Channels → Develop Apps → Storefront API


How to use the Shopify plugin

  1. Log in go to Builder in the left navigation

  2. Click the + button to open the Plugin Marketplace

    • Search for Shopify, then click Add Plugin

    • Name your plugin and choose whether to add it to the side menu, then click Add again

  3. Go to the Settings tab

    • Enter your Store Name and Storefront Access Token

    • Click Save

  4. Click the Content tab

    • Add an introductory message using the WYSIWYG (e.g., “Welcome Shoppers”)

    • Click Add Section to create a new product section

      1. Name your section (e.g., “Shop All” or “Christmas Specials”)

      2. Inside each section, you can add:

        1. Entire collections from your Shopify store

        2. Individual products

        3. Custom product groups you define manually

    • Click Add Products to view your connected store’s products and collections

      1. Use the search or filter tools to locate products by name or collection

      2. Click to add a collection or individual products to your section

      3. To create a custom group, click Add Group

      4. Add individual products or collections to this group

      5. Upload a custom image and enter a title for the group (e.g., “Holiday Deals”)

      6. Click Save

    • Adjust section settings

      1. Choose whether to Show Section Title or Hide Section Title

      2. Add a divider between sections

      3. Adjust Item Height (20%–60%) and Image Shape (circle, square, or portrait)

      4. Choose to Show Item Label inside or outside the image

      5. Enable Slide Animation, adjust Delay Speed, and toggle Looping to repeat slides indefinitely

    • To create a promo banner or link, click Add Section → Add Action Item

      1. Set a title and upload an image or banner

      2. Choose an action type such as Deep Link → Feature Content to promote a specific group (e.g., “Christmas Specials”)

      3. Adjust width and height, then click Save

  5. Click the Design tab

    • Customize the default icons in the navbar

    • Show or hide menu item names

    • Enable Show Drawer After Adding to Cart to display the cart automatically

    • Turn on Notify When Cart Full (24h) to remind users of pending items

    • (Optional) Enable Advanced Mode to edit layout CSS for further customization

  6. Click the Settings tab

    • Manage your Shopify store connection and update credentials if needed

  7. Click the Security tab

    • Turn on Require Login to restrict feature access to logged-in users

    • (Optional) Add tag-based restrictions and choose whether to match any or all tags

  8. Click the Tagging tab

    • Enter a tag name to automatically apply to users when they open this feature

    • Click Add Tag

  9. Click the Purchase tab

    • Check Require Purchase to enable

    • Choose your product type (e.g., Single Purchase or Subscription)

    • Upload an image, fill out purchase text, and success/failure messages

  10. Click the Analytics tab to view feature performance

    • Track store visits, cart activity, and product engagement metrics

  11. Click the Language tab

    • Adjust all plugin text and field labels to match your app’s tone or industry


Pro tips

  • Use collections for dynamic updates that mirror your Shopify storefront automatically

  • Create custom groups for seasonal or promotional campaigns without changing your Shopify backend

  • Keep section images consistent in shape and size for a polished storefront layout

  • Turn on looping animations for banners and featured products to increase visual engagement

  • Test your checkout flow directly on a mobile device, as some interactions don’t preview correctly in the emulator

Did this answer your question?