# Installing Shoppy

{% embed url="<https://cdn.mburger.cloud/334151/install-app-shoppy-mobile-app-shopify-sales-channel.mp4?data=eyJtZWRpYV9pZCI6MzM0MTUxLCJieXRlcyI6MjExNDI2LCJwcm9qZWN0X2lkIjoyMDMsImhhc19pbWdpeCI6MH0%3D>" %}

Log in to your Shopify store, and in the bar on the left side in the "**Sales Channels"** section, click on the **⊕** icon.

A popup will appear, and by scrolling to the bottom of the list, you'll find a section called "***Don't see the channel you're interested in? Visit the Shopify App Store**".* Click on "**Visit the Shopify App Store"** to be directed to the Sales Channels section of the Shopify store.

In the search bar at the top of the page, type "Shoppy" and enter the search. In the list of results you will see **Shoppy - Mobile App Builder**, and by clicking on it, you will be taken to the application page.&#x20;

. ![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FGnGD7qBQEpsDVzc6VM4L%2FSchermata%202021-11-30%20alle%2011.24.39.png?alt=media\&token=9878d3af-b070-4115-a190-c0f31ba92d8e)

From here, you can simply click on the "**Add App**" button to install the app. Once the app is installed, it will be located in the **Sales Channels** section, in the left bar on the Dashboard of your store.&#x20;

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fgn5jmy9ispAR7IVZLclC%2FSchermata%202022-04-15%20alle%2010.59.45.png?alt=media\&token=c033f835-6a99-4956-9646-bd94a5c458ec)


# Shoppy Mobile App Builder

Once Shoppy is installed, you will be able to see it in the "**Sales Channels**" section on the left side of the Shopify dashboard.&#x20;

Shoppy is divided into 5 main sections, each of which allows you to configure a specific aspect of your mobile app.&#x20;

### **Overview**

In the Overview section, you will be given two options on how you'd like to set up your app; **Quick Setup** or **Start from Scratch**.

If you select **Quick Setup**, Shoppy will automatically set up your homepage by selecting 7 widgets for you. Your catalogue will be filled with your 5 most recently updated collection. Lastly, your app's style will be configured for you! You will still need to ensure that your App Listing information (found under Settings) is inserted as you prefer. The App Listing contains fields such as the title and subtitle of your app, app categories, icon, keywords, and more

If you prefer to **Start from Scratch**, you will find a checklist of items that you should complete to customize your app. You will be guided through each step, and our team is available to help you in case you get stuck.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FWLyKCv1OPNzT0x9OZx81%2FScreenshot%202024-01-12%20at%2016.01.10.png?alt=media&amp;token=91b0c155-9432-4098-9b54-adc08c9b31c0" alt=""><figcaption></figcaption></figure>

### **App Builder**

​The App Builder section is for customizing the style and content of your app. Here, you can insert your brand logos and colors, select collections or products to showcase on the homepage, and set up the navigation menu for your catalogue.

{% content-ref url="/pages/MTMHPBjXfNZyBxseRNTT" %}
[App Builder](/shoppy-dashboard/app-builder)
{% endcontent-ref %}

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FTTPSXzAUdAajMQDKvWBA%2FScreenshot%202024-01-12%20at%2016.09.12.png?alt=media&amp;token=fe47c61f-ac27-4d35-a069-43827f2c6862" alt=""><figcaption></figcaption></figure>

### **Pages**

In the Pages section you can create your own custom page with the content of your choosing! You can select an icon and title for your page, as well as choose between three different types depending on your need. You can add these pages to your navigation if you choose, or link them to a widget from your homepage.

{% content-ref url="/pages/I3HStGVOPiTQw16hjMke" %}
[Pages](/shoppy-dashboard/contents/pages)
{% endcontent-ref %}

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FBeVSLsxjLi7dBy8I1R4X%2FScreenshot%202024-01-12%20at%2016.14.45.png?alt=media&amp;token=fa681f13-ba18-4dd3-b272-b6426183718e" alt=""><figcaption></figcaption></figure>

### **Engage**

In the Engage section you can create campaigns to boost customer engagement. You have the option to create push notifications and/or in-app messages (messages that appear within the app itself) to inform your users of new promotions, or that a collection is back in stock.

{% content-ref url="/pages/2E5aFbSadJxQU0Rh1NEp" %}
[Engage](/shoppy-dashboard/engage)
{% endcontent-ref %}

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FiYun5FSZJ25HjY1hVhP3%2FScreenshot%202024-01-12%20at%2016.19.02.png?alt=media&amp;token=f66feda5-049f-4217-bebf-2ae915a92440" alt=""><figcaption></figcaption></figure>

### **News**

In the News section, you can manage the news section on your app and decide which news will be displayed for your customers on the app.&#x20;

{% content-ref url="/pages/5xEGs6Wb5lazx7iry8sS" %}
[News](/shoppy-dashboard/contents/news)
{% endcontent-ref %}

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FJp65ChDrRXbqT5XR4RRI%2FScreenshot%202024-01-12%20at%2016.20.06.png?alt=media&amp;token=9a86982d-ca92-405a-ba15-bbb270335605" alt=""><figcaption></figcaption></figure>

### **Integrations**

In the Integrations section you can activate and configure the integrations that Shoppy has to offer, including Algolia, Growave, chat support (Whatsapp, Facebook Messenger, LiveChat), Firebase and Facebook Analytics.

{% content-ref url="/pages/NV3bvpAZPrn7pFKIxrPB" %}
[Integrations](/shoppy-dashboard/integrations)
{% endcontent-ref %}

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FJcshvSvpbYAMSLwGvt8P%2FScreenshot%202024-01-12%20at%2016.20.46.png?alt=media&amp;token=ca7bfce2-b72c-443a-8761-996bb9e34b66" alt=""><figcaption></figcaption></figure>

### **Settings**

The Settings section contains the general settings for your Account, Shoppy App Settings, App Listing (the information that Shoppy needs from you in order to launch your app on the iOS and Android stores), Billing and Plans, and Terms and Conditions.&#x20;

{% content-ref url="/pages/sAM40aWMydWqeO8cK8XX" %}
[Settings](/shoppy-dashboard/settings)
{% endcontent-ref %}

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FzcPLupHib4uEau3fpNP3%2FScreenshot%202024-01-12%20at%2016.22.40.png?alt=media&amp;token=06b421e3-3807-4990-a958-fac7b484eb0c" alt=""><figcaption></figcaption></figure>


# Overview

The Overview page is your app's dashboard. From a single screen, you can monitor sales performance, track setup progress, and manage advanced features like Drop & Exclusive Access and Discounts — without navigating through multiple sections.

The page is organized into four areas:

* **App publication status** — shows your app name, platforms (iOS / Android), and a link to publication details
* **Performance metrics** — key KPIs for a selected date range
* **Setup checklist** — a step-by-step guide to get your app live
* **Feature shortcuts** — quick access to Drop & Exclusive Access and Discounts

{% content-ref url="/pages/N77ArWH7gSEYXYBFa8FW" %}
[Drop & Exclusive Access](/shoppy-dashboard/overview/drop-and-exclusive-access)
{% endcontent-ref %}

{% content-ref url="/pages/79kg8fLMtoJOlbEWDqEQ" %}
[Discounts](/shoppy-dashboard/overview/discounts)
{% endcontent-ref %}


# Drop & Exclusive Access

{% hint style="info" %}
This feature is available on the **Bloom** plan and above.
{% endhint %}

## Overview

Drop & Exclusive Access allows merchants to temporarily lock their app and control when it becomes accessible again. During the lock period, all users who open the app will see a custom waiting screen. Merchants configure the lock window, brand the screen with their own content, and choose how users gain access once the drop goes live.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FfqQWyO4wG91Fe5Q5uH8B%2FDrop%20and%20exclusive%20content.png?alt=media&amp;token=9b9abcc8-65f0-44c9-a390-48c6cae72b50" alt=""><figcaption></figcaption></figure>

## How to Enable / Configure

### Enable Drop & Exclusive Access

1\. Go to the Overview section of your Shoppy Dashboard.

2\. Locate the Drop & Exclusive Access card and enable it.

3\. You will be redirected to the creation page.

### Step 1 — Set the time window

1\. Set the Start Date — when the lock screen will start appearing to all app users.

2\. Set the End Date — when the app will become freely accessible again.

### Step 2 — Customize the waiting screen

1\. Upload an Icon to display on the lock screen.

2\. Enter a Title for the lock screen.

3\. Enter a Subtitle for the lock screen.

### Step 3 — Choose the Action Type

1\. Button — displays a CTA button. Enter the custom link the button will redirect users to.

2\. Password Protection — restricts app access to users with the correct password. All other users remain on the lock screen until the end date.

3\. Save your configuration.

{% hint style="warning" %}
The lock screen is shown to all app users regardless of login status. Only users with the **correct password** can bypass it when Password Protection is enabled.
{% endhint %}

{% hint style="info" %}
Use the **Button action type** to redirect users to a waitlist, a teaser landing page, or your social media profile during the locked period.
{% endhint %}


# Discounts

{% hint style="info" %}
This feature is available on the **Bloom** plan and above.
{% endhint %}

## Overview

By default, Shopify discounts are applied only at checkout — meaning the price displayed in the app always reflects the full list price. The **Discounts feature** solves this by allowing merchants to define and surface custom prices directly in the app. Each discount tag is fully configurable and can be scoped to one or more collections.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FPlPkPZJ1n2CTKJmFKzJG%2FDiscounts.png?alt=media&amp;token=3f834997-8ebb-45e9-846c-33cf81eb2d53" alt=""><figcaption></figcaption></figure>

## How to Enable

1\. Go to the Overview section of your Shoppy Dashboard.

2\. Locate the **Discount** card and click to access it.

3\. You will be redirected to the discount tag creation page.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FF6Pa5n81V0rOJdWfbihE%2FDiscounts%20SC.png?alt=media&amp;token=6967a14d-d29d-4830-96eb-8977ea83252c" alt=""><figcaption></figcaption></figure>

### Step 1 — General settings

1. Enter an Internal Name for the discount (for your reference only, not shown to customers).
2. Enter the Discount Label — the text shown as the tag in the app (e.g. -20%, SALE, APP EXCLUSIVE).
3. Choose the **Text Color** for the label.
4. Choose the **Background Color** for the tag.

### Step 2 — Discount value and scope

1. Set the Discount Value to apply.
2. Select the Collection(s) to which the discount tag will apply.

### Step 3 — Status and markets

1. Set the Status of the discount tag (active or draft).
2. Select the Markets where the discount tag should be displayed.
3. Save your configuration.

{% hint style="info" %}
Use collection-scoped discount tags to promote exclusive app-only pricing on selected product lines without affecting your full catalog.
{% endhint %}


# App Builder

In the App Builder section of Shopify you can configure your preferred colors, images, and style of the mobile app. From here you can also select which collections or products to showcase on the homepage and decide how to arrange your catalogue. &#x20;

In the subsection *Homepage* you can select which widgets to display in the first view shown to the user.

{% content-ref url="/pages/GV0wwU61rUZkWTHbKOjT" %}
[Homepage](/shoppy-dashboard/app-builder/homepage)
{% endcontent-ref %}

In the subsection *Catalogue Menu* you can select and exhibit the collections that are shown in the application catalogue.&#x20;

{% content-ref url="/pages/Fs6eTFkMjXKJeIigihhT" %}
[Menu](/shoppy-dashboard/app-builder/menu)
{% endcontent-ref %}

In the *Product Page* area, you can customize key product information displayed to your customers such as metafileds, vendor, product description, and much more!&#x20;

{% content-ref url="/pages/Nq1RboMWXqE9VqxTldPZ" %}
[Product Page](/shoppy-dashboard/app-builder/product-page)
{% endcontent-ref %}

In *Profile Page,* you can customize which areas to insert under your user's profile page. You can choose between many options such as favorites sections, fidelity programs, add any sepcific pages or policies you want to share, and more.

{% content-ref url="/pages/2kZ8pdNDrqdz7NZByWwz" %}
[Users Profile](/shoppy-dashboard/app-builder/users-profile)
{% endcontent-ref %}

In the subsection *Navigation* you can reorder and customize which areas should be in your app's navigation bar.

{% content-ref url="/pages/0gh27zkgaTSOvaEiH0Qy" %}
[Navigation](/shoppy-dashboard/app-builder/navigation)
{% endcontent-ref %}

In the *Layout* subsection you can customize the layout of the main views of your Shoppy app.&#x20;

{% content-ref url="/pages/70U0Tv5I5bEIcwuyxAXH" %}
[Layout](/shoppy-dashboard/app-builder/layout)
{% endcontent-ref %}

In the *Brand Kit* subsection you can select the app colors and images that best suit your brand.

{% content-ref url="/pages/krsfAtxr1hRLlZaUOwVg" %}
[Brand Kit](/shoppy-dashboard/app-builder/brand-kit)
{% endcontent-ref %}


# Homepage

In this area you can select widgets for your Homepage. Each widget available in Shoppy can be customized to allow you to build your Homepage to your liking.

On the right side of the screen there is a preview of how your Homepage will appear to users on the application.

Shoppy's library of widgets is always expanding, so if you don't find the widget you're looking for, we'd be happy to receive your suggestions so we can include it in the future.

The widgets currently available include:&#x20;

{% tabs %}
{% tab title="Collections" %}

* [Single Collection](/shoppy-dashboard/app-builder/homepage/single-collection)
* [Collections Slider](/shoppy-dashboard/app-builder/homepage/collections-slider)
* [Collections Carousel](/shoppy-dashboard/app-builder/homepage/collections-carousel)
* [Collections Grid](/shoppy-dashboard/app-builder/homepage/collections-grid)
* [Circular Collections Carousel](/shoppy-dashboard/app-builder/homepage/circular-collections-carousel)
* [Gallery Collections Carousel ](/shoppy-dashboard/app-builder/homepage/gallery-collections-carousel)
  {% endtab %}

{% tab title="Products" %}

* [Single Product](/shoppy-dashboard/app-builder/homepage/single-product)
* [Products Carousel](/shoppy-dashboard/app-builder/homepage/products-carousel)
* [Products Grid](/shoppy-dashboard/app-builder/homepage/products-grid)
* [Circular Products Carousel](/shoppy-dashboard/app-builder/homepage/circular-products-carousel)
* [Gallery Products Carousel ](/shoppy-dashboard/app-builder/homepage/gallery-products-carousel)
  {% endtab %}

{% tab title="News" %}

* [Single News](/shoppy-dashboard/app-builder/homepage/single-news)
* [News Carousel](/shoppy-dashboard/app-builder/homepage/news-carousel)
* [Newsletter Subscription](/shoppy-dashboard/app-builder/homepage/newsletter-subscription)
  {% endtab %}

{% tab title="Media" %}

* [Images](/shoppy-dashboard/app-builder/homepage/images)
* [Images Carousel ](/shoppy-dashboard/app-builder/homepage/images-carousel)
* [Videos](/shoppy-dashboard/app-builder/homepage/videos)
  {% endtab %}

{% tab title="Other" %}

