Integrate Preview Badge on Product Page in Shopify Theme

This guide provides clear instructions on how to integrate a product preview badge, typically used for displaying star ratings, directly beneath the product title on your Shopify store's product pages. Instructions are provided for both Shopify 2.0 and Vintage (1.0) themes.

For Shopify 2.0 Themes

Shopify 2.0 themes leverage a flexible block-based system, making the installation of the preview badge straightforward through the theme editor.

Access Theme Customization:

• Log in to your Shopify admin panel.
• Navigate to Online Store > Themes.
• Locate your active theme and click the "Customize" button.

Select Product Template:

• In the theme editor, use the dropdown menu at the top of the page (which usually displays "Home page") to select the specific "Product template" where you wish to insert the preview badge.

Add Preview Badge Block:

• From the left sidebar, within the product section (e.g., "Product Information"), click on "Add Block."
• From the list of available blocks, select "Preview Badge."

Position and Save:

• Once added, you can easily adjust the position of the "Preview Badge" block by dragging it up or down within the left sidebar to place it directly below the product title.
• After positioning, click the "Save" button in the top right corner to apply your changes.
  

Note: If your store utilizes multiple product templates, repeat these steps for each relevant template. The same process can also be applied to add the preview badge to collection or category pages if supported by your theme's structure.

For Shopify Vintage (1.0) Themes:

For stores using Shopify Vintage (1.0) themes, installing the preview badge typically requires direct insertion of code into the theme's Liquid files.

Access Theme Code Editor:

• Log in to your Shopify admin panel.
• Navigate to Online Store > Themes.
• Locate your active theme, click the "Actions" button, and then select "Edit code."

Locate Product Template File:

• In the file explorer on the left, find and open the relevant product template file. This is a commonly named product.liquid or product-template.liquid, usually found within the Sections or Templates directories.

Insert Code Snippet:

• Within this file, identify the section of code responsible for rendering the product title.
• Paste the provided preview badge code snippet (which you find out in the Proviews >> Settings >> Other Widgets >> Preview Badge) directly beneath this product title code.

Save Changes: After adding the code, click the "Save" button in the top right corner of the code editor.

Note: If your store uses multiple product templates, you will need to add the same code snippet to all corresponding product liquid files. If you wish to add the preview badge to collection or category pages, apply the same code to their respective liquid files (e.g., collection.liquid or collection-template.liquid).