Configuration Guide

How to connect your app to your website and customize basic settings.

Connect to Your Website

Step 1: Find Your Website URL

Your website URL is the address people use to visit your online store. Examples:

• https://mystore.com
• https://shop.mycompany.com
• https://mystore.botble.com

Step 2: Update App Configuration

1. Open the .env file in your app folder
2. Update these settings:

   API_BASE_URL=https://your-website.com
   API_KEY=your-api-key
   APP_NAME=Your Store Name

3. Save the file

Note: The app automatically appends /api/v1 to API_BASE_URL for API calls.

Step 3: Test the Connection

1. Run your app:

   npm start

2. Try to login with an account from your website
3. If it works, you're connected!

Environment Configuration

Create or update your .env file with these settings:

# API Configuration
API_BASE_URL=https://your-website.com
API_KEY=your-api-key

# App Configuration
APP_NAME=Your Store Name
APP_VERSION=1.0.0

# Contact Information (optional)
APP_CONTACT_PHONE=+1 (800) 123-4567
[email protected]

# Social Media (optional)
APP_SOCIAL_FACEBOOK=https://facebook.com/yourstore
APP_SOCIAL_X=https://x.com/yourstore
APP_SOCIAL_INSTAGRAM=https://instagram.com/yourstore

App Configuration (app.config.js)

The app reads configuration from environment variables through app.config.js. Update your .env file for app store settings:

Variable	Description	Example
APP_NAME	Display name	My Store
APP_VERSION	App version	1.0.0
API_BASE_URL	Website URL (without /api/v1)	https://mystore.com
API_KEY	API authentication key	your-api-key

For bundle identifiers and other platform-specific settings, modify app.config.js directly.

Basic App Settings

App Name

Change your app's name by following: App Name Guide

App Colors

Customize your app's colors: Theme Colors Guide

App Logo

Add your logo: App Logo Guide

Languages

Set up multiple languages: Translations Guide

Security Settings

HTTPS Required

• Always use https:// in your website URL
• Never use http:// for live websites
• This keeps your customers' data safe

API Access

Make sure your website allows the app to connect:

1. Contact your website developer
2. Tell them you need "API access enabled"
3. Verify CORS settings allow mobile app requests

Testing Your Setup

Test These Features:

• Login with existing account
• Browse products
• Add items to cart
• Search for products
• View product details
• Apply coupon codes
• Complete checkout

If Something Doesn't Work:

1. Check your website URL is correct
2. Make sure your website is online
3. Try logging in on your website directly
4. Check browser console for errors
5. Contact support with details

Homepage Configuration

Customize the homepage layout and content through environment variables.

Ads/Banners

Control which ads/banners display on the homepage:

# Display specific ads only (comma-separated keys)
AD_KEYS=banner-home-1,banner-home-2

# Or leave empty to fetch all ads from your website
AD_KEYS=

How it works:

• The ad keys correspond to the ad keys configured in your Botble admin panel
• When specified, only ads with matching keys are displayed
• When empty, all ads are fetched and displayed
• This is useful for showing different banners on mobile vs. web

To find your ad keys:

1. Go to your Botble admin panel
2. Navigate to Ads > Ads
3. Note the "Key" column for each ad you want to display

Product Section Layout

Configure how products are displayed in category sections:

# Horizontal slider (default)
PRODUCT_SECTION_LAYOUT=slider

# 2-column grid layout
PRODUCT_SECTION_LAYOUT=grid

Products Per Section

Control how many products appear in each category section:

# Default is 6
PRODUCT_SECTION_NUMBER_OF_PRODUCTS=6

Product Image Size

Set the thumbnail size for product images:

# Options: small, medium, large, thumb
PRODUCT_IMAGE_THUMBNAIL_SIZE=small

Advanced Configuration

For more advanced setup:

• API Integration - Technical details
• Development Guide - Customization options

Tips for Success

Before Going Live:

• Test everything thoroughly
• Try on different phones (iOS and Android)
• Ask friends to test the app
• Make sure payments work

Keep It Simple:

• Start with basic setup
• Add features gradually
• Test each change
• Don't change too many things at once

Common Problems

"Connection Failed"

• Check your website URL
• Make sure website is online
• Verify API is accessible

"Login Doesn't Work"

• Test login on your website first
• Check if API is enabled
• Verify user accounts exist

"No Products Show"

• Make sure products exist on website
• Check if products are published
• Verify categories are set up

For more help, check the Troubleshooting Guide.