Skip to main content
All CollectionsGetting Started with TryNowAdditional Customizations
My Try Before You Buy toggle moves to the right of the Add to cart button. How do I fix this?
My Try Before You Buy toggle moves to the right of the Add to cart button. How do I fix this?
Updated over a year ago

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;
}

Did this answer your question?