📖 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.
Fetch Styles from Selected Theme
From an existing theme
Click Select source style and choose From an existed theme from the dropdown.
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.
From a URL
Click Select source style and choose From a URL from the dropdown.
Input your URL in the Your URL
Once done, 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.
⚠️ Feature usage
We currently limit the number of times you can use the From a URL feature within each billing cycle. Each time you click the Fetch styles button and select From a URL as the source style, it counts as one use.
You can monitor your usage in the Feature Usages section. If you reach the usage limit for the month, the Fetch styles button will be disabled.
To increase the usage limit, consider upgrading your plan. The usage count will automatically reset at the start of your next billing cycle.
The usage limits vary based on your subscription plan, as outlined below:
Plan | Limitation |
Free plan | Unavailable |
Trial plan | 5 times during the Trial period |
Basic plan | 10 times/month |
Essential plan | 40 times/month |
Professional plan | 60 times/month |
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
For the From an existed theme feature, 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.
To get the most out of the From a URL feature, we recommend selecting URLs from websites with styles similar to your Collection page or Search page. For the best results, consider using Product list pages from other websites that have a design style you want to replicate.
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.
Feel free to reach out to our dedicated support team via chat if you have any questions or require additional assistance.