Skip to main content
Manage your template: Smart Styling

This guide will take you through how to use Smart Styling feature effectively, as well as provide best practices to ensure optimal results

Updated over 2 weeks ago

📖 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

  1. In the App admin, go to Integration > Template library.


  2. Find the target template you want to work with, and click Customize to open the Visual Editor.

  3. In the left-side menu of the Visual Editor, select Smart Styling.

Fetch Styles from Selected Theme

From an existing theme

  1. Click Select source style and choose From an existed theme from the dropdown.

  2. Click the Source Theme dropdown to see a list of Shopify themes currently installed in your store.

  3. Select the theme whose style settings you want to copy.

  4. 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

  1. Click Select source style and choose From a URL from the dropdown.

  2. Input your URL in the Your URL

  3. 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

  1. Once you are satisfied with the fetched styles, click Save to apply and lock in the changes within the Visual Editor.

  2. If needed, you can continue customizing individual elements of the template to fit your specific needs after saving.

  3. 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:

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.

Did this answer your question?