How to select design template for an offer
You can select the theme template for your order. Design Templates are located in the corresponding tab in Menu.
Note: you can create your own design, use default ones provided with the App or customize default design templates.
When you edit a default template, the App will automatically create a new duplicate for your customization. The default template will be saved unchanged.
This means you can create your own design on the basis of the default one as many times as you wish. All the default templates will be always preserved without any customizations.
To create a design, please follow these steps:
- Click on the "New Template" button on the right side of the page:
- Enter the custom name of your design into the "Widget name" field: Tip: When working on the Design, you can check how it will look on desktop and on mobile clicking on icons with different screens: Choose the type of your offer: Upsell (a better version of the product) or Cross-sell (a product related to the one in the Cart):
- Choose the type of offer:
Difference: If you choose "Cross-sell", your customers will see "Add to Cart" button as the product will be added as secondary to the main one which is already in the Cart. In case you click "Upsell" then the products shown in the offer will replace the existing one in the Cart.
- Background color: set any custom background color for the top section;
- Close icon: add or remove the icon and choose its colors;
- Alert Text: add or remove the description and choose its colors and fonts;
- Alert Product Title: add or remove the title and choose its colors and fonts.
- Background: set any custom background color for the main section;
- Title: add or remove the title and choose its colors and fonts;
- Description: add or remove the description and choose its colors and fonts;
- Border: set the width, color, and radius of the border;
Hint: Radius lets you cut the edges and change the shape of the popup to more oval: Tip: If you set some width for the border but leave the color transparent, the size of the popup will be decreased.
- Cart: add/remove Cart icon, set its color, and style the font;
- Cart counter shows the number of items in the cart:
- Total is the word before the price:
- Total price: add/remove the price, choose any custom color for it, and style the font with the line-height.
- Background Bottom: set any custom background color for this section;
- Reject Bottom: add or remove the button and choose its colors and font, radius, size, padding (inner border);
- Checkout Bottom: add or remove the button and choose its colors and font, radius, size, padding (inner border);
- Product background: set custom color for the background of the images;
For example, in this picture it's set to the wheat color:
- Product price/quantity background: set custom color for the background on the price/quantity section;
For example, in this picture it's set to the light brown color:
- Cart Button: choose the colors, paddings, and fonts;
- Product Border: set the width, color, and radius of the border;
Hint: Radius lets you cut the edges and change the shape of the popup to more oval.
- Product title: add/remove product title, style the font and line-height;
- Create_widget.product_description: add/remove product description, style the font and line-height;
- Product Quantity: add/remove the counter, set its colors, the radius of the border;
- Product Variations: add/remove the possibility to change the properties of the product; style the color, width, and border:
- Product Price: add/remove the price, configure font;
- Compare Price: add/remove the option; style its color, and font;
- Discount tags: add/remove the discount tags, style its color, border-radius, font, padding;
- Title: you can paste your custom text here and add emoji:
The text which you enter in this field will appear above the advertized products:
- Description: a short explanation of the offer displayed below the title;
- Add To Cart Button Text: if the field is blank, then only the Cart icon will be displayed: You can enter any text and it will be displayed along with the Cart icon.
- Added To Cart Button Text: the text which will be displayed after your client clicks on the button
- Reject button is displayed in the left bottom part of the pop-up;
You can enter any custom text into "Reject Button Text" to let your clients know that pressing it will close the offer popup:
- Checkout Button Text: entering some text here will translate this button
- Upsell Save Text: translate default "Save" in the discount section
- Mini-Cart Title text: translate the word "Cart" shown in the bottom left part under products:
- Total Text: translate the text shown before the final price:
- Before Alert Upsell Text:
- Timer Message: add some invigorating words to the timer section: Note: to have this option displayed, you need to enable "Timer" in the "Design" tab:
Note: "After checkout" trigger does not have Upsell/Cross-sell options so you can choose any of these options for this trigger.
4. After the type is chosen, click on the "Choose position" button:
5. On the second step you can choose the position of the offer on page, animation how it appears to customers, and layout:
Position: center, top, bottom, bottom left, bottom right, cover all page:
Layout: list, grid, metro (a combination of the first two):
Note: You can set a custom number of columns for the grid and metro layouts.
Animation: you can select one of the predesigned options from the drop-down:
6. Once done, click on the "Choose Design" button:
On the Design tab you can set :
Timer: Top Section:
You can set any custom color for it and style border;
You can set any custom color for it and style the font with the line-height;
In this part you can customize this section:
If you still wish to style the design of your Offer using CSS, you are free to enter your code here:
Click "Edit Translation" to move to the final tab.
Here you can enter custom text in any language for the following sections:
Note: to have the text in options 10-13 shown you need to enable "Alert Text" and "Alert Product Title" in "Top Section" of the Design tab:
Once done, click "Save translation":
Before exiting, please make sure to click the "Save" button:
If you were editing a template, then you will see the "Update" button on top. Make sure you click it for saving changes:
Note: if you click on the "Go back" button, then the recent changes will *not* be saved: