Nvzn Easy ARt Virtual Previews

AR Button Custom CSS

Customizing the Nvzn3D AR Button with CSS

The Nvzn3D App Block for Shopify provides a range of built-in customization options such as colors, fonts, icon size, and corner radius. However, if you need further customization beyond these options, you can apply custom CSS in Shopify's Theme Editor.

Adding Custom CSS in Shopify

If you haven’t done so already, first, ensure that your GA4 account is linked to your Shopify store. This can be done using the official Google & YouTube sales channel app in Shopify.

Open Shopify Admin.
Navigate to Online Store > Themes.
Click Customize for your active theme.
Locate the Custom CSS section in the Theme Editor (usually under "Theme Settings").
If there's already CSS in the box, do not remove it - simply add your styles after the existing code.

To apply custom styles, use the following CSS selectors to target the AR button and the button label:

#ar-btn {
/* Button styles */
}

#ar-btn #btn-text-container {
/* Button label styles */
}

Save the changes to the Theme

Customization Examples

Use these CSS snippets to cusomize your AR button to suit your needs.

Adjusting Font Size

Set the button label font size using rem, px, or % values:

#ar-btn #btn-text-container {
font-size: 1rem !important;
}

Changing Button Padding

Padding controls the space inside the button:

#ar-btn {
padding: 8px 18px !important;
}

Adjusting Button Margin

Margin sets the space outside the button, affecting its positioning:

#ar-btn {
margin: 5px 10px !important;
}

Making the Button Full Width

To make the button span the full width of its container:

#ar-btn {
width: 100% !important;
display: flex !important;
justify-content: center !important; /* Ensures text and icon are centered */
align-items: center !important;
}

Align the Button Center

To align the button in the center of the container:

#ar-btn {
display: flex !important;
margin-left: auto !important;
margin-right: auto !important;
justify-content: center !important;
align-items: center !important;
}

Align the Button to the Right

To align the button to the right side of the container:

#ar-btn {
display: flex !important;
margin-left: auto !important;
justify-content: flex-end !important;
align-items: center !important;
}

Setting a Fixed Button Height

To specify a fixed height for the button:

#ar-btn {
height: 50px !important;
display: flex !important;
align-items: center !important;
}

Mixing and Matching Styles

You can combine these styles to achieve the look you want. For example, to create a full-width button with a fixed height and customized padding:

#ar-btn {
width: 100% !important;
height: 50px !important;
padding: 10px 20px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}

Final Notes

Always use the CSS term !important to ensure your styles override the default ones.
Be mindful of how these changes affect the overall layout.
If you experience unexpected results, check for conflicting styles in your theme.

If you have any questions, send us a message via the Support Request form.