Wanna extend the capabilities of your Vajro mobile app? Custom Blocks are here to help you improve your customization capabilities!
To get started,
Go to the Customize section on your Vajro dashboard. You’ll find three different sub-sections to work with - Elements, Tweaks, and Flows.
Index
Elements
Go to the Elements section. The Elements section allows you to add text elements to various parts of the PDP and cart page.
To get started with elements, select the page that you want the customization on and then click on one of the + icons next to the mobile preview.
You can inject elements under different sections of the PDP or the Cart page as per your requirements.
Step 1: Click on the + icon next to the section that you want an element to be added to.
Step 2: In the dialog box that pops up on your screen, you’ll see the following
Element Name: Give the element a title.
Element Source: Your element can be sourced from an editor or a URL.
Dynamic Texts: You can add texts that are dynamic. For instance, the Product Name will change based on the page it appears on.
Editor: Add your text to this section. The Dynamic Text will appear in this section too. You can even add links, images, and custom codes in this section.
If you select the URL option, you will have to add a URL under this field and it will appear on the PDP. The URL tab comes with its own set of dynamic texts to pick from.
Step 5: Add a start date and end date to schedule your element. This step is optional.
Once you’re done, click on Add.
Your element will appear under the Drafts section. When an element is drafted, you can do the following actions:
Criteria: Assign criteria for the element.
(Note: You cannot assign Criteria for the elements on the Cart Page)
Publish: Publish the element.
Edit/Delete: Edit or delete the element.
If you’d like to delete an element that’s been published, you’ll be prompted to enter the title of the element in a dialog box just to confirm.
You can add more than one element to a section. You can reorder them by simply dragging the element.
Tweaks
Go to the Vajro dashboard and click on Tweaks.
Tweaks can be made on various parts of the PDP and Cart Page.
PDP
Product Name
WRT the product name, you can change the text color, size, and style, and schedule the tweak to a specified date.
2. Product Price
This tweak allows you to add a new price if you’re selling a product at a discounted price, mention the percentage discount, and add a prefix/suffix text to the pricing.
3. Add to Cart Button
This tweak allows you to customize the Add to Cart and Out of Stock buttons. In addition to changing the Text color, size, style, and background color, you can also change the button’s behavior, wherein the button can be inactive for customers to click on, and hide the buttons if need be.
4. Product Variants
With the Variant Selector, you can change the background, border, and text colors, along with the border thickness & shape, text size, and style.
5. Product Rating
With this tweak, you can change the color, size, and style of the ratings and the “Write a review” button. You can also choose to hide or show the review count and the “Write a review” button.
Click on the Text under Rating Style or Review Style to edit these sections..
6. Recently Viewed
In this section, you can tweak the font size, style, and color of the header text, product text, retail price, selling price, and discount style. You can also choose to hide or show the retail price, selling price, and discount percentage.
Cart Page
Wishlist
This tweak lets you change the color of the text and the arrow, and the size & style of the text.
2. Checkout Button
The checkout button can be tweaked wrt to text color, size & style, background color, and border thickness. You can also choose to enable or disable the checkout action.
3. Clear Cart
With this tweak, you can change the style, size, and color of the message and the clear cart button. You can also change the Background color and the thickness of the border.
Click the button under the Message Text Style or the Clear Cart Text Style to edit those elements.
4. Cart Price Details
All the text sizes, styles, and colors can be edited with this tweak.
Flows
Head to the Flows section on your Vajro dashboard.
Percentage Discount
Name: Give the offer a title.
Customer Buys: Pick any product or specific products/collections for which the customer gets a discount. Specify the minimum amount/quantity to be shopped for the customer to be eligible for the discount.
Customer Gets: Mention the percentage discount that the customer will get on all products or specific products/collections.
Active Dates: Set a start and end date to schedule the discount.
You can either combine this offer with another if you choose to. Add a Banner Message and click the Add button.
Use cases:
On a purchase of $20 get 25% off, and on a purchase of $40 get 30% off.
On a purchase of $25 get a flat $7 off on selected products, and on a Purchase of $30 Get a flat $20 off on selected products.
On a purchase of $49 get 25% off on selected products, and on a purchase of $79 get 40% off on selected products.
On a purchase of $49 get 1 free product (Selected by you), and on a purchase of $69 Get 1 another free product (Selected by you).
BOGO (Buy X get Y free).
Buy X get a 70% discount on Y.
Buy any product from category A and get a gift(s).
Buy any product from vendor B and get a gift(s).
A purchase of $49 gets 1 product free (To be added by your customers), On a Purchase of $69 Get another free product (Selected by you).
2. Flat Discount
Name: Give the offer a title.
Customer Buys: Pick any product or specific products/collections for which the customer gets a discount. Specify the minimum amount/quantity to be shopped for the customer to be eligible for the discount.
Customer Gets: Mention the amount of discount that the customer will get on all products or specific products/collections.
Active Dates: Set a start and end date to schedule the discount.
Use cases:
On a purchase of $20 get 25% off, and on a purchase of $40 get 30% off.
On a purchase of $25 get a flat $7 off on selected products, and on a Purchase of $30 Get a flat $20 off on selected products.
On a purchase of $49 get 25% off on selected products, and on a purchase of $79 get 40% off on selected products.
3. Buy X Choose Y
Name: Give the offer a title.
Customer Buys: Pick specific products/collections for which the customer gets an offer. Specify the minimum amount/quantity to be shopped for the customer to be eligible for the offer.
Customer Gets: Mention the number and the kind of items that the customer will get for free for purchasing the specified product/collection.
Active Dates: Set a start and end date to schedule the offer.
Use cases:
On a purchase of $49 get 1 product free (To be added by your customers), on a purchase of $69 Get another product free (To be added by your customers).
On a purchase of $49 get 1 product free (To be added by your customers), on a purchase of $69 get another product free (Selected by you).
On a purchase of $49 get 25% off on selected products, on a purchase of $69 get 40% off on selected products.
On a purchase of $39 get a flat $5 off on selected products, on a purchase of $49 get a flat $8 off on selected products.
4. Free Products
Name: Give the offer a title.
Customer Buys: Pick specific products/collections for which the customer gets an offer. Specify the minimum amount/quantity to be shopped for the customer to be eligible for the offer.
Customer Gets: Mention the number and the kind of items that the customer will get for free for purchasing the specified product/collection.
Active Dates: Set a start and end date to schedule the offer.
Use cases:
Buy for X amount and get 2 free products
Buy 1 product and get 1 product (Recurring freebie)
On a purchase of $49 get 1 free product (Selected by you), and on a purchase of $79 get another free product (Selected by you)
On a purchase of $49 get 1 free product (Selected by you), and on a purchase of $69 Get 1 another free product (Selected by you).
BOGO (Buy X get Y free).
Buy X get a 70% discount on Y.
Buy any product from category A and get a gift(s).
Buy any product from vendor B and get a gift(s).
On a purchase of $49 get 1 product free (To be added by your customers), on a purchase of $69 Get another product free (To be added by your customers).
On a purchase of $49 get 1 product free (To be added by your customers), on a purchase of $69 get another product free (Selected by you).