Control Your Shop - Documentation

Introduction

The configuration process allows you to customize your store’s settings, from general information to more advanced integrations such as Firebase, Stripe, and email setups. In this section, we’ll walk you through the 9 steps to configure everything necessary for your store’s smooth operation.

Step 1/9 - General

This section allows you to define the basic settings for your store, including the name, domain, logo, contact details, color scheme, currency, and timezone. Follow these simple steps to configure your store’s general settings.

Step-by-Step Guide

1. Set Your Domain

Begin by entering your store’s domain in the $url_domain field. This should be the domain you already own, for example: example.com. Once you've entered the domain, scroll down and click the Save button to apply your changes.

2. Add Your Logo

To add a logo, you’ll use the Link Builder tool to upload your image. After clicking on the Link Builder, drag and drop your logo image to upload it. This will generate a unique URL for your logo image. Copy this URL and paste it into the $url_logo field.

3. Configure Other General Settings

Now you can fill in the other fields to customize your store:

$name_website: The name of your store (e.g., "Example").
$contact_email: Your store's contact email address (e.g., [email protected]).
$site_color: The primary color for your website’s theme (e.g., "black").
$slogan: Your store's slogan or tagline (e.g., "Products of all kinds").
$curr: The currency symbol to be used across the website (e.g., "$").

4. Set Your Timezone

To ensure your website uses the correct local time, you’ll need to set the server’s timezone. Use the PHP timezone reference to find the appropriate timezone for your region. For example, if you're in Paris, you would set $local_php = 'Europe/Paris'.

If you need help finding the correct timezone for your location, you can ask ChatGPT. Here’s an example prompt you can use: "What is the PHP timezone for [Your Location]?".

That's It!

Once all the fields are filled, click Save at the bottom of the page to apply your changes. You’ve now successfully configured your store’s general settings!

Step 2/9 - Firebase

In this section, you'll integrate Firebase into your store by adding your Firebase configuration details. Ensure you have your Firebase account set up with the correct credentials and database link.

Step-by-Step Guide

1. Create a Firebase Account and Project

First, create a Firebase account and set up a new project by visiting Firebase Console.

2. Configure Your Realtime Database

Navigate to the Realtime Database section at Firebase Realtime Database and create your database. Once created, go to the "Rules" tab and replace the existing rules with the following:

{
  "rules": {
    ".read": "auth.token.firebase.identities != null && auth.token.firebase.sign_in_provider == 'custom'",
    ".write": "auth.token.firebase.identities != null && auth.token.firebase.sign_in_provider == 'custom'",
    "ventes": {
      ".indexOn": ["email", "date"]
    },
    "temp_orders": {
      ".indexOn": ["order_id"]
    },
    "track": {
      ".indexOn": ["date"]
    },
    "track_no_url": {
      ".indexOn": ["date"]
    },
    "clickedon_buybutton": {
      ".indexOn": ["date"]
    },
    "save_ip_location": {
      ".indexOn": ["ip"]
    },
    "messages": {
      ".indexOn": ["date"]
    }
  }
}

Click on the "Publish" button to apply these rules. After that, return to the "Data" tab and copy the database URL, which will look something like https://example-541415qdqz-default-rtdb.europe-west1.firebasedatabase.app/. This URL will be used for the $firebase_database variable.

3. Add Firebase SDK to Your Project

Go to the project settings at Firebase Project Settings. Click on the web icon next to the Apple and Android icons. In the popup that appears, enter a name for your app (this can be anything), and in the "Add Firebase SDK" step, select "Use a <script> tag". Copy the entire script provided and paste it into the $firebasecode variable in your configuration, replacing the placeholder between <<<EOD and EOD;.

4. Generate a New Private Key

Go to the "Service accounts" section at Firebase Service Accounts and click on "Generate new private key". This will download a .json file. Open this file, copy its content, and paste it into the $firebase_file_content variable.

5. Finalize Your Configuration

Ensure that all the Firebase configuration details are correctly added to your project files. Your Firebase setup is now complete!

Step 3/9 - Emails

In this step, you'll configure your store's email system to send order confirmations using Zoho SMTP. Follow these steps to complete the setup.

Using Zoho: Step-by-Step Guide

Step 1: Sign Up for Zoho Mail

First, sign up for a Zoho Mail account. Zoho allows you to easily create a professional email address linked to your domain (e.g., [email protected]) without needing to manually edit DNS settings if your domain is managed by Cloudflare. Get started by signing up here:

Step 2: Complete the Registration

Once you've signed up, follow the registration process. Zoho will guide you through linking your custom domain, making it incredibly simple to set up a professional email address like [email protected].

Step 3: Update Your Store's Email Configuration

After creating your professional email account with Zoho, you can configure your store to send emails using the following SMTP settings:

// Zoho SMTP settings for sending emails
$smtp_host = 'ssl://smtppro.zoho.eu:465';
$smtp_Username = '[email protected]';  // Email of your Zoho account
$smtp_Password = 'yourpassword';  // Password of your Zoho account
$smtp_Mail = '[email protected]';  // Your professional email

By following this setup, you'll be able to send emails from your store using a professional email address (e.g., [email protected]), giving your business a more polished and trustworthy appearance.

Step 4: Customize Your Order Confirmation Email Template

Finally, customize the email template that will be sent to customers after they make a purchase. This email template uses placeholders (called "variables") that will be replaced with real information when the email is sent. For example:

%orderid%: The customer’s order number.
%namewebsite%: The name of your store or website.
%website_ordertracking_url%: A link where the customer can track their order.

