How to create a design template
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 new design, please follow these steps:
Click on the "New Template" button on the right side of the page:
The only difference is that the bundle design used for bundling products and has the specific design structure:
In order to set up the Cross-Sell/Upsell or Bundle Design you can follow the similar steps:
Tip: When working on the Design, you can check how it will look on desktop and on mobile by clicking on icons with different screens:
(Only for Cross-sell/Upsell Design) 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):
Difference: If you choose "Cross-sell", your customers will see the "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 ones in the Cart.
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 next step you can choose the position of the offer, animation of 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:
1. Background color: set any custom background color for the top section;
2. Close icon: add or remove the icon and choose its colors;
3. Alert Text: add or remove the description and choose its colors and fonts;
4. Alert Product Title: add or remove the title and choose its colors and fonts.
1. Background: set any custom background color for the main section;
2. Title: add or remove the title and choose its colors and fonts;
3. Description: add or remove the description and choose its colors and fonts;
4. 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: Tip: If you set some width for the border but leave the color transparent, the size of the popup will be decreased.
5. Cart: add/remove Cart icon, set its color, and style the font;
6. Cart counter: shows the number of items in the cart:
You can set any custom color for it and style border;
7. Total is the word before the price:
You can set any custom color for it and style the font with the line-height;
8. Total price: add/remove the price, choose any custom color for it, and style the font with the line-height.
1. Background Bottom: set any custom background color for this section;
2. Reject Bottom: add or remove the button and choose its colors and font, radius, size, padding (inner border);
3. Checkout: add or remove the button and choose its colors and font, radius, size, padding (inner border);
In this part you can customize this section:
1. Product background: set custom color for the background of the images;
For example, in this picture it's set to the wheat color: 2. 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: 3. 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; 4. Create_widget.product_description: add/remove product description, style the font and line-height;
5. Product Quantity: add/remove the counter, set its colors, the radius of the border; 6. Product Variations: add/remove the possibility to change the properties of the product; style the color, width, and border: 7. Product Price: add/remove the price, configure font;
8. Compare Price: add/remove the option; style its color, and font; 9. Discount tags: add/remove the discount tags, style its color, border-radius, font, padding;
If you still wish to style the design of your Offer using CSS, you are free to enter your code here:
7. Click "Edit Translation" to move to the final tab.
Here you can enter custom text in any language for the following sections:
1. 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:
2. Description: a short explanation of the offer displayed below the title;
3. 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.
4. Added To Cart Button Text: the text which will be displayed after your client clicks on the button
5. 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:
6. Checkout Button Text: entering some text here will translate this button
7. Upsell Save Text: translate default "Save" in the discount section
8. Mini-Cart Title text: translate the word "Cart" shown in the bottom left part under products:
9. Total Text: translate the text shown before the final price:
Note: in order to have the text in options 10-13 available you need to enable "Alert Text" and "Alert Product Title" in "Top Section" of the Design tab:
10. Before Alert Upsell Text:
11. 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:
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: