January 23, 2025 at 5:13 pm | Design, Programming, web, Wordpress.

A while back while I was working on the Instacart blog, I got the opportunity to create a product carousel to help the content creators link products they talked about in their blog posts back to cart items in Instacart. The idea was to make it easier for people looking at recipe and blog content to just click to add items right to their cart.

The product carousel shortcode works in three different and unique ways for the blog content creator.

#1 – Page Scanning

The product shortcode scans the page at render time and compiles a list of product IDs that it takes from links in the page. In this way the content creator does not have to think about the product IDs or images or links. They just drop the short code in and it takes care of the rest. The product IDs are then stored in WordPress as a transient so the page does not have to perform the product image and price lookup at a later time.

#2 – An array of product IDs or links

The product shortcode can also be given a list of links or product IDs that can then be rendered and turned into a product carousel at runtime. The benefit of this is that the product links or IDs do not have to be present in the page in order to link back to products that could be relevant to the user.

#3 – A present list of products by category

The third way the product carousel can be used is by passing it a name of a product category that has a prebuilt set of products (eg. Dairy, Barbecue, Drink Mixers, Holiday). This idea has the added benefit of storing a list of reused categories of products that can be updated and changed according to the season or need. If the blog creator has a post about baking, they can include a quick short code which brings in a prebuilt set of baking items.

The prebuilt list of categories are themselves stored in the WordPress admin panel and can be expanded or removed as needed. The entire category list can be rebuilt on save or it can be rebuilt on a weekly basis based on a CRON script that runs in the background. Each of the categories is again stored as a WordPress transient in database to cut down on page render time.

These product carousels can be used in tandem and pages can have multiple product carousels used in different ways.

Interesting note

The original iteration of this tool ran into problems related to the image and price information that was taken from product page meta information of each product. The Instacart product front end was rate limiting the tool (ie. Throwing up a captcha block because of the amount of product pages being looked up ) that caused some product carousels to render while others did not. After debugging I found a way to use Instacarts own graphQL product endpoint to get the image and product price information that was needed in a much simpler way.