Magento design options
To alter how Vyne appears on your checkout, you will need to visit the Vyne configuration section found within your Magento panel. This guide will refer to items previously discussed on the Magento configuration panel section, we recommend that you familiarise yourself on the headers before making any changes to the design.
![](https://files.readme.io/8def6ca-Magento_design.png)
Colour Scheme
There are two colour designs built into our checkout widget: light and dark. This ensures that the widget can be used across various checkout page designs.
![Light](https://files.readme.io/7f0c2ba-light.png)
Light
![Dark](https://files.readme.io/864fb70-dark.png)
Dark
Display Promotion on PDP
Selecting Yes will display the promotional content on the product detail page.
Promo Text 1
Alter the first line of text shown in the PDP promotion widget. The default text is Card not in hand?
Promo Text 2
Alter the second line of text shown in the PDP promotion widget. The default text is Checkout securely with your bank.
![Product detail page, here you can see the on-site messaging and amendable text.](https://files.readme.io/5f05b89-PDP.png)
On-site messaging and amendable text included on Product detail page
Good to know
If you are running a promotion specific to Vyne, these amendable text fields are an effective way to communicate this to your customers.
Display Promotion on Mini Cart
Yes will display the promotional content on the mini cart page.
![Mini cart example](https://files.readme.io/d9de2f4-Mini_cart.png)
Mini cart banner
Display Promotion on Basket Page
Yes will display the promotional content on the basket page.
![Basket page example](https://files.readme.io/8e1da7b-Cart.png)
Basket page banner
Compatibility with themes
Vyne for Magento has been built against the stock Luma theme. Whilst the extension should work correctly with most themes, we do not guarantee that the front-end formatting will appear correctly with customised checkout flows and themes.
The Magento application is made up on Modules, Themes and Language packages. To edit how the on-site messaging appears on your site, you will need to access the Themes component within your directory. This is where Vyne specific content will have been injected into the CSS section during installation.
You can edit the injected elements on our CSS file in the vendor/vyne/payments
directory. To easily locate our injected CSS code, you can search for one of the CSS classes, example below.
}
&.promo-checkout-light {
background: url('@{baseDir}images/promo/checkout/white.svg');
width: 273px;
height: 164px;
}
Let us know
We are on hand to support with any formatting or design queries relating to our Vyne for Magento extension. Contact support to learn more about how best to position Vyne on your Magento site.
Updated about 2 months ago