If your Try Before You Buy toggle is moving to the right side of the Add to Cart button, this may be because your theme handles the product CTA buttons with a grid layout.
This guide provides instructions on how to handle CSS styling for the positioning of the TBYB toggle, when a theme handles the layout of your product CTA buttons with a Grid layout. Follow these steps to ensure the TBYB toggle is styled correctly.
Understanding why this needs to be done within the theme CSS
As our button app block gets rendered from Shopify themselves, any CSS on its container should be only available for those who need to make changes to better fit their theme.
However, as it doesn't take into account an app block, such as the TryNow button, the layout on wider screens can look something like this when the TBYB toggle is switched off:
And like this when the TBYB toggle is switched on:
Find the container
First, you'll need to find the container for your product page CTA buttons, which should be wrapping both the original add-to-cart and our TryNow buttons. It is usually named with classes like product-action__buttons, for example.
This CTA button container might have rules that change the grid-template-columns to a different distribution when reaching a certain width of the viewport; i.e.:
@media screen and (min-width: 1500px)
.product-action__buttons {
grid-template-columns: repeat(2,minmax(0,1fr));
}
This causes the styling issues.
Add CSS rules
Add the CSS code (below) in the same file, either before or after the previous container rules (above). This positions the container of our TryNow CTA at the same side as the original add-to-cart button, with the already written rules for width and height in your theme.
div:has(trynow-cta-button) {
grid-row: 2;
grid-column: 1;
}