📖 The Smart Styling feature is designed to help users, particularly new users, save time by automatically copying style settings from their Shopify theme to the Boost Visual Editor. By fetching key styling elements from your selected theme, Smart Styling ensures your templates closely match the look and feel of your Shopify store, creating a consistent and professional design.
⚠️ This feature is only applied to customers using the Boost app's TURBO version.
How to use the Smart Styling feature
Access Smart Styling
In the App admin, go to Integration > Template library.
Find the target template you want to work with, and click Customize to open the Visual Editor.
In the left-side menu of the Visual Editor, select Smart Styling.
Fecth Styles from Selected Theme
Click the Source Theme dropdown to see a list of Shopify themes currently installed in your store.
Select the theme whose style settings you want to copy.
Once the theme is selected, click the Fetch Styles button.
After the fetching process is complete, all the detectable style elements from the selected theme will be applied in the Visual Editor, which you can preview immediately in the Preview Screen.
Customize the elements
Once you are satisfied with the fetched styles, click Save to apply and lock in the changes within the Visual Editor.
If needed, you can continue customizing individual elements of the template to fit your specific needs after saving.
If you decide not to apply the fetched styles, simply click the Cancel button. This will revert the template to its previous style settings, removing any fetched elements.
Best Practices for using Smart Styling
While the Smart Styling feature can greatly reduce the time spent customizing templates, there are a few best practices to follow to ensure that your templates look their best and closely align with your Shopify theme:
Understand the Limitations of Smart Styling
Smart Styling currently transfers the following elements from your Shopify theme to Boost’s Visual Editor:
Text Colors: For headings and body text.
Primary Button Styles: Including background, label, and outline colors.
Typography Font Scale: Proportional scaling of text sizes.
Image Ratio: The aspect ratio of images in the template.
Product List Layout: The number of products displayed per row or page.
However, depending on the complexity of your Shopify theme, certain elements may require manual adjustments after the style transfer.
Works Best with Shopify's Free and Selected Premium Themes
Smart Styling is optimized to work with Shopify’s Free themes and a selection of popular Premium themes, including:
Debut (removed on Shopify Theme Store)
Turbo (removed on Shopify Theme Store)
Flex (removed on Shopify Theme Store)
If you are using a different theme, it's important to carefully review the fetched styles and make any necessary manual adjustments to ensure visual consistency.
Adjust Non-Compatible Elements
While Smart Styling is a time-saving feature, not all elements may transfer perfectly. For instance, fonts or certain color schemes might require fine-tuning to ensure a seamless visual match between your Shopify theme and Boost’s templates.
Regularly Review and Test Your Styles
To maintain a professional look across different devices, it's important to review and test the fetched styles on various screen sizes, including mobile and tablet. Some adjustments may be necessary to ensure your design looks polished and responsive.
If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].