Shopify has announced one of its biggest updates: Online Store 2.0. With Online Store 2.0 themes, you can easily place the Highlight box on your product pages using app blocks.
In this article, we'll walk you through the steps to integrate the Smart highlight into your 2.0 store.
Note: If you have problems with adding the highlight or want to change the way the highlight icons looks or for any other request please raise a support ticket here. We will take care of it.
Steps
1. Open your Shopify admin.
2. Go to Online Store >Themes > click Customize.
3. Select a product template.
4. Next, click Add Block from the left sidebar and select Smart App block under Apps.
5. Drag and drop the block to the location you want to display the highlight box. We recommend placing it below the product price.
6. The box can be stylized via app block options (optional):
- Group: Select the highlight group that you want to dispay
- OuterClass: CSS classes passed using this parameter will be applied to the DIV containing the badges.
- OuterStyle: Pass any custom CSS elements using this parameter and they will be applied to the badge container.
Similarly for the Innerclass, Innerstyle, etc. We have the following in-built classes that can be used to manage the badge placement, which you can find here.
7. Hit the save button.
8. The Highlight box will be visible on the product pages.
If you have problems with adding the button or want to change the way the button looks or for any other request please raise a support ticket here. We will take care of it.