* [Search Bar](/shoppy-dashboard/app-builder/homepage/search-bar)
* [External Links](broken://pages/8hYu21NZZNVeT62CxiWZ)
* [Promo Banner](/shoppy-dashboard/app-builder/homepage/promo-banner)
* [Text](/shoppy-dashboard/app-builder/homepage/text)
* [Countdown Timer](/shoppy-dashboard/app-builder/homepage/countdown-timer)
* [Divider](/shoppy-dashboard/app-builder/homepage/divider)
* [Button](/shoppy-dashboard/app-builder/homepage/button)
  {% endtab %}
  {% endtabs %}


# Multi homepage

{% hint style="info" %}
This feature is available on the **Bloom** plan and above.
{% endhint %}

## Overview

With the new **Multi Home Page** feature, you can create multiple home pages for your app, allowing you to tailor the experience for different customer segments. For example, you can set up separate home pages for **Men, Women, and Kids**, ensuring a personalized shopping journey.

## **How to create multiple home pages** <a href="#how-to" id="how-to"></a>

{% embed url="<https://cdn.mburger.cloud/359598/Multi-homepgae-_web_.mp4?data=eyJtZWRpYV9pZCI6MzU5NTk4LCJieXRlcyI6OTA4NTg1MywicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ==>" %}

1. Navigate to **App Builder** and select **Home Page**.
2. Click the **“+”** button to add a new home page.
3. Name your home page (e.g., *Men, Women, Kids*).
4. Customize each home page by adding widgets to create a unique and relevant layout.

This feature allows you to design contextualized experiences for different audiences, improving user engagement and navigation.


# Search Bar

This widget depicts a search bar. Users can search for products and you can help them find the right products for them by setting up keywords on your Shopify store. On your mobile app, users can use the search bar for simpler shopping. When a user searches for a product, a maximum of 80 search results will be shown in order to offer an optimal mobile experience.

### Customizations

Customize your search bar by going to your Shoppy Dashboard > Homepage. Click on "Add Widget" and select "Search Bar".

You can choose between a rounded, squared, or bottom search bar style. You can also set the lateral margins for your search bar, choosing between the small, medium, or large preset, or use a custom one.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FaIvWO0CNAdajoISmcFAn%2FSearchBar_Dashboard.png?alt=media&amp;token=d532c4a6-7479-4990-a196-27c7133a7477" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fv6ggVvQJLCm0dbyZTjGI%2Fsearch.png?alt=media&amp;token=7c8909bf-bf9f-4ba0-bc05-66d5118e9893" alt=""><figcaption></figcaption></figure>


# Text

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FHnl1oY8uK1ELXmaPl05V%2FText_Q124.PNG?alt=media&amp;token=5d325658-ef04-42f9-86e6-60e18d2b4a30" alt="" width="188"><figcaption></figcaption></figure>

With the **Text Widget,** you can insert your own custom text for your shoppers to see as they scroll through your app.&#x20;

To insert text, start from your Shoppy Dashboard, then go to App Builder > Home Page > + Add Widget and select "Text".&#x20;

From there you can click **"Customize"** to change the design of the text, and even insert text in more than one language.

&#x20;You can click on **"Appearance"** to click on the text color and change it by clicking on the colored box. You can select a color using the slider that appears, or insert your own specific color to perfectly match your brand by typing it in the text box above "Hex".&#x20;

You can choose between Center or Left alignment, the choice is yours! There are also three different font sizes and weights to choose from, so pick the one that best suits your needs.

Finally, you can click "Margins" to either choose between one of the three default or "preset" margins; small, medium, or large. Or, you. may insert your own Custom margin width to personalize the amount of blank space you'd like on the sides of your text widget.

### Watch this tutorial to see how to insert text on your Shoppy App:&#x20;

{% embed url="<https://cdn.mburger.cloud/353721/SingleCollection_Setup_Dashboard.mp4?data=eyJtZWRpYV9pZCI6MzUzNzIxLCJieXRlcyI6MjM3ODkyNywicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

## Metafields support

Metafields support allows merchants to surface custom data from their Shopify store directly within Shoppy app widgets.

The interaction is straightforward — merchants simply choose the desired metafield from a dropdown list populated with the metafields already configured on their Shopify store. No additional setup is required inside Shoppy.

### How to Enable / Configure

1\. Go to App Builder > Homepage in your Shoppy Dashboard.

2\. Open the **Text widget** where you want to display a metafield.

3\. Locate the metafield selector within the widget settings.

4\. Select the desired metafield from the list — it is automatically populated with all metafields defined on your Shopify store.

5\. Save your changes.


# Button

### Creating your Button:

You can now add a call to action button on your homepage for users to click on! From your Shoppy Dashboard, you can choose a **button style,** insert a **button label**, and choose a **link destination** to direct users to after they tap on the button. Link destinations can lead users to a Collection, Custom URL, Pages, Cart, or Product.

To add your button, simply go to the homepage of your Shoppy Dashboard > Add Widget > Button. Next to your button widget, click Actions > Customize Widget and select your style, label, and link destination. You may select a margin style for your button, choosing between the presets of small, medium, and large, or setting your own.

Here's what it looks like in app, where we created a "Visit our Blog!" CTA to encourage users to read our important updates:

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fn0w0BWXwTrTq60eDArH0%2FButton.png?alt=media&amp;token=dfa422db-2aff-424f-b773-8d72b2ee0306" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You must add a link destination for your button to appear.
{% endhint %}

### Publishing your Button:

**You can choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}

### Watch the tutorial to learn how to set up your own Button:&#x20;

{% embed url="<https://cdn.mburger.cloud/353783/Button__2_Q124.mp4?data=eyJtZWRpYV9pZCI6MzUzNzgzLCJieXRlcyI6MTQ3MTkzMiwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}


# Divider

With the **Divider Widget,** you can visually break up space on your app, making it easier for users to navigate and more appealing to the eyes.&#x20;

Inserting one is simple, and can be done by following these steps; from your Shoppy Dashboard go to App Builder > Home Page > + Add Widget and select "Divider". You can select between three **default** divider height sizes: small, medium, and large. Alternatively, you can click on "default" to change the height to "custom" and insert your own value.


# Images

### Adding an Image Widget

This widget allows you to add an image to your Homepage. Click **Actions -> Customize Widget** to personalize the details of the widget such as its title, image, and aspect ratio. For each image you add, you can insert a **destination link** that will take users to your location of choice once they click on it. You can direct users to a custom URL, pages, cart, or to specific product.

Here is a full list of all of the details you can autonomously change about the Image Widget

* Title
* &#x20;Choose to show or hide the title
* &#x20;Show or hide a background color for the title text
* Insert a image by uploading a file from your computer or by inserting a link
* Insert a destination link of where to take your customers when they click on your image.&#x20;
* Choose whether or not to have a border around your widget
* Change the aspect ratio of the image choosing between presets or the original&#x20;
* Choose the width of the lateral margins of your widget, choosing between one of the presets or set your own

### Publishing your Image:

**You can also choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}

### Watch the video below to see how you can do this on your Shoppy Dashboard:&#x20;

{% embed url="<https://cdn.mburger.cloud/352454/Screen-Recording-2024-01-12-at-14.37.46.mp4?data=eyJtZWRpYV9pZCI6MzUyNDU0LCJieXRlcyI6MjM2MTMxMiwicHJvamVjdF9pZCI6Mjg4NCwiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

### See a preview how destination links work in the mobile app here:

{% embed url="<https://cdn.mburger.cloud/352476/RPReplay_Final1705311033.MP4?data=eyJtZWRpYV9pZCI6MzUyNDc2LCJieXRlcyI6NjYxOTA0NywicHJvamVjdF9pZCI6Mjg4NCwiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}


# Images Carousel

### Adding an Image Carousel&#x20;

With an Image Carousel, you can now insert various photos on your homepage to show off your best products! The Image Carousel is unique because for each image you add, you can insert a **destination link** that will take users to your location of choice once they click on it. You can direct users to a custom URL, pages, cart, or to specific product.

### Watch the Tutorial here: &#x20;

Here's how this can be set up in your Shoppy Dashboard:&#x20;

{% embed url="<https://cdn.mburger.cloud/353787/imagecarousel_2_Q124.mp4?data=eyJtZWRpYV9pZCI6MzUzNzg3LCJieXRlcyI6NTIyODgwMSwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

To add an Image Carousel, simply go to your Shoppy Dashboard and click "Add Widget" then select "Images Carousel". Then, you can select the "Add Widget" button that appears below your new widget to add various images to your app.

Click **Actions -> Customize Widget** to personalize the details of the widget such as its title, image, and aspect ratio. For each image you add, you can insert a **destination link** that will take users to your location of choice once they click on it. You can direct users to a custom URL, pages, cart, or to specific product.

Here is a full list of all of the details you can autonomously change about the Image Widget

* Title
* &#x20;Choose to show or hide the title
* &#x20;Show or hide a background color for the title text
* Insert a image by uploading a file from your computer or by inserting a link
* Insert a destination link of where to take your customers when they click on your image.&#x20;
* Choose whether or not to have a border around your widget
* Change the aspect ratio of the image choosing between presets or the original&#x20;
* Choose the width of the lateral margins of your widget, choosing between one of the presets or set your own

### Publishing your Image Carousel:

**You can also choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}


# Videos

{% hint style="info" %}
This feature is available on the **Grow** plan and above.
{% endhint %}

### Adding a Video Widget

This widget allows you to add a video to your Homepage. This can help you to add a personal touch and take advantage of the best a mobile app has to offer! To add a video widget, go to your Shoppy Dasbhoard, click "**Add Widget**" and select "**Video**".&#x20;

From there, you can click **Actions -> Customize Widget** to personalize the details of the widget such as its title, image, and aspect ratio. For each video you add, you can insert a **destination link** that will take users to your location of choice once they click on it. You can direct users to a custom URL, pages, cart, or to specific product.

Here is a full list of all of the details you can autonomously change about the Video Widget:

* Title
* &#x20;Choose to show or hide the title
* Insert a video by uploading a file from your computer
* Insert a destination link of where to take your customers when they click on your video&#x20;
* Choose whether or not to have a border around your widget
* Change the aspect ratio of the video's image choosing between presets or the original&#x20;
* Choose the width of the lateral margins of your widget, choosing between one of the presets or set your own

### Publishing your Video widget:

**You can also choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}

This widget allows you to add a video to your Homepage to allow for a more customized experience for your store. If your video has sound, users will be able to hear it as long as they have their volume on their mobile device!&#x20;

Like with images, videos on the homepage can be linked to particular locations by using a **destination link.** You can direct users to a custom URL, pages, cart, or to specific product once your video is tapped on.

Watch the tutorial below to see how you can set this up on your Shoppy Dashboard:

{% embed url="<https://cdn.mburger.cloud/352457/Screen-Recording-2024-01-12-at-14.51.14.mp4?data=eyJtZWRpYV9pZCI6MzUyNDU3LCJieXRlcyI6MTIzMzQwOCwicHJvamVjdF9pZCI6Mjg4NCwiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

Watch this short clip below to see how link destinations can work with videos in your own app:

{% tabs %}
{% tab title="Title" %}
![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F6AgdlEoziYU61OzmlVsw%2FFrame%201.png?alt=media\&token=ed009219-2cd5-49d2-adc2-6b0065032d29)

* ***Video Title***: an additional title you can give the widget, displayed above the video.&#x20;
* ***Don't Show the Title***: with this checkbox you can decide whether or not to show the title of the widget, added above the video.
  {% endtab %}

{% tab title="Style" %}
![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FvGFWGxrgGaZNjRPv2k2F%2Fvideo.png?alt=media\&token=6def90fa-21ec-40e0-811e-b19907635598)

* ***Choose video***: in this field you can upload a video to be displayed in the widget.
* ***Link***: you can choose whether to direct the user to a collection or to an external link when the image is tapped on.
* *Collection*: choose a collection to sent the user to when the image is tapped.
* *Personalized URL*: choose an external link to send users to when they tap on the image.
* *Cart:* send users to their cart when they tap on the image
* *Product:* send users to a product of your choice once the image is tapped
  {% endtab %}

{% tab title="Aspect Ratio" %}
![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FqEKeIo032paWcxo1OjVS%2FFrame%203.png?alt=media\&token=7ebbeaa5-3db2-4fbc-a503-ec9f30e4b300)

**Aspect Ratio**

Allows you to choose the aspect ratio of the image of the video's image:

* Original: use the aspect ratio of the original video
* Use Custom Dimensions: choose a custom aspect ratio of 1:1, 4:3 or 4:5
  {% endtab %}
  {% endtabs %}

With the addition of this feature on Shoppy, videos that you upload under Shopify under a description of a product can now also appear in-app!&#x20;


# Collections Slider

### Creating your Collections Slider:

With this widget you can insert a slider of collections on your Homepage. Once inserted, click on *"***Add Collection*****"*** and choose which collections to show.

Here's how your **Colletions Slider** can look like on mobile:

{% embed url="<https://cdn.mburger.cloud/353773/Collections-Slider.mp4?data=eyJtZWRpYV9pZCI6MzUzNzczLCJieXRlcyI6MTQ5NzIzMywicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

### Customizing your Collections Slider

By clicking on **Actions -> Customize Widget** you can customize the details of the widget.&#x20;

Here, you can choose your widget's:

* Title
* &#x20;Choose to show or hide the title
* &#x20;Show or hide a background color for the title text
* &#x20;Show or hide a call to action button (and choose your label's text!)
* Choose whether or not to have a border around your widget
* Pick whether to show or hide an overly layer for the images of your collections
* Decide whether to align the widget in the center or to the left
* Change your navigation style; you can choose for the sliders to be dots, arrows, or line bars
* Change the aspect ratio of the images of your collections, choosing between presets or the original&#x20;
* Choose the width of the lateral margins of your widget, choosing between one of the presets or set your own

You can choose to show or hide a **title,** **label**, **call to action**, and whether to **align** left, center, to **highlight** the image, or to add an image **overlay.** You can also choose the aspect ratio for your images.  For the Collections Slider, you can also choose how you want to show users that they can **navigate** the collections; with dots, arrows, or a line bar.&#x20;

Next to "Collections Slider" on your dashboard, an indicator shows how many collections are displayed in the slider.

### Watch this video to see how this is done in the Shoppy Dashboard:

{% embed url="<https://cdn.mburger.cloud/352444/Screen-Recording-2024-01-12-at-12.01.24.mp4?data=eyJtZWRpYV9pZCI6MzUyNDQ0LCJieXRlcyI6Mzc0OTU4NiwicHJvamVjdF9pZCI6Mjg4NCwiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

### Publishing your Collections Slider

**You can choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}


# Single Collection

### Creating your Single Collection <a href="#single-collection" id="single-collection"></a>

With this widget you can insert a collection on your Homepage. Once inserted, click on *"***Add Collection*****"*** and choose which collections to show by searching for it and clicking on it.

Here's an example of how you can design your Single Collection, as we did below with "Shoes" that shows a white title and a full sized image of the collection.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F0T1n9sVRryCuUJyJmRnb%2FSingle%20Collection.png?alt=media&amp;token=6f9d8a1c-2f21-4e90-bca5-add3ea73dd95" alt=""><figcaption></figcaption></figure>

### Customizing your Collections Slider

By clicking on **Actions -> Customize Widget** you can customize the details of the widget.&#x20;

Here, you can choose your widget's:

* Title
* &#x20;Choose to show or hide the title
* &#x20;Show or hide a background color for the title text
* &#x20;Show or hide a call to action button Show or hide a call to action button (and choose your label's text!)
* Choose whether or not to have a border around your widget
* Pick whether to show or hide an overly layer for the images of your collections
* Decide whether to align the widget in the center or to the left
* Change the aspect ratio of the image of your collection, choosing between presets or the original&#x20;
* Choose the width of the lateral margins of your widget, choosing between one of the presets or set your own

### Publishing your Single Collection

**You can choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}

### Here's a tutorial that shows the changes reflected in real time on the Shoppy Dashboard:

{% embed url="<https://cdn.mburger.cloud/353721/SingleCollection_Setup_Dashboard.mp4?data=eyJtZWRpYV9pZCI6MzUzNzIxLCJieXRlcyI6MjM3ODkyNywicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}


# Collections Grid

### Creating your Collections Grid

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F5EeVb1kSKujsBpseFA2s%2FCollections%20Grid.png?alt=media&amp;token=0db7d5da-f27b-48d5-bebf-e194b8a8340b" alt=""><figcaption></figcaption></figure>

With this widget you can insert a grid on your Homepage. Once inserted, click on "**Add Collection**" and choose which collection to display.&#x20;

By clicking on **Actions -> Customize Widget** you can customize the details of the widget. These are the following aspects that you can personalize:&#x20;

* Title
* &#x20;Choose to show or hide the title
* &#x20;Show or hide a background color for the title text
* &#x20;Show or hide a call to action button (and choose your label's text!)
* Choose whether or not to have a border around your widget
* Pick whether to show or hide an overly layer for the images of your collections
* Decide whether to align the widget in the center or to the left
* Change the aspect ratio of the image of your collection, choosing between presets or the original&#x20;
* Choose the width of the lateral margins of your widget, choosing between one of the presets or set your own

See how we set up our Collections Grid for our mobile app:

{% hint style="info" %}
Note that these customizations apply to all of the collections within this widget. Next to "Collections Grid" on your dashboard, an indicator shows how many collections are displayed in the slider.
{% endhint %}

By clicking on the title of a collection that you've added, you will see the button "**Change**" appear. From there, you will see the options to "Change Collection", "Customize" or "Remove Collection". From "Customize", you can choose to use the default Shopify image or you can choose a unique image just for your mobile app.

### Follow our tutorial to get the hang of how to do this on your own Shoppy Dashboard:&#x20;

{% embed url="<https://cdn.mburger.cloud/352450/CollectionsGrid_UpdatedVideo.mp4?data=eyJtZWRpYV9pZCI6MzUyNDUwLCJieXRlcyI6NDcxNDE4NiwicHJvamVjdF9pZCI6Mjg4NCwiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

### Publishing your Collections Grid:

**You can choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}


# Collections Carousel

### Inserting a Collections Carousel&#x20;

{% embed url="<https://cdn.mburger.cloud/353776/Collections-carousel.mp4?data=eyJtZWRpYV9pZCI6MzUzNzc2LCJieXRlcyI6MjIzNzkxMiwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

Inserting a **Collections Carousel** is simple way to display your favorite collections for your clients to see. It and can be done by following these steps; from your Shoppy Dashboard go to App Builder > Home Page > + Add Widget and select "**Collections Carousel".**

Once added, you can click on +Add collection to add the collections of your choice to be displayed on your homepage. By clicking on Actions, you can click Customize, Publish, or Remove to delete your widget.

### Customizing your Carousel:

You can customize all of the following elements from your Shoppy Dashboard:

* Title
* &#x20;Choose to show or hide the title
* &#x20;Show or hide a background color for the title text
* &#x20;Show or hide a call to action button (and choose your label's text!)
* Choose whether or not to have a border around your widget
* Pick whether to show or hide an overly layer for the images of your collections
* Decide whether to align the widget in the center or to the left
* Change the aspect ratio of the image of your collection, choosing between presets or the original&#x20;
* Choose the width of the lateral margins of your widget, choosing between one of the presets or set your own

### Publishing your Carousel:

**You can choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}


# Circular Collections Carousel

### How to insert a Circular Collections Carousel&#x20;

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F9k4gPvuDOkEei1HAYzgc%2FCircular%20carousel%20-%20title.png?alt=media&amp;token=c2d01121-999f-41fc-a5d9-be16a2b84209" alt=""><figcaption></figcaption></figure>

As its name suggestions, the **Circular Collections Carousel** is a variation of the Collections Carousel, just in a different format. You can insert both types of Collection Carousels to create a more interesting look for your mobile app.

Inserting a **Circular Collections Carousel** is simple, and can be done by following these steps; from your Shoppy Dashboard go to App Builder > Home Page > + Add Widget and select "**Circular Collections Carousel".**

Once added, you can click on +Add collection to add the collections of your choice to be displayed on your homepage. By clicking on Actions, you can click Customize, Publish, or Remove to delete your widget.

### Customizing your Carousel:

You can customize your widget's design by inserting a **title,** or by  choosing to hide or show the title text. You can also choose whether to have a **border**, and either choose from one of the preset **lateral** and **internal margins** or customize them yourself!

### Publishing your Carousel:

**You can choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}


# Gallery Collections Carousel

### How to insert a Gallery Collections Carousel&#x20;

{% embed url="<https://cdn.mburger.cloud/353777/Gallery-Collections-Carousel.mp4?data=eyJtZWRpYV9pZCI6MzUzNzc3LCJieXRlcyI6MjYyMjg3OCwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

As its name suggestions, the **Gallery Collections Carousel** is a variation of the Collections Carousel, just in a different format. The images of the collections are square like in the standard Collections Carousel, but the image that the user is viewing at the moment is visualized in the forefront, bringing more attention to it.&#x20;

Inserting a **Gallery Collections Carousel** one is simple, and can be done by following these steps; from your Shoppy Dashboard go to App Builder > Home Page > + Add Widget and select "**Circular Collections Carousel".**

Once added, you can click on +Add collection to add the collections of your choice to be displayed on your homepage. By clicking on Actions, you can click Customize, Publish, or Remove to delete the carousel.&#x20;

### Customizing your Gallery Collections Carousel:

You can customize your widget's design by inserting a **title,** or by  choosing to hide or show the title text.&#x20;

You can change its **appearance** by using the toggles to show or hide your:

* Collection **title**
* Collection **title background** (you can also choose the color that the background should be!)&#x20;
* Call to action **button** (and choose your label's text!)
* **Borders**
* &#x20;**Overlay** Layer (to add a "shaded" affect to your collection images)
* **Alignmen**t of the image; center or left
* **Margins**; Choose whether to have a preset margin that is small, medium, or large, or create your own custom margin size&#x20;

### Publishing your Gallery Collections Carousel:

**You can also choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}


# Single Product

### Creating your Single Product Widget

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FDp4QCJXdrXiG8PSC8lor%2FSingle%20Product.png?alt=media&amp;token=f1531c60-e851-4a24-958d-782cfd33b5a2" alt=""><figcaption></figcaption></figure>

With this widget you can insert a collection on your Homepage. From your Shoppy Dashboard, click "**Add Widget**", then select "**Single Product**". Once inserted, click on *"***Add&#x20;*****"*** and choose which collections to show by searching for it and clicking on it.

### Customizing your Collections Slider

By clicking on **Actions -> Customize Widget** you can customize the details of the widget.&#x20;

Here, you can choose your widget's:

* Title
* &#x20;Choose to show or hide the title
* &#x20;Show or hide a background color for the title text
* &#x20;Show or hide a call to action button
* Choose whether or not to have a border around your widget
* Pick whether to show or hide an overly layer for the image of your product
* Decide whether to align the widget in the center or to the left
* Change the aspect ratio of the image of your product, choosing between presets or the original&#x20;
* Choose the width of the lateral margins of your widget, choosing between one of the presets or set your own

### Publishing your Product:

**You can also choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}

###


# Products Grid

### Creating a Products Grid

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FQbFkh3vRmy8cwZq0BNxX%2FProducts%20Grid.png?alt=media&amp;token=b0fa584c-e8b6-4049-ad1e-0dcea1d38c7f" alt=""><figcaption></figcaption></figure>

This widget allows you to insert a products grid. You can add one by heading to your Shoppy Dashboard > App Builder > Add Widget and select **Products Grid.**&#x20;

Once inserted, click on ***Add Collection*** and choose which collection to display. By default, the first 4 products of the collection are shown. Each product is shown with its image, price, and name.  You can change the collection that you chose by clicking on the collection, then selecting "Change".

These are the following aspects that you can personalize:&#x20;

* Title
* &#x20;Choose to show or hide the title
* &#x20;Show or hide a background color for the title text
* &#x20;Show or hide a call to action button
* Choose whether or not to have a border around your widget
* Pick whether to show or hide an overly layer for the images of your collections
* Decide whether to align the widget in the center or to the left
* Change the aspect ratio of the image of your collection, choosing between presets or the original&#x20;
* Choose the width of the lateral margins of your widget, choosing between one of the presets or set your own

A product grid can help you show off some items that you want to draw particular attention to.

### Publishing your ProductsGrid:

**You can choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}


# Products Carousel

### Inserting a Products Carousel&#x20;

{% embed url="<https://cdn.mburger.cloud/353774/Products-carousel.mp4?data=eyJtZWRpYV9pZCI6MzUzNzc0LCJieXRlcyI6MTUzMTMyNSwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ==>" %}

Inserting a **Products Carousel** is simple way to display your favorite collections for your clients to see. It and can be done by following these steps; from your Shoppy Dashboard go to App Builder > Home Page > + Add Widget and select "**Products Carousel".**

Once added, you can click on +Add collection to add the collections of your choice to be displayed on your homepage. By clicking on Actions, you can click Customize, Publish, or Remove to delete your widget.

### Customizing your Carousel:

Your Products Carousel is highly personalizable. You can customize the following aspects from your dashboard:&#x20;

* Title
* &#x20;Choose to show or hide the title
* &#x20;Show or hide a background color for the title text
* &#x20;Show or hide a call to action button
* Choose whether or not to have a border around your widget
* Pick whether to show or hide an overly layer for the images of your collections
* Decide whether to align the widget in the center or to the left
* Change the aspect ratio of the image of your collection, choosing between presets or the original&#x20;
* Choose the width of the lateral margins of your widget, choosing between one of the presets or set your own

### Publishing your Carousel:

**You can choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}


# Circular Products Carousel

### How to insert a Circular Products Carousel&#x20;

{% embed url="<https://cdn.mburger.cloud/353779/Circular-Products-Carousel.mp4?data=eyJtZWRpYV9pZCI6MzUzNzc5LCJieXRlcyI6MjE4MzMyMiwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

As its name suggestions, the **Circular Products Carousel** is a variation of the Products Carousel, just in a different format. You can insert both types of Product Carousels to create a more interesting look for your mobile app.

Inserting a **Circular Products Carousel** one is simple, and can be done by following these steps; from your Shoppy Dashboard go to App Builder > Home Page > + Add Widget and select "**Circular Products  Carousel".**

Once added, you can click on +Add collection to add the collections of your choice to be displayed on your homepage. By clicking on Actions, you can click Customize, Publish, or Remove to delete your widget.

### Customizing your Carousel:

You can customize your widget's design by inserting a **title,** or by  choosing to hide or show the title text. You may choose the **number of products to show** within the widget.  You can also choose whether to have a **border**, and either choose from one of the preset **lateral** and **internal margins** or customize them yourself!&#x20;

### Publishing your Carousel:

**You can choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}


# Gallery Products Carousel

{% embed url="<https://cdn.mburger.cloud/353775/Gallery-Products-Carousel.mp4?data=eyJtZWRpYV9pZCI6MzUzNzc1LCJieXRlcyI6MjExMzY0NSwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ==>" %}

&#x20;As its name suggestions, the **Gallery Products Carousel** is a variation of the Collections Carousel, just in a different format. The images of the collections are square like in the standard Collections Carousel, but the image that the user is viewing at the moment is visualized in the forefront, bringing more attention to it. &#x20;

Inserting a **Gallery Collections Carousel** one is simple, and can be done by following these steps; from your Shoppy Dashboard go to App Builder > Home Page > + Add Widget and select "**Gallery Products Carousel".**

You can click on +Add collection to add a collection of your choice to your homepage. You can also choose how many products to show from that collection in the carousel.  By clicking on Actions, you can click Customize, Publish, or Remove to delete the carousel.&#x20;

### Customizing your Gallery Collections Carousel:

You can customize your widget's design by inserting a **title,** or by  choosing to hide or show the title text.&#x20;

You can change its **appearance** by using the toggles to show or hide your:

* Collection **title**
* Collection **title background** (you can also choose the color that the background should be!)&#x20;
* Call to action **button**
* **Borders**
* &#x20;**Overlay** Layer (to add a "shaded" affect to your collection images)
* **Alignmen**t of the image; center or left
* **Margins**; Choose whether to have a preset margin that is small, medium, or large, or create your own custom margin size&#x20;

### Publishing your Gallery Collections Carousel:

**You can also choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}


# Single News

{% hint style="info" %}
This feature is available on the **GROW** plan and above.
{% endhint %}

### Creating a Single News Widget:

This widget represents a single news item. Once inserted, click on *Add News* and choose a news item to be displayed.&#x20;

By clicking on **Actions -> Customize Widget** you can customize the details of the widget. These are all of the details you can change yourself from your Shoppy Dashboard:

* Title
* &#x20;Choose to show or hide the title
* &#x20;Show or hide a background color for the title text
* &#x20;Show or hide a call to action button (and choose your label's text!)
* Choose whether or not to have a border around your widget
* Pick whether to show or hide an overly layer for the image of your product
* Decide whether to align the widget in the center or to the left
* Change the aspect ratio of the image of your news choosing between presets or the original&#x20;
* Choose the width of the lateral margins of your widget, choosing between one of the presets or set your own

### Publishing your News:

**You can also choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}

### Here's a tutorial of how it works in the Shoppy Dashboard:

{% embed url="<https://cdn.mburger.cloud/352451/Screen-Recording-2024-01-12-at-12.39.31.mp4?data=eyJtZWRpYV9pZCI6MzUyNDUxLCJieXRlcyI6MjUzMzU1MCwicHJvamVjdF9pZCI6Mjg4NCwiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}


# News Carousel

{% hint style="info" %}
This feature is available on the **Grow** plan and above.
{% endhint %}

### Adding a News Carousel&#x20;

This widget consists of a customizable news carousel. Once inserted, click on **Add News** to choose which news item you'd like to display.&#x20;

&#x20;Under the news widget, you will see a button "**Change**". By clicking on it, you will see options to change the news, or to remove the current one. A counter next to the News Carousel widget will tell you how many news pieces you have in the carousel. You will also see a button **Add news** that allows you to add another news article to the carousel.&#x20;

By clicking on **Actions -> Customize Widget** you can customize these details of the widget:

* Title
* &#x20;Choose to show or hide the title
* &#x20;Show or hide a background color for the title text
* &#x20;Show or hide a call to action button (and choose your label's text!)
* Choose whether or not to have a border around your widget
* Pick whether to show or hide an overly layer for the image of your product
* Decide whether to align the widget in the center or to the left
* Change the aspect ratio of the image of your news choosing between presets or the original&#x20;
* Choose the width of the lateral margins of your widget, choosing between one of the presets or set your own

### Publishing your News:

**You can also choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}

### Here is a tutorial you can follow to set this up on your Shoppy Dashboard:&#x20;

{% embed url="<https://cdn.mburger.cloud/353788/NewsCarousel_2_Q124.mp4?data=eyJtZWRpYV9pZCI6MzUzNzg4LCJieXRlcyI6ODcwOTg4LCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}


# Promo Banner

{% hint style="info" %}
This feature is available on the **Grow** plan and above.
{% endhint %}

### Creating a Promo Banner

Thanks to the new “Promo Banner” widget, Shoppy admins are now able to insert a **dynamic banner that catches the attention of their customers.** The Promo Banner can be used to let customers know about promotions, launches, and discounts. Tailor your content by setting colours and text that best suit your brand, and animate it to make your app more interactive and eye-catching.

To add a promo banner: Go to 'App Builder' on your Shoppy Dashboard and click on 'Homepage'Select 'Add Widget', then scroll down and click on '**Promo Banner**' to see it added to your lists of widgets.

Remaining on the Homepage, you can customize the Promo Banner by selecting the 'Actions' button. You can choose  'Customize' 'Publish' or  'Remove Widget'. In 'Customize Widget', you can customize your Promo Banner by inserting text to appear on the banner, selecting the font color you would like the text on the banner to appear, and choosing a background color for the banner. Click 'Save' to record your changes, or 'Cancel' to undo them.

Customizing your Promo Banner

You can customize the design of your banner to make it more eye-catching by changing the following elements:

* Insert banner text
* Select a banner background & text color
* Choose whether or not to show a border
* Select what lateral margin width to use, either selecting one of the options from presets, or creating your own.

### Publishing your Promo Banner widget:

**You can also choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}

### Here's a tutorial on how to do it in your Shoppy Dashboard:

{% embed url="<https://cdn.mburger.cloud/353718/PromoBanner_Markets_Dashboard.mp4?data=eyJtZWRpYV9pZCI6MzUzNzE4LCJieXRlcyI6MzUwODI4NiwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}


# Newsletter Subscription

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FLcY8TylPNnK9CQUqyLv4%2FNewsletter%20Subscription.png?alt=media&amp;token=a0b54c7d-e236-4553-99dc-88a82829599c" alt=""><figcaption></figcaption></figure>

This widget allows you to encourage your app visitors to subscribe to your newsletter. You can enter the title, or the call to action for your widget, a description, and set the color for the "Subscribe" button.

To set it up, head to **Settings >App Settings** and scroll down to **Newsletter Subscription**, and click **Enable**. By clicking on **Actions > Customize** you can choose the text to be displayed on the subscription checkbox label. Click save to record save your updated settings.

Then, go to "App Builder", and remaining on the Homepage tab, scroll down and click on the `+Add Widget` button and select **Newsletter Subscription**. Once added to your list of widgets, you can then go to Actions, "Customize widget" to insert a unique widget title, description, and choose a background color. Click save to register your changes.

### Customizing your Newsletter Subscription Widget

You can design or customize your widget's:

* Title
* Text description
* Select a background color for your newsletter subscription
* Choose whether or not to have a border
* Insert a photo, and choose from a preset aspect ratio or create your own
* Add margins, and choose whether to use a preset size or set your own

### Publishing your Newsletter Subscription Widget

**You can also choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}

### Here's how to set it up on your Shoppy Dashboard:

