Shopify has announced one of its biggest updates:  Online Store 2.0. With Online Store 2.0 themes, you can easily place the badges on your product pages using app blocks. 


In this article, we'll walk you through the steps to integrate the Prime badges into your 2.0 store.


Note: If you have problems with adding the badges or want to change the position of the badges 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 Prime App block under Apps.




5. Drag and drop the block to the location you want to display the Badges. We recommend placing it below the product title.




6. The badge can be stylized via app block options (optional):

  • Group: Select the badge group that you want to display
  • 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 Badge 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.