Vajro Xtend gives users the freedom to make changes to their mobile store suited to their unique business needs. It is a plug-and-play, low-code widget that requires little to no coding knowledge and enables users to overcome design or functional restrictions when setting up/running their mobile store.

Now that we've established that, let's get things rolling!

Index

  1. Placement of Customizations

  2. Use Case 1

  3. Examples of Customized Layouts

The Use Case 1 supports customizations on 2 pages

  1. Product Details Page (PDP)

  2. Cart page


Placement of Customizations

Product Details Page (PDP)

Information can be displayed in 5 different positions on the PDP. This information could be in the form of images, videos, and GIFs, as per the user's requirements.

Cart Page

Information can be displayed in 6 different positions on the Cart Page. This information could be in the form of images, videos, and GIFs, as per the user's requirements.


Use Case 1

Using Shopify Link

Customize the Layout of the Product Description on the Product Details Page

Step 1: To get started, go to the desired Product Details Page on the website

Step 2: In the product details section of the webpage, identify and select all that you want to customize on your app

Step 3: Right Click on the highlighted part and click on Inspect element

Step 4: Find the relevant class name/id for the desired section. Here, the highlighted division falls under the class name “theiastickySidebar”

Step 5: Log in to your Shopify admin dashboard

Step 6: Find the same piece of class name/ID that you identified on your website in Online Store > Themes > Select Action > Edit Code >Template. We found that class name/id in the product.liquid template

Step 7: Copy the desired code in a new file under the Sections sidebar and rename the section to <XXX>-section.liquid

Step 8: Create and save the new template and call the section <XXX>-section.liquid in the new template

Sample name - vajroalt-product.liquid

Step 9: Create a new URL by taking the existing URL of the product display page, removing the section after “?” and replacing it with view=new template_name

For example, we replaced it with view=vajroalt here

Step 10: Share this URL with the Vajro Team. Vajro's developers will add this URL to our database and hide the native product description.

An update will be rolled out for the changes to be reflected in the mobile app


Adding static banners on the Product Details Page or the Cart Page

Xtend also enables you to have banners on both your website and mobile app, or just the mobile app depending on your requirement. If you'd like to have the banner both on the website and mobile app, here's what you need to do.

Step 1: Log in to your Shopify admin dashboard

Step 2 (a): Create a new section under their liquid code with the desired banner image

Step 2 (b): If you wish to have the banner only on their mobile app, open the Vajro Dashboard > Xtend> Select the Page and Location for the banner.

Step 3: Under Type, select the option as ‘HTML’ and input the code for displaying custom videos/images/gifs.

Step 4: Create a new URL by taking the existing URL of the product display page, removing the section after “?” and replacing it with view=new template_name

For example, we replaced it with view=vajroalt here

Step 5: Share this URL with the Vajro Team. Vajro's team will add this URL to our database and hide the native product description.

An update will be rolled out for the changes to be reflected in the mobile app


Using Xtend Dashboard

The snippet of code given below can be used on the Vajro Mobile App builder. Here's how you can access and use Xtend from the Vajro dashboard

Step 1: Go to the Xtend on the dashboard

Step 2: Select the page that you'd like to customize

Step 3: Select the Location of your customization on that page

Step 4: Select the type as HTML

These lines of code appear by default on your Xtend HTML Editor.

(We recommend that you do not make changes to the code above the comment line, "<!-- The above code is for internal purpose only -->")

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Use case Title</title>
<script>
window.appInfo = {{APP_INFO}}
</script>
<script src="Custom-Script-Source"></script>
<!-- The above code is for internal purpose only -->

<style>
<!-- 1. Add style to your banner using CSS here -->
</style>

</head>
<body>
<!-- 2. Add image/video/gif/hyperlink here -->
<script>
<!-- 3. Start your script here! -->
</script>
</body>
</html>

Step 5: If you want to add style to your banner, use your custom styles using CSS between the style tags ( <style>, </style> ) that are within head tags (or just above </head> tag)

<style> 
<!-- 1. Add style to your banner using CSS here -->
</style>

</head>


Step 6: Now to add information like an image, include the snippet in the line next to the <body> tag

Note: Replace URL with the URL of the image source, and add the respective class names.

<div class="class-name">
<img class="image-class" src="URL">
</div>

Similarly, to add a video/ GIF, include the snippet below next to the <body> tag, replace the URL with the URL of the video/GIF source, and replace the placeholders of class names with the relevant class names.

<div class="class-name">
<video class="video-class" src="URL">
</div>

To add a hyperlink, include the snippet next to the <body> tag, replace "URL" with the URL of the page you want to redirect users to, Text with the Hyperlink text of your choice, and replace the placeholders of class names with the relevant class names.

<div class="class-name">
<a href="URL" class= “class-name”>Text</a>
</div>

Step 7: To your image/video/GIF to a particular product page, include this snippet between <script>, </script> tags that are within the body section, and simply replace ‘123456’ with the respective Product ID

<script>

<!-- Start your script here! -->
const banner = document.getElementById('banner');

VajroSDK.subscribe(VajroSDK.Triggers.ON_PAGE_LOAD, (appContext, product)=>{
let { productId, collection } = product;
if (productId === '123456'){
banner.addClassList('show');
}
});

</script>

Psst! Here's how you can find the Product ID:

Step 1: Go to your Shopify Admin Dashboard

Step 2: Go to Products and select the respective product

Step 3: In URL, the highlighted part is your Product ID. Copy it and paste it as your product ID in the snippet


Examples of Customized Layouts


Did this answer your question?