I would like to put badges in my product page under add to cart button

Store Design
1

11
111832×859 214 KB

just like oodie webiste I would like to put badges, I am currently using Turbo theme on Shopify, our website is cokodive.com

22
22910×705 407 KB

Is anyone can share how I would do this? Thanks!

3

You can go to your store admin > Sales channels > Online Store > Themes > Customize > click Homepage dropdown menu > Products > Default products > click + Add block below Buy buttons, select Icon with text section.

Best regards,

Dan from Ryviu: Reviews & QA

4

There are two ways to put badges on product pages:

  1. Go to Customize page from current theme and locate the product page to add the badges directly under purchase button by adding a new block.
  2. Check if the elements on your product page are from default theme. If so, copy the class name of product variants block and search out related liquid files, then add the badges related codes at the end of the variant block codes. After saving properly, the badges will display correctly. If your product page elements are designed by third-party apps, you need to get help from app support team directly.
5

Hi @cokodive,

Please go to Customize > Products > Default product > Choose Product section > Add ‘Icon with text‘ block.

Screenshot
Screenshot702×296 17.3 KB

Hope it is clear to you

6

Hi @cokodive ,

Please refer the video below using which you can add multiple tags on product page as well as on collection page using the metafield and metaobjects.

You can modify the designs of these tags as well. Hope this will helps.

7

Hi @cokodive

Step 1: Open Theme Code

Go to Online Store → Themes → Edit code.
Open sections/main-product.liquid (or in some themes main-product-form.liquid).

Step 2: Locate the Add to Cart Button
Search for:

<button
  type="submit"
  name="add"

Step 3: Paste Your Badge Code Below
Right underneath the Add to Cart button, paste your badge snippet:

<ul class="icon-with-text icon-with-text--vertical list-unstyled">
  <li class="icon-with-text__item">  
    <!-- First Icon -->
    <svg width="32" height="32" ...> ... </svg>
    <span class="h4 inline-richtext">Free Shipping Over $100</span>
  </li>

  <li class="icon-with-text__item">  
    <!-- Second Icon -->
    <svg width="32" height="32" ...> ... </svg>
    <span class="h4 inline-richtext">30 Day Returns</span>
  </li>

  <li class="icon-with-text__item">  
    <!-- Third Icon -->
    <svg width="32" height="32" ...> ... </svg>
    <span class="h4 inline-richtext">4+ Million Customers Worldwide</span>
  </li>
</ul>

Step 4: Add Styling (Optional)
In your theme.css (or base.css) add:

.icon-with-text {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.icon-with-text__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-with-text svg {
  flex-shrink: 0;
}

.icon-with-text span {
  font-size: 14px;
  font-weight: 600;
  color: #000; /* black text */
}

Kindly feel free to get back to me if you need any further assistance.
If helpful, please like all posts. :white_check_mark: