We understand how crucial it is for every element on your store to blend seamlessly, creating that custom-built feel that maintains a professional look while actively engaging with your customers through our quizzes. To help achieve this harmony, we've put together a step-by-step guide on how to round the corners of the embedded quiz element when opting to retain the same section margin as your theme, ensuring a cohesive and integrated appearance. These customization steps will ensure your quiz not only enhances the aesthetics of your store but also feels like an integral part of your site, enriching the user experience.
Steps:
Embed Your Quiz: Ensure your quiz is embedded within your store. If not, refer to article for instructions.
Access Shopify Admin: Navigate to Online Store -> Themes and click Customize.
3. Enable Section Margins: In the Shopify App block section, ensure "Make section margins the same as theme" is enabled.
4. Customize Theme Settings: Locate Custom CSS in the theme settings.
5. Input CSS Code: Insert the following code:
.ppf-iframe { border-radius: 1.2rem; }
Adjust the border-radius value as needed.
Note: Remember to save your settings to apply the changes live.
Pro-tip:
You can inspect your Shopify store's page to maintain a consistent border radius across all elements, such as buttons and product cards.
By implementing these steps, you'll seamlessly integrate rounded corners into your quiz embed, enhancing the visual appeal of your Shopify store.
If you need help with this please don't hesitate to contact our support team using the in-app chat toggle or by e-mail at support@trylantern.com