{% embed url="<https://cdn.mburger.cloud/348814/NEW_newsletter_subscription_mp4?data=eyJtZWRpYV9pZCI6MzQ4ODE0LCJieXRlcyI6MjM2NTI4NywicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

In-app, users will see the title and description that you set, and will also have a text box to insert their email into. Once users select "I accept the Privacy Policy" and click "Subscribe", they will be added to your Newsletter Subscription. Here's how the users will see this:


# Countdown Timer

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FTO5D9vdUGqnWwo9kj7U7%2FCountdown%20Timer.png?alt=media&amp;token=c89e3f75-3232-4704-a87b-498871447143" alt=""><figcaption></figcaption></figure>

With the **Countdown Timer** widget, you can excite your customers by involving them in the release of your new products, collections, and sales.&#x20;

You can insert a **Countdown Timber** by going to your Shoppy Dashboard, clicking "Add Widget" and selecting "Countdown Timer". Click on the "Actions" button that appears next to the widget, then click Customize, Publish, or delete the widget if you don't want it on your page anymore.

### Customizing your Countdown Timer:

You can design or customize your widget's:

* Title
* Choose whether to show or hide the title text
* Set the end date and time for the countdown
* Choose whether or not to hide the countdown once it has finished
* Select a background and text color for your timer
* Choose whether or not to have a border
* Insert a photo, and choose from a preset aspect ratio or create your own
* Add a button complete with a label, background color, text color, and destination link
* Add margins, and choose whether to use a preset size or set your own

### Publishing your Countdown Timer:

**You can also choose to publish (show in) or hide your widget in specific markets.** To show the widget in a market, click **"Show in"** under **Markets**, then select the regions or countries of your choose from the drop down menu. Click **"Hide in"** under **Markets**, then select the areas where your widget should not be shown to only hide the widget from one or more locations of your choice.

You may also **schedule when your widgets should appear and disappea**r  by clicking the toggle next to "Schedule". From there, you can select the **start date and time** from the calendar, then click "Apply". Do the same for the **end date**, and make sure to save your changes!&#x20;

{% hint style="warning" %}
Please note that widgets' timezone release are based on the timezone of your Shoppy Dashboard.
{% endhint %}

### Follow our Tutorial to create your Countdown Timer

{% embed url="<https://cdn.mburger.cloud/353785/CountdownTimer_2_Q124.mp4?data=eyJtZWRpYV9pZCI6MzUzNzg1LCJieXRlcyI6Mjg1NjM0OSwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ==>" %}

###


# Metafields Support

Metafields support allows merchants to surface custom data from their Shopify store directly within Shoppy app widgets.

The interaction is straightforward — merchants simply choose the desired metafield from a dropdown list populated with the metafields already configured on their Shopify store. No additional setup is required inside Shoppy.

### How to Enable / Configure

1\. Go to App Builder > Homepage in your Shoppy Dashboard.

2\. Open the **Text widget** where you want to display a metafield.

3\. Locate the metafield selector within the widget settings.

4\. Select the desired metafield from the list — it is automatically populated with all metafields defined on your Shopify store.

5\. Save your changes.


# Menu

The Menu (previously called “Catalog”) allows you to organize and personalize your app’s navigation by grouping and displaying your Shopify collections.

### **Overview**

In this section you can choose the collections that will be displayed in the **Menu Tab** of your Shoppy app. On the right you can see a preview of how they will be displayed in the app. &#x20;

You can add a new collection by clicking the **⊕&#x20;*****Add Collection*** button.  &#x20;

You can drag and drop collections with the icon on the right to change their order and to organize their order. If you do not want a collection to appear in the list, it can be deleted by going  ***Edit -> Remove***.

See the tutorial below:

{% embed url="<https://cdn.mburger.cloud/336380/categorie-nuove.mp4?data=eyJtZWRpYV9pZCI6MzM2MzgwLCJieXRlcyI6NDgxNTQ3NywicHJvamVjdF9pZCI6MjAzLCJoYXNfaW1naXgiOjB9>" %}

### Multiple Menu <a href="#sub-catalogue" id="sub-catalogue"></a>

You can now create up to five separate menus (e.g., Men, Women, Kids), visible in the tab bar. This allows users to browse product categories with ease and speed. Create these different sections by clicking the **⊕&#x20;*****Add Menu*** button. You can then add collections underneath each Catalogue to differentiate your product categories.&#x20;

{% embed url="<https://cdn.mburger.cloud/347427/Catalgouesubmenu_-2023-07-18-at-18.00.38.mp4?data=eyJtZWRpYV9pZCI6MzQ3NDI3LCJieXRlcyI6MTc3MDM1MCwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

### Hero Banner

You can now add a **Hero Banner** to any menu to visually highlight content, promotions, or categories at the top of the screen.

To enable it:

1. Go to the menu where you want to add a banner.
2. Click **Edit**.
3. Enable the **Hero Banner** option.
4. Upload your banner image.
5. Choose the **display format** that best fits your layout (e.g., full width or aspect ratio).

Hero banners are a powerful way to make your app more engaging and aligned with your brand identity.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F5FzhOV4WNZXt8bRB8HIh%2FHero%20Banner.png?alt=media&amp;token=c54037d5-5c43-46de-91a7-05a459cab468" alt=""><figcaption></figcaption></figure>

### Collections customizations <a href="#catalogue-customizations" id="catalogue-customizations"></a>

Click on **Actions -> Customize Widget** to customize the collections in your app's menu:

* **Use Another Image**: Upload a custom image to replace the default one from Shopify.
* **Aspect Ratio**: Choose between **3:2**, **1:1**, or **16:9** aspect ratios for collection images.

### Highlighting Collections

To emphasize key collections, you now have three options:

1. **Pin to Top:** Fixes the collection at the top of the list and displays it with **bold text** and **larger font size**.
2. **Title Color Customization:** Change the color of the collection title to make it stand out.
3. **Add a Badge:** Add a custom badge next to the collection name (e.g., *NEW*, *SALE*, *PROMO*) to highlight special categories.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FioUgVtMawE5JUJct3rwd%2FHighlighting%20Collections.png?alt=media&amp;token=3e23ed6b-6225-4fce-b781-0db9ea20e7d2" alt=""><figcaption></figcaption></figure>

### **Brand List Page**

In addition to collections, you can now add a dedicated **Brand List** page to any menu section in your app. This page displays all the vendors from your Shopify store in alphabetical order, allowing your customers to browse products by brand directly from the menu.

To add the Brand List page to a menu section:

* Open the menu you want to edit, or create a new one.
* Click **"Add Section"** and select **Brand List** from the available options.
* Enter a title for the section and choose your preferred icon, or upload a custom one.
* Click **'Save'** to apply your changes.

Once the Brand List page is live in your app, you can customize how vendors are displayed by navigating to the **Layout** section in the App Builder and selecting your preferred display mode.


# Collection Page

{% hint style="info" %}
This feature is available on the **Bloom** plan and above.
{% endhint %}

## Overview

The Collection Page Builder is a new dedicated tab in the App Builder for customizing the Product Listing Page: the screen users see when browsing a collection. Merchants can add, remove, and reorder widgets, and configure the Product Grid with new display options including color variant visualization.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FwO7jDru4xfdT7OHWQqeD%2FScreenshot%202026-06-19%20alle%2015.05.37.png?alt=media&amp;token=8b614f33-3df2-48cf-b52b-fe7d0cbb84bf" alt=""><figcaption></figcaption></figure>

## How to Enable / Configure

1\. Go to App Builder > Collection Page in your Shoppy Dashboard.

### Add and arrange widgets

1\. Add the Text widget and/or the Product Grid widget to the page.

2\. Drag and drop widgets to define the order in which they appear in the app.

### Configure the Product Grid widget

1\. Click on the Product Grid widget to open its settings.

2\. Show Color Variants — display color variants as swatches or variant images on the product card.

3\. Show Vendor — display the product vendor name on the product card.


# Product Page

Thanks to the Product Page, you can now highly customize each and every one of your products on your Shoppy app! See the video tutorial below to see how to make some highly requested changes:

{% embed url="<https://cdn.mburger.cloud/356821/ProductPage_Q2-24.mp4?data=eyJtZWRpYV9pZCI6MzU2ODIxLCJieXRlcyI6MjM5Mjk1OSwicHJvamVjdF9pZCI6Mjg4NCwiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

See how it looks in app!&#x20;

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F7Eh6FdFYR4eDex6AtJVr%2FPDP%20builder%20(2).png?alt=media&amp;token=64543350-b6d0-4c5c-9de4-f74f474685bd" alt=""><figcaption></figcaption></figure>

From the Product Page you can add, rearrange, and modify the following information:

### Product Information

**Image Carousel:** Customize your product's image dimensions here by choosing between these ratios: 1:1, 4:3, 4:5, or choose 'Shopify Original'.

**Product Title:** Drag & Drop your product's title where you want it!

**Price:** Drag & Drop the price to the order you prefer.

**Vendor:** Choose whether or not to display the vendor of your product right here on the product page, as well as where to position it.

**Engagement:** Choose where to place the share & save (favorite) buttons for your product!

**Omnibus Directive:** Add this block to comply with EU regulations! Make sure you go to Integrations and enable Omnibus there first.

**Product SKU:** If you have entered a SKU for your product on Shopify, you can choose to display it here!<br>

### Product Description

If you have entered a description for your product on Shopify, you can add this block! This will allow you to give your customers all of the detail they could possibly want about your item to help them make their purchase.

### Variants Selector

You can now fully customize how product variants (such as size, color, etc.) are displayed in your app — offering a more intuitive and branded shopping experience. You can choose between **two main styles** for the variant selector:

**1. Pills**

Displays the variant options (e.g. sizes, colors) as **pills** — easy-to-tap buttons directly visible on the product page. This layout provides a more engaging and fast interaction, especially for mobile users.

When using **Pills**, you can further customize the **Color Style** for color variants:

* **None**: Basic pills with text (e.g., S, M, L, Black, Red).
* **Image**: Each pill uses a product **image thumbnail** as a preview (ideal for visual color variants).
* **Swatch**: Each pill shows a **colored dot** pulled from Shopify's color swatch data for the variant.

{% hint style="warning" %}
Make sure the Shopify option name (e.g., "Color", "Colore", "Couleur") matches exactly what you’ve defined in your Shopify product admin.
{% endhint %}

**2. Dropdown**

Displays variant options using a **dropdown menu**.\
This is a more compact layout, useful when there are many variant options or when you want to keep the interface minimal.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FGWntlGmuQkWh3V36kSOj%2FVariants%20Selector.gif?alt=media&amp;token=900f87bf-8365-4cbe-b88c-fd68a3a114f9" alt=""><figcaption></figcaption></figure>

### Purchase Options

From here,  you can customize how users purchase this item by:

* Adding a Buy Button and customizing the text and button! You can change the colors of each as well to match your brand's style.
* Choose to enable **Klarna** and/or **Scalapay** to allow your customers to pay for their purchases in instalments.&#x20;

  \*Please note that you must have these payment options active on your Shopify Store, then enable them from your Shoppy Dashboard in Settings > Payment Methods for them to work.

### Related & Complementary Products&#x20;

These blocks can be super useful for you to suggest other products to your customers that they are likely interested them! Shoppy takes the information that you have inserted on Shopify about your products.

**Related Products:** Related products will be shown to users as products that they may also like, based on the item they are currently viewing. This info is taken directly from your Product on Shopify.

**Complementary Products:** If you use Shopify Search & Discovery on Shopify and have enabled the integration on Shoppy, you can also suggest products to clients for them to buy together.&#x20;

### Metafields

You can choose to display the metafields that you've set up on your Shopify Store here! Here is a list of the metafileds that are compatible with Shoppy:

* URL
* One Product
* List of Products
* Color
* List of Colors
* Single Line Text
* Multi-Line Text
* File
* List of Files

### Pages

Insert any pages you have active on Shoppy to be displayed here in the product details! You can use this space to link users to any important information related to the product that you want them to be aware of. This could include blog posts, instructions, and any other highly detailed information you want to highlight!

### Policies&#x20;

You can now choose from an array of Policies to display on your Product Pages! This can help to make sure you are following applicable rules & regulations and make sure that your customers are always informed. You can add a block for these policies:

* Shopify Shipping Policy
* Shopify Return and Refund Policy
* Shopify Privacy Policy
* Shopify Terms of Service

### Reviews

You can now allow your product's reviews to be seen on the product detail page! This will ensure that your customers can see how many others have tried & enjoyed your items.

To activate this, make sure to go to your Shoppy Dashboard Integrations page and activate one of the following review integrations supported by Shoppy:

* Growave Review
* Judgeme
* Shopify Product Review
* Feedaty&#x20;

Once you've installed one of these integrations on your Shopify store, you can enable it from Shoppy integrations by entering your key! Then, you can add the review to your product page.

### Size Chart

If you have Kiwi Size Chart downloaded on your Shopify store, you can show it on your Shoppy product page for certaini items!

Make sure you go to Integrations from your Shoppy dashboard, and enable it first. Then, on your product page, you can add "Size Chart" as a block to show it. If you've added the dimensions of a product in Kiwi, it will be shown for each product here!

### Dividers

Insert a Divider block at any point to separate the information in your product page and make it easier on the eyes!

### Metafield support

Metafields allows merchants to surface custom data from their Shopify store directly within Shoppy app widgets. The interaction is straightforward — merchants simply choose the desired metafield from a dropdown list populated with the metafields already configured on their Shopify store. No additional setup is required inside Shoppy:

1\. Go to App Builder > Product Page in your Shoppy Dashboard.

2\. Open the **Accordion or Product Variations widget** where you want to display a metafield.

3\. Locate the metafield selector within the widget settings.

4\. Select the desired metafield from the list — it is automatically populated with all metafields defined on your Shopify store.

5\. Save your changes.


# Users Profile

Let your customers access and manage their personal data directly from your app — securely and seamlessly.

## Overview

The **User Profile** section of your Shoppy app allows customers to log in, view, and manage their personal information directly within the app interface.

This profile is fully integrated with Shopify’s **Customer Account system**, ensuring that all user data, orders, and preferences are synced with your store backend.

### Legacy Shopify Customer Accounts

By default, Shoppy is fully compatible with **Shopify's Legacy Customer Accounts**, which remains the most stable and widely used method for customer login and management on Shopify.\
This setup requires no additional configuration and works out of the box.

### **New Customer Accounts**

If you wish to switch to Shopify’s **New Customer Accounts** system, Shoppy supports this as well — but it requires manual configuration via Shopify’s **Headless** framework.

{% hint style="info" %}
Our team can handle this integration for you quickly and securely.
{% endhint %}

#### How to Request Setup for New Customer Accounts

1. Send us the **URL of your test store** (e.g., `https://yourstore.myshopify.com`).
2. We’ll ask for **temporary access to your store** to complete the configuration.
3. The process is fast, and **does not affect any customer data**.

Once completed, your app will support the New Customer Accounts login flow natively.

{% embed url="<https://cdn.mburger.cloud/356908/Screen-Recording-2024-09-25-at-15.16.58.mp4?data=eyJtZWRpYV9pZCI6MzU2OTA4LCJieXRlcyI6MTQ2NjE3OCwicHJvamVjdF9pZCI6Mjg4NCwiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

Here's how it looks when the user is logged out (left) and logged in (right):

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FFykxzueP7Cy0XgM0T7Ri%2FProfile%20page%20builder.png?alt=media&amp;token=0b03c3e0-0049-43c3-891c-b690b033c33d" alt=""><figcaption></figcaption></figure>

### My Orders

This section is active by defualt, and is where your users will come to see their orders in progress! Simply click and press down on the dotted icons on the left to move the block where you wish.

### My details

Here, your user's account information will be saved, such as their name & email address. This section will always be here for them! Choose the position that you prefer.

### My Addresses

Like the sections above, your user's addresses will always remain present in the Profile section. This helps to make shipping a seamless process with Shoppy! Drag & drop this feature to move it up or down on the page.

### Settings

Your customers can use the Settings area to see the following info:

* Push Notifications; users can turn them on or off using the toggle here
* Country; users can change their country and currency if necessary
* Refund Policy; your shoppers will always be up to date with the latest refund policy, as it is linked here!
* Shipping Policy; your customers can easily access Shopify's Shipping Policy here to clear up any doubts they might have!

You can drag and drop this section whereever you like for visibility!&#x20;

### Notification Center

Here you can add an area where users can see all notifications that have been sent to them on behalf of your company's app!

&#x20;Use drag & drop to place it where you wish so users can see all important communications in one place!

### Favorites

By adding in the Favorites section here, users can have a dedicated space to view all items that they have saved by clicking on the heart icon on some of your products!

&#x20;To add it, simply click on the +Add Section button at the bottom and move the section where you desire!

### Support

You can add in a dedicated Support section for your users to contact you here! before adding this section, make sure that you have one of the support integrations downloaded on your Shopify store and enabled on you Shoppy Dashboard > Integrations.&#x20;

Choose from one of the following:

* Facebook Support
* Live Chat Support
* WhatsApp Support

To add it, simply click on the +Add Section button at the bottom and move the section where you desire!

### Policies

If you have any particular policies that you want to make sure your users see, make sure to add them here! In Settings, as mentioned above, users can see the Shipping & Refund policy, but from the Policies section they can see any of these:

* Shopify Shipping Policy
* Shopify Return & Refund Policy
* Shopify Privacy Policy
* Shopify Terms of Service

Click +Add Section, select Policies, and then select one or more policies that you'd like to display to your customers.

### Pages

If you have created any Pages on your Shoppy store that you want to make sure your users see, link them in this section!&#x20;

After clicking on the +Add Section block and selecting Pages, you wiill then be able to click on the + Pages icon that appears.  From there, choose which pages you want to display here for easy viewing.&#x20;

### News

Like pages, you can also provide a link to users for News here! If you have some especially important or exciting news to share, add it here in the Profile Page by clicking + Add Section.

&#x20;Once you've added the News section, you'll then be able to click +News and select which to include.

### Fidelity Program

If you have the **Growave Loyalty & Rewards** fidelity app installed on your Shopify Store, you can link it here! This will allow your users to see their points & help you to boost repeat purchases. To do it:

First, make sure that you have enabled the integration on Shoppy > Integrations!

Then, you can click +Add section, select Fidelity, and select Growave.

### Divider

To make the layout of the profile sectioin more appealing, you can insert a divider anywhere you like! Simply click + Add Section and select a divider wherever you like! Like all other sections, you can drag and drop it where you prefer, and create multiple ini this case.

### Logout

The logout section will always be present in the profile page of your Shoppy app for your users to find with ease! \
Click drag & drop to put it where you desire.


# Cart

{% hint style="info" %}
This feature is available on the **Bloom** plan and above.
{% endhint %}

## Overview

The Cart Builder is a section in the App Builder that gives merchants full control over the layout and content of the app's cart screen. Blocks can be added, removed, and reordered to create a cart experience designed to increase conversion and average order value. Available blocks: Purchase Options, Notes, Cross-sell Carousel (existing); Free Shipping Progress Bar and Cart Incentives (new).

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FkXxHeleLVNDWxHYnEurv%2FCart.png?alt=media&amp;token=cdba17c5-0f1b-49ed-a052-0cb76b59d49e" alt=""><figcaption></figcaption></figure>

## How to Enable / Configure

1\. Go to App Builder > Cart in your Shoppy Dashboard.

2\. The cart block editor will appear with all available blocks.

### Arrange blocks

1\. Add the blocks you want to display in the cart view.

2\. Drag and drop blocks to set the order in which they appear.

3\. Remove any blocks you do not want to show.

### Free Shipping Progress Bar

1\. Enable the Free Shipping Progress Bar block.

2\. Set the minimum cart threshold the customer must reach to unlock free shipping.

3\. Save the block settings.

### Cart Incentives

1\. Enable the Cart Incentives block.

2\. Set the minimum cart threshold required to trigger the incentive.

3\. Select Free Gift — choose an existing product from your Shopify catalog; it will be added to the cart at no charge when the threshold is met.

4\. Or select Free Gift Wrapping — choose a gift wrapping product from your catalog; it will be added automatically when the threshold is met.

5\. Save the block settings.


# Navigation

Set the order of your app’s Navigation Menu and define how you make information available to your users. his section includes the ability to reposition Home Page, Catalog, Wishlist, News, Shopping Cart, Profile and the different Pages created. You can even choose from an array of icons which you prefer, and you also can upload your own custom icon!&#x20;

Being able to configure your app’s navigation allows you to further customize your app in what is navigation, **a crucial aspect of overall design and usability.**&#x20;

See the quick tutorial below to get a feel for how to set up your own navigation bar!

{% embed url="<https://cdn.mburger.cloud/356937/Screen-Recording-2024-09-25-at-17.12.14.mp4?data=eyJtZWRpYV9pZCI6MzU2OTM3LCJieXRlcyI6MTM3NTI1MCwicHJvamVjdF9pZCI6Mjg4NCwiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

* To change the order of the icons on the Navigation Bar of your app, click on one of the icons and drag it up or down to reposition it. Click 'Save' when finished to record your changes.
* Click "Add Section" and scroll or use the search bar to find a section that you'd like to add. You  may enter the title and choose from a selection of icons to use, or **upload your own app icon.**
* Click the **star icon** next to a section to make it the **landing page** that users are first taken to when they open your app.&#x20;
* To remove a navigation item, click the three dots on the right side, then select 'Remove'

### Custom Icons

To select a custom icon, please make sure that it meets the following criteria:

{% hint style="warning" %}

* PNG or SVG format
* No greater than 500 KB&#x20;
* Has a **transparent** background
* \*Please note that these icons are meant to be graphic icon assets, not photos! Photos, or any other element added here will not be shown in the app if the background is not entirely transparent.
  {% endhint %}

### **Brand List Page**

You can add a dedicated **Brand List** page to your app's navigation bar. This page automatically displays all the vendors from your Shopify store in alphabetical order, giving your customers a quick and intuitive way to browse products by brand.

To add the Brand List page to your navigation:

* Click **"Add Section"** and scroll or use the search bar to find the **Brand List** page in the list.
* Select it and choose your preferred icon, or upload a custom one.
* Drag it to your preferred position in the navigation bar, then click **'Save'**.

Once added, you can also customize how the Brand List is displayed in your app by navigating to the **Layout** section, where you can choose between two display options.


# Layout

In this section, you can choose the style of your app. You can personalize the colors, logos, and images to construct an app that uniquely represents your brand. On the right, you can see a preview of how the app will appear.&#x20;

In this section you can customize the layouts of the main views of your Shoppy app. Watch the tutorial below to see how this can be done on your Shoppy Dashboard:

{% embed url="<https://cdn.mburger.cloud/356912/DesignOptions.mp4?data=eyJtZWRpYV9pZCI6MzU2OTEyLCJieXRlcyI6NDY0MzQ2LCJwcm9qZWN0X2lkIjoyODg0LCJoYXNfaW1naXgiOjB9>" %}

### **Catalogue Layout**

With this selector you can choose the layout of your app's catalogue view. You can choose between:

* *Image Layout:* the collections are shown with their image as the main focal point, each listed under the other.
* *List Layout:* collections are shown in a list with only their name. If there are sub-menus, they can be opened below with a drop-down menu.
* *Mixed Layout:* the main collections are shown in a list with their name on the left and the collection image on the right. If there are sub-menus, they are displayed on a new page in a list with a slightly different layout, featuring the image on the left and the collection title on the right.&#x20;

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FM0I2eozMO3g9WvdSBenU%2FFrame%2019.png?alt=media\&token=076ba5c8-aada-4d1a-9b52-e32cfc465fa2)

### **Wishlist Layout**

In this section you can choose the layout for the wishlist:&#x20;

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FK8tCM4U4ahGHGh3c1nDL%2FSchermata%202022-04-15%20alle%2015.08.png?alt=media\&token=65ff516a-f24a-47f7-b21f-7c8a6d2e781a)

* *Grid Layout*: products are displayed in a grid.&#x20;
* *List Layout*: products are displayed in a list.&#x20;

![](https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwSBhfivhVS4sx3aq5dPG%2Fuploads%2FM8Uz4D8KNM91pCaen7Q2%2Fwishlist.png?alt=media\&token=61125dcc-bb36-4730-b12a-d78e121ffb27)

### **Filter Layouts**&#x20;

In this section you can choose to show the filters in a modal or full-screen view:

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fm6EgpIOj2xVgkCiEKpNR%2FSchermata%202022-04-15%20alle%2015.08-1.png?alt=media\&token=153d5faf-efde-4604-a3d1-a6e2f9c46cf0)

* *Modal Screen View*: the filters are shown to the users in a modal view that partially covers the view of the collections.
* *Full-Screen View*: the filters are shown to users in a full-screen view.&#x20;

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FxzRRTkvKeDYNA1L5KrUQ%2FFrame%204.png?alt=media\&token=b4390236-fffa-493d-9d0b-e63cb7834142)

### **Brand List Layout**

{% hint style="info" %}
This feature is available on the **Bloom** plan and above.
{% endhint %}

You can choose how vendors are displayed on the Brand List page directly from the Layout section.

* **1 Column** — brands are listed in a single vertical column.
* **2 Columns** — brands are displayed in a two-column grid.

To apply your preferred layout, navigate to the **Layout** section in the App Builder, scroll to the **Brand List Layout** option, select your preferred display mode and click **'Save'**. The change will be reflected in your app immediately.


# Brand Kit

In this section, you can further customize your app, keeping it true to your brand! See the quick video below that shows you just a couple of the personalizations you can do!

{% embed url="<https://cdn.mburger.cloud/356911/Screen-Recording-2024-09-25-at-17.39.39.mp4?data=eyJtZWRpYV9pZCI6MzU2OTExLCJieXRlcyI6Mzk5MTIwNCwicHJvamVjdF9pZCI6Mjg4NCwiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

### **Store Logo**

Here simply click on the CTA to add an image. Select one to upload for your computer that shows off your brand. This logo will be present in the header of your app and also in the login view for your users to see.&#x20;

{% hint style="warning" %}
All images uploaded must be in png format. The maximum file size allowed on the Shoppy platform for a video or image is 5 MB. The Store Logo recommended dimension is 500 X 80 for an optimal visual effect.
{% endhint %}

### Splash Image

Your Splash Image will be shown while users open your app, and are waiting for it to load. It will typically only be present on their screen for a couple of seconds, but it can be a great way to make a good impression.

{% hint style="warning" %}
All images uploaded must be in png format. The maximum file size allowed on the Shoppy platform for a video or image is 5 MB. The Splash Image recommended dimensions are 1242 X 2688.
{% endhint %}

### Signup Image

Here you can upload the image that you would like your app visitors to see when they signup for an account with you. This will be the background image for them to see. You can also choose whether or not to show an overly layer, which creates a shaded look over your image.

{% hint style="warning" %}
All images uploaded must be in png format. The maximum file size allowed on the Shoppy platform for a video or image is 5 MB. The Signup Image recommended dimensions are 1242 X 2688.
{% endhint %}

### Login Image

Here you can upload the image that you would like your app visitors to see when the log into your app using their credentials. This will be the background image for them to see. You can also choose whether or not to show an overly layer, which creates a shaded look over your image.

{% hint style="warning" %}
All images uploaded must be in png format. The maximum file size allowed on the Shoppy platform for a video or image is 5 MB. The Login Image recommended dimensions are 1242 X 2688.
{% endhint %}

### Placeholder Image

With a Placeholder Image, you can select an image to be shown to your users in the event that you don't have one inserted for a product or catalogue.&#x20;

{% hint style="warning" %}
All images uploaded must be in png format. The maximum file size allowed on the Shoppy platform for a video or image is 5 MB. The Login Image recommended dimensions are 1000 X 1000.
{% endhint %}

### Font Options

You can choose the font that you'd like to be present throughout your app. You may choose between Poppins, Archivo Narrow, Comic Neue, Josefin Sans, and Playfair Display.&#x20;

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fzhw95adVWENGKMa75Ia4%2FFrame%2018.png?alt=media\&token=aa59374a-a437-4910-b2a8-60f1e1b8f6a2)

### Colors&#x20;

You can customize the colors for the following sections of your app:

* Buttons, filters, and loaders
* Icons
* Top Bar
* Border Color&#x20;

### Bottom Bar

Here you can customize the look of the bottom bar, also known as the Navigation bar! Choose the following:

* Background
* Icon and label&#x20;
* Highlight; to change the color of the first icon on the nav bar (the furthest to the left!)

### Borders

You can choose whether to display borders around the images of the following elements: catlalogue, wishlist, profile, cart, news, product page, and product list.&#x20;

### Squared Corners

You can toggle this option on to change the corners of your widget's images from rounded to squared. This applies to all widgets as well as the catalogue, wishlist, profile, cart, news, product page, and product list.&#x20;


# Engage

### Overview

Within the Engage section, you can send push notifications to your customers in order to involve them more with your brand and create your own community.

From the **Insights Section** at the top of Engage, you can see the following information **about all of the push notifications you have sent**:

* Your number of push notification subscribers
* The number of push notifications that you have sent out&#x20;
* The number of times your push notifications have been clicked
* Your click through rate for your push notifications&#x20;

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F6D90LFsIlPXDZP8VR11W%2FShoppy_Overview_Insights.png?alt=media&amp;token=012373e5-7ad3-4b3f-b4db-4c3653106f16" alt="" width="563"><figcaption></figcaption></figure>

There are three types of push notifications that you can send, [**Standard Notifications**](/shoppy-dashboard/engage/push-notifications)**,** or [**Flow Notifications**](/shoppy-dashboard/engage/flow-notifications)(Bloom Plan Only), or Back in Stock Notifications. &#x20;

Once you enter the Engage section you will find a list of all push notifications sent via Shoppy. Under each type of notification, you will see the following:&#x20;

* **All**: all notifications&#x20;
* **Sent**: sent push notifications&#x20;
* **Scheduled**: push notifications scheduled but not sent yet&#x20;

For each notification, you can see:&#x20;

* How many users the notification was sent to, how many users clicked on the push, and the click through rate
* The content of the push notification
* The date the notification was sent, or when it is scheduled to be sent
* The status of the push notification, which have already been sent and which are scheduled to be sent in the future&#x20;
* Insights of the notifications: the number of notifications sent and the number of users who tapped on it&#x20;

Click on **Add Push Notification** to create a push notification.&#x20;

You may add a title, message, image, and link destination for Push and Flow notifications.&#x20;

&#x20;Link destinations can lead users to a Collection, Custom URL, Pages, Cart, or Product once they tap on your notification.

Push notifications are sent at the time based on the time set in your Shopify Store. You can view or edit the timezone by going in your Shoppy Dashboard to "Settings", then clicking "Account". Click [here ](/shoppy-dashboard/settings/account)to see more.

{% hint style="info" %}
Here's a tip: If you're having trouble writing the content of your push notification, once you click "Add" to begin a new push, click on the "Generate with AI" text for some extra help! Just tell our artificial intelligence software what your push should be about, and we'll help you find the right words.
{% endhint %}


# Push Notifications

### Overview

Standard Notifications are available on **all** **Shoppy plans**, and allow you to send or schedule notifications to send your Shoppy app users.&#x20;

On your Shoppy Dashboard, go to **Engage**, and click on **Standard Notification**.&#x20;

After Clicking on **Add Push Notification**, you can add the **title**, **description**, and optional **image** to accompany your notification.  Under **Link** you can choose to link the notification to a **destination of your choice**, such as an area of your app, or a custom URL. When users tap on your notification, they will be directed there.

On the right-hand panel under "Preview" you can have a sneak peek of what your notification will look like so you know what to expect users to receive.

{% embed url="<https://cdn.mburger.cloud/348700/Standard-Notifs_Shoppy-Dashboard.mp4?data=eyJtZWRpYV9pZCI6MzQ4NzAwLCJieXRlcyI6MTEwODkzMSwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

### Destination

Using Destination is straightforward. When creating a push notification, simply select the "Destination" option and choose from the available options:

* App Homepage
* Collection
* Custom URL
* Pages
* Cart
* Product
* News

It's as easy as that! Customize the user experience and drive engagement with precision and ease.

###

### Delivery: send now or schedule it

By clicking on the drop down menu under Planning on the right-hand panel, you can choose whether to Send Now or to Schedule it. If you choose to schedule it, you can select the date and time. You can see the timezone you've selected for your Shoppy app by going to **Settings > Account.**

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F6reXKlqkVPZ9CrYGWq88%2FFrame%2016.jpg?alt=media\&token=29ecc84c-2547-4078-ad55-1a9d96529536)

###

### Audience Segmentation&#x20;

{% hint style="info" %}
Available only on **Bloom** Plan
{% endhint %}

There are 4 different types of Audience Segmentation that you can utilize with Shoppy; Lists, Localization, Platform, and Test.&#x20;

#### Lists

For **Bloom Plan** only, you can select a target audience to send your push notifications to. You can segment your lists using Klaviyo Lists or Shopify Lists. *Only one* can be enabled at a time on Shoppy.

&#x20;If you have the **Klaviyo** integration enabled, you can target users in your **Klaviyo Lists** by clicking on the green slider next to "Sending to all users", then selecting the lists you wish to include. You can read more about **Klaviyo** [here](/shoppy-dashboard/integrations/klaviyo).&#x20;

Starting from January 2024, you can also use your **Shopify Segments** as Lists on Shoppy. On Shopify, you can find the audiences under Customers > Segments.  You can read more about how to access customer segments and create new ones on Shopify [here.](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments/customer-segments-managing)&#x20;

#### Localization

With **Shopify Markets** push notifications will be sent to users segmented by the country setting on your Shopify store. This allows you to send push notifications to all users associated with your store's country. Each time you create a push notification, you can create it in the language intended for the audience in that country. This way, you can ensure that only certain notifications are sent to users of the Shopify market store that you intend, allowing you to further personalize your shopper's experience.

You can also segment by **Device Language** to only send the notifications to users who have their device set in the language of your choice for each notification. This way, each time you create a new notification, create it in the language you wish to apply to users with that device language setting.

{% hint style="info" %}
Push notifications will be sent to users based on the timzeone that **your** Shoppy store is set to.
{% endhint %}

#### Platform&#x20;

You can also select which platform you would like to send notifications to and send notifications to only iOS, Android, or all devices.&#x20;

#### Test&#x20;

Under **Test,** you can do a trial and send the notifications out to specific devices to ensure that the notification is working according to your Audience filters.  To read more about how to test push notifications, click [here](/shoppy-dashboard/settings/app-settings/miscellaneus) to read about My Team Push Notifications. For the best results on a test, ensure that the device you expect to receive a push notification on meets all of the requirements for the filters that you set.

{% hint style="info" %}
Here's a tip: If you're having trouble writing the content of your push notification, once you click "Add" to begin a new push, click on the "Generate with AI" text for some extra help! Just tell our artificial intelligence software what your push should be about, and we'll help you find the right words.&#x20;
{% endhint %}


# Flow Notifications

\*Flow Notifications are available on Bloom Plan only

{% hint style="info" %}
This feature is available on the **Bloom** plan and above.
{% endhint %}

## Trigger

Flow notifications allow you to send notifications to users based on a trigger (an action) completed by the user.&#x20;

There are 5 types of flow notifications:

### **Welcome Message**

A **Welcome Message** is a push notification automatically sent when a user downloads and opens your Shoppy app for the first time on their device. It’s a great opportunity to greet new users, introduce your brand, and guide them toward their first purchase.

### **Abandoned Cart**

An **Abandoned Cart** push is triggered when a user adds products to their cart but leaves the app without proceeding to checkout. Use this notification to remind them of what they left behind and bring them back to complete the purchase.

### **Abandoned Checkout**

An **Abandoned Checkout** push is sent to users who start the checkout process but exit the app before finishing it.\
It’s a timely reminder that can recover lost sales and boost your conversion rate.

### **Churn Reduction**

A **Churn Reduction** push is automatically sent to users who haven’t opened your app for a period of time that you define.\
It helps re-engage inactive customers and bring them back before they’re gone for good.

### **Post Purchase offer**

**Post Purchase offer** is an automated push notification sent to a customer a set amount of time after they’ve completed a purchase. It's a powerful way to encourage repeat purchases, promote complementary products, or simply thank the customer — all while staying top-of-mind.

Once setting up a flow notification, you will no longer be able to edit it, however you can delete it and create a new one.&#x20;

## Flow

Under each flow notification, you can set a "delay" of a specific amount of hours or days. There are a total of 5 messages that can be sent for each flow. The first notification can be set for "X" amount of time after the user has done a trigger. The second notification can be set for "X" amount of time after the previous message was sent, and so on until all notifications in the flow have been sent.

See how to set up a flow notification on your Shoppy Dashboard by following the example below:

{% embed url="<https://cdn.mburger.cloud/348703/AbandonedCheckout_Dashboard?data=eyJtZWRpYV9pZCI6MzQ4NzAzLCJieXRlcyI6MTg2NTEwNCwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

## Destination

Using Destination is straightforward. When creating a push notification, simply select the "Destination" option and choose from the available options:

* App Homepage
* Collection
* Custom URL
* Pages
* Cart
* Product

It's as easy as that! Customize the user experience and drive engagement with precision and ease.

###

## Delivery: send now or schedule it

By clicking on the drop down menu under Planning on the right-hand panel, you can choose whether to Send Now or to Schedule it. If you choose to schedule it, you can select the date and time. You can see the timezone you've selected for your Shoppy app by going to **Settings > Account.**

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F6reXKlqkVPZ9CrYGWq88%2FFrame%2016.jpg?alt=media\&token=29ecc84c-2547-4078-ad55-1a9d96529536)

## Audience Segmentation

There are 4 different types of Audience Segmentation that you can utilize with Shoppy; Lists, Localization, Platform, and Test.&#x20;

### Lists

For **Bloom Plan** only, you can select a target audience to send your push notifications to. You can segment your lists using Klaviyo Lists or Shopify Lists. *Only one* can be enabled at a time on Shoppy.

&#x20;If you have the **Klaviyo** integration enabled, you can target users in your **Klaviyo Lists** by clicking on the green slider next to "Sending to all users", then selecting the lists you wish to include. You can read more about **Klaviyo** [here](/shoppy-dashboard/integrations/klaviyo).&#x20;

Starting from January 2024, you can also use your **Shopify Segments** as Lists on Shoppy. On Shopify, you can find the audiences under Customers > Segments.  You can read more about how to access customer segments and create new ones on Shopify [here.](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments/customer-segments-managing)&#x20;

### Localization

With **Shopify Markets** push notifications will be sent to users segmented by the country setting on your Shopify store. This allows you to send push notifications to all users associated with your store's country. Each time you create a push notification, you can create it in the language intended for the audience in that country. This way, you can ensure that only certain notifications are sent to users of the Shopify market store that you intend, allowing you to further personalize your shopper's experience.

You can also segment by **Device Language** to only send the notifications to users who have their device set in the language of your choice for each notification. This way, each time you create a new notification, create it in the language you wish to apply to users with that device language setting.

{% hint style="info" %}
Push notifications will be sent to users based on the timezone that **your** Shoppy store is set to.
{% endhint %}

### Platform&#x20;

You can also select which platform you would like to send notifications to and send notifications to only iOS, Android, or all devices.&#x20;

### Test&#x20;

Under **Test,** you can do a trial and send the notifications out to specific devices to ensure that the notification is working according to your Audience filters.  To read more about how to test push notifications, click [here](/shoppy-dashboard/settings/app-settings/miscellaneus) to read about My Team Push Notifications. For the best results on a test, ensure that the device you expect to receive a push notification on meets all of the requirements for the filters that you set.

{% hint style="info" %}
Here's a tip: If you're having trouble writing the content of your push notification, once you click "Add" to begin a new push, click on the "Generate with AI" text for some extra help! Just tell our artificial intelligence software what your push should be about, and we'll help you find the right words.
{% endhint %}


# Back in Stock Notifications

{% hint style="info" %}
This feature is available on the **Grow** plan and above.
{% endhint %}

### How to Create & Use a Back in Stock Notification

You can create a push notification exclusively to send your users notifications when a product that they've requested has become back in stock!&#x20;

To create this notification, simply go to your Shoppy Dashboard> Engage > **Back in stock**. From there, select the "Actions" button on the right. Once the form pops up,  you can insert the title and description for the notification.&#x20;

In the app, when a product is out of stock, users will see "**Notify Me**" instead of "Add to Cart" on the product that is out of stock.

Once you have the product back in stock and insert a value above 0 for the inventory for that product on Shopify, Shoppy will send out a notification to all users who clicked "**Notify Me"** for that corresponding product.

### Insights

A list of each item with it's name, variant (size, color, etc), and insights are kept track of on your dashboard. You can see the "Current Requests", which are the requetss that have been made for a product since it's inventory has been 0. This counter will reset once the product comes back in stock.

You also can see the "All Time Requests", which counts all of the requests ever made from that product. This value only goes away if you click on the "Remove" button next to the item.

{% hint style="warning" %}
Note that this feature is not available if you select "Hide out of stock" products from Settings
{% endhint %}

### Watch our Tutorial to see how to set it up on your Shoppy Dashboard:

{% embed url="<https://cdn.mburger.cloud/353772/Backinstock_2_Q124.mp4?data=eyJtZWRpYV9pZCI6MzUzNzcyLCJieXRlcyI6MTUwMTMzMCwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ==>" %}


# Notification Settings

### **Push Notification Prompt-In**

{% embed url="<https://cdn.mburger.cloud/347629/Don_t-miss-any-notification.png?data=eyJtZWRpYV9pZCI6MzQ3NjI5LCJieXRlcyI6MjI3MDk4LCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}

To improve the activation rate of your notifications, we have added the ability to **customize** the content of the prompt-in that the users must consent to upon downloading your app. This way, you can choose the right words and phrases based on your target audience.

In order to customize this in your app, on your Shoppy Dashboard go to **Settings > App Settings > Push notification prompt-it and click 'Customize'.**&#x20;

You can change the title and text description of the push notification. You can insert text content here for different language settings of the app if you have Multi Country activated (Bloom plan only). Click 'Save' to register your changes.

### Video tutorial

{% embed url="<https://cdn.mburger.cloud/353789/Pushnotifsettngs_2_Q124.mp4?data=eyJtZWRpYV9pZCI6MzUzNzg5LCJieXRlcyI6NTY2MjMxLCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}


# Integrations

In this section you can manage third-party integrations for your Shoppy app. The integration services are divided into the following categories:

* **Optimization**: integrations that optimize the User Experience of users on your app.&#x20;
* **Analytics**: integrations that allow you to set up loyalty programs for the users that use your app the most.
* **Customer Success**: integrations that enable you to better interact with your customers.
* **Rewards e Loyalty**: integrations that allow you to set up loyalty programs for users who visit your app the most.
* **Marketing**: these integrations allow you to use and monitor marketing services to advertise your brand's app.
* **Ratings and Reviews**: these integrations allow you to add social proof features to your app such as adding the possibility for your customers and fans to review products.&#x20;
* **Payments**: integrations with alternative paymenet services.&#x20;

With the *Enable* button you can enable the integrations of your preference.&#x20;

{% embed url="<https://cdn.mburger.cloud/342026/integrations.mp4?data=eyJtZWRpYV9pZCI6MzQyMDI2LCJieXRlcyI6NzYzOTc4LCJwcm9qZWN0X2lkIjoyMDMsImhhc19pbWdpeCI6MX0%3D>" %}


# Firebase

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FIRJR3FsnjQvsHNsO2Oua%2Ffirebase.jpg?alt=media\&token=b18a7dbc-356a-4f9c-8c9c-0d48bdab2b4e)

Integration with **Firebase Analytics** allows you to analyze user behavior during all stages of the purchase process, based on what users view, click, and select within the app. These are the insights you can gain with this integration:

These are the integrations you can gain with this integration:

* Users browsing products from collection views
* Users who select a product&#x20;
* Users accessing the product detail view
* Users who add a product to favorites or remove it
* Users who add a product to their cart or remove it&#x20;
* Users who view their shopping cart
* Start of checkout process
* Selection of delivery method&#x20;
* Completion of purchase&#x20;

To allow the Shoppy team to activate this integration, we kindly ask that you send our support a Gmail email address that we can use to invite your app to the Firebase project to view your analytics. You can write to us at <support@shoppy.is> and specify the account to invite.

## Events

Below is a list of Firebase analytics events triggered by user actions in the Shoppy app. Each event includes a structured payload of parameters, described in the associated tables.

### View item list

Triggered when a user views a list of items (e.g. a product category page). <kbd>view\_item\_list</kbd>

**Parameters:**

| Parameter        | Description           |
| ---------------- | --------------------- |
| <kbd>items</kbd> | Array of items viewed |

**Item Object**

| Item object           | Description                |
| --------------------- | -------------------------- |
| <kbd>index</kbd>      | Position in the list       |
| <kbd>item\_id</kbd>   | Unique identifier for item |
| <kbd>item\_name</kbd> | Display name of the item   |

***

### Select item

Triggered when a user selects an item from a list. <kbd>select\_item\_list</kbd>

**Parameters:**

| Parameter       | Description                         |
| --------------- | ----------------------------------- |
| <kbd>item</kbd> | Object describing the selected item |

**Item Object**

| Item object           | Description                |
| --------------------- | -------------------------- |
| <kbd>item\_id</kbd>   | Unique identifier for item |
| <kbd>item\_name</kbd> | Display name of the item   |

***

### View item

Triggered when a user views the details of a specific item.

**Parameters:**

| Parameter  | Description                       |
| ---------- | --------------------------------- |
| `item`     | Object describing the viewed item |
| `currency` | ISO 4217 currency code (e.g. USD) |

**Item Object:**

| Field       | Description                |
| ----------- | -------------------------- |
| `item_id`   | Unique identifier for item |
| `item_name` | Display name of the item   |
| `price`     | Price of the item          |

### Add to cart

Triggered when a user adds one or more items to their cart.

**Parameters:**

| Parameter  | Description                       |
| ---------- | --------------------------------- |
| `items`    | Array of items added to cart      |
| `currency` | ISO 4217 currency code (e.g. USD) |

**Item Object:**

| Field       | Description                |
| ----------- | -------------------------- |
| `item_id`   | Unique identifier for item |
| `item_name` | Display name of the item   |
| `price`     | Unit price of the item     |
| `quantity`  | Quantity added to cart     |

### Remove from cart

Triggered when a user removes an item from the cart.

**Parameters:**

| Parameter  | Description                        |
| ---------- | ---------------------------------- |
| `item`     | Object describing the removed item |
| `currency` | ISO 4217 currency code (e.g. USD)  |

**Item Object:**

| Field       | Description                |
| ----------- | -------------------------- |
| `item_id`   | Unique identifier for item |
| `item_name` | Display name of the item   |
| `price`     | Unit price of the item     |
| `quantity`  | Quantity removed from cart |

***

### View cart

Triggered when a user views their cart.

**Parameters:**

| Parameter  | Description                                        |
| ---------- | -------------------------------------------------- |
| `items`    | Array of items in the cart                         |
| `value`    | Total cart value (sum of item prices × quantities) |
| `currency` | ISO 4217 currency code (e.g. USD)                  |

**Item Object:**

| Field       | Description                |
| ----------- | -------------------------- |
| `item_id`   | Unique identifier for item |
| `item_name` | Display name of the item   |
| `quantity`  | Quantity in cart           |
| `price`     | Unit price of the item     |
| `currency`  | Currency for this item     |

***

### Begin checkout

Triggered when a user begins the checkout process.

**Parameters:**

| Parameter  | Description                       |
| ---------- | --------------------------------- |
| `items`    | Array of items being purchased    |
| `value`    | Total cart value at checkout      |
| `currency` | ISO 4217 currency code (e.g. USD) |

**Item Object:**

| Field       | Description                |
| ----------- | -------------------------- |
| `item_id`   | Unique identifier for item |
| `item_name` | Display name of the item   |
| `quantity`  | Quantity to purchase       |
| `price`     | Unit price of the item     |
| `currency`  | Currency for this item     |

***

### Purchase

Triggered when a purchase is completed.

**Parameters:**

| Parameter  | Description                                  |
| ---------- | -------------------------------------------- |
| `items`    | Array of purchased items                     |
| `value`    | Total amount of the purchase                 |
| `shipping` | Shipping cost associated with the purchase   |
| `currency` | ISO 4217 currency code (e.g. USD)            |
| `coupon`   | Coupon code applied to the purchase (if any) |

**Item Object:**

| Field       | Description                |
| ----------- | -------------------------- |
| `item_id`   | Unique identifier for item |
| `item_name` | Display name of the item   |
| `quantity`  | Quantity purchased         |
| `price`     | Unit price of the item     |
| `currency`  | Currency for this item     |

***

### Add to wishlist

Triggered when a user adds an item to their wishlist.

**Parameters:**

| Parameter | Description                       |
| --------- | --------------------------------- |
| `item`    | Object describing the wished item |

**Item Object:**

| Field       | Description                |
| ----------- | -------------------------- |
| `item_id`   | Unique identifier for item |
| `item_name` | Display name of the item   |

<br>


# Meta ADS

Automatically send in-app events to Meta to improve campaign performance, audience targeting, and conversion tracking across Facebook and Instagram.

## Overview

{% hint style="info" %}
This integration is available on the **Bloom** plan and above.
{% endhint %}

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FleKmCgN5Sib2G1fs2gP4%2Ffb.jpg?alt=media\&token=4aa25d2a-b314-4034-8c8b-66f277fbcded)

With **Meta App Events**, you can automatically track key user actions inside your Shoppy app and send them to Meta (Facebook & Instagram) to optimize your ad campaigns and performance tracking.\
This enables better retargeting, improved attribution, and smarter ad spend — directly connected to in-app user behavior.

### What Events Are Tracked?

Shoppy automatically sends the following events to Meta:

<table><thead><tr><th width="127.54296875">Event</th><th width="140.74609375">Technical name (SDK)</th><th>What it means</th><th>Example use case for marketing/audiences</th></tr></thead><tbody><tr><td>Product page view</td><td><kbd>fb_mobile_content_view</kbd></td><td>The user viewed a product page in the app.</td><td>Build an audience of interested users to retarget with ads.</td></tr><tr><td>Add to cart</td><td><kbd>fb_mobile_add_to_cart</kbd></td><td>The user added a product to their cart.</td><td>Target users who showed strong intent but didn’t complete the purchase.</td></tr><tr><td>Checkout started</td><td><kbd>fb_mobile_initiated_checkout</kbd></td><td>The user started the checkout process.</td><td>Create audiences of “almost-buyers” for remarketing or incentives (discounts/free shipping).</td></tr><tr><td>Purchase completed</td><td><kbd>fb_mobile_purchase</kbd></td><td>The user completed an order, buying one or more products.</td><td>Build an audience of active customers or Lookalikes based on purchasers.</td></tr><tr><td>Add to wishlist</td><td><kbd>fb_mobile_add_to_wishlist</kbd></td><td>The user saved a product to their wishlist.</td><td>Target highly interested users, even if they haven’t purchased yet.</td></tr></tbody></table>

### How to Enable Meta App Events

1. Go to your **Shoppy Admin Dashboard**.
2. Navigate to **Integrations > Meta DAS (Facebook & Instagram)**.
3. Click **Enable** to activate Meta App Events tracking.
4. **Invite the Shoppy team** (*<developers@shoppy.is>*) as an **Admin** to your **Meta Business Manager**.
5. The Shoppy team will take care of the full configuration for you.

{% hint style="warning" %}
To enable this integration, you’ll need to **invite the Shoppy team** (*<developers@shoppy.is>*) as an **Admin** to your **Meta Business Manager**. The Shoppy team will handle the entire Meta App Events configuration for you — no technical setup required on your side.
{% endhint %}


# Appsflyer

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FlrWLg7KrxZ9yMGM8da7n%2Fappsflyer.jpg?alt=media\&token=c93e6ecf-6adf-42ea-9c0a-d0b046b24ab9)

