> For the complete documentation index, see [llms.txt](https://magecomp.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://magecomp.gitbook.io/shopify/apps/magecomp-mobile-app-builder/campaigns.md).

# Campaigns

The **Campaign Builder** allows merchants to create engaging promotional campaigns directly for their mobile app. Merchants can choose from ready-to-use templates, customize the campaign content and design, configure display settings, translate campaigns into multiple languages, and publish them for app users.

### Step 1: Create a Campaign

Navigate to the **Campaigns** section in the app dashboard.

Click **+ Create Campaign** in the top-right corner to start creating a new campaign. You can also click the **+** button in the campaign area.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FWp0jH6vVqTO8sEg7h4so%2Fimage.png?alt=media&amp;token=6c2932b3-7ec7-45b6-a406-aca757e073b8" alt=""><figcaption></figcaption></figure>

### Step 2: Select a Campaign Template

After clicking **+ Create Campaign**, you will see a selection of ready-to-use campaign templates.

Choose a template based on your promotional requirements:

* **New Arrivals** – Showcase your latest products and newly added collections.
* **Flash Sale** – Promote limited-time offers and discounts with a sense of urgency.
* **Announcement** – Share important updates, app news, exclusive offers, or other announcements.
* **Poster Campaign** – Upload and display your own promotional poster, banner, or graphic.

Click **Customize** on the template you want to use to proceed with campaign creation.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FC5WFwSta3kXT2jXIvWw7%2Fimage.png?alt=media&amp;token=e5c3dd54-6118-4a96-90a2-52e82dd1e99c" alt=""><figcaption></figcaption></figure>

### Step 3: Customize the Campaign

After selecting a template, you will be taken to the **Campaign Editor**. Here, you can customize the campaign according to your requirements.

The available customization options depend on the campaign template you select.

You can add, remove, or customize the available sections to create a campaign that matches your promotional needs.

{% hint style="info" %}
**Note:** Customization options may vary depending on the selected campaign template.
{% endhint %}

The available campaigns are listed below:

### <mark style="color:$primary;">New Arrivals Campaign</mark>

The **New Arrivals Campaign** is designed to help merchants showcase their latest products, newly launched collections, or recently added items in their mobile app. It provides a ready-made promotional layout that merchants can customize with images, banners, text, collections, and other campaign elements.

#### When Should You Use the New Arrivals Campaign?

This campaign is useful when you want to **draw customers' attention to newly added products or collections** and encourage them to explore the latest items in your store.

You can use it in cases such as:

* **Launching new products:** Promote products that have recently been added to your store.
* **Introducing a new collection:** Highlight a newly launched clothing, seasonal, or product collection.
* **New seasonal arrivals:** Promote products for a new season, such as a summer, winter, festive, or holiday collection.
* **Restocking popular products:** Let customers know when previously unavailable or popular products are back in stock.
* **Regular product updates:** Keep customers informed whenever you add a new range of products.
* **Driving app engagement:** Give customers a reason to open the app and discover what's new.

After selecting the **New Arrivals** template, click **Customize** to open the campaign editor. The editor provides a mobile preview in the center and customization sections on the left.

The New Arrivals campaign includes three main sections:

#### 1. Image/GIF

Use this section to add and customize an image or GIF.

**Image Settings**

* **Image/GIF:** Upload the image or GIF you want to display.
* **Width & Height:** Adjust the dimensions.
* **Object Fit:** Choose **Cover, Contain, or Fill**.
* **Style:** Set the alignment, horizontal/vertical offset, and rotation.
* **Border Radius:** Add rounded corners to the image.

{% hint style="info" %}
**Tip:** WebP is recommended for images, while GIFs with transparent backgrounds can be used for animated visuals.
{% endhint %}

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F4q8KOZkB8c7bdihWyZLc%2Fimage.png?alt=media&amp;token=c29d8526-13c5-44d9-a6ca-2fc7f3e60197" alt=""><figcaption></figcaption></figure>

#### 2. Banners

Use the **Banners** section to add promotional banners to your campaign.

**Title Settings**

* Add a **Title** and choose whether to hide it.
* Adjust **Font Size**, **Title Alignment**, and **Font Color**.

**Layout Settings**

* Select the number of banners/items to display.

**Image Settings**

* Set the **Height**.
* Choose the **Object Fit**: Fill, Contain, or Cover.
* Adjust the **Border Radius**.

**Style Settings**

* Customize the **Background** of the banner section.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FzOiSNYyw58s8r5DdHbJS%2Fimage.png?alt=media&amp;token=13ba9314-d676-4f9a-9880-8dca23ec40bc" alt=""><figcaption></figcaption></figure>

#### 3. Text

Use the **Text** section to add promotional or informational content.

**Text Settings**

* Enter your desired **Text**.
* Enable **Bold** if required.

**Style Settings**

* Adjust **Font Size**.
* Select the **Background** and **Font Color**.
* Set the **Border Radius**.

**Spacing**

* **Padding Inline:** Adjust horizontal spacing inside the section.
* **Padding Block:** Adjust vertical spacing inside the section.
* **Margin Inline:** Adjust horizontal spacing outside the section.
* **Margin Block:** Adjust vertical spacing outside the section.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F9bPw11Aa0vYNKF2XCSlS%2Fimage.png?alt=media&amp;token=b3ece4d0-73d1-44b0-aaac-48a4492c7930" alt=""><figcaption></figcaption></figure>

After customizing these sections, use the **mobile preview** to review the campaign before publishing.

#### 4. Features

The **Features** section allows you to highlight key features, benefits, or unique selling points of your products or store.

**Title Settings**

* **Title:** Add a title for the Features section.
* **Hide Title:** Choose whether to display the title.
* **Font Size:** Adjust the title size.
* **Font Color:** Select the title color.
* **Title Alignment:** Set the title alignment.
* **Background Color:** Customize the section background.

**Layout Settings**

* Set the number of feature blocks to display.

**Block Settings**

* **Icon Size:** Adjust the size of the feature icon.
* **Icon Position:** Place the icon on the **Left, Right, Top, or Bottom**.

**Block Style**

* **Background Color:** Set the background color of each feature block.
* **Border Radius:** Adjust the roundness of the block corners.
* **Heading Style:** Customize the heading color and font size.
* **Subtitle Style:** Customize the subtitle color and font size.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FTvSc9UKwA7K5v8KbcrK2%2Fimage.png?alt=media&amp;token=ebc3d0ab-ae66-4c59-9958-aa59f3c7e527" alt=""><figcaption></figcaption></figure>

**Image & Text Settings**\
For each feature block, you can add:

* **Heading Text**
* **Sub Heading Text**
* **Image/Icon**

These settings can be used to create visually appealing feature blocks that highlight important benefits or product features.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F2MfXzJzRTOI0RJwWNtg3%2Fimage.png?alt=media&amp;token=ced078ed-c59c-486f-a099-b1a9f95f4e71" alt=""><figcaption></figcaption></figure>

#### 5. Collections

The **Collections** section allows you to showcase your store collections within the campaign and customize how they are displayed.

**Title Settings**

* **Title:** Add a title for the Collections section.
* **Hide Title:** Choose whether to display the section title.
* **Hide Details:** Show or hide collection details.
* **Details Page Action:** Define the action when a customer opens the collection details.

**Layout Settings**

* **View:** Choose the preferred collection display layout.
* **Multi View:** Configure how multiple collections are displayed.

**Style Settings**

* **Background:** Customize the section background.
* **Title Style:** Set the title font size and color.
* **Detail Style:** Set the detail font size and color.
* **Image Style:** Customize the collection image height, width, border, border color, border width, and border radius.
* **Object Fit:** Choose **Fill, Contain, or Cover**.
* **Image Shadow:** Enable or disable the image shadow.
* **Collection Title:** Customize the collection name font size and color.

**Display Settings**\
Choose which collection elements should be visible:

* **Show Collection Name**
* **Show Collection Image**

**Spacing**\
Adjust the spacing around the Collections section to control its overall positioning and appearance.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FOgWNexG7HkEIktwQnqEX%2Fimage.png?alt=media&amp;token=ef5ed340-281b-41bc-8e1c-8022f598bdbc" alt=""><figcaption></figcaption></figure>

#### 6. Explore Button

The **Explore Button** section allows you to add and customize a button that directs customers to a specific page or action within the app.

**Button Settings**

* **Button Text:** Enter the text displayed on the button.
* **Icon Position:** Place the icon on the **Left or Right**.
* **Text Font Size & Color:** Customize the button text.
* **Button Width:** Adjust the button width.
* **Border Radius:** Set the roundness of the button corners.
* **Padding Block & Inline:** Adjust the vertical and horizontal spacing inside the button.
* **Background:** Customize the button background.
* **Action:** Select the action or destination triggered when the button is clicked.
* **Hide Border:** Show or hide the button border.
* **Border Color & Width:** Customize the border appearance.
* **Hide Button Text:** Hide the text if you want to display only the icon.

**Icon Settings**

* **Hide Icon:** Show or hide the button icon.
* **Icon Color:** Customize the icon color.
* **Icon Size:** Adjust the icon size.
* **Icon Spacing:** Set the space between the icon and button text.
* **Upload Icon:** Upload a custom icon for the button.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FUZMKSJWFqpVUIbJkOg0U%2Fimage.png?alt=media&amp;token=969f7368-0bd0-4154-9035-5d162465d4cf" alt=""><figcaption></figcaption></figure>

#### 7. Add Section

The **Add Section** option allows you to add additional components to your New Arrivals campaign and further customize its content and layout.

Click **+ Add Section** and select the section you want to add. Available sections include:

* **Poster / Banner** – Add a promotional poster or banner.
* **Image / GIF** – Add an image or animated GIF.
* **Banners** – Display promotional banners.
* **Text** – Add headings, descriptions, or promotional messages.
* **Key Features** – Highlight important features or benefits.
* **Offers** – Showcase special offers and promotions.
* **Products** – Display selected products.
* **Collections** – Showcase specific collections.
* **Collection Products** – Display products from selected collections.
* **Explore Button** – Add a button to direct customers to a specific destination.
* **Countdown Timer** – Create urgency with a countdown.
* **Badge** – Add promotional or informational badges.
* **Highlight List** – Highlight multiple key points or benefits.
* **User Greeting Text** – Display a personalized greeting.
* **Hero Image** – Add a prominent visual at the top of the campaign.
* **Brand Images** – Showcase brand-related images.
* **Search Box** – Allow customers to search directly from the campaign.
* **Quick Collections** – Provide quick access to selected collections.
* **Collections Group** – Group multiple collections together.
* **Announcement Bar** – Display important announcements.
* **Image Collage** – Combine multiple images into a collage.
* **YouTube Video** – Embed a YouTube video.
* **Video** – Add a video to the campaign.
* **Buy 2 Get 1 Free** – Promote a Buy 2 Get 1 Free offer.
* **Coupon 1** – Display a coupon offer.
* **Separator** – Add visual separation between sections.
* **Border** – Add a border to separate or highlight content.
* **FAQ** – Add frequently asked questions and answers.
* **Spacing** – Add adjustable space between campaign sections.

You can add the sections you need and arrange them to create a campaign that best fits your promotional requirements.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FRcl8PORbbm3ynO2eNl0E%2Fimage.png?alt=media&amp;token=d410af63-0eef-4ed2-9bcd-75ceb149f4d6" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">Campaign Settings</mark>

After customizing the campaign sections, you can configure the overall **Campaign Settings** to control how and when the campaign appears in the mobile app.

#### Trigger & Animation Settings

These settings control the campaign's position and animation effects.

* **Campaign Position:** Choose where the campaign appears in the app.
* **Entrance Animation:** Select the animation used when the campaign appears:
  * Fade In
  * Zoom In
  * Bounce In
  * Slide Down
  * Slide Up
* **Exit Animation:** Select the animation used when the campaign closes or disappears:
  * Fade Out
  * Zoom Out
  * Bounce Out
  * Slide Up
  * Slide Down

#### Campaign Duration

Set the period during which the campaign should be active.

* **Start Date & Time:** Set when the campaign should begin.
* **End Date & Time:** Set when the campaign should stop.
* **Start/End Time:** Specify the exact time for activation and expiration.

#### Mobile App Location

Choose the location or placement where the campaign will be displayed within the mobile app.

#### General Settings

Customize the overall appearance of the campaign:

* **Campaign Height:** Adjust the campaign height.
* **Background:** Set the campaign background.
* **Show Border:** Enable or disable the campaign border.
* **Border Radius:** Adjust the corner roundness.
* **Border Width:** Set the border thickness.
* **Border Color:** Choose the border color.
* **Padding Inline & Block:** Adjust the internal horizontal and vertical spacing.
* **Margin Inline & Block:** Adjust the external horizontal and vertical spacing.

#### Close Button

Customize the appearance of the campaign's close button:

* **Button Size:** Adjust the overall button size.
* **Icon Size:** Set the close icon size.
* **Border Radius:** Adjust the button corner roundness.
* **Icon Color:** Choose the close icon color.
* **Background Color:** Set the button background color.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2Fv2yrMkFSbx9F9bck1Tnn%2Fimage.png?alt=media&amp;token=8f3f7dcc-4603-4aa6-b263-2424fde3a6c4" alt=""><figcaption></figcaption></figure>

### <mark style="color:$primary;">Flash Sale Campaign</mark>

The **Flash Sale Campaign** is designed to help merchants promote **limited-time discounts, special offers, and urgent deals** in their mobile app. It is ideal for creating a sense of urgency and encouraging customers to shop before the offer expires.

#### When to Use the Flash Sale Campaign?

Use this campaign to:

* Promote **limited-time discounts and special offers**.
* Create urgency with **time-sensitive deals**.
* Highlight **sale events or promotional periods**.
* Drive customers to specific discounted products.
* Increase conversions during short-term promotions.

#### Customize the Flash Sale Campaign

After selecting the **Flash Sale** template, click **Customize** to open the campaign editor. You can modify the existing sections or add additional sections using **+ Add Section**.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FtAoq1GFUa985WUPMgzmD%2Fimage.png?alt=media&amp;token=1a3f5be7-b2e9-4563-8d5d-f88a8faafc9b" alt=""><figcaption></figcaption></figure>

The default Flash Sale campaign includes:

* **Image/GIF**
* **Banners**
* **Countdown Timer**
* **Products**
* **Explore Button**
* **Text**

#### 1. Image/GIF

Use this section to add the main promotional image or GIF for your Flash Sale campaign.

**Image Settings**

* **Image/GIF:** Upload or select an image or GIF.
* **Width & Height:** Adjust the image dimensions.
* **Object Fit:** Choose **Cover, Contain, or Fill**.
* **Alignment:** Position the image.
* **Horizontal & Vertical Offset:** Adjust its position.
* **Rotation:** Rotate the image.
* **Border Radius:** Add rounded corners.

{% hint style="info" %}
**Recommendation:** Use WebP format for images and transparent-background GIFs where applicable.
{% endhint %}

#### 2. Banner Settings

The **Banners** section allows you to create and customize promotional banners or slides within your campaign. You can configure the title, layout, image appearance, slideshow behavior, background, and spacing.

#### Title Settings

Use the **Title Settings** to customize the title displayed above the banner section.

* **Title:** Enter the title you want to display for the banner section.
* **Is hide title?:** Enable this option to hide the title from the banner section.
* **Font Size:** Set the font size of the title.
* **Title Alignment:** Choose the alignment of the title, such as left, center, or right.
* **Font Color:** Select the color of the title text.

#### Layout Settings

The **Layout Settings** control how the banners are displayed in the campaign.

* **One Slide View:** Displays one banner at a time.
* **Flate Slide View:** Displays banners in a flat/side-by-side sliding layout.
* **Brand View:** Displays banners in a brand-focused layout.

Choose the layout that best suits the promotional content you want to display.

#### Image Settings

Use the **Image Settings** to control the appearance of banner images.

* **Height:** Set the height of the banner image.
* **Object Fit:** Choose how the image fits within the available space:
  * **Fill:** Stretches the image to completely fill the available area.
  * **Contain:** Displays the entire image without cropping it.
  * **Cover:** Fills the available area while maintaining the image's aspect ratio, which may crop parts of the image.
* **Border Radius:** Adjust the roundness of the banner corners.

#### Slideshow Settings

These settings control the automatic movement of banners when multiple slides are available.

* **Auto Change:** Enable this option to automatically switch between banners.
* **Change Delay (seconds):** Set the number of seconds before the banner changes to the next slide.
* **Slide auto-advances after this many seconds:** Displays the configured delay time for automatic slide transitions.

#### Style Settings

Use the **Style Settings** to customize the visual appearance of the banner section.

* **Background:** Set the background color or appearance behind the banner section.
* **Solid:** Enable this option to use a solid background.

#### Spacing

The **Spacing** settings allow you to control the space around the banner section. Adjust the spacing to create proper padding and margins and maintain a clean layout within the campaign.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FbdTCQcXcjjzLsmtkKmYE%2Fimage.png?alt=media&amp;token=d82d14ae-f059-493e-a5c6-efc8410b0ebd" alt=""><figcaption></figcaption></figure>

#### 3. Countdown Timer Settings

The **Countdown Timer** section allows you to display a countdown for limited-time promotions, flash sales, product launches, or other time-sensitive campaigns. You can configure the countdown period, text, appearance, borders, and spacing.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FAo3KqQjQNYPcj2VXVNEd%2Fimage.png?alt=media&amp;token=01c1cd8d-d179-4727-bb94-5fb1cd6a6cc8" alt=""><figcaption></figcaption></figure>

#### Time Settings

Use the **Time Settings** to define the duration of the countdown.

* **Start Time:** Set the date and time when the countdown should begin.
* **End Time:** Set the date and time when the countdown should end.

The countdown timer will display the remaining time between the configured start and end times.

#### Text Settings

Use the **Text Settings** to customize the text displayed with the countdown.

* **Heading Text:** Enter the main heading displayed above the countdown timer.
* **Alignment:** Choose the heading alignment:
  * **Left**
  * **Center**
  * **Right**
* **Description Text:** Add supporting text to provide additional information about the promotion or offer.
* **Alignment:** Choose the description alignment:
  * **Left**
  * **Center**
  * **Right**
* **Expire Message:** Enter the message that should be displayed once the countdown reaches its end time.

#### Style Settings

Use the **Style Settings** to customize the appearance of the countdown timer.

* **Background:** Set the background for the countdown timer section.

**Heading Style**

* **Font Size:** Set the font size of the heading.
* **Text Color:** Choose the color of the heading text.

**Description Style**

* **Font Size:** Set the font size of the description.
* **Text Color:** Choose the color of the description text.

**Counter Style**

Customize the appearance of the countdown values.

* **Font Size:** Set the size of the countdown numbers.
* **Text Color:** Choose the color of the countdown numbers.
* **Background Color:** Set the background color behind the countdown values.

**Separator (:)**

Customize the appearance of the separators between countdown values.

* **Color:** Set the color of the `:` separator.
* **Font Size:** Set the size of the separator.

**Border Settings**

* **Show Border:** Enable this option to display a border around the countdown section.
* **Border Color:** Select the border color.
* **Border Width:** Set the thickness of the border.
* **Border Radius:** Adjust the roundness of the border corners.
* **Neon Glow Effect:** Enable this option to add a glowing effect to the countdown timer.

#### Spacing

Use the **Spacing** settings to control the internal spacing of the countdown section.

* **Padding Inline:** Adjust the horizontal spacing inside the section.
* **Padding Block:** Adjust the vertical spacing inside the section.

#### 4. Product Grid Settings

The **Product Grid** section allows you to customize how products are displayed, including the title, product cards, images, pricing, wishlist, variants, and Add to Cart button.

#### Title Settings

* **Title:** Enter the product section title.
* **Is hide title?:** Hide the title if needed.

#### Detail Page Settings

* **Is hide detail page link?:** Hide the product detail page link.
* **Details page action:** Set the action for opening the product details.

#### Sale Timer

* **Show Sale Timer?:** Show a countdown timer for products with active sales.

#### Product List

Choose how products are displayed.

* **Layout:** Select **Grid** or **Slider**.
* **Slide per View:** Choose how many products appear at once.
* **Gap:** Set the space between products.
* **Padding Inline:** Adjust horizontal spacing.
* **Padding Block:** Adjust vertical spacing.

#### Product Card

Customize the product card design.

* **Developer Options:** Access advanced card settings.
* **Card Design:** Choose from **Type A, Type A1, Type A2, or Type A3**.
* **Background:** Set the card background.
* **Apply Shadow?:** Add a shadow to the card.
* **Is hide border?:** Hide the card border.
* **Border Width / Border Color:** Customize the border.
* **Wishlist hide?:** Hide the wishlist option.

#### Product Image

* **Is hide?:** Hide the product image.
* **Object Fit:** Choose **Contain, Cover, or Fill**.
* **Height:** Set the image height.

#### Product Title

* **Is hide title?:** Hide the product title.
* **Title Text Color:** Set the title color.

#### Price

* **Is hide price?:** Hide the product price.
* **Price Color:** Set the price color.
* **Is hide compare-at price?:** Hide the original price.
* **Compare-at Price Color:** Set the original price color.
* **Is hide discount?:** Hide the discount.
* **Is hide vendor name?:** Hide the vendor name.
* **Vendor Text Color:** Set the vendor name color.

#### Add to Cart

* **Is hide?:** Hide the Add to Cart button.
* **Background:** Set the button background color.
* **Text Color:** Set the button text color.
* **Is full-width?:** Make the button full width.
* **Shadow Color:** Set the button shadow color.
* **Icon:** Upload a custom PNG icon. **50×50 px recommended.**

#### Similar Products

* **Is hide?:** Hide the Similar Products option.
* **Icon:** Upload a custom PNG icon. **50×50 px recommended.**

#### Variant Picker

Customize the product variant selection popup.

* **Title:** Set the variant section title.
* **Text:** Set the option text.
* **Text Color / Text Font Size:** Customize option text.
* **Active Option Style:** Set the active option's background and text color.
* **Inactive Option Style:** Set the inactive option's background, text, and border color.
* **Cart Button Background:** Set the cart button background.
* **Button Text Color / Button Icon Color:** Customize the button.
* **Button Border Radius:** Round the cart button corners.
* **Option Border Radius:** Round the variant option corners.

**General:**

* **Title Text Color / Title Font Size:** Customize the picker title.
* **Popup Background:** Set the popup background.
* **Close Icon Color:** Set the close icon color.

#### Style

* **Background:** Set the product section background.
* **Title:** Set the title color and font size.
* **Detail Page Link:** Set the link color and font size.

#### Spacing

* **Title Spacing:** Adjust the space around the title.
* **Padding Inline:** Adjust horizontal spacing.
* **Padding Block:** Adjust vertical spacing.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FKGxKNBJwb2z4LoDAK67b%2Fimage.png?alt=media&amp;token=db5113dd-5e4b-4cf8-a364-45ee7e1642a8" alt=""><figcaption></figcaption></figure>

#### 5. Explore Button Settings

The **Explore Button** lets you add a customizable button that directs customers to a specific page or action in the app.

#### Explore Button Settings

* **Button Text:** Enter the text displayed on the button.
* **Icon Position:** Place the icon on the **Left** or **Right** side of the text.
* **Text Font Size:** Set the button text size.
* **Text Font Color:** Set the button text color.
* **Button Width:** Adjust the button width.
* **Border Radius:** Adjust the roundness of the button corners.
* **Padding Block:** Adjust the vertical space inside the button.
* **Padding Inline:** Adjust the horizontal space inside the button.
* **Background:** Set the button background color.
* **Action:** Select the action or destination when the button is clicked.
* **Hide Border?:** Hide the button border.
* **Border Color:** Set the border color.
* **Border Width:** Set the border thickness.
* **Hide Button Text?:** Hide the button text and display only the icon.

#### Icon Settings

* **Hide Icon?:** Hide the button icon.
* **Icon Color:** Set the icon color.
* **Icon Size:** Adjust the icon size.
* **Icon Spacing:** Set the space between the icon and button text.
* **Upload Icon:** Upload a custom icon for the button.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FENRPY31XJrtblspkEDfI%2Fimage.png?alt=media&amp;token=446616a0-76a6-445d-b1a7-1422a4314143" alt=""><figcaption></figcaption></figure>

#### 6. Text Box Settings

The **Text Box** section allows you to add and customize text along with an optional decorative image in your campaign.

#### Text Settings

* **Text:** Enter the text you want to display in the text box.
* **Is Bold?:** Enable this option to display the text in bold.

#### Style Settings

* **Font Size:** Set the size of the text.
* **Background:** Choose whether to add a background color to the text box.
* **Font Color:** Set the color of the text.
* **Border Radius:** Adjust the roundness of the text box corners.

#### Image Settings

* **Show Image:** Enable this option to display a decorative image.
* **Border Image:** Select or upload an image to use as a decorative border around the text box.
* **Image Width:** Set the width of the border image.
* **Image Height:** Set the height of the border image.
* **Gap Between Text and Image:** Adjust the space between the text and the image.
* **Object Fit:** Choose how the image fits within its area:
  * **Contain:** Displays the complete image without cropping.
  * **Cover:** Fills the available area while maintaining the image ratio and may crop the image.
  * **Fill:** Stretches the image to fill the available area.

**Image Upload Requirements:** Maximum file size is **500 KB** and only **PNG** format is supported.

#### Spacing

* **Padding Inline:** Adjust the horizontal space inside the text box.
* **Padding Block:** Adjust the vertical space inside the text box.
* **Margin Inline:** Adjust the horizontal space outside the text box.
* **Margin Block:** Adjust the vertical space outside the text box.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FdRL1ScPX3j0u1mMelW9B%2Fimage.png?alt=media&amp;token=56f0f913-002b-4890-a106-93b5bba005fa" alt=""><figcaption></figcaption></figure>

### <mark style="color:$primary;">Announcement Campaign</mark>

The **Announcement Campaign** is designed to help merchants quickly communicate important updates, news, promotions, or special messages to customers through the mobile app.

#### When to use it

* Announce new products or features.
* Share important store updates or news.
* Promote special offers or events.
* Inform customers about upcoming changes or launches.
* Highlight important messages directly on the app’s home screen.

#### Campaign Sections

Based on the shown layout, the campaign includes:

* **Announcement Bar:** Displays a short, attention-grabbing announcement at the top of the campaign.
* **Image/GIF:** Add a promotional image or GIF to make the announcement more engaging.
* **Text:** Add the main announcement message or supporting content.
* **Key Features:** Highlight important benefits, features, or information using icons and text.
* **Explore Button:** Add a call-to-action button such as **“Explore Now”** that directs customers to a specific page or action.

Merchants can **add, remove, and customize sections** according to their requirements and preview the campaign on the mobile device before publishing.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FiGTkKrcZEH6qloMwI7Dy%2Fimage.png?alt=media&amp;token=0d07032c-1417-4693-bd30-80809bbc4159" alt=""><figcaption></figcaption></figure>

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FeAYF6cmX941CV93PpXTF%2Fimage.png?alt=media&amp;token=1ad68afd-2700-4d28-ab32-d43fc2157480" alt=""><figcaption></figcaption></figure>

#### 1. Announcement Bar Settings

The **Announcement Bar** lets you display short, scrolling messages or important updates to customers within the campaign.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FOo1hwmLs00zWfyH87AWX%2Fimage.png?alt=media&amp;token=40474c30-aecb-4df0-aa9c-46420e7c2ed5" alt=""><figcaption></figcaption></figure>

#### Add Announcement

* **Add Announcement:** Add one or more announcement messages that will be displayed in the announcement bar. You can add multiple announcements and reorder or remove them as needed.

#### Style

* **Background Color:** Set the background color of the announcement bar.
* **Text Color:** Set the color of the announcement text.
* **Autoscroll Speed:** Choose how quickly the announcements move automatically: **Slow, Medium, or Fast**.
* **Height:** Set the height of the announcement bar in pixels.

#### Spacing

* **Margin Inline:** Adjust the horizontal space outside the announcement bar.
* **Margin Block:** Adjust the vertical space outside the announcement bar.

#### 2. Image / GIF Settings

The **Image / GIF** section lets you add and customize images or GIFs within the campaign.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FC5Wea0SYqVazAVfOaUs7%2Fimage.png?alt=media&amp;token=121c81ad-5661-4cba-b517-8cda536cb76a" alt=""><figcaption></figcaption></figure>

#### Image Settings

* **Image / GIF:** Upload or select an image or GIF to display in the campaign.
* **Recommended:** Use **WebP** format for images and a **transparent background** for GIFs.
* **Width:** Set the width of the image.
* **Height:** Set the height of the image.
* **Object Fit:** Choose how the image fits within its container:
  * **Cover:** Fills the container while maintaining the image ratio. Parts of the image may be cropped.
  * **Contain:** Displays the complete image without cropping.
  * **Fill:** Stretches the image to fill the entire container.

#### Style Settings

* **Alignment:** Position the image to the **Left, Center, or Right**.
* **Horizontal Offset:** Adjust the image's position horizontally.
* **Vertical Offset:** Adjust the image's position vertically.
* **Rotation:** Rotate the image to the desired angle.
* **Border Radius:** Adjust the roundness of the image corners.

#### 3. Text Box Settings

The **Text Box** section allows you to add and customize text and an optional decorative image within your campaign.

#### Text Settings

* **Text:** Enter the text you want to display.
* **Is Bold?:** Enable this option to display the text in bold.

#### Style Settings

* **Font Size:** Set the size of the text.
* **Background:** Choose the background color of the text box.
* **Font Color:** Choose the color of the text.
* **Border Radius:** Adjust the roundness of the text box corners.

#### Image Settings

* **Show Image:** Enable this option to display an image in the text box.
* **Border Image:** Select or upload a decorative image to enhance the text box.
* **Image Width:** Set the width of the image.
* **Image Height:** Set the height of the image.
* **Gap Between Text and Image:** Adjust the space between the text and image.
* **Object Fit:** Choose how the image fits within its assigned area:
  * **Contain:** Displays the complete image without cropping.
  * **Cover:** Fills the area and may crop parts of the image.
  * **Fill:** Stretches the image to fill the available area.

**Image Upload Requirements:** Maximum file size is **500 KB,** and only **PNG** format is supported.

#### Spacing

* **Padding Inline:** Adjust the horizontal space inside the text box.
* **Padding Block:** Adjust the vertical space inside the text box.
* **Margin Inline:** Adjust the horizontal space outside the text box.
* **Margin Block:** Adjust the vertical space outside the text box.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F8IM75RA8y04JR93jP4ah%2Fimage.png?alt=media&amp;token=0c88bb00-31c1-4ff8-95f8-3806c9e21dba" alt=""><figcaption></figcaption></figure>

#### 4. Key Features

The **Feature** section allows you to highlight important features, benefits, or key selling points of your campaign using icons, headings, and descriptions.

#### Title Settings

* **Title:** Enter the title displayed above the feature section.
* **Is Hide Title?:** Show or hide the section title.
* **Font Size:** Set the title text size.
* **Font Color:** Set the title text color.
* **Title Alignment:** Align the title to the left, center, or right.
* **Background Color:** Set the background color of the title section.

#### Layout Settings

* **Layout:** Choose between **Grid** or **Slider** to control how feature blocks are displayed.
* **Number of Items:** Set the number of feature blocks displayed in the selected layout.

#### Block Settings

* **Icon Size:** Set the size of the feature icon.
* **Icon Position:** Place the icon on the **Left, Right, Top, or Bottom** of the feature content.

#### Block Style

* **Background Color:** Set the background color of each feature block.
* **Border Radius:** Adjust the roundness of the feature block corners.

**Heading Style**

* **Color:** Set the heading text color.
* **Font Size:** Set the heading text size.

**Subtitle Style**

* **Color:** Set the subtitle text color.
* **Font Size:** Set the subtitle text size.

#### Spacing

* **Padding Inline:** Adjust the horizontal space inside the feature section.
* **Padding Block:** Adjust the vertical space inside the feature section.
* **Margin Inline:** Adjust the horizontal space outside the feature section.
* **Margin Block:** Adjust the vertical space outside the feature section.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F8zySM40jWIEMRq8wN3vw%2Fimage.png?alt=media&amp;token=1106a652-072a-479c-9815-609bc676b7a0" alt=""><figcaption></figcaption></figure>

#### 5. Explore Button Settings

The **Explore Button** lets you add a customizable button to your campaign and link it to a specific page, product, collection, or other action in the app.

#### Explore Button Settings

* **Button Text:** Enter the text displayed on the button.
* **Icon Position:** Choose whether the icon appears on the **Left** or **Right** of the button text.
* **Text Font Size:** Set the size of the button text.
* **Text Font Color:** Set the color of the button text.
* **Button Width:** Set the width of the button.
* **Border Radius:** Adjust the roundness of the button corners.
* **Padding Block:** Adjust the vertical space inside the button.
* **Padding Inline:** Adjust the horizontal space inside the button.
* **Background:** Set the button background color.
* **Action:** Select the destination or action that opens when the button is tapped.
* **Hide Border?:** Show or hide the button border.
* **Border Color:** Set the border color.
* **Border Width:** Set the border thickness.
* **Hide Button Text?:** Show or hide the button text.

#### Icon Settings

* **Hide Icon?:** Show or hide the button icon.
* **Icon Color:** Set the icon color.
* **Icon Size:** Set the size of the icon.
* **Icon Spacing:** Adjust the space between the icon and the button text.
* **Upload Icon:** Upload a custom icon for the button.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FSDTHfpw1fjDuYDwmQhQY%2Fimage.png?alt=media&amp;token=3836fd6a-d84b-4b79-8319-1341253918f2" alt=""><figcaption></figcaption></figure>

### 6. Campaign Settings

The **Campaign Settings** section allows you to control where and when the campaign appears, how it opens and closes, and its overall appearance.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FEKskOm0oAAKXUGzloQHK%2Fimage.png?alt=media&amp;token=dad0adf2-ce9e-4131-8d73-a0b3944df5eb" alt=""><figcaption></figcaption></figure>

#### Trigger & Animation Settings

**Campaign Position**

Choose where the campaign appears in the mobile app:

* **Middle:** Displays the campaign in the center of the screen.
* **Top:** Displays the campaign at the top.
* **Bottom:** Displays the campaign at the bottom.

**Entrance Animation**

Choose the animation used when the campaign appears.

**Exit Animation**

Choose the animation used when the campaign closes or disappears.

#### Campaign Duration

* **Start Date & Time:** Set the date and time when the campaign should start displaying.
* **End Date & Time:** Set the date and time when the campaign should stop displaying.

#### Mobile App Location

Select the location or page in the mobile app where the campaign should be displayed.

### General Settings

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FwigWLRlYFfcEIyiN60Kq%2Fimage.png?alt=media&amp;token=6d793de5-899e-42af-97ba-bd53bb8db4ae" alt=""><figcaption></figcaption></figure>

#### Campaign Appearance

* **Campaign Height:** Adjust the overall height of the campaign.
* **Background:** Set the campaign background color.
* **Show Border:** Show or hide the campaign border.
* **Border Radius:** Adjust the roundness of the campaign corners.
* **Border Width:** Set the thickness of the campaign border.
* **Border Color:** Choose the border color.

#### Spacing

* **Padding Inline:** Adjust the horizontal space inside the campaign.
* **Padding Block:** Adjust the vertical space inside the campaign.
* **Margin Inline:** Adjust the horizontal space outside the campaign.
* **Margin Block:** Adjust the vertical space outside the campaign.

#### Close Button

Customize the appearance of the button customers use to close the campaign:

* **Button Size:** Set the size of the close button.
* **Icon Size:** Set the size of the close icon.
* **Border Radius:** Adjust the roundness of the close button.
* **Icon Color:** Set the color of the close icon.
* **Background Color:** Set the background color of the close button.

### <mark style="color:$primary;">Poster Campaign</mark>

The **Poster Campaign** allows you to upload a ready-to-use poster, banner, or promotional graphic and display it as a campaign in your mobile app.

It is ideal for visually promoting:

* Seasonal offers and discounts
* Sales and special promotions
* New product launches
* Events or announcements
* Other promotional campaigns

You can upload your own poster and customize how it is displayed, including its size, fit, and action. Customers can also tap the poster to be directed to a specific **product, collection, page, or other destination** in the app.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FlZK5YkiEufIgFaxAXyu5%2Fimage.png?alt=media&amp;token=3b7f0571-5a05-48b1-a325-393f1b48c3d3" alt=""><figcaption></figcaption></figure>

#### 1. Poster Image Settings

* **Poster Image:** Upload or select the poster image you want to display.
* **Full Campaign Width?:** Enable this option to make the poster span the full width of the campaign.
* **Object Fit:** Choose how the poster image fits within its container.
  * **Cover:** Fills the available area while maintaining the image ratio. Parts of the image may be cropped.
  * **Contain:** Displays the complete image without cropping.
  * **Fill:** Stretches the image to fill the available area.
* **Enable Scroll for Long Poster?:** Enable this option to allow customers to scroll through posters that are taller than the available display area.
* **Max Poster Height:** Set the maximum height of the poster in pixels when scrolling is enabled.
* **Action:** Select the page, product, collection, or other destination that opens when the poster is tapped.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FWs8EgQb39hZmgodGcopA%2Fimage.png?alt=media&amp;token=17225dcf-53d1-4caa-bec9-d5f5f8607f0c" alt=""><figcaption></figcaption></figure>

### 2. Campaign Settings

The **Campaign Settings** section allows you to control when and where your campaign appears, how it opens and closes, and its overall appearance.

#### Trigger & Animation Settings

**Campaign Position**

Choose where the campaign appears on the screen:

* **Middle:** Displays the campaign in the center.
* **Top:** Displays the campaign at the top.
* **Bottom:** Displays the campaign at the bottom.

**Entrance Animation**

Choose the animation used when the campaign appears.

**Exit Animation**

Choose the animation used when the campaign closes.

#### Campaign Duration

* **Start Date & Time:** Set when the campaign should start displaying.
* **End Date & Time:** Set when the campaign should stop displaying.

#### Mobile App Location

Select the page or location in the mobile app where you want the campaign to appear.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FUesOVfVWk2Yo9cAiP4LA%2Fimage.png?alt=media&amp;token=9ee637ce-a565-44a0-b8f7-ea5c2ec14c28" alt=""><figcaption></figcaption></figure>

#### General Settings

* **Campaign Height:** Adjust the overall height of the campaign.
* **Background:** Set the campaign background color.
* **Show Border:** Enable or disable the campaign border.
* **Border Radius:** Adjust the roundness of the campaign corners.
* **Border Width:** Set the thickness of the campaign border.
* **Border Color:** Choose the border color.

#### Spacing

* **Padding Inline:** Adjust the horizontal space inside the campaign.
* **Padding Block:** Adjust the vertical space inside the campaign.
* **Margin Inline:** Adjust the horizontal space outside the campaign.
* **Margin Block:** Adjust the vertical space outside the campaign.

#### Close Button

Customize the appearance of the button used to close the campaign:

* **Button Size:** Set the overall size of the close button.
* **Icon Size:** Set the size of the close icon.
* **Border Radius:** Adjust the roundness of the close button.
* **Icon Color:** Set the color of the close icon.
* **Background Color:** Set the background color of the close button.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FT0qMcLcovC5byO0PqDMR%2Fimage.png?alt=media&amp;token=5bf9b72a-33c7-4a6f-a842-9a8fcee5df5c" alt=""><figcaption></figcaption></figure>

#### Campaign Management

After creating a campaign, you can manage it directly from the **Campaigns** page using the available actions:

* **Customize:** Modify the campaign content, sections, and design settings.
* **Translate:** Translate the campaign content into multiple languages.
* **Publish:** Publish the campaign to the **current theme of your mobile app**, making it visible to customers.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FGFVeXIRRL7L46TmZI08w%2Fimage.png?alt=media&amp;token=e2f06f8a-41cb-48cc-bf43-e21eb75481ee" alt=""><figcaption></figcaption></figure>