> For the complete documentation index, see [llms.txt](https://pingbusiness.gitbook.io/pingbusiness/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pingbusiness.gitbook.io/pingbusiness/integration/create-your-store-guide/part-1-customize-your-store.md).

# Part 1 - Customize Your Store

In Part 1 of the guide, you will turn the standard shop design into your shop.&#x20;

Nothing goes&#x20;on the Internet yet, and this doesn't cost any money. If you don’t like the result, you\
can change the instructions and run it again.

{% stepper %}
{% step %}

### Open the store launcher

Everything starts from one button in your PingBusiness dashboard. The\
launcher is a small page that writes the technical instructions for you - you\
fill in a short form, and it produces a block of text to hand to Cursor. You never\
write any of it yourself.

1. Sign into PingBusiness.
2. In the menu on the left, click My Store.
3. Click Open store launcher.
4. You’ll see two tabs with these details, stay on tab 1:&#x20;
   1. Customize UI&#x20;
   2. Deploy store

<figure><img src="https://4259156471-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEh8xmgV7S0jCh1wRA50D%2Fuploads%2F4pgf4kAIGmyfp6z3OUNJ%2Fimage.png?alt=media&amp;token=d9964f9f-6d07-4c92-88c3-44cddc8f38e2" alt=""><figcaption></figcaption></figure>

**(1)** The button you click **(2)** The Test Mode switch **(3)** Your store’s details

Opening the launcher from here carries your store’s details across automatically, so there is nothing for&#x20;you to copy.

{% hint style="info" %}
**Keep it in Test Mode for now**. If you see a Test Mode switch, leave it on. That means your shop is hidden from&#x20;customers while you build it. You’ll turn it off when you’re ready to open.
{% endhint %}
{% endstep %}

{% step %}

### Describe your brand

This is where you describe how your store should look in plain-English description.

<figure><img src="https://4259156471-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEh8xmgV7S0jCh1wRA50D%2Fuploads%2Fz2U4H1FMzaryRiVo2Et0%2Fimage.png?alt=media&amp;token=e5749107-ed16-4f6b-84f1-7dbe08799d91" alt=""><figcaption></figcaption></figure>

1. **Store name -** what customers should see.
2. **Primary colour** - your main brand colour, as a code like #FD4912. If you only know roughly what you want, search online for "colour picker" and copy the code it gives you
3. **Secondary / accent colours** - one or two more.
4. **Typography** - the lettering style, if you have one.
5. **Look, feel, content and UI requirements** - write plainly what you want. “Clean premium design, large product imagery, mobile-first navigation, accessible contrast” is a perfectly good answer.

{% hint style="info" %}
**About your colours:**\
Some colours are hard to read as text on a pale background. A good assistant&#x20;notices this and uses your accent colour only where it stays readable — as a&#x20;button fill with dark text on it, for instance. If it explains that it’s doing this, it’s

&#x20;protecting your customers, not ignoring you.
{% endhint %}
{% endstep %}

{% step %}

### Copy the prompt and paste it in Cursor

In this example, we are using a popular AI assistant, Cursor. You can use any other supported AI assistant that runs on your own device.

<figure><img src="https://4259156471-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEh8xmgV7S0jCh1wRA50D%2Fuploads%2FzU39z5Cb6LexmM5GvsGB%2Fimage.png?alt=media&amp;token=f5b32576-5153-4156-8577-0b1cbcb9ce7d" alt=""><figcaption></figcaption></figure>

1. Scroll down and click Copy prompt.
2. Open Cursor and start a new chat.
3. Paste the prompt text in.
4. Attach your logo and product photos to the same message.
5. Send the prompt.

<figure><img src="https://4259156471-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEh8xmgV7S0jCh1wRA50D%2Fuploads%2FFF61YHszFqVbKU8mj3tT%2Fimage.png?alt=media&amp;token=287498f6-506d-4191-9745-7ab98785075b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Only send images you're allowed to use**. Attach your own logo and your own photos. Don’t attach fonts or pictures you&#x20;found online unless you have permission to use them - that’s a legal problem&#x20;later, not a technical one.
{% endhint %}
{% endstep %}

{% step %}

### Let the prompt work for you

Now you wait. The prompt will trigger Cursor to fetch the shop software, reads its instruction manual, and&#x20;works through the changes. You’ll see it moving through files - you don’t need\
to follow along.

{% hint style="info" %}
This part may take approximately 20 - 50 minutes for the process to complete.
{% endhint %}

<figure><img src="https://4259156471-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEh8xmgV7S0jCh1wRA50D%2Fuploads%2FXmhd2zTbV9BCaBFBWxBf%2Fimage.png?alt=media&amp;token=c4f73cb7-e450-4785-acef-c21e0761fd48" alt=""><figcaption></figcaption></figure>

(1) What it does before touching anything

<figure><img src="https://4259156471-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEh8xmgV7S0jCh1wRA50D%2Fuploads%2FhWjqIw6aRGAuSvScDL4v%2Fimage.png?alt=media&amp;token=a8053776-654b-4e67-b543-d3c96f8ca6ea" alt=""><figcaption></figcaption></figure>

(1) A written record of every change (2) The files it edited

**What to look for when it finishes:**

* [x] A list of what it changed, and a note that the rest was left alone.
* [x] A mention of a secret scan - proof that no passwords or keys were left in the  \
  part of the shop customers download.
* [x] A list of things it couldn’t check. This is a good sign - it means it is being honest  \
  rather than claiming everything works.
  {% endstep %}

{% step %}

### View your store

Before anything goes online, have a look at your store. It will run the shop on your own computer&#x20;and give you a link to access.

<figure><img src="https://4259156471-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEh8xmgV7S0jCh1wRA50D%2Fuploads%2FOfo7lrkj1eu5JXg9ksSy%2Fimage.png?alt=media&amp;token=81d104bf-c723-4486-83a3-f2e50d34e795" alt=""><figcaption></figcaption></figure>

(1) Open this in your browser (2) What will not work yet, and why

<figure><img src="https://4259156471-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEh8xmgV7S0jCh1wRA50D%2Fuploads%2F1SAGclpjWowd8Uchv8cx%2Fimage.png?alt=media&amp;token=09c9c0ae-2560-4611-96b3-67ae0d1805ac" alt=""><figcaption></figcaption></figure>

(1) Your store name and colours (2) The product grid

Want to make changes? Just ask the prompt in plain words `Make the banner darker and the buttons rounder.The product titles are too small on my phone.`Then have a look again and repeat until you’re happy - this costs nothing and changes nothing on the internet.

{% hint style="info" %}
**Some things won't work yet, and that's expected**. Signing in, checking out and paying need the real shop system behind them,&#x20;which doesn’t exist until Part 2. At this stage you’re checking that it looks right,&#x20;not that it sells anything. The products you see are stand-ins.
{% endhint %}
{% endstep %}

{% step %}

### Read what Cursor decided, then move on

Cursor will explain the choices it made and flag anything only you can decide - a&#x20;font license, say, or a piece of text it couldn’t change safely.

<figure><img src="https://4259156471-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEh8xmgV7S0jCh1wRA50D%2Fuploads%2F4lUsS3gJFX8BPdn1lJ6t%2Fimage.png?alt=media&amp;token=6c39cb9b-63a2-42f8-9195-52c2608e0cf5" alt=""><figcaption></figcaption></figure>

(1) What it built and what it decided (2) The pasted deploy instructions
{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://pingbusiness.gitbook.io/pingbusiness/integration/create-your-store-guide/part-1-customize-your-store.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