In the template, the tag <br> is used to insert line breaks in the email content to improve readability.

That's it!

You've successfully set up Zoho for your store's email notifications. Now you can send transactional emails through your new professional email address without any hassle.

Step 4/9 - Stripe

This step guides you through setting up Stripe in both test and live modes. You will enter your Stripe API keys and configure shipping methods and payment options. It's important to ensure that your payment settings are correct to avoid disruptions in transactions.

Step-by-Step Guide

1. Set Test or Production Mode

Use the $test1_prod0 variable to switch between test and production modes. Set it to 1 for test mode or 0 for production mode. This allows you to test payments before going live.

2. Create a Stripe Account and Project

If you don’t have a Stripe account, create one by visiting Stripe. Once your account is set up, create a new "Account/Project" within Stripe.

3. Retrieve API Keys

Go to Stripe API Keys. Retrieve your public and secret keys for both live and test environments. Store these keys securely. Update the following variables with your keys:

// Stripe settings for the live environment.
$stripe_webhook_apikey = "sk_live_...";
$stripe_apikeypublic = "pk_live_...";

// Stripe settings for the test environment.
$stripe_webhook_apikey_test = "sk_test_...";
$stripe_apikeypublic_test = "pk_test_...";

4. Configure Webhook

Go to Stripe Webhooks and create a new webhook. Set the URL to https://[YOUR_DOMAIN]/webhook.php. Select the event checkout.session.completed and create the webhook.

After creating the webhook, click on "Reveal" under "Signing secret" to copy the webhook secret. Update the following variables with the secret key for both live and test environments:

$stripe_webhook_endpoint_secret = "whsec_...";
$stripe_webhook_endpoint_secret_test = "whsec_...";

5. Configure Shipping and Payment Options

You can set up shipping rates in Stripe by visiting Stripe Shipping Rates. Create your shipping rates and copy the identifiers for each rate, which start with shr_.

If you have one shipping rate, you can add it to the $shipping_list variable like this:

$shipping_list = ["shr_hrjigqezofdz9Zzd"];

If you have multiple shipping rates, include all their identifiers in the $shipping_list variable, separated by commas:

$shipping_list = ["shr_hrjigqezofdz9Zzd", "shr_trhjuhjqzaifegsq"];

Update the $payment_method_types array to include the payment methods you want to accept, such as ["card"] for card payments. For testing purposes, use the corresponding variables for the test mode.

$payment_method_types = ["card"]; // Payment methods allowed

$payment_method_types_test = ["card"]; // Test payment methods

6. Finalize Your Configuration

Ensure that all Stripe configuration details are correctly added to your project files. Your Stripe setup is now complete and ready for transactions!

Step 5/9 – Dashboard

In this section, you'll configure the settings for your dashboard, including login credentials and API keys for services like IP tracking. You can also add new users and control access levels to ensure the security of your store's management.

Step-by-Step Guide

1. Set Up a Secret Key

To secure your dashboard, you need to set a secret key. This key is used to ensure the secure functionality of the dashboard. Replace "random_secure_string_here" with your own secure key:

$secret_key_code = "random_secure_string_here";

2. Configure IP Tracking API

For IP tracking and geolocation services, you'll need an API key from a service provider. You can obtain this from FindIP. Replace "apikey" with your actual API key:

$findip_api = "apikey"; // Obtain from https://www.findip.net/

3. Set Up User Login Credentials

Define the list of users and their hashed passwords for accessing the dashboard. For example, the following configuration creates an admin user with the password "admin" (hashed for security):

$users = [
    'admin' => password_hash('admin', PASSWORD_DEFAULT),
];

You can add additional users by following the same format. Make sure to use password_hash() to securely hash passwords before storing them.

4. Important Notes

It's crucial that you do not forget your login credentials. Be sure to note them down in a secure place, as you will need them to access the dashboard later.

After completing the configuration, scroll down to the bottom of the page and click the Save button to apply your changes. Then, refresh the site. Please note that you will be logged out because the credentials have been updated.

5. Finalize Your Dashboard Configuration

Once you’ve configured the secret key, API key, and user credentials, your dashboard setup is complete. Ensure that these settings are correctly added to your project files to maintain the security and functionality of your dashboard.

Step 6/9 – Texts

This step allows you to modify various text elements across your site, such as the homepage welcome message, product descriptions, and FAQs. Tailor these texts to match your brand’s voice and provide relevant information to your customers.

Step 7/9 – Pixels

Set up tracking pixels for Google and Facebook to monitor customer actions and optimize your advertising campaigns based on data insights. Enter your tracking pixel IDs for Google and Facebook in the configuration settings provided.

Step 8/9 – Terms & Policies

In this section, you can define your store’s terms of service, privacy policy, and refund policy. These documents are essential for ensuring legal compliance and building trust with your customers.

Step 9/9 – Code (OPTIONAL)

Here, you can add or modify code snippets to customize the product pages and other areas of your store. This step is optional and intended for those who want to further personalize the look and feel of their site.

Create a Product Page

To create a product page, go to the "Prod" section and enter a name for the endpoint. This endpoint will be part of the URL for your product page, so if you choose "test" as your endpoint, the page will be accessible at https://[DOMAIN]/shop/test. The product page is managed via a JSON file where you can define various details about your product, such as title, images, descriptions, pricing, and more. This file allows you to customize your product page to fit your needs. You can modify the JSON structure to include information about your product’s features, available colors, pricing, and customer reviews. Make sure to adjust these details to accurately reflect your product and engage your customers effectively.