Place VTO in a custom Shopify theme

Most Online Store 2.0 themes let you add Aabhas VTO from the theme editor. A custom product section might not expose app blocks, or it might render the block as a separate full-width section below the product information.

Use the native Shopify app-block integration below when VTO must appear at a precise location, such as beside Add to cart. This keeps the installed Aabhas extension responsible for its Liquid, CSS, JavaScript, product context, consent, history, and analytics.

Do not create a copied aabhas-vto-custom.liquid snippet, upload aabhas-vto.js to theme assets, or link directly to an extension asset URL. Copied files do not automatically receive Aabhas updates and can conflict with the installed app block.

The custom section should only:

Accept Shopify app blocks.
Render the installed Aabhas block at the intended position.
Control the space allocated by the surrounding theme layout.

Enable app blocks in the product section

Open the section that renders the product form, commonly sections/main-product.liquid. Add the generic @app block to its schema:

{
  "name": "Main product",
  "settings": [],
  "blocks": [
    {
      "type": "@app"
    }
  ],
  "presets": [
    {
      "name": "Main product"
    }
  ]
}

If the section already has a blocks array, add { "type": "@app" } to that array. Do not add a limit to an @app block.

Then render app blocks at the intended location:

{% for block in section.blocks %}
  {% case block.type %}
    {% when '@app' %}
      <div class="product-vto-slot">
        {% render block %}
      </div>
  {% endcase %}
{% endfor %}

Shopify documents this native pattern in App blocks for themes.

Example: VTO beside Add to cart

The following layout gives VTO 40% and Add to cart 60% of the available action width:

{% assign vto_width = section.settings.vto_width_percent | default: 40 %}
{% assign cart_width = 100 | minus: vto_width %}

<div
  class="product-primary-actions"
  style="--vto-track: {{ vto_width }}fr; --cart-track: {{ cart_width }}fr;"
>
  {% for block in section.blocks %}
    {% case block.type %}
      {% when '@app' %}
        <div class="product-vto-slot">
          {% render block %}
        </div>
    {% endcase %}
  {% endfor %}

  <button type="submit" class="product-add-to-cart">
    Add to cart
  </button>
</div>

Add the corresponding layout rules to the custom section stylesheet:

.product-primary-actions {
  display: grid;
  grid-template-columns:
    minmax(0, var(--vto-track))
    minmax(0, var(--cart-track));
  align-items: stretch;
  gap: 12px;
}

.product-vto-slot,
.product-vto-slot > .shopify-block,
.product-vto-slot .aabhas-vto-block {
  width: 100%;
  min-width: 0;
}

.product-add-to-cart {
  width: 100%;
  min-height: 56px;
  height: auto;
}

@media (max-width: 749px) {
  .product-primary-actions {
    grid-template-columns: 1fr;
  }
}

The mobile stack is intentional. Keeping the full VTO control and Add to cart in a narrow two-column phone layout can truncate labels and reduce the tap area.

When the row also contains a wishlist

Use a fixed third track so the 40/60 split applies to the remaining action width:

.product-primary-actions {
  grid-template-columns:
    minmax(0, var(--vto-track))
    minmax(0, var(--cart-track))
    auto;
}

Keep the wishlist in its own wrapper after the Add to cart button. On mobile, place it on a separate row rather than shrinking both primary actions.

Make the width editable

Add this setting to the custom product section’s existing settings array:

{
  "type": "range",
  "id": "vto_width_percent",
  "label": "VTO width",
  "min": 25,
  "max": 60,
  "step": 5,
  "unit": "%",
  "default": 40
}

The merchant can then change the allocation from the product section settings without editing CSS. This setting changes the layout allocation, not the Aabhas runtime or downloaded resources.

Configure the font

The Aabhas block inherits the surrounding theme font by default. To match the product form, apply the theme’s existing font variable to the slot:

.product-vto-slot .aabhas-vto-block {
  font-family: inherit;
}

For a theme that defines separate display and body fonts, use the appropriate existing variable. For example:

/* Match the Add to cart display font. */
.product-vto-slot .aabhas-vto-block {
  font-family: var(--font-heading-family, inherit);
}

Custom themes may use different names such as --font-body-family, --font-heading-family, --display-font, or --ui-font. Reuse a variable already defined by that theme; do not load another font only for VTO unless the merchant has approved the additional page resource.

Configure text, colors, and corners

Select the nested Aabhas VTO block in the Shopify theme editor. The block provides supported controls for:

Button text
Text and logo color
Background color
Corner radius
Upload modal title and guidance
Upload and reuse-photo labels
Floating launcher image and position

Use those controls instead of overriding Aabhas colors in the custom section. Keeping one source for presentation settings prevents conflicts after an extension update.

Activate and verify

Open Online Store → Themes → Customize.
Open a product template that uses the modified product section.
Select the main product section and choose Add block → Apps → Aabhas VTO.
Place the block in the action area and configure its supported settings.
Remove any previous standalone Aabhas Apps section from the same product template.
Save and test an eligible product in a private browser window.

Verify that the page contains exactly one widget by running this in the browser console:

document.querySelectorAll('.aabhas-vto-block').length

The result must be 1. Also test product variants, photo upload, use-last-photo, generation, Add to cart, the mobile layout, and the optional floating launcher before publishing the theme.

For theme-owned upload and result layouts, see Modal customization.