How do I add custom content to each product in a collection list?

Solved

How do I add custom content to each product in a collection list?

_rs1
Shopify Partner
2 0 1

Hi everyone
I'm a bit new to Shopify and im trying to create theme app extension for app that will add some custom content, depending on product. Already did it for product page, but i can not find anything anywhere on how to add custom content to each product in the collections list? Or at least how can i access products ids in JS in the collections? Thanks in advance!

Accepted Solution (1)
Samia_Akram22
Shopify Partner
60 10 16

This is an accepted solution.

@_rs1 

Certainly! When developing an app for Shopify that adds custom content to collection pages without requiring manual theme edits, there are a couple of methods you can consider:

### JavaScript Injection:
1. App Installation and Configuration:
- After your app is installed, it can dynamically inject JavaScript onto the Shopify store's frontend.
- This injected JavaScript can run on collection pages to gather product information like IDs, titles, etc., without directly altering the theme files.

2. Identifying Products Dynamically:
- Your injected JavaScript can navigate through the webpage's elements or communicate with Shopify's APIs to collect product details from the collection pages.
- With this data, your app can decide what custom content to display based on predefined rules or conditions.

3. Displaying Custom Content:
- Once the products are identified, your JavaScript can dynamically add the desired custom content to the collection pages. This could involve appending HTML elements or modifying the webpage's structure based on the collected product data.

### App Proxies:
Alternatively, using app proxies can achieve a similar goal:

1. Creating an App Proxy:
- Develop an app proxy within your app that generates custom content based on collection or product IDs.

2. Configuring the App Proxy:
- Within your app's settings or admin panel, allow users to activate your app's functionality for specific collections or products.
- Your app logic will then generate the required content accessible through the app proxy URL.

3. Rendering Content via App Proxy:
- The content served through the app proxy can seamlessly integrate into the collection pages without needing direct alterations to the theme.

These approaches aim to enable your app to dynamically insert custom content onto collection pages without requiring manual theme modifications. However, it's essential to ensure compatibility with various themes and adhere to Shopify's API guidelines to maintain compliance with their terms and conditions when interacting with storefront content.

Problem Solved? ✔Accept and Like solutions to help future merchants.

View solution in original post

Replies 5 (5)

Samia_Akram22
Shopify Partner
60 10 16

@_rs1 Sure, here's a simplified guide on how to add custom content to each product in a collection list in a Shopify theme app extension:

1. Locate the Collection Template:
Find the file in your Shopify theme that controls how products are displayed within a collection. Look for a file named like `collection.liquid`.

2. Loop Through Products:
Inside this file, use code to loop through each product in the collection using Liquid syntax:

```liquid
{% for product in collection.products %}
<div class="product">
<h2>{{ product.title }}</h2>
<p>{{ product.description }}</p>
<!-- Add your custom content here -->
</div>
{% endfor %}
```

This loop helps display information for each product in the collection.

3. **Add Your Custom Content:**
Within the loop, insert your custom content. This could be additional HTML elements, related products, badges, or anything relevant to each product.

4. **Access Product IDs with Javascript&colon;**
If you need to access product IDs in JavaScript, add data attributes to HTML elements using Liquid:

```liquid
{% for product in collection.products %}
<div class="product" data-product-id="{{ product.id }}">
<!-- Product content -->
</div>
{% endfor %}
```

Later, you can use JavaScript to access these data attributes to retrieve the product IDs and perform actions based on them.

Remember, these changes should be made within the Shopify theme's code editor in the Shopify Admin. Identify the collection template file and use Liquid and HTML to add your custom content for each product in the collection list.Hope this helps.

Problem Solved? ✔Accept and Like solutions to help future merchants.
_rs1
Shopify Partner
2 0 1

@Samia_Akram22thank you for your detailed answer! That was my one (and only) way of thinking how to do that, but that requires an access to theme and manually add code each time. Unfortunately, what i need, is an independent solution from the theme, for example - client just needs to install an app and enable theme extension in the theme configuration - and everything else is automatic. I managed to do that for product page, but not for collections 😞 And i'm not sure is it even possible?

Samia_Akram22
Shopify Partner
60 10 16

This is an accepted solution.

@_rs1 

Certainly! When developing an app for Shopify that adds custom content to collection pages without requiring manual theme edits, there are a couple of methods you can consider:

### JavaScript Injection:
1. App Installation and Configuration:
- After your app is installed, it can dynamically inject JavaScript onto the Shopify store's frontend.
- This injected JavaScript can run on collection pages to gather product information like IDs, titles, etc., without directly altering the theme files.

2. Identifying Products Dynamically:
- Your injected JavaScript can navigate through the webpage's elements or communicate with Shopify's APIs to collect product details from the collection pages.
- With this data, your app can decide what custom content to display based on predefined rules or conditions.

3. Displaying Custom Content:
- Once the products are identified, your JavaScript can dynamically add the desired custom content to the collection pages. This could involve appending HTML elements or modifying the webpage's structure based on the collected product data.

### App Proxies:
Alternatively, using app proxies can achieve a similar goal:

1. Creating an App Proxy:
- Develop an app proxy within your app that generates custom content based on collection or product IDs.

2. Configuring the App Proxy:
- Within your app's settings or admin panel, allow users to activate your app's functionality for specific collections or products.
- Your app logic will then generate the required content accessible through the app proxy URL.

3. Rendering Content via App Proxy:
- The content served through the app proxy can seamlessly integrate into the collection pages without needing direct alterations to the theme.

These approaches aim to enable your app to dynamically insert custom content onto collection pages without requiring manual theme modifications. However, it's essential to ensure compatibility with various themes and adhere to Shopify's API guidelines to maintain compliance with their terms and conditions when interacting with storefront content.

Problem Solved? ✔Accept and Like solutions to help future merchants.
pixobe
Shopify Partner
8 0 3

Hey did you figure it out? I want to inject a custom product template, which merchant can choose and assign to certail products (not for all), is that possible to create a new template programmatically using app or app extension?

afsan
Shopify Partner
7 0 1

Hey, did you find a solution to this issue? I'm trying to do the same thing but can't find enough resources for it. 

S Afsan Rahmatullah
Software Engineer