add vendor name to collection

[Luxluxlux360]

Hi,

I'd like to add the vendor name to my collection page above the title. Also add 1px border rectangle around my 30% discount badges. my site is https://lux360.net/collections/all?uff_otqj2k_vendor=Hogan%20Pre&usf_take=80

[DaisyVo]

Hi @Luxluxlux360 

To complete your border requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

.product__badge.product__badge--sale {
    border: solid 1px rgba(0, 0, 0, 0.2);
}

Here is the result: https://prnt.sc/Hnfvm2wl-5ve

For the vendor name request, the theme you're using is Pipeline, which is not free, so we can't directly inspect its code. Here's an example using the Dawn theme for illustration:

1. Locate the product card file in your Pipeline theme.
2. In the Dawn theme, the equivalent file is card-product.liquid.
3. Add the following code snippet to the appropriate section in your product card file

<p>Vendor name: {{ card_product.vendor }}</p>

This will display the vendor name as shown in this example: Result Screenshot.

For reference, here's how it would look in the Dawn theme: Code Screenshot.

I hope this helps

Best,

Daisy

[Amanda_Fordeer]

Hi @Luxluxlux360,

In case you require support from a 3rd party app, you may consider utilizing our Badges feature.

I. Display Vendor names, in 2 ways:

1: For instance, if you have 3 vendors named A, B, and C, create 3 text badge campaigns for each vendor while using the Product vendor feature (in Product settings > Advanced). The app will automatically assign the correct products to the corresponding vendor to display.

2: If you prefer to create only one campaign, you can utilize the Add metafield feature (in the Badge content section). However, for this method, you will need to input metafields containing the names of vendors for each product beforehand.

II. Custom discount badges: Create a text badge and add the variable {discount_percentage}. Adjust the border in the Advanced section (named Stroke in the app).

Note: You can create Price badges if you wish to position the discount badges next to the price.

If you need more assistance, feel free to reach out to me ^^