Thanks to the AppsFlyer integration, you can allow your users to open web links directly in your Shoppy App. The AppsFlyer integration also users who have not installed the app will be redirected to the App Store/Google Play Store and then open the link properly in the app.

To set up this integration you will need to have created 2 apps on your AppsFlyer dashboard, one Android and one iOS.

Use the link from your apps that were published when you created them.\
For both the Android app and the iOS app, you will need to obtain 2 codes that you will need when you activate the integration on Shoppy: the app id and the Development Key.

The Application ID is what you see on the main AppsFlyer page under the application name.\
To get the Development Key, open the app and navigate to "App Settings" from the side menu under SDK authentication you will find the Development Key.\
All you have to do is activate the integration from the Shoppy dashboard and enter the data you got in the previous steps (leave the Debug box unchecked).\
\
[Translated with DeepL](https://www.deepl.com/translator?utm_source=macos\&utm_medium=app\&utm_campaign=macos-share)

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FZZnoL1BoVrt9snjpjrEn%2FSchermata%202022-01-31%20alle%2015.47.29.png?alt=media\&token=71389834-ad4f-4312-9122-25a9c07d9b68)


# Shopify Search & Discovery

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fj1nPE6xT0JOFG0436njD%2Falgolia.jpg?alt=media&amp;token=4dfd9946-414b-492c-a82f-6a31aa3079f9" alt=""><figcaption></figcaption></figure>

Activating this integration will allow you to add custom filters to your products. These will be automatically synchronized with Shoppy and will then be displayed on collection screens, allowing your users to filter their results. .

Once you have installed the [Search & Discovery Shopify](https://apps.shopify.com/search-and-discovery?locale=it\&search_id=ce8de85f-b554-4e9e-adb9-e11e9e5e60a7\&surface_detail=search+and+discovery\&surface_inter_position=1\&surface_intra_position=4\&surface_type=search) app on your store, you can set it up in settings. Then go to the "Integrations" section of Shoppy and enable the"Search & Discovery Shopify" by clicking on the "Enable" button.


# Algolia

### Overview

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fj1nPE6xT0JOFG0436njD%2Falgolia.jpg?alt=media\&token=4dfd9946-414b-492c-a82f-6a31aa3079f9)

Shoppy utilizes [Algolia](https://www.algolia.com) to allow users to **filter** products on collection pages. Here's what you need to do to enable this feature on your shop.

### **Set up Algolia for your Shoppy app**

**Install the Agolia app in your Shoppy store**&#x20;

From the app section of your Shopify go to Shopify App Store and search for the app **Algolia Search and Discovery**, or click on [this link.](https://apps.shopify.com/algolia-search)&#x20;

Click on "**Add App**" to add the app to your store.&#x20;

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FA1jVkj5D2KUBTJwhIiR8%2FSchermata%202022-01-31%20alle%2015.54.38.png?alt=media\&token=be2427e2-ca04-46cb-80e1-3ba6f0d1246e)

**Create your Algolia account**&#x20;

Once you've added the application, you can log in or create an account if you don't have one yet.

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FYqOYdOl4Ftj44F7JiTzF%2FSchermata%25202021-02-17%2520alle%252012.02.25.png?alt=media\&token=86861651-fcec-4277-b330-309716f3de19)

{% hint style="info" %}
Shoppy uses Algolia's "Collection Page" feature available in the Standard Plan.
{% endhint %}

**Set up the Algolia app in your store.**&#x20;

Once you've created your account, go to the API Keys sevtion and copy teh Application ID, Search API Key, and Private Admin API Key into the **"Credentials"** block. Enter "shoppy\_" into the "**Indexes Prefix"** field.&#x20;

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FAu6fLNv8fEcItw71JP5F%2FSchermata%2525202021-02-17%252520alle%25252012.19.31.png?alt=media\&token=4df55012-febb-4b8b-8fa9-1ad2bbfdaeeb)

![Dashboard Algolia](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FfZ2HDvyli6WB6qiixqiX%2FSchermata%25202021-02-17%2520alle%252012.05.40.png?alt=media\&token=da71af8a-8b52-42b0-bcd8-d78c11a15cc1)

By clicking "**Save",** Algolia can index all of your products and collections.

**Enable Collection Pages**&#x20;

Enable collections pages with the switch In the Collections Pages of the Algolia app on Shopify.

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F09EX5kGEYw020CsqFItW%2FSchermata%25202021-02-17%2520alle%252012.26.22.png?alt=media\&token=d53b3484-3cbe-4d3a-934c-4e996afc33c5)

{% hint style="info" %}
If you are unable to see the Algolia connection page on your store, change the CSS Selector field to a value **other than** *main.css.*
{% endhint %}

In the field "**Sort Orders**", add the following entries:

* Most popular
* Cheapest first
* Newest first
* Oldest first
* Name
* Most expensive first
* Name Z-A

After doing this, click "**Save".**&#x20;

**Index Named Tags (optional)**

Named tags are special tags that you can attach to products, which have a name in addition to a value. This way, you can group products by tag type. &#x20;

To add a named tag, add a tag in this format: NAME:VALUE. For example: the name could be "Item Type" and the values could be the various types/categories of items in your store.&#x20;

To activate named tags, go to the "Indexing" tab, select "Index Named Tags" and press "Save".&#x20;

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F86CLDahhm7ptbQM3oY1i%2F3-named-tags-0bb32ee5.jpeg?alt=media\&token=4ba65a79-a861-489d-89d2-5b6038dfd91f)

{% hint style="info" %}
To learn more about named tags visit the Algolia documentation page.
{% endhint %}

### Insert the keys for Algolia on Shoppy&#x20;

Now all you have to do is connect Algolia to Shoppy. To do this, open Shoppy's "**Integration**" tab and enable Algolia integration with the "**Enable**" button.

In the popup that appears, insert your **Application ID** (Algolia ID) and the **Search API Key** (Algolia Key) found on the Algolia dashboard in the API Keys section. <br>

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FiSQWMl3DYO2J5kIqHzUX%2FSchermata%202022-04-15%20alle%2015.29.35.png?alt=media\&token=4f82cfdb-76fd-4dc8-b64e-d84cc3286e92)


# Optimize Searches for your app with Algolia

To ensure that your Shoppy app's search is optimized, it's recommended that you perform a simple operation from the Algolia dashboard.

Go to **Indexes -> shoppy\_products -> Configuration**\
Select **Deduplication and grouping** in the bar on the right

In the "**Distinct**" section, select "True" from the dropdown, and in the **"Attribute for Distinct**" **Section**, select the **ID** value.

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FwoIskbF4MqPxNBKgOWx1%2FSchermata%25202021-03-09%2520alle%252009.31.34.png?alt=media\&token=85d67e2a-accc-4f38-a27f-c43d35ec43d3)

Click "**Review and Save Settings"** in the bottom left area, so that a prompt will appear. In the prompt, activate the "Copy these settings to other indices and/or replicas" and select the **"To all replicas of "shoppy\_products"** option." Click "**Save Settings**" to activate the Algolia x Shoppy to configuration.&#x20;

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FSqg6Sh4MZqb2iTw68eFT%2FSchermata%25202021-03-09%2520alle%252009.33.40.png?alt=media\&token=b2209754-ad47-4e46-bb52-10174f639ed2)

### Create the Query Suggestions Index

From the main Algolia dashboard, go to the "**Query Suggestions**" section and click on the "**New Query Suggestions Index**".&#x20;

In the source index field, enter **shoppy\_products** and in the name field enter **shoppy\_products\_query\_suggestions**

Click on the "**Accept and Continue**" button.

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F8HzyD3YlInX1AcBLfHsz%2FSchermata%25202021-03-09%2520alle%252010.32.22.png?alt=media\&token=426f5588-08e9-4975-8563-0387cb88153c)


# Boost AI Search & Filter

With the new Boost AI Search & Filter Integration, Shoppy now offers AI search!

{% embed url="<https://youtu.be/Y7ncRL8XBpU>" %}

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F4x2DU7vJNMmp0WAqIIZN%2FScreenshot%202024-09-26%20at%2015.22.04.png?alt=media&amp;token=68363c7e-267c-42eb-9723-4113f88d260d" alt=""><figcaption></figcaption></figure>

With Boost, you can provide your mobile users with an even smoother and more intuitive experience by providing them with highly relevant results in a flash. Boost can help you optimize both your Shopify Store & Shoppy app, so that users are automatically suggested product bundles and recommendation options that best suit their needs.

To enable this integration, download [Boost AI Search & Filter ](https://apps.shopify.com/product-filter-search?gad_source=1\&gclid=Cj0KCQjwjNS3BhChARIsAOxBM6qtbRH02fnIE1bXApHzX6T2oCJnOzmSBybpBocKT2OyVOFYbwqOZa4aAjnWEALw_wcB\&locale=it\&show_store_picker=1\&utm_campaign=hawk_search_EUAUS\&utm_medium=cpc\&utm_source=google\&utm_term=shopify+filter+app)on your Shopify store. Then, activate it on Shoppy by going to your Shoppy Dashboard > Integrations, and head to the "Search and Filters" category where you'll find this integration! <br>


# SoBooster - Ultimate Search & Filter

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FAGPA21zucELS9YkWxkvQ%2Fsooboster.jpg?alt=media\&token=0cb3750a-f07a-4836-b46f-f1918cb5a595)

By integrating the Ultimate Search & Filter by SoBooster, app you can add an eye-catching filter view to your Shoppy app and increase the likelihood that your users will find the products they're looking for.

To set up the SoBooster integration - Ultimate Search & Filter on Shoppy, you will need the API Domain and API Key.&#x20;

These are the steps to obtain them, described in the details [here](/getting-started/shoppy-mobile-app-builder).&#x20;

Open the search page on your store and once you have downloaded the SoBooster app on your theme, open the browser development tool and click on the XHR tab. You should find a request like this: <https://svc-1001-usf.hotyon.com/search?q=&apiKey=c811efb1-f10b-482c-b3d7-0f49f7c30f3e>. The domain displayed will be the field to be entered in the API Domain field, and the API Key parameter should be entered into the API Key field.&#x20;

In this case the API Domain is  **svc-1001-usf.hotyon.com** while the API Key is **c811efb1-f10b-482c-b3d7-0f49f7c30f3e**.

Insert these fields in the Shoppy Dashboard by going to the Integrations tab and enabling the integration with SoBooster.&#x20;

In the popup that appears, paste or type in the API Domain and API Key you just found.

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FMHaFDiPO01sPTBlb9kC1%2FSchermata%202022-04-15%20alle%2015.31.15.png?alt=media\&token=3f633f0b-cadf-4a07-9866-29490798b6cc)


# Shopify Tag Filters

With this integration, you will be able to filter products on your Shoppy app using the tags set on Shopify. Upon entering a collection's page, Shoppy will retrieve all of the product tags from that collection and show them to the user so they can filter products.

To enable this integration, head to your Shoppy Dashboard, go to "Integrations", and click on "Enable" next to "Shopify Tag Filters". From here, you are able to insert a **separator** or a **hidden tag** or click the check box to **hide filters with a specific value.**

**Separators**

Separators are used to group filters together. For example, if tags are `size_s` and `size_m`, the separator must be set with an underscore **`_`** so allow the user to see the size filters with s and m options. You can choose to insert a separator other than an underscore, but it is important to pick one and remain consistent.&#x20;

**Hidden Tags**

With Hidden Tags, you can hide filters associated with a certain tag. For example, you can hide the filter for brands, colors, or sizes. For example if you have tags for `size_s` and `size_m`, but want to hide the size filter, you can simply enter `size` into the text box to hide the ability to filter by size.&#x20;

**Hide filters with one value**

In the case that a filter has only one option you can choose to hide it. For example, if you have the color filter with only the red option available, you can choose to hide the entire filter in these cases by clicking the check box.&#x20;

The Shopify Tag Filters integration is **incompatible** when one of the following integrations are enabled:

* Algolia
* SoBooster
* Shopify Search and Discovery

Watch the tutorial below to see how to set up Shopify Tag Filters on your dashboard:&#x20;

{% embed url="<https://cdn.mburger.cloud/348717/ShopifyTagFilters_Dashboard.mp4?data=eyJtZWRpYV9pZCI6MzQ4NzE3LCJieXRlcyI6NTUzNjE0LCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}


# Whatsapp Business

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fu6DrUZKUT6ANzFHNWKPw%2Fwhatsapp.jpg?alt=media\&token=a75e9a16-6972-4d20-9b2d-81095ef0e79c)

With this integration, you can communicate with your clients through Whatsapp Business.&#x20;

To set up the Whatsapp chat, go to Integrations and enable the  **WhatsApp Support** integratio&#x6E;**.** \
In the popup that appears, enter your phone number in the *Whatsapp Number* field. \
Be sure to enter the phone number complete with its area code (ex: +44) and no spaces.

Click "Save" to save your changes and enable integration.

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FnjZv6KkDfGwIuULOOUa8%2FSchermata%202022-01-31%20alle%2015.46.50.png?alt=media\&token=205558ba-cd33-4893-9ed2-7cf27b8376c2)


# TextYess

Automate your marketing campaigns on WhatsApp and optimize customer support with AI.

TextYess enables businesses to **launch large-scale WhatsApp broadcast campaigns**, **automate processes** like abandoned cart recovery and post-purchase follow-ups, and **provide instant, 24/7 customer support** through an AI Assistant seamlessly integrated with their product catalog.&#x20;

**To get started, simply install TextYess on your Shopify store:** <https://apps.shopify.com/textyess-1>.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FaRZWZPGEtXL3vsHdJTii%2FText%20YESS.png?alt=media&amp;token=4a2d3310-9747-49de-8b29-4cda812dd78d" alt=""><figcaption><p>TextYess on Shopify App Store</p></figcaption></figure>

TextYess enables businesses to **launch large-scale WhatsApp broadcast campaigns**, **automate processes** like abandoned cart recovery and post-purchase follow-ups, and **provide instant, 24/7 customer support** through an AI Assistant seamlessly integrated with their product catalog.

To set up the [TextYess](https://www.textyess.com/) chat, go to the **Shoppy Admin** in the *Integrations* section and **enable the  TextYess** integratio&#x6E;**.** In the popup that appears, enter your phone number in the *Whatsapp Number* field.  Be sure to enter the phone number complete with its area code (ex: +44) and no spaces.

Click "Save" to save your changes and enable integration.

![Shoppy Admin](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F5YSDcIqPpeX4Y8mHdfS8%2FShoppy%20Text%20Yess.png?alt=media\&token=875aecdb-5674-4d13-b776-0ba4ad9353bf)

Once set up, the **WhatsApp icon will appear on your app’s** homepage and within the settings, based on the configuration you define in the Shoppy admin panel. 🎉

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fu6DrUZKUT6ANzFHNWKPw%2Fwhatsapp.jpg?alt=media\&token=a75e9a16-6972-4d20-9b2d-81095ef0e79c)


# Facebook Messenger

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FpRKlU3qP3NiQiF342G6p%2Fmessenger.jpg?alt=media\&token=a9dcd6da-aeb8-4cfc-bb6d-aa4012e0fc68)

With this integration you can communicate with your customers via Facebook Messenger chat.

To set up Facebook Messenger chat, go to Integrations and enable the **Facebook Support** integration.

In the popup that will appear, enter your page ID in the Facebook ID field. To find your *Facebook  ID*, you can follow the steps described on this page: <https://www.facebook.com/help/1503421039731588/>. <br>

If you'd like to show the support button in your App Home select "Show in App Home."

Click "Save" to save your changes and enable the integration.

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fr4Fcd0dU4Bfbf0bti3ns%2FSchermata%202022-01-31%20alle%2015.46.37.png?alt=media\&token=bb6b8ff4-1d3d-42c6-b29a-81ca96f78f95)


# LiveChat

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FHAdC9XvexNArFhEbsi5X%2Flivechat.jpg?alt=media\&token=98e39ac7-9dba-4010-9261-44db93d49939)

With this integration you can communicate with your customers using LiveChat.

To set up LiveChat Integrations chat and enable the Live Chat Support integration. In the popup that will appear, enter the direct link to your LiveChat chat in the Live Chat Link field. If you want to show the support button in your App Home select "Show in App Home."

Click "Save" to save your changes and enable the integration.

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FetNmMArJJFLEP8Mp9GRP%2FSchermata%202022-01-31%20alle%2015.46.43.png?alt=media\&token=1910035f-b1ac-47c5-9677-55ab7ba4f7fd)

To get the direct link to LiveChat, open the LiveChat app from Shopify and click on the "**Go to LiveChat**" button, which will open the LiveChat dashboard in another tab. From the main LiveChat dashboard go to **Settings -> Channels -> Chat Page** and copy what is in the text field in the "**Your Chat Page Link**" section with the "**Copy Link**" button.


# Shopify Product Reviews

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FVHAIYMjhXNSYcCYFx4pw%2Fgrowave%202.jpg?alt=media\&token=4e64c3e5-c09b-4d79-ab0a-261882dcb9ce)

With this integration you can product reviews to your Shopify app. Con questa integrazione potrai aggiungere alla tua app Shopify le recensioni dei prodotti inserite tramite l'app ufficiale di Shopify.

The first step to activate the integration is to install the app "Product Reviews" on your store. To install it, use [this link](/shoppy-dashboard/app-builder/homepage/single-product) and click "Add App".

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fo3ARO18e2sI3ZpyzrGLM%2FSchermata%202022-01-26%20alle%2014.12.44.png?alt=media\&token=3b9ae4d5-4c81-4435-8ccc-36ca6b0cf872)

Once the app is installed in your store, go to the "Integrations" section of Shoppy and activate the integration "Shoppy Product Review" by clicking on the button "Enable".&#x20;


# Trustpilot

## Overview

**Turn trust into sales!** Shoppy now integrates with **Trustpilot**, allowing you to display authentic customer reviews directly in your app. Strengthen your brand's reputation and help customers make informed purchase decisions by leveraging the power of real reviews.

## How to Enable Trustpilot Integration

{% embed url="<https://cdn.mburger.cloud/359597/Shoppy-X-Trustpilot.mp4?data=eyJtZWRpYV9pZCI6MzU5NTk3LCJieXRlcyI6MjAyMzgzOTUsInByb2plY3RfaWQiOjI3ODcsImhhc19pbWdpeCI6MH0=>" %}
Trustpilot integration
{% endembed %}

1. Go to the **Integrations** section in your **Shoppy Admin Dashboard**.
2. Enable **Trustpilot** integration.
3. Once enabled, a new **Trustpilot widget** will appear among the available widgets in the **Home Page Builder**.
4. Add the **Trustpilot widget** to your home page.
5. Insert the **"Head" HTML code** and **"HTML Widget Code"** provided in your Trustpilot dashboard.

Now, your app will display verified reviews, enhancing credibility and customer trust!


# JudgeMe

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FVHAIYMjhXNSYcCYFx4pw%2Fgrowave%202.jpg?alt=media\&token=4e64c3e5-c09b-4d79-ab0a-261882dcb9ce)

With the [Judge.Me](https://judge.me) integration you can add user reviews that are synchronized with your online shop.

To enable this integration you will need an `api_token` and a `shop_domain`, which you are able to obtain from your Judge.Me dashboard.

From your JudgeMe dashboard, navigate to Settings -> Integrations -> Developers -> Judge.me API.\
Copy the Shop Domain field and the Private Token field.

All you have to do is go to the Integrations section of Shoppy and activate Judgeme and enter the shop URL and token that you obtained earlier.

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Ftc6mCo2yHi3CMx5779pY%2FSchermata%202022-01-31%20alle%2015.47.04.png?alt=media\&token=94ba8ee9-25d5-452b-9e8d-ed0f75e166d4)


# Feedaty

Enabling Feedaty as an integration on your Shoppy app will allow you to take advantage of product reviews that your customers have written for you! Their reviews will be shown on your product pages in Shoppy, just like they are shown on your product page on Shopify with the Shopify Product Review integration.

To enable Feedaty, simply go to your Shoppy Dashboard > scroll to **Feedaty** and click 'Enable'. Make sure to insert your merchant code and click 'Save' to link this integration to your Shoppy app.


# Qaplà

## **Overview**

**Smarter shipping, seamless tracking!** With Shoppy’s new **Qapla’ integration**, you can streamline your logistics and enhance customer satisfaction.

* **Generate shipping labels** in just three clicks.
* **Monitor all shipments** from a single dashboard.
* **Keep customers informed** with real-time tracking updates and personalized notifications.

A frictionless shipping experience that boosts efficiency and keeps your customers happy!

## **How to Enable Qapla’ Integration**

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fw6xJvy81eavEYxkIdYv1%2FScreenshot%202025-02-17%20alle%2012.44.50.png?alt=media&amp;token=17324bf1-c91c-4f62-8545-9a82fa34487d" alt=""><figcaption></figcaption></figure>

1. Go to the **Integrations** section in your **Shoppy Admin Dashboard**.
2. Search for **Qapla’** and enable the integration.
3. Once enabled, your app users will be able to:
   * Track their packages directly from their **user profile**.
   * View real-time **shipment status updates**.
   * Receive **push notifications** whenever the shipment status changes.

Now, your customers can enjoy a smooth and transparent delivery experience! 🚀


# ShippyPro

With ShippyPro integration, you will be able to display order tracking information directly on the app. Your users will also be able to receive a push notification when order shipping information is updated.

#### Create the API Key

To set up ShipyPro you will need an API Key. To do this go to the ShippyPro dashboard, in the right-hand menu select **Integrations & APIs -> APIs**. In the **API Keys** section Click on *"+ Add Key"*, a new API Key will be created.

Copy the API Key you just created and enter it on Shoppy by going to **Integrations -> ShippyPro ->** **Enable.** Enter the API Key in the API Key field of the popup that appears and click Save.

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FJiN81lncObYYaOCGhyND%2FSchermata%202022-04-15%20alle%2015.32.34.png?alt=media\&token=cf166507-4fa0-4e3a-8852-d7f228ab81cb)

#### Push Notifications

To enable push notifications you will need to configure a *webhook* in the ShippyPro dashboard. Open the integration settings and copy the *Webhook* field.

Now go to the ShippyPro dashboard and in the right-hand menu select **Integrations & API -> API.** In the Webhook section click on "*+ Add Webhook*."

In the Webhook Url field enter the text you just copied from the Shoppy dashboard and in the Webhook Events field select *"Tracking Update."*

That's it, click *Save Webhook* and you will have everything configured to have users receive push notifications of updates for orders.


# "Back in Stock" Notifications

By enabling this integration you will be able to allow your users to receive a push notification when a product they are interested in becomes available again.

If a user selects a product that is unavailable at the moment, they will be able to opt to be contacted via push notification once it comes back in stock.

The system is synchronized in real time with the stock and specific products in your Shopify store. This means that when the discontinued product is restocked,  all users who have requested to be notified will automatically be notified with a push notification.

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F6paxO9jhVvvMUdvDo5AJ%2FSchermata%202022-04-15%20alle%2015.34.00.png?alt=media\&token=4dc1ab2d-7466-4389-b0ed-d0d5a2be9571)

From the Shoppy dashboard, you can choose the text content of the notification by going to "**Back in Stock"** Notification **-> Edit --> Edit Integration.**

**Title**: the title of the push notification that the use will receive.

**Body**: the content of the push notification.

You can include the product name in the title or text of the notification by entering the @ character and selecting *Product Title* in the menu that appears.&#x20;


# Live Me Up

## **Overview**

**Bring your products to life with LiveMeUp!** This powerful integration enables you to engage customers through live shopping experiences, making eCommerce more interactive and dynamic than ever. With LiveMeUp, you can:

* **Host live events** directly on your e-commerce site, allowing real-time interaction with customers.
* **Customize the live player** to match your brand's colors and style.
* **Tag products** during live sessions, enabling customers to add items to their cart without leaving the stream.
* **Simulcast live sessions** across multiple social media platforms, including Instagram, Facebook, and YouTube, to expand your reach.

## **How to Enable LiveMeUp Integration**

1. **Navigate to the Integrations Section**: In your **Shoppy Admin Dashboard**, go to the **Integrations** section.
2. **Enable LiveMeUp**: Search for **LiveMeUp** and enable the integration.
3. **Sync with Your Shopify Store**: Ensure that the **LiveMeUp app is installed on your Shopify store**. The integration will automatically sync with your LiveMeUp profile.
4. **Access the LiveMeUp Widget**: After enabling, the **LiveMeUp widget** will be available among the widgets in Shoppy's Home Page Builder.
5. **Add the Widget to Your Home Page**: Incorporate the LiveMeUp widget into your home page to start hosting live shopping events directly on your app.

By integrating LiveMeUp, you can create immersive and engaging shopping experiences that boost customer interaction and drive sales.


# Storifyme

## **Overview**

**Make your brand unforgettable with StorifyMe!** This powerful integration enables you to create and share interactive, engaging stories that captivate your audience, improve retention, and enhance your app's storytelling potential. With StorifyMe, you can effortlessly integrate mobile-native story formats into your app and website, enriching user experience and boosting engagement.

{% hint style="info" %}
Want to explore more about how **StorifyMe** can enhance your app’s storytelling? Discover all the features, use cases, and best practices on their official website: [StorifyMe.com](https://www.storifyme.com/) 🚀
{% endhint %}

## **How to Enable StorifyMe Integration**

{% embed url="<https://cdn.mburger.cloud/359596/Shoppy-X-Storifyme-_web_.mp4?data=eyJtZWRpYV9pZCI6MzU5NTk2LCJieXRlcyI6MjUwNDMwNzAsInByb2plY3RfaWQiOjI3ODcsImhhc19pbWdpeCI6MH0=>" %}
Storifyme integration
{% endembed %}

1. **Navigate to the Integrations Section**: In your **Shoppy Admin Dashboard**, go to the **Integrations** section.
2. **Enable StorifyMe**: Search for **StorifyMe** and enable the integration.
3. **Enter Account Credentials**: Input your **Account ID** and **Access Token** from your StorifyMe account.
4. **Access the StorifyMe Widget**: Once enabled, the **StorifyMe widget** will be available among the widgets in Shoppy's Home Page Builder.
5. **Configure the Widget**: Add the StorifyMe widget to your desired location in the app and input the specific **Widget ID** from StorifyMe to select which stories to display on your mobile app.

By integrating StorifyMe, you can deliver dynamic and personalized stories, share them via links, embeds, or QR codes, and track their performance—all within a single, powerful tool.


# Klaviyo

Thanks to Shoppy's integration with Klaviyo, you will be able to use the audiences created by Klaviyo as targets for push notifications sent by Shoppy.\
To activate the integration with Klaviyo you will need an API Key. Go to the Klaviyo dashboard and click on your name (top right) and go to **Account** -> **Settings** -> **API Keys**.\
Create a new private key by clicking on the "Create private API Key" button and copy or write down the key you just created, which has the format pk\_\*\*\*\*\*\*.\
You are ready to activate Shoppy's integration with Klaviyo, go to the "Integrations" tab, activate Klaviyo and enter in the API Key that you just retrieved.\ <br>


# Growave

### Overview

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FIi1y3w0HCKJOj2rMKbqi%2Fgrowave.jpg?alt=media\&token=2797c84f-a894-4c46-aac4-28f3c63e74f7)

Thanks to the [Growave](https://growave.io) integration you can add features to your app and create a loyalty program for your customers, add reviews to your products, and synchronize user's wishlists.&#x20;

The integrations are divided by type on Shoppy:

* **Growave Loyalty & Rewards**: to manage loyalty programs.
* **Growave Wishlist**: to synchronize the Shoppy app's wishlist with Growave's wishlist and your web store.
* **Growave Review**: to add the ability to add rercensions to your products.

{% hint style="info" %}
The API is only available with the Enterprise plan and above, so you must activate one of these plans in order to enable this integration.
{% endhint %}

***

### **Shoppy Experience**

When you activate the LoyaltyLion integration inside Shoppy, a new section called **“Loyalty & Rewards”** automatically appears in **App Builder → Profile Page / Account**. You can reorder this block just like any other element of the Profile Page, deciding where it should appear in the user’s account.

Once enabled, your app unlocks a complete loyalty experience made of **three views**, designed to mirror the structure of your Growave program:

#### **1. Loyalty Center**

This is the main loyalty dashboard your customers will see when they tap **“Loyalty & Rewards”** from the Profile Page.

Inside the Loyalty Center, users can view:

* **Their current points balance**
* **Their tier level**, exactly as defined inside Growave
* A clean, branded header with celebratory image (as shown in the example screens)

From here, customers can easily navigate between two additional sections using the tab bar: **Loyalty Rewards** and **Earn Points**.

#### **2. Loyalty Rewards**

This tab displays the full list of rewards configured in your LoyaltyLion program.

For each reward, the app shows:

* **Reward name**
* **Required points**
* **User’s progress**, expressed as a percentage or completion bar
* The option to **redeem the reward**, generating a unique discount code that the customer can copy and use at checkout

The experience is seamless: users can see how close they are to unlocking a reward and redeem it directly from the app without leaving the flow.

#### **3. Earn Points**

This tab lists all the actions customers can complete to earn points, mirroring the “earning rules” defined in Growave.

Each rule is clearly displayed with its corresponding points value, helping users understand exactly how they can progress within the loyalty program.

***

### **How to**

#### **Get API Key and API Secret**

To connect your Shoppy app to Growave you must have API Key and API Secret. These features can be found by logging into the Growave app from Shopify, clicking on "Settings" (right side bar) and, in the sub-menu that will appear, click on API. On the page that will open you will find your API Key and API Secret.&#x20;

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FiYWvl4zqloavmqhTOqbP%2FGrowave%20API%20-%20Shoppy%20Integration.png?alt=media&amp;token=c0b91c15-1cf5-4482-abfe-cac6725e0047" alt=""><figcaption></figcaption></figure>

#### **Insert API Key and API Secret on Shoppy**

Now all you have to do is connect Growave to Shoppy. To do this, open Shoppy's "Integratoins" page and enable the Growave integrations you need.&#x20;

In the popup that appears, paste in the API Key and API Secret that you've just collected.

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FICyVQ0K1tsWxHLMoOf29%2FSchermata%202022-04-15%20alle%2015.30.19.png?alt=media\&token=fd1043bb-839c-43a0-b69a-8f81f938343b)


# Recharge

Enabling this integration will allow your users to purchase products on a recurring basis. Everything you configure on Recharge will be reflected on both the website and your Shoppy App automatically.

Enabling this integration will allow your users to purchase products on a recurring basis. Everything you configure on Recharge will be reflected on both the website and your Shoppy App automatically.


# Google Maps

With Google Maps integration enabled, when users insert a shipping address that is suspected to have an error, users will be alerted and offered suggestions based on Google's database.

To set this up in your Shoppy Dashboard, simply go to **Integrations**, scroll down to **Google Maps**, and click **Enable**.

{% embed url="<https://cdn.mburger.cloud/348815/Googlemaps_dashboard?data=eyJtZWRpYV9pZCI6MzQ4ODE1LCJieXRlcyI6NDE2OTQzLCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}

Here you can see an example of a suggestion given to a user after incorrectly inserting their zipcode:

{% embed url="<https://cdn.mburger.cloud/348696/GoogleMaps_Phone-recording.MP4?data=eyJtZWRpYV9pZCI6MzQ4Njk2LCJieXRlcyI6MjU5MDg3MywicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}


# Kiwi Size Chart & Recommender

### Overview

With the Kiwi Integration, you can provide size charts for your products on Shoppy and provide recommendations to your users.

### How to

1. Head to "Integrations" on your Shoppy Dashboard and click "Enable" on the Kiwi Size Chart & Recommender widget
2. In the search bar at the top of your Dashboard, search for Kiwi. Once clicked, you will be directed to Kiwi in a new page.
3. From Kiwi, you can create the name of your size chart, customize the size table and range, then click "Save" and close.
4. Under "Product Matching Conditions", you can select to apply this size chart to products matching ANY or ALL of the conditions. Click "Add new matching conditions", to choose whether to apply this size chart to specific products, collections, product vendors, product tags, or all products. Once completed, hit save to register the changes.

{% embed url="<https://cdn.mburger.cloud/348692/Kiwi_Dashboard.mp4?data=eyJtZWRpYV9pZCI6MzQ4NjkyLCJieXRlcyI6MjM4MzI5NCwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

Here is how this appears to users in-app:

{% embed url="<https://cdn.mburger.cloud/348694/Kiwi_Iphone-recording.MP4?data=eyJtZWRpYV9pZCI6MzQ4Njk0LCJieXRlcyI6MTc4NzYxNzUsInByb2plY3RfaWQiOjI3ODcsImhhc19pbWdpeCI6MH0%3D>" fullWidth="false" %}


# Omnibus Pricing

### What is Omnibus?

The European Omnibus Directive, effective since May 2022, requires businesses to display the lowest price a product has been sold for in the last 30 days when advertising a discount. This prevents misleading promotions and applies to both online and physical stores. Exceptions include perishable goods and items on the market for less than 30 days. Read more information about this directive [here](https://www.vaimo.com/blog/omnibus-directive/).&#x20;

### How Can I be Compliant?

Shopify & Shoppy both offer the [Omnibus Pricing Integration](https://apps.shopify.com/omnibus-price?locale=it\&search_id=c125959c-f011-4234-8171-e4ef93e688f5\&show_store_picker=1\&surface_detail=Omnibus+Pricing\&surface_inter_position=1\&surface_intra_position=5\&surface_type=search) that will display the 30-day lowest price on discounted products on your store.&#x20;

To get started, install the integration on your Shopify Store. Then, go to your Shoppy Dashboard > Integration and "Enable" Omnibus Pricing. You can find this integration underneath the "Legal Information" category.&#x20;

Once this is done, the integration will scan your products & set a metafiled for it, so that the correct pricing info will be shown automatically. You can alter where the Omnibus Pricing info appears on the product page by following the instructions [here.](/shoppy-dashboard/settings/product-page)

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FwaM4HCUhG3Xee6Ioiym7%2FScreenshot%202024-09-26%20at%2015.44.14.png?alt=media&amp;token=68cbca08-9a68-4373-8c1a-5eb285a2ae12" alt=""><figcaption></figcaption></figure>


# Contents

{% content-ref url="/pages/I3HStGVOPiTQw16hjMke" %}
[Pages](/shoppy-dashboard/contents/pages)
{% endcontent-ref %}

{% content-ref url="/pages/5xEGs6Wb5lazx7iry8sS" %}
[News](/shoppy-dashboard/contents/news)
{% endcontent-ref %}


# Pages

{% hint style="info" %}
This feature is available on the **Grow** plan and above.
{% endhint %}

### Overview

Shoppy opens the door to 360-degree customization by giving you the ability to add “custom pages” that will give more character to your App. With Pages you can create and publish custom pages, making your App even more personal and engaging.&#x20;

On the Main 'Pages' view, you can see information about your existing pages and you can filter pages with the search bar, and sort pages by Newest or by Oldest. Click 'Edit' to make changes to an existing page, or click 'Add Page' to add a new one. By clicking on 'Add Page', you can insert your Page title, an icon for it to be associated with on the navigation bar, and a type of page.  In Pages, just like in Navigation, you can choose from a selection of icons or add custom ones; read more [here.](/shoppy-dashboard/app-builder/navigation)

Shoppy offers three types of pages, **Content Pages, External Link Pages,** and **Developer Pages.** Keep reading to find out how to set up each one and learn about their benefits!

### Content Pages

Native pages composed of titles, descriptions and images, which you can use to tell your brand or story. To add one, simply insert the text that you'd like users to see, and edit in the text box. Click 'Save' to register your changes, and 'Publish' to make your page live.  If you'd like to link this page in your navigation bar for your users to have easy access to, head to App Builder > Navigation > Add Section and select your new page! Watch the tutorial below to get a feel for it:

{% embed url="<https://cdn.mburger.cloud/347424/Pages-Screen-Recording__.mp4?data=eyJtZWRpYV9pZCI6MzQ3NDI0LCJieXRlcyI6NDkxNjQ3LCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}

### **External Link Pages**

Create pages that handle web-views in apps to link services or features that are not natively integrated, such as the Size Guide or return form. Simply insert a URL to where you'd like your Page to direct users to. Click 'Save' to register your changes, and 'Publish' to make your page live.&#x20;

Just like with Custom Pages, you can add this page to your app's navigation bar by going to App Builder > Navigation > Add Section and select your new page.

### Developer Pages

Create custom pages with your development team, or try it yourself if you have a bit of coding knowledge! Read about our revolutionary addition to Shoppy [here](/developers/developer-pages) in our user guide.


# News

### Overview

In every Shoppy app, there is a News section where you can place ads or communications for your customers to see. News items are sorted in the app by date of entry; the last one entered will be the first one seen in the list.&#x20;

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FpDgCWRBNz9oIqTDcG8W7%2FFrame%204.png?alt=media\&token=c48c92a1-d7dd-456c-9147-a8db18ab3ff7)

### How to create a news

To insert a news item, go to the *News* tab in the Shoppy dashboard and click on the button ***Add News***.&#x20;

{% embed url="<https://cdn.mburger.cloud/336384/news-new.mp4?data=eyJtZWRpYV9pZCI6MzM2Mzg0LCJieXRlcyI6NDk4NDEyNSwicHJvamVjdF9pZCI6MjAzLCJoYXNfaW1naXgiOjB9>" %}

Each news item is composed of:

* A **title**
* An **image**&#x20;
* The **content** of the news, which can be formatted with a user-friendly text editor.&#x20;
* A **link** and a **link label** (both are option). If you insert the link within the news item, a button will appear that will take the user to inserted web page. If you also insert the **link label**, the button will have the inserted label as text. &#x20;
* You will also be able to enter a list of **categories**, which will be displayed in the app as tags, so that you can sort the news into categories of your preference.

Once the news is entered it will appear in the news list in the *News* tab of the Shoppy dasbhoard. From here, you can edit the *News* or delete it with the *Actions* button.&#x20;

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FUZD8wvFSgdfvZjlWSWo1%2FSchermata%202022-04-15%20alle%2015.26.34.png?alt=media\&token=f2cbf4b9-d398-49d6-87f2-104d01d5dd1b)

### **Status**

You can decide whether to publish a news item immediately, schedule it to be published on a specific date and time, or save ite it as a draft to be published later.&#x20;

To do this, utilize the Status section when creating or modifying a news item.  You have 3 possible options from here:&#x20;

* **Published**: the news will be published immediately upon saving.&#x20;
* **Scheduled**: the news will be published at the entered date and time.
* **Draft**: the news will not be published. You will have to change its status later to make it appear in the app.&#x20;


# Settings

In this section you can set up your mobile app so that it is ready to publish on your digital stores.&#x20;

{% embed url="<https://cdn.mburger.cloud/342036/impostazioni.mp4?data=eyJtZWRpYV9pZCI6MzQyMDM2LCJieXRlcyI6NzMxNTcxLCJwcm9qZWN0X2lkIjoyMDMsImhhc19pbWdpeCI6MX0%3D>" %}

The Settings section includes:

{% content-ref url="/pages/I6YJe6Up8suKkN9jaC4q" %}
[Account](/shoppy-dashboard/settings/account)
{% endcontent-ref %}

{% content-ref url="/pages/lpWAUzl9ja1AUlqm2RCe" %}
[App Settings](/shoppy-dashboard/settings/app-settings)
{% endcontent-ref %}

{% content-ref url="/pages/Zj1pHtRPVQwe44ODeUSF" %}
[App Listing](/shoppy-dashboard/settings/app-listing)
{% endcontent-ref %}

{% content-ref url="/pages/xtwwt0e5uhVoTqJ112uS" %}
[Billing and Plans](/shoppy-dashboard/settings/billing-and-plans)
{% endcontent-ref %}

{% content-ref url="/pages/bIj7EWu50SOYIsNpnf5Y" %}
[Terms and Conditions](/shoppy-dashboard/settings/terms-and-conditions)
{% endcontent-ref %}


# App Settings

This section contains general settings and behaviors of your app. To find this area, go to **Settings > App Settings** in your Shoppy Dashboard. See the video below:

{% embed url="<https://cdn.mburger.cloud/342029/settings.mp4?data=eyJtZWRpYV9pZCI6MzQyMDI5LCJieXRlcyI6MTU4OTIwMSwicHJvamVjdF9pZCI6MjAzLCJoYXNfaW1naXgiOjF9>" %}

###

{% content-ref url="/pages/XKgJepGaYBUOvRlu0pdN" %}
[Markets](/shoppy-dashboard/settings/app-settings/markets)
{% endcontent-ref %}

{% content-ref url="/pages/oupZ693PnZwIpb8dpDmM" %}
[Check-out options](/shoppy-dashboard/settings/app-settings/check-out-options)
{% endcontent-ref %}

{% content-ref url="/pages/LPLraf0FU4N7BVPirTib" %}
[Payment Methods](/shoppy-dashboard/settings/app-settings/payment-methods)
{% endcontent-ref %}

{% content-ref url="/pages/fu1UIZVK0jAC1FVz0lTg" %}
[App Behavior](/shoppy-dashboard/settings/app-settings/app-behavior)
{% endcontent-ref %}

{% content-ref url="/pages/6GdHUCMw0FM5RtaxyZra" %}
[Miscellaneus](/shoppy-dashboard/settings/app-settings/miscellaneus)
{% endcontent-ref %}


# Customer Account

## Introduction

Shopify recently introduced a new **Customer Account experience** with a refreshed design, faster login, and passwordless access.&#x20;

Shoppy supports this new experience through Shopify’s **Headless** API — allowing your mobile app to use the same login flow you enable on your online store.

## **What Are New Customer Accounts?**

Shopify’s **New Customer Accounts** offer a more modern login experience:

* Users log in via **email verification** (no password required)
* It works across **Shopify Checkout**, **Shopify POS**, and **Headless** channels (like Shoppy)
* Customers can manage orders, profile details, and addresses more smoothly

## **How to Enable It with Shoppy**

Enabling New Customer Accounts with Shoppy involves **two simple steps**:&#x20;

### **Enable New Customer Accounts in your Shopify Admin**

* Go to **Settings > Customer accounts**.
* Select **"Show login link in the header of online store and at checkout"**.
* Choose **"New customer accounts"**.
* Click **Save**.

### Get Your Client ID

To activate the **New Customer Accounts (NCA)** login inside your Shoppy app, Shopify requires a **Client ID** generated via a **Headless App**. Here’s how to get it:

**1. Open your Shopify Admin**

From your Shopify dashboard, go to the **Apps** section.\
Search for and open the **Headless** app (by Shopify).

***

**2. Create a Storefront**

Once inside the Headless app, navigate to the **Storefronts** tab.\
Click the **“Create storefront”** button.

***

**3. Manage Customer Account API Access**

Scroll to the **Manage API access** section.\
Click the **Manage** button next to **Customer Account API**.

***

**4. Set Client Type to Public**

In the **Client type** section:

* Click the **Edit** icon 🖉
* Select **Public (mobile app)**
* Click **Save**

***

**5. Copy Your Client ID**

Your **Client ID** will now be visible under the **Customer account API credentials** section.

📋 Copy this ID — you will need to paste it into the **Client ID** field when enabling the Customer Accounts type.

***

{% hint style="warning" %}

#### **Important Note**

To avoid issues with the New Customer Accounts workflow, **do not uninstall the Headless app** after setup.\
It does not affect your Shopify storefront or any sales channels, but it is essential for maintaining the integration.
{% endhint %}


# Language

The language of your Shoppy app is automatically inherited from the primary language of your Shopify store.

### Overview

The language of your Shoppy app is automatically determined by the **primary language** configured in your Shopify store. If you'd like to change the app’s language, you must first update the primary language in your Shopify settings.

### How to Change Your Store’s Primary (Default) Language

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fbfj3gDCKfTEHMKSO9IS9%2Flanguage-setting-shopify-dashboard-1024x532.jpg?alt=media&amp;token=e3f9f4e4-f05f-43fb-96f2-eb562f633342" alt=""><figcaption></figcaption></figure>

1. Log in to your Shopify Admin.
2. Navigate to **Settings > Languages**.
3. Under **Published languages**, click the **…** (ellipsis) next to the current default language.
4. Select **Change default** in the menu.
5. Choose a new default language from the dropdown and click **Save**.

Once this change is saved, your app’s language will reflect the newly selected primary language.

### Understanding the Default Language vs Market Language

* The **store’s default language** affects your Shopify admin, theme, and checkout experience
* Each **market** can have its own default language:
  * Go to **Settings > Markets > \[Select Market] > Languages and domains**.
  * Here you can **change the default language** for that specific market


# Markets

## Overview

{% hint style="info" %}
This feature is available on the **Bloom** plan and above.
{% endhint %}

&#x20;If enabled, Shoppy will show a popup on first launch that will prompt the user for their country of origin from those configured on Shopify Markets. From that choice, the names and prices of products in the store will be shown based on the user's country. You can choose whether to enable or disable multi country upon the first installation of your app. This allows users to select the language and currency they wish to view. *If you have Shopify Market set up on your Shopify store, you will be able to have the same functionality on your Shoppy app.*&#x20;

When Multi-Language and Mulit- Currency is enabled, language and currency are manageable through the app’s settings. The Shoppy app, by default, suggests the language in which the devise is set. For example, if your user’s smartphone has English set as the primary language, then the app will propose content in English and users can, at any time, change the language simply through the app’s Settings menu.

This is a setting that can be enabled or disabled by going to **Settings > App Settings > Multi-Countries.** Below is a tutorial of how to do this in your Shoppy Dashboard:&#x20;

{% embed url="<https://cdn.mburger.cloud/347639/multi-countries-new-screen-dashboard.mp4?data=eyJtZWRpYV9pZCI6MzQ3NjM5LCJieXRlcyI6MTI2MTQ0LCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}

Below, you can see the in-app view that users see upon the first opening of your app:

{% embed url="<https://cdn.mburger.cloud/347596/Multi-country-video-NEW.mp4?data=eyJtZWRpYV9pZCI6MzQ3NTk2LCJieXRlcyI6MTA0MTI1MiwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" fullWidth="false" %}

## Supported Languages

English, Spanish, German, French, Hungarian, Italian, Polish, and Portuguese

## Supported Currencies

GBP,GHS,EUR,CZK,CNY,CHF,CAD,AUD,BRL,JPY,KRW,TRY,MXN,NGN,NOK,NZD,PLN,RUB,TWD,USD,ZAR,AED,AFN,ALL,AMD,ANG,ARS,AWG,AZN,BAM,BBD,BDT,BGN,BIF,BND,BOB,BSD,BWP,BZD,CDF,CLP,COP,CRC,CVE,DJF DKK,DOP,DZD,EGP,ETB, FJD,FKP, GMD, GNF; GTQ GYD, HKD, HNL,HRK, HUF, IDR, ILS, ISK, JMD, KES, KGS, KHR, KMF, KYD, KZT, LAK, LBP, MAD, MDL,MKD,MMK,MNT,MOP,MUR,MVR MWK, MYR, NIO, NPR,PEN,PGK, PHP,PKR,PYG,QAR,RON,RSD,RWF,SAR,SBD, SEK,SGD,SHP,SLL,STD,THB,TJS,TOP,TTD,TZS,UAH,UGX,UYU,UZS,VND, WST,XAF,XCD,XOF,XPF,YER


# App Behavior

## Cart Layout Behavior Options & Add to Cart

In this section, Shoppy Store Owners are able to determine the cart behaviour. There are 2 options available - Only Banner and Cart Redirect.  Only Banner is the *default* Shoppy behavior. If it's desired to change to Cart Redirect, the Shoppy Store Owner must have a Grow or Bloom Plan.

Cart Layout behavior is found by following these steps:

**Settings > App Settings > Behaviours > Cart Layout Behaviour Options.**&#x20;

Here is an example of what it looks like on the app when the 'Only Banner' setting is enabled. You can see that when the user clicks on the product, they are taken to the 'Product Page' where they can see a larger image of the item, its price, select a size, and click 'Buy'. Once the user clicks 'Buy', a banner appears 'Product added to cart'. Here is the **in-app** view how this default setting behaves:

{% embed url="<https://cdn.mburger.cloud/347647/ONLY-BANNER-ENABLED!!!.MP4?data=eyJtZWRpYV9pZCI6MzQ3NjQ3LCJieXRlcyI6MTAwNTM1NTgsInByb2plY3RfaWQiOjI3ODcsImhhc19pbWdpeCI6MH0%3D>" %}

Users with a Grow or Bloom plan have the option to alter their cart layout options in settings, and can choose to either keep the default 'Only Banner' setting, or to change to the **'**&#x43;art Redirect' Setting by going to **Settings > App Settings > Cart layout behaviour options** and enabling 'Cart Redirect'. See the video below to watch how it's done on the **Shoppy Dashboard**:

{% embed url="<https://cdn.mburger.cloud/347681/Cart-Layout-Behavior-DASHBOARD.mp4?data=eyJtZWRpYV9pZCI6MzQ3NjgxLCJieXRlcyI6MTIyOTUzLCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}

When Cart Redirect is enabled, once users click on the product (the image of the product itself, not the 'Buy Now' button; go to the 'Quick Purchase' instructions to read more about this button), the user is taken to the 'Product Page' where they see an enlarged image of the product, its price, and an ability to select a size. Once the user clicks on 'Buy', the user is directed to their cart.  The result of this combination of settings is the same as in the video shown above. Here is the **in-app** view:

{% embed url="<https://cdn.mburger.cloud/347671/NEW-SCREEN---CART-REDIRECT!.mp4?data=eyJtZWRpYV9pZCI6MzQ3NjcxLCJieXRlcyI6MTI4Njk1NywicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

## First Opening Screen

You can choose which screen the user will view first when your app is opened. You can decide whether to show users the Login Screen or the Homepage Screen.&#x20;

* *Login Screen*: the first screen shown to users is the login page.&#x20;
* *Homepage*: the first screen shown to users is the homepage of your app.

## Mobile App Review Popup

In this section, you can either Enable or Disable a popup to appear on your mobile app, asking users how they're enjoying their experience. You can find this setting by going on your Shoppy Dashboard to **Settings > App Settings > Mobile App Review Popup.** By clicking "Enable" next to "Mobile App Review Popup", you can set the following settings on the popups:

* How many days after installation should it be shown?
* After at least how many app openings should it be shown?&#x20;
* How many days must pass before the popup can be shown again?

Mobile App Reviews are always subject to the rules of the online store in which they are uploaded on, meaning the Apple Store on Google Play Store. Keep in mind that the Dashboard settings inserted in this section are still subject to those rules, and are reviewed by the SDK of each respective store before they are sent to the user.

You can read about how Apple Store reviews work here:

{% embed url="<https://developer.apple.com/app-store/ratings-and-reviews/>" %}

You can read about how Google Play Store reviews work here:&#x20;

{% embed url="<https://developer.android.com/guide/playcore/in-app-review>" %}

## **Notification Center**&#x20;

Toggling this option will hide the notification center from the app, because it is already activated by default. The 'Notification Center' area on the user's profile page will then disappear, but this does not prevent the user from receiving push notifications.

Here is what it looks like when the Notification Center is set to "Show":

{% embed url="<https://cdn.mburger.cloud/347630/Notification-center.png?data=eyJtZWRpYV9pZCI6MzQ3NjMwLCJieXRlcyI6MTg4MjM1LCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}

When the Notification Center is set to "Hide", it is not longer visible in the profile area of the app:

{% embed url="<https://cdn.mburger.cloud/347631/Profile---no-notification-center.png?data=eyJtZWRpYV9pZCI6MzQ3NjMxLCJieXRlcyI6NTk1MzEsInByb2plY3RfaWQiOjI3ODcsImhhc19pbWdpeCI6MH0%3D>" %}

## Quick Purchase&#x20;

A customized button can be added to the catalogue page of all items with a call to action for users to click on. Once clicked, users will be directed to the "Buy" page where they can see an overview of items in their cart and proceed to checkout.

You can enable Quick purchase by navigating to Settings> App Settings > Quick Purchase > Enable

After clicking "Enable", you will be able to customize the call to action, and select a button color to appear. Keep reading below to discover how this Quick Purchase Button appears in-app. Note: *Quick Purchase is enabled by Shoppy by default.*&#x20;

Follow this tutorial to see how it's done on the Shoppy Dashboard:

{% embed url="<https://cdn.mburger.cloud/347627/BUY-NOW-SCREEEEN.mp4?data=eyJtZWRpYV9pZCI6MzQ3NjI3LCJieXRlcyI6NzMxMjk0LCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}

Here is how the Quick Purchase Button appears in-app:

{% embed url="<https://cdn.mburger.cloud/347667/QUICK-PURCHASE---new-screen.MP4?data=eyJtZWRpYV9pZCI6MzQ3NjY3LCJieXRlcyI6ODM0MjUwNiwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

## Hide Out-Of-Stock Products

Out-of-Stock Products on Shoppy are synced with your Shopify store. A product that is out of stock shows as unavailable when clicked by default. Here is how out-of-stock products appear in-app by default:

{% embed url="<https://cdn.mburger.cloud/347691/out-out-stock-product-app-view.mp4?data=eyJtZWRpYV9pZCI6MzQ3NjkxLCJieXRlcyI6Mjc1MzMzLCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}

However, if you choose to **Hide** Out-of-Stock Products, the products no longer appear in the app at all for users, and are 'hidden' from the app, and won't appear when searched. This can be done by going on your Shoppy Dashboard to **Settings > App Settings > Hide Out-of-stock-product,** and click **'Enable'.** This will ensure that products with 0 items in stock don't appear to users.


# Check-out options

## Activate In-Store Pickup

By activating in-store pickup, the user will be taken directly to Shopify's checkout screen, where they can choose whether to have their order shipped home or picked up in-store.&#x20;

Here is the way the checkout flow can be altered by enabling or disabling “**Activate in-store pickup**” in **Settings > App Settings > Activate in-store pickup.**&#x20;

{% embed url="<https://cdn.mburger.cloud/347598/Activate-in-store-Pickup-dashboard-video-mp4?data=eyJtZWRpYV9pZCI6MzQ3NTk4LCJieXRlcyI6MTEwMDk3MSwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

**In-app view when in-store pickup is&#x20;*****enabled*****:**

The user sees a summary page that includes a view of items in the user’s cart, and a CTA to insert a promo code. Once the user clicks 'Proceed', they are taken to step 1 of the checkout flow, '**Information**', then continue through step 2, 'Shipping, and Step 3 'Payment'.

{% embed url="<https://cdn.mburger.cloud/347664/NEW-SCREEN---checkout--in-store-pickup-enabled.png?data=eyJtZWRpYV9pZCI6MzQ3NjY0LCJieXRlcyI6MTUzOTQwLCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}

**When the user is Logged In and in-store pickup is&#x20;*****disabled*****:**

The user sees a summary page where they can see a summary of items in their cart, a call to action to insert a promo code, their pre-saved Shipping information displayed, an ability to change their shipping type (ex: Standard, Express). Once users click “Proceed”, they are taken immediately to step 3 of the checkout flow,  '**Payment**'.

{% embed url="<https://cdn.mburger.cloud/347665/NEW-SCREEN---checkout-in-store-pickoup-disactivated.png?data=eyJtZWRpYV9pZCI6MzQ3NjY1LCJieXRlcyI6MTg5MzA0LCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}

## Optional Account Checkout&#x20;

In this section you can choose whether to enable or disable guest checkout. By enabling it, users will be able to checkout even without logging in, otherwise they will have to register an account in order to checkout.

## **Notes**

Enabling this option will give users the ability to enter notes for a checkout.


# Payment Methods

### Shopify Payment Methods

Shoppy offers, as per Shopify policy, web check-out, so it inherits in real time all of the payment methods you have set up on your Shopify Store, and stays up-to-date with them in real time. The payment methods that you have activated on your Shopify Store will be present on the **third step of the Shoppy app checkout, "Payment".** See the example below of *where payment methods from Shopify show up on your Shoppy App during Checkout:*

{% embed url="<https://cdn.mburger.cloud/347618/Payment.png?data=eyJtZWRpYV9pZCI6MzQ3NjE4LCJieXRlcyI6OTU1ODcsInByb2plY3RfaWQiOjI3ODcsImhhc19pbWdpeCI6MH0%3D>" %}

### Additional Payment Methods

You can choose which payment methods to activate on your Shoppy app to be visibile in ares of the app **other than** the "Payment" view in checkout. On your Shoppy Dashboard, go to Settings > App Settings > Payments and click on Apple Pay, Klarna, or Scalapay.&#x20;

&#x20;By clicking on 'Customize' on Klarna or Scalapay, you have options on where where you would like them to be present in the app; on the product page, cart, and checkout, or another setup.

\*Apple Pay, by default, is set to show on the product page and checkout.&#x20;

**Here is an example of Payment Settings on the Shoppy Dashboard and how those settings appear in-app:**&#x20;

{% embed url="<https://cdn.mburger.cloud/347616/Klarna-and-Scalapay-dashboard-screenrecording.mp4?data=eyJtZWRpYV9pZCI6MzQ3NjE2LCJieXRlcyI6MTA1ODgxNiwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

### **Apple Pay**

You can now choose to accept Apple Pay as a form of payment on your Shoppy Store, creating a smoother checkout experience for customers. Here's how it appears in-app when activated:

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FPN4qLB0wWvrvvN2ETjpS%2FPayment%20apple%20pay.png?alt=media&amp;token=81a911e8-9b9a-43bc-a0e8-230c6f22dd60" alt=""><figcaption></figcaption></figure>

To enable Apple Pay for your app, navigate to **App Settings > Payment Method** in your Shoppy Dashboard and locate the **Apple Pay** card. Click the **"Enable"** button to start the activation process.

A pop-up titled **"Apple Pay: activation in progress"** will appear directly in the **Shoppy Sales Channel** on your Shopify dashboard. This notification is merchant-facing only — it is not visible to your customers. The pop-up confirms that Shoppy is preparing Apple Pay for your app and informs you that:

* The activation will take effect once your app is published on the App Store.
* You will be notified as soon as everything is ready for your app to go live with Apple Pay integrated.
* The average activation time is **5 working days**.

Click **"Confirm"** to proceed, or **"Cancel"** to abort the activation.

{% hint style="warning" %}
**Apple Pay** will only be **available to customers** once your app is **approved** and **published** on the App Store.
{% endhint %}

### **Klarna and Scalapay**

Activate Klarna and Scalapay and remind your customers about the instalment plan option at key touchpoints during their shopping experience. This option is now displayed in the product page, shopping cart, and checkout. This feature automatically calculates the amount of each instalment.

The banner design in Shoppy strictly follows the graphic and policy guidelines provided by Klarna and Scalapay, so the banners are not modifiable from your admin dashboard.

{% embed url="<https://cdn.mburger.cloud/347617/klarna-and-scalapay-app-screenshots.png?data=eyJtZWRpYV9pZCI6MzQ3NjE3LCJieXRlcyI6NjE0MzUyLCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}


# Miscellaneus

### **Quick purchase**

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FGouVVDZ30EUCScVifPqH%2FQuick%20purchase.png?alt=media&amp;token=347c0d2e-82f3-4bf3-890b-0164438f64ac" alt=""><figcaption><p>Quick purhcase button</p></figcaption></figure>

**Faster checkout, fewer clicks!** With the **Quick Purchase** feature, a **"Quick Purchase" CTA button** appears directly below each product card on the **Product Listing Pages**. This allows app users to add items to their cart and proceed to checkout without having to open the product page—making shopping quicker and more seamless.

**Customization Options:** Once enabled, you can personalize:

* **CTA button color**
* **CTA text color**
* **CTA button text**

### **Hide Shoppy Watermark**

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fr4czfRcY0IPGd8TCxNu7%2FNo%20watermark.png?alt=media&amp;token=66b3e572-2d2e-4bdb-b9bf-2f6d068d0811" alt=""><figcaption></figcaption></figure>

In this section you can decide to hide the Shoppy watermark that appears on the splash page and in the application Settings view.

### My Team: Push Notification Testing

To test push notifications and ensure that they are working correctly, you can add team members' **email address** to test push notifications on a specific device. This functionality is only available for the Bloom plan.&#x20;

{% hint style="warning" %}
Make sure to insert the email address associated with the Shoppy account, and to be logged into that account on the test device for the best results.&#x20;
{% endhint %}

{% embed url="<https://cdn.mburger.cloud/348821/myteam_pushnotif_dashboard?data=eyJtZWRpYV9pZCI6MzQ4ODIxLCJieXRlcyI6NjYyNjQzLCJwcm9qZWN0X2lkIjoyNzg3LCJoYXNfaW1naXgiOjB9>" %}


# Product Page

From the Product Page area of your Shoppy Dashboard you can customize various aspects of what your app users will see once they click on a product in your Shoppy app. Keep reading to learn about how you can enable and customize your Buy Button, Vendor, Metafields, Related Products, Complementary Products, and Hide out of Stock Products options.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FGf6CTLRRKIBkMFEpdfpy%2FScreenshot%202024-01-23%20at%2010.27.59.png?alt=media&amp;token=50fbec8e-39f8-4a5c-ae34-368560e0603d" alt=""><figcaption></figcaption></figure>

### Buy Button <a href="#buy-button" id="buy-button"></a>

Click 'Enable', then in the pop up that appears, insert text to customize the call to action button. This button will lead users to check out, so think of copy that would help encourage users to make a purchase! Click "Customize" to add your own unique call to action text, select your button color, select the color of the text within your button, and to insert text in multiple languages.

{% embed url="<https://cdn.mburger.cloud/353784/BuyButton_2_Q124.mp4?data=eyJtZWRpYV9pZCI6MzUzNzg0LCJieXRlcyI6MTIwNDY3MywicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ==>" %}

### **Vendor** <a href="#vendor" id="vendor"></a>

Click 'Enable', then in the pop up that appears you can choose where you would like to show the vendor name on your app. You can choose to show it on the product page (of an individual product), product list (show on pages that show multiple products), and in the cart. Select the option that best suits your needs. Vendor names are set up on Shopify under products. Use the same vendor names on Shoppy that you have on Shopify to ensure that the vendor information appears in-app.

### &#x20;<a href="#metafields" id="metafields"></a>

### **Metafields** <a href="#metafields" id="metafields"></a>

Click 'Enable' then in the pop up that appears. From there, you can customize metafields by clicking 'Add Metafield'. You will see a list that allows you to select a metafield, or you can search one. These metafields will be shown on your Shoppy app product pages.&#x20;

{% hint style="warning" %}
Please keep in mind that you must set these metafields up on Shopify (under products) and use the same titles in Shoppy in order for them to show up in app. You can do this on Shopify by going to Settings > Custom Data.&#x20;
{% endhint %}

Make sure that you also go within the products section of your Shopify and that your products are assigned metafields as you wish. Information on metafields that is present on your Shopify app will be also taken from Shoppy. The following metafields are compatible with Shoppy:

* URL
* One Product
* List of Products
* Color
* List of Colors
* Single Line Text
* Multi-Line Text
* File
* List of Files

### Pages <a href="#releated-product" id="releated-product"></a>

Click "Customize" to add a page that you have inserted in your Shoppy Pages area to the product detail page of all of your products.

### **Related Products** <a href="#releated-product" id="releated-product"></a>

Simply Click 'Enable' to activate this feature. If you have set up products to be related on Shopify (under Products), they now will be suggested to users. If product A and B are set as related on Shopify, when an app user looks at product A, they will see related products below, and B will be listed as an ideal product for them to view as they are shopping through your catalogues or homepage.

### &#x20;<a href="#complementary-products" id="complementary-products"></a>

### **Complementary Products** <a href="#complementary-products" id="complementary-products"></a>

Simply click 'Enable' to activate this feature. Complementary products are similar to Related Products, except they are shown in the products detail page and the cart. This means that once a user already clicks on a product to see it's image, description, and sizes (if available), they will be shown products that are a "match". In the cart, users will be given the option to add complementary products to their cart. Note that Complementary Products are set up on the Shopify Search & Discovery app. Complementary Products on Shoppy will be configured in the same way they are on Shopify.

### &#x20;<a href="#out-of-stock" id="out-of-stock"></a>

### **Hide Out of Stock Product** <a href="#out-of-stock" id="out-of-stock"></a>

Click 'Enable' to activate this feature. Products that are marked as out of stock on your Shopify Store will be marked the same way on your Shoppy app when this is enabled. This will prevent out of stock products from being shown to your Shoppy app users as they scroll for products to buy, creating a smoother shopping experience.

### Quick Purchase

Click "Enable" to add the option for users to be taken directly to checkout when they click on this CTA button on your products. Click "Customize" to write your own unique CTA text, select your button color, and add text to your button.

{% embed url="<https://cdn.mburger.cloud/353720/QuickPurchase_Button_Dashboard.mp4?data=eyJtZWRpYV9pZCI6MzUzNzIwLCJieXRlcyI6MjA0Njc0OCwicHJvamVjdF9pZCI6Mjc4NywiaGFzX2ltZ2l4IjowfQ%3D%3D>" %}

###

###


# Legal and data privacy policy

## Overview

Ensuring compliance with data protection regulations is a fundamental aspect of managing an eCommerce app. The **Data Privacy Settings** section within Shoppy's **Admin Dashboard** provides merchants with tools to manage user consent, data collection preferences, and newsletter subscriptions in a transparent and compliant manner.

This section includes three key functionalities:

1. **GDPR & Privacy Policy Compliance**
2. **Cookies and Consent Management**
3. **Newsletter Subscription Preferences**

###

### 1) Terms and Conditions & Privacy Policy

Enabling the **"GDPR & Privacy"** setting ensures that Shoppy displays mandatory **check boxes for user consent** during both **sign-up and checkout**. Specifically, this feature:

* Adds an explicit **opt-in checkbox** for users to accept the **Privacy Policy** and **Terms and Conditions** before completing registration or a purchase.
* Helps merchants maintain compliance with the **General Data Protection Regulation (GDPR)** by ensuring that users provide **informed consent** before sharing their data.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fy1LdFS3Ir6YhdWTIfG7V%2FGDPR%20%26%20Privacy%20Policy%20Compliance%20_%20Shoppy.png?alt=media&amp;token=792d77c0-91fb-4fa7-8955-c827a85e056f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
EXAMPLE

A European-based store enables this setting to ensure that every new customer explicitly agrees to the terms before creating an account or making a purchase, reducing legal risks associated with data collection.
{% endhint %}

### 2) Granular consent: newsletter subscription

The **"Newsletter Subscription"** setting allows merchants to offer app users the option to **subscribe to email marketing communications** during the registration process.

* When enabled, a **newsletter opt-in checkbox** appears on the sign-up screen.
* Users can **actively choose** to receive promotional emails, ensuring compliance with **anti-spam regulations** and best practices.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FCRRhcDoeLD6gXZwbiXHV%2FNewsletter%20Subscription%20Management.png?alt=media&amp;token=45f3d602-1887-4439-aabc-fa2072817b44" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
EXAMPLE

An online fashion retailer enables this setting to build a **high-quality mailing list**, ensuring that only users who have explicitly opted in will receive promotional content, improving engagement rates and reducing unsubscribes.
{% endhint %}

### 3) Cookies Management

Shoppy’s mobile apps, by default, do not utilize cookies in their **standard, non-customized versions**. However, certain **third-party integrations**, such as **Firebase** and **Meta**, involve **external data sharing**.

By enabling the **"Cookies and Consent Solution"**, merchants can:

* Allow **end-users** to manage their cookie preferences **directly within the app**, choosing whether to enable or disable:
  * **Profiling Cookies** – Used for personalized marketing and advertising.
  * **Analytics Cookies** – Used for tracking and improving app performance.
* Access a **Consent Database** from the **Shoppy Admin Dashboard**, which logs users' preferences. This record serves as evidence of compliance in case of a **privacy audit or inspection** by regulatory authorities.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FGo43fiQLHkTNvwMzqnlo%2FCookies%20and%20Consent%20Management.png?alt=media&amp;token=e170d8cb-158a-450a-9efe-f80d586565fa" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
EXAMPLE

A merchant using **Meta Pixel** for advertising and **Google Analytics (via Firebase)** enables this setting, allowing users to **opt out** of tracking cookies. In the event of a regulatory inquiry, the merchant can provide the Consent Database to demonstrate compliance.
{% endhint %}

### Conclusion

The **Data Privacy Settings** section provides merchants with essential tools to manage data collection and user consent, ensuring regulatory compliance while enhancing transparency and trust with customers. Properly configuring these settings helps safeguard user data, optimize marketing strategies, and minimize legal risks.

For further details on **privacy management best practices**, visit the official **Shoppy documentation** or consult relevant **GDPR compliance guidelines**.

{% embed url="<https://cdn.mburger.cloud/359571/Shoppy-GDPR.mp4?data=eyJtZWRpYV9pZCI6MzU5NTcxLCJieXRlcyI6MTgwNjIxMTksInByb2plY3RfaWQiOjI3ODcsImhhc19pbWdpeCI6MH0=>" fullWidth="false" %}


# Account

### &#x20;**Account overview**

Here you can see your Shoppy account information:

* **Store name**: the name of your store
* **ID**: identifier of your Shoppy account
* **Email**: your email address, which we will use to send you all communications about Shoppy
* **Time zone**: your time zone, which is used when you need to schedule news or push notifications.

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FbvGxIZBy0cniQFmk7UtM%2FSchermata%202022-04-15%20alle%2015.36.19.png?alt=media\&token=a01349b5-2ed6-4f11-b0e9-190b5557ee26)


# App Listing

**Store Data**

In this section you will need to enter the information that will be used for your mobile app's store page. This is what potential users will see on their app store about your mobile app before they download it.

* **App Icon:** the icon of your mobile app
* **App name**: the name of your App on the store
* **App subtitle**: the subtitle of your app on the store
* **Primary Category, Secondary Category:** the categories of your app on the app stores
* **Keywords**: keywords to help potential users search for your app on the app stores
* **Description**: the description of your app on the stores
* **Marketing URL**: the Marketing URL, which usually corresponds to your website
* **Support URL**: the Support URL, where users of your app can request support
* **Privacy URL**: the Privacy Policy URL

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F59jpDJJ6KXc0oe8tMXLm%2FScreenshot%202024-02-21%20at%2011.21.24.png?alt=media&amp;token=082e2f68-2826-429e-8e9a-6e642bb32f78" alt=""><figcaption></figcaption></figure>


# Billing and Plans

In this section you can view your plan and upgrade. For more information on available plans, view the [pricing page](https://shoppy.is/en/prices/) of the Shoppy website.&#x20;

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fno54gibTBsmcmjJauCY1%2FSchermata%202022-04-15%20alle%2015.39.51.png?alt=media\&token=b94f756d-b3d2-47f3-8a83-c418b760d5e2)


# Terms and Conditions

Here you can read Shoppy's Terms and Conditions and Privacy Policy.

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FgEpWyHeRNEvkNGmDv6JC%2FSchermata%202022-04-15%20alle%2015.40.24.png?alt=media\&token=40748a72-bf9b-4d8e-ab7e-79a98683aa93)


# Developer Pages

{% hint style="info" %}
**This features is currently in** **beta**, and your insights could play a crucial role in its development.  For exclusive beta access and the opportunity to shape its future,[ join our slack channel](https://join.slack.com/share/enQtNjUzMTg4MzUzMDIxMC0zNzQwM2I2MjZkMWFjMjY5MWY2MDMxNzRkY2I5YjZkNTUxMmZiN2VjZWIyMjQwZjgyMDc5ZWY5NzEwNGM0M2Rm). Your feedback will be invaluable in refining this exciting new feature.
{% endhint %}

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fb2sn37y3DLOCMY13GRgr%2FShoppy%20Developers%20Page%20-%20Architecture%203.png?alt=media&amp;token=a4395a7d-0ed0-439a-a355-c55165349bdf" alt=""><figcaption></figcaption></figure>

The new Developer Pages introduced by Shoppy is a huge leap forward in the world of Shopify that allows store owners and developers flexibility never seen before.&#x20;

With the ability to integrate these Developer Pages directly into the navigation bar menu of their app, versatility becomes a key feature, allowing users to tailor the browsing experience to their needs. Customization is taken to the next level, enabling merchants to integrate any tool within their Developer Pages. This highly personalized approach not only promotes greater visual consistency as the page can be customized 100% through code but also allows providing access to numerous tools to their customers.

In summary, Developer Pages signify a new frontier in optimizing Shopify's functionalities, putting adaptability, customization, and effectiveness at the forefront to enhance user experience and boost business performance.


# Get Started

Setting up a Developer Page is super simple! Follow these steps below to see how it's done.

1. Log into your [Shopify](https://admin.shopify.com/) account using your information.
2. Navigate to the 'Pages' section within the Shoppy dashboard and select 'Add page'.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fump99jFnjc09NtyWVkmQ%2FIMG1%20(1).png?alt=media&amp;token=61ddec6d-2ca7-4cd3-ac47-62a7d141ec53" alt=""><figcaption></figcaption></figure>

3. Choose an appealing title and icon that represents your Developer Page, like "My Beautiful Developer Page"
4. Under 'Type', select 'Developer Page'

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FJyTfrbhDWATy2Q9iulmR%2Fdevpageimage1.png?alt=media&amp;token=59b697b7-b294-4400-80f4-0da0363ad48a" alt=""><figcaption></figcaption></figure>

4. Now we can focus on the main strength of developer pages; using URLs it is possible to access different types of **dynamic values** related to your Shopify Clients that are navigating your developer page inside the app. \
   \
   In the 'Query' field, enter the base URL where the page will be hosted, such as `https://www.mybeautifulliste.com/app`\
   \
   Below the 'Query' field, you'll find the 'Key' and 'Value' fields. Here, you can add dynamic variables like `id`, `email`, `name`, and `surname`. \
   As you input these, the corresponding template tags (`{{user_id}}`, `{{user_email}}`, `{{user_first_name}}`, `{{user_last_name}}`) **will be automatically appended to your base URL as GET parameters**.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2Fi7ot7Kv5MfyQpZwTWQWR%2FIMG3.png?alt=media&amp;token=0ac8093a-ef07-4ead-b9ed-db73fcbf63ff" alt=""><figcaption></figcaption></figure>

Once you save your settings, the Developer Page within the app will direct users to a URL that looks like this:

`https://www.mybeautifulliste.com/app?id={{user_id}}&email={{user_email}}&name={{user_first_name}}&surname={{user_last_name}}`

When a user accesses this page, their unique information will replace the template tags, personalizing the page to their profile.


# Variables

#### Here is a list of all available Dynamic Values that you can use:

<table data-header-hidden><thead><tr><th width="200"></th><th width="452"></th><th></th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Type</strong></td></tr><tr><td>{{user_id}}</td><td><p>Customer Shopify ID </p><p><em>ex.</em> 3416346149010</p></td><td><mark style="color:blue;">STRING</mark></td></tr><tr><td>{{user_email}}</td><td><p>Customer Shopify Email</p><p><em>ex.</em> mybeautiful@developerpage.com</p></td><td><mark style="color:blue;">STRING</mark></td></tr><tr><td>{{user_first_name}}</td><td><p>Customer Shopify First Name</p><p><em>ex.</em> John</p></td><td><mark style="color:blue;">STRING</mark></td></tr><tr><td>{{user_last_name}}</td><td><p>Customer Shopify Last Name</p><p><em>ex.</em> Doe</p></td><td><mark style="color:blue;">STRING</mark></td></tr><tr><td>{{user_token}}</td><td><p>Customer Shopify Token</p><p><em>ex.</em> 13a6caf33cabb5e205a634f89d586801</p></td><td><mark style="color:blue;">STRING</mark></td></tr><tr><td>{{user_is_logged_in}}</td><td>1 if the Customer is logged in the app, 0 if not</td><td><mark style="color:purple;">BOOLEAN</mark></td></tr><tr><td>{{user_phone}}</td><td><p>Customer Shopify Phone</p><p><em>ex.</em> 08 954829382</p></td><td><mark style="color:blue;">STRING</mark></td></tr><tr><td>{{cart_items}}</td><td><p>List of articles in the cart of the logged in Customer</p><p><em>ex.</em></p><pre><code>[
  {
    "product_id": 7418221789368,
    "product_title": "Ski+Goggles",
    "product_image": "https://cdn.shopify.com/s/files/1/0527/8416/9144/files/Shoppyvideoimage_8_9590c1d7-c0dc-4ef2-89e8-feb2cc35449a_1000x1000.png?v=1705053386",
    "variant_id": 42808268193976,
    "variant_title": "Small",
    "variant_image": "https://cdn.shopify.com/s/files/1/0527/8416/9144/files/Shoppyvideoimage_8_9590c1d7-c0dc-4ef2-89e8-feb2cc35449a_1000x1000.png?v=1705053386",
    "variant_price": {
      "amount": 0,
      "currency": "EUR"
    },
    "quantity": 1
  }
]
</code></pre></td><td><mark style="color:green;">ARRAY</mark></td></tr><tr><td>{{wishlist_items}}</td><td><p>List of articles in the wishlist if the Customer is logged in</p><pre><code>[
    {
        "product_id": 7418221789368,
        "product_title": "Ski+Goggles",
        "product_image": "https://cdn.shopify.com/s/files/1/0527/8416/9144/files/Shoppyvideoimage_8_9590c1d7-c0dc-4ef2-89e8-feb2cc35449a_1000x1000.png?v=1705053386"
    },
    {
        "product_id": 7418218938552,
        "product_title": "Ski+Boots",
        "product_image": "https://cdn.shopify.com/s/files/1/0527/8416/9144/files/Shoppyvideoimage_4_1000x1000.png?v=1705053206"
    }
]
</code></pre></td><td><mark style="color:green;">ARRAY</mark></td></tr><tr><td>{{locale}}</td><td><p>Language the shop is viewed in</p><p><em>ex.</em> it-IT</p></td><td><mark style="color:blue;">STRING</mark></td></tr><tr><td>{{country}}</td><td><p>Customer Shopify Country</p><p><em>ex.</em> IT</p></td><td><mark style="color:blue;">STRING</mark></td></tr><tr><td>{{currency}}</td><td><p>Customer Shopify Currency</p><p><em>ex.</em> EUR</p></td><td><mark style="color:blue;">STRING</mark></td></tr><tr><td>{{device_id}}</td><td><p>Device ID</p><p><em>ex.</em> EAPD2B3F-AA89-48F5-B71F-99DE7FD9CD9C</p></td><td><mark style="color:blue;">STRING</mark></td></tr><tr><td>{{device_locale}}</td><td><p>Device Language</p><p><em>ex.</em> it_IT</p></td><td><mark style="color:blue;">STRING</mark></td></tr><tr><td>{{device_window_height}}</td><td><p>Height of device screen</p><p><em>ex.</em> 844</p></td><td><mark style="color:blue;">STRING</mark></td></tr><tr><td>{{device_window_width}}</td><td><p>Width of device screen</p><p><em>ex.</em> 390</p></td><td><mark style="color:blue;">STRING</mark></td></tr></tbody></table>


# Actions

### **Actions that can be inserted in the Developer Page:**

In the Developer Pages, you can embed **direct links to products or collections from your Shopify Store**.&#x20;

When users click these links, **the app smartly bypasses the web browser, leading them to the in-app detail screens** for a seamless shopping experience. This keeps the user within the app, maintaining a consistent and integrated flow.&#x20;

To avoid confusion and ensure a smooth user journey, **refrain from using links that navigate to external websites or unrelated internal pages**.&#x20;

We are dedicated to enhancing this feature and will introduce more integrated actions in the future.


# Sample

## **Example Developer Page Setup**

Let's imagine an online fashion store that wants to enhance its relationship with its customers through a loyalty program. By integrating the **LoyaltyLion** tool through the Developer Pages, the store can can completely customize the user experience.&#x20;

Through tight integration with the existing system, **it is possible to offer customers loyalty points not only for purchase**, but also for actions such as sharing on social media or registering for a newsletter.

The example below shows how Developer Pages allow you to create a dedicated section within the app where customers can monitor their loyalty score, view exclusive rewards, and participate in special events. This integration not only encourages customer loyalty, but also offers fluid and engaging navigation, thus demonstrating the potential of Developer Pages in creating and offering a thoroughly personalized experience.&#x20;

These steps below outline how it is possible to allow your users to view their loyalty score report within the app via a Developer Page. The tool used in this example is Loyaltylion, therefore the initial steps will be carred out on their platform. The integration will be carried out using an SDK and Javascript, and we will use [Loyaltylion's documentation](https://developers.loyaltylion.com/sdk/installation/) as a point of reference.&#x20;

### **Step 1**

Register or login to the [Loyaltylion](https://app.loyaltylion.com/login) portal.

### **Step 2**

Follow the [steps](https://help.loyaltylion.com/en/articles/4385100-standard-loyalty-page) to create a site. Make sure to select 'Custom' as your site's type.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2F9fECjw0MSnyo0NCker6C%2FScreenshot%202024-01-23%20at%2010.23.44.png?alt=media&amp;token=01c24a13-5b37-45cc-bbf7-27b9eddacf51" alt=""><figcaption></figcaption></figure>

### **Step 3**

Complete the set up process, inserting the necessary information until you reach your Dashboard.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FvlZOxUBE6CihZAxqBZSk%2FScreenshot%202024-01-23%20at%2010.27.50.png?alt=media&amp;token=780231b8-4356-4843-b606-fcf8f6606329" alt=""><figcaption></figcaption></figure>

### **Step 4**

Obtain the Token and Secret Parameters necessary to initialize the SDK within your Developer Page. The paremeters can be viewed by going to Manage > Settings > Token and Secret section.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FVgguOsqtldlnXFUVBJl7%2FScreenshot%202024-01-23%20at%2010.43.28.png?alt=media&amp;token=22020265-1b88-4785-a1a5-185002a9e70f" alt=""><figcaption></figcaption></figure>

### **Step 5**

Now that we have all of the necessary data, we can set up our Developer Page by following the Loyaltylion developer guide.&#x20;

1. Insert the SDK a bit before the ending of the tag \</head>
2. Inside of the tag \<body> insert the HTML code:

<pre class="language-html"><code class="lang-html"><strong>1 &#x3C;div class="title-container"> 
</strong>2     &#x3C;h1>Customer's Points &#x3C;/h1>
3  &#x3C;/div>
4  &#x3C;div class="content content-fixed @yield('content-classes')">    
5 
6      &#x3C;div class="container pd-x-0 pd-lg-x-10 pd-xl-x-0" style="margin-top:-4rem;">
7         &#x3C;!-- Customer's total (approved + pending) points -->
8         &#x3C;div class="badge badge-grey">
9         &#x3C;label>Total&#x3C;/label>
10        &#x3C;p>Customer's total (approved + pending) points&#x3C;/p>
11        &#x3C;span data-lion-points>&#x3C;/span>
12      &#x3C;/div>
13
14        &#x3C;!-- Customer's approved (redeemable) points -->
<strong>15        &#x3C;div class="badge badge-green">
</strong>16            &#x3C;label>Approved&#x3C;/label>
17            &#x3C;p>Customer's approved (redeemable) points&#x3C;/p>
18            &#x3C;span data-lion-points="approved">&#x3C;/span>
19        &#x3C;/div>
20
21        &#x3C;!-- Customer's pending points -->
22        &#x3C;div class="badge badge-yellow">
23            &#x3C;label>Pending&#x3C;/label>
24            &#x3C;p>Customer's pending points&#x3C;/p>
25            &#x3C;span data-lion-points="pending">&#x3C;/span>
26        &#x3C;/div>
27
28         &#x3C;!-- Customer's spent points -->
29          &#x3C;div class="badge badge-red">
30            &#x3C;label>Spent&#x3C;/label>
31            &#x3C;p>Customer's pending points&#x3C;/p>
32            &#x3C;span data-lion-points="spent">&#x3C;/span>
33          &#x3C;/div>
34          
35          &#x3C;!-- Customer's lifetime (approved + pending + spent + expired) points -->
36        &#x3C;div class="badge badge-purple">
37            &#x3C;label>Lifetime&#x3C;/label>
38            &#x3C;p>Customer's lifetime (approved + pending + spent + expired) points&#x3C;/p>
39            &#x3C;span data-lion-points="lifetime">&#x3C;/span>
40        &#x3C;/div>
41        
42        &#x3C;!-- Customer's total (approved + pending) points
43             plus points they will earn in the current cart
44             for merchants using instant points -->
45        &#x3C;div class="badge badge-blue">
46            &#x3C;label>Cart&#x3C;/label>
47            &#x3C;p>Customer's total (approved + pending) points
48                plus points they will earn in the current cart
49                for merchants using instant points&#x3C;/p>
50            &#x3C;span data-lion-points="cart">&#x3C;/span>
51            &#x3C;/div>
52         &#x3C;/div>
53     &#x3C;/div>
      
</code></pre>

### **Step 6:**

In the script section, we can insert the following before the closing of the tag \</body>

```javascript

1 <script>
2   $(document).ready(function () {
3        // init function for loyaltylion
4        loyaltylion.init({
5            token: 'your_beautiful_token',
6        })
7
8        // declere variable for query string
9        const queryString = window.location.search;
10
11        // Creating a URLSearchParams object from the query string
12        const urlParams = new URLSearchParams(queryString);
13
14        const date = new Date().toISOString(); // get the date in ISO 8601 format
15        const secret = 'your_beautiful_secret'; // secret for the hash
16        const id = urlParams.get("id"); // get the id from the query string
17        const email = urlParams.get("email"); // get the email from the query string
18
19        let strUser = urlParams.get("name") && urlParams.get("surname") ? urlParams.get("name") + ' ' + urlParams.get("surname") : 'Guest'; // get the name and surname from the query string
20        $('.title-container h1').html('Welcome ' + strUser + '!'); // set the title
21
22        const dataToHash = id + date + email + secret; // data to hash
23        const auth_token = CryptoJS.SHA1(dataToHash).toString(); // hash the data
24
25        // authenticate the customer
26        loyaltylion.authenticateCustomer({
27            customer: {
28                id: id, // unique customer ID
29                email: email, // customer email address
30            },
31            auth: {
32                date: date, // ISO 8601 timestamp, must be same as that used to create the token
33                token: auth_token, // token, generated server-side
34            },
35        })
36    })
37 </script>
```

### **Step 7:**

After publishing the page on your domain, you can now create the Developer Page on your Shoppy Pages, as indicated in the beginning of this guide. By inserting the id, name, surname, and email as dynamic values, you will be able to use them within the Javascript code in point 5.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FSgekWFvGSiqQIwH6Yc1q%2FScreenshot%202024-01-23%20at%2011.06.38%20(1).png?alt=media&amp;token=c91369d4-c21f-45d7-bc9a-52af4f6889f2" alt=""><figcaption></figcaption></figure>

### **Step 8:**

Make sure to save the modifications you've made!

### **Step 9:**

Insert the Developer page inside the navigation bar by going to App Builder > Navigation on your Shoppy Dashboard:

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FVsGyFMNiW5F5k0ZvdPpW%2FScreenshot%202024-01-23%20at%2011.25.49.png?alt=media&amp;token=7ed9c027-4836-4dd6-9ae3-62e12d13f9d1" alt=""><figcaption></figcaption></figure>

### **Step 10:**

Add or modify a section from the bottom bar:

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FaZFv0mWKHSY8VP8PDTFV%2FScreenshot%202024-01-23%20at%2011.26.04.png?alt=media&amp;token=00179d03-bd72-4966-a616-55e04e4b862a" alt=""><figcaption></figcaption></figure>

### **Step 11:**

You can name your page as you wish. In this case, we will name it Loyaltylion Points.

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FfuQzOKvtImciWsFctt3j%2FScreenshot%202024-01-23%20at%2011.26.20.png?alt=media&amp;token=c504b934-c502-42c5-af30-76c9c55e6977" alt=""><figcaption></figcaption></figure>

And there you have it, you've set up your Developer Page! Now you can see your results from your app by going to your app and navigating to the Developer Page.&#x20;

<div align="left"><figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FOOkKIOS9NxdM8O5zxPLf%2FWhatsApp%20Image%202024-01-12%20at%2015.22.19.png?alt=media&amp;token=0aa9eec4-8309-47ff-86b6-9299d35b54f0" alt="" width="188"><figcaption></figcaption></figure></div>

The Developer Pages offered by Shoppy stand out for their incredible flexibility and adaptability, allowing develoeprs to use a wide range of technologies and programming languages for their creation. Whether you prefer PHP, Vue.js, HTML or any other language, the open structure of Developer Pages allows you to express your creativity without limits. The key to this versatility lies in the way parameters are passed, which occurs intuitively and dynamically via URLS.

Developer pages give developers the ability to leverage their skills and preferences to create highly personalized pages, offering a unique and engaging experience to their shoppers.


# How to launch your app

Before launching your app in the Apple Store or Google play store, **you need to go through the app submission process**. Following app store guidelines while optimizing your app's profiles in the stores can be challenging if this is your first time launching an app, but don't worry! The Shoppy team is here to help you step by step throughout the process. &#x20;

* **Step 1**: Complete out **all** information in "App Listing" on your Shopify Dashboard. Find it by going to Settings > Store Data. Also make sure that there is content in your Homepage & Catalogue.&#x20;
* **Step 2**: Create your[ Apple](/launch-your-mobile-app/apple-store-creations) & [Google](/launch-your-mobile-app/google-play-store-creations) Developer Accounts. We ask that you always create a **Business / Enterprise** account; it is essential that you do not create a personal developer account. Make sure you accept the Terms & Conditions!&#x20;
* **Step 3**: Invite us on your stores at <developers@shoppy.is> as an **administrator.**&#x20;

We will take it from there!&#x20;

Note: If you prefer, we can also simply upload your apps on our developer store. There is no charge to you! Mumble SRL will be listed on the app store's description in the app stores.&#x20;


# Apple Store Creations

{% hint style="info" %}
To keep your app available in the App Store, there is an annual fee of $99. Our recommendation is to set up automatic renewal straight away.
{% endhint %}

### Create your Apple Developer Account

If you already have an Apple Developer account, you can make the switch from an individual account to a corporate account. To set up your Apple Developer account, follow these simple steps.&#x20;

#### Step 1: Request your DUNS number <a href="#step-1-richiedi-il-tuo-numero-duns" id="step-1-richiedi-il-tuo-numero-duns"></a>

**Dun & Bradstreet D-U-N-S Number®** is a unique nine-digit identification code that is assigned to each company listed in the Duns & Bradstreet database to allow it to be uniquely identified and connected to other companies.

In order to publish your app on the Digital Store, you must request your DUNS number, which you can do here: [request your DUNS number](https://idmsa.apple.com/IDMSWebAuth/signin?appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757\&path=%2Fenroll%2Fduns-lookup%2F\&rv=1#!/search). <br>

**Step 2: Register as an Apple Developer**

* Go to the registration page: <https://developer.apple.com/programs/enroll/> and click on the "**Start Your Enrollment"** button at the bottom of the page.

![](https://files.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-MQHjhKyK51uDlT7qHqB%2F-MRtzw852TqCtGWMiC1h%2F-MRu--INeLHh0bRc5lfL%2FSchermata%202021-01-25%20alle%2015.38.23.jpg?alt=media\&token=dd37bf83-368b-4bb9-aa64-68a812602367)

* Sign in using an existing Apple ID or click "[Create Apple ID](https://appleid.apple.com/account?appId=632\&localang=en_US\&returnURL=https%3A%2F%2Fidmsa.apple.com%2FIDMSWebAuth%2Flogin.html%3FappIdKey%3D891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757%26path%3D%2Fenroll%2F%26language%3DUS-EN%26baseURL%3Dhttps%3A%2F%2Fdeveloper.apple.com%2F%26rv%3D1)" to create a new Apple ID.
* Read the Apple Developer Agreement, then check the box "**By checking this box I confirm that I have read and agree ...**" and click the "**Submit**" button

{% hint style="warning" %}
ATTENTION ⚠️

Please note that in the "*Select Legal Entity Type*" section, it is essential to choose the "**COMPANY/ORGANIZATION**" option from the drop-down menu.
{% endhint %}

* In the "**Select Legal Entity Type**" section, you must select the **COMPANY/ORGANIZATION** option in the drop-down menu. Then, click "**Continue**".
* In the section "Tell me more about your organization" enter the name of the legal entity and the **DUNS number,** copying the same number given in the **DUNS confirmation e-mail**.
* Enter your information as the Apple Developer account holder.
* At the bottom of the page, read the Apple Developer Program license agreement, then check the box "**By checking this box I confirm that I have read and agree ...**" and click "**Continue**".
* Confirm your Apple ID information, legal entity type, and contact information. Click "**Continue**".
* The Apple team should contact you within 24-48 hours to verify your account.
* After being contacted by the Apple team to verify your account, you should receive a follow-up email to submit your annual store membership fee.
* Upload your dashboard from Apple Developer, then enter all billing information. Click "**Continue**" to complete the payment and setup of your Apple Developer account.

#### Step 3: Invite Shoppy to your Apple Developer account <a href="#step-3-invita-shoppy-nel-tuo-account-apple-developer-1" id="step-3-invita-shoppy-nel-tuo-account-apple-developer-1"></a>

Now that your account is ready, to invite Shoppy to your account follow these steps:

* Log in to Apple Store Connect: <https://appstoreconnect.apple.com/login>​
* Click "Users and Permissions"
* Click on the "+" symbol
* Invite <developers@shoppy.is> as an **administrator**&#x20;
* Click "Invite"
* We will contact you as soon as we receive your invitation


# Google Play Store Creations

If you don't have a Google account, you can click [here](https://accounts.google.com/signup/v2/webcreateaccount?flowName=GlifWebSignIn\&flowEntry=SignUp) to create one.

To set up your developer account on Google Play, follow the next 3 simple steps.&#x20;

#### 1. Register on Google Play  <a href="#id-1-registrati-su-google-play" id="id-1-registrati-su-google-play"></a>

Click [here](https://play.google.com/console/signup) to create an account on Google Play.

{% hint style="danger" %}
**Attention**

When registering on Google Play, please ensure you select an '**Organization**' **account type**. This choice is crucial for accessing specific features and managing your app more effectively.
{% endhint %}

<figure><img src="https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FAsiqGzDSWHHCAlKgtEHn%2FScreenshot%202024-02-16%20alle%2016.13.39.png?alt=media&amp;token=0c9756bc-04a7-455a-a5a1-9852ef33dc34" alt=""><figcaption></figcaption></figure>

#### 2. Complete the form and accept the terms of service.  <a href="#id-2-compila-il-modulo-e-accetta-i-termini-di-servizio" id="id-2-compila-il-modulo-e-accetta-i-termini-di-servizio"></a>

Enter your information and agree to the terms of service. Finally, click on the blue "Create Account and Pay" button and enter your payment information.&#x20;

![](https://2580671618-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJPDzUzynACRbcxkhAEeE%2Fuploads%2FBGFwkZJOg9kXaR3qCBLH%2FCreate%2520new%2520developer%2520account.png?alt=media\&token=cc5af6bb-9a33-46bf-8863-6c043768b9e5)

#### 3. Invite Shoppy to your account <a href="#id-3-invita-shoppy-nel-tuo-account" id="id-3-invita-shoppy-nel-tuo-account"></a>

* Go to [Google Play Console](https://developer.android.com/distribute/console)
* Click "Users and Permissions"
* Click on the "+" symbol
* Invite <developers@shoppy.is> as an **administrator**
* Click "Invite"
* We will contact you as soon as we receive your invitation&#x20;




---

[Next Page](/llms-full.txt/1)