Shopify Delivery Bar & Product Cards: Community Fixes for Alignment, Speed & Customization

Hey fellow store owners! It's your Shopify expert here, diving into another fantastic community discussion that really hit home for a lot of you. We recently saw a great thread started by Tammy_29, who was wrestling with some common customization challenges on her Shopify store, specifically around a delivery countdown bar and product cards. It’s a perfect example of how powerful our community is, with folks like Ploqo and rajweb jumping in to offer detailed, actionable solutions.

Making Your Delivery Bar Work Harder (and Smarter!)

Tammy's first hurdle was getting her AI-generated delivery countdown bar to look just right – specifically, getting the text perfectly aligned in the center. She also wanted to extend this handy feature to her product pages, keep its size consistent with the announcement bar, and even add social media icons. And let's not forget the crucial part: getting that delivery date calculation spot-on!

The delivery bar is such an important trust signal for customers, so getting these details right is key. Ploqo provided an excellent, comprehensive Custom Liquid solution that addresses all these points. Here's how you can implement it for a consistent, accurate delivery bar across your store:

Step-by-Step: Implementing the Dynamic Delivery Bar

This code will give you a sleek, functional delivery bar that dynamically calculates delivery dates based on your cutoff times and processing days, even accounting for weekends.

Update Your Product Page Delivery Bar:
- From your Shopify admin, go to Online Store, then click Themes.
- Find your current theme (likely Dawn, as Tammy was using), click Actions, then Customize to open the theme editor.
- In the theme editor, use the top dropdown menu to navigate to a Product page (e.g., "Default product").
- Under the Product information section, locate your existing "Custom Liquid" block for the countdown bar. If you don't have one, click Add block and select Custom Liquid.
- Delete any old code in the Liquid code box and paste the following updated code:
```
{{ 'component-list-social.css' | asset_url | stylesheet_tag }}

  Order within
  0Days
  00Hours
  00Mins
  to get your order by 
  {% render 'social-icons' %}
```
- Configure the Top Announcement Bar:
  - While still in the theme editor, navigate back to your Home page using the top dropdown.
  - Under the Header section, find your existing "Custom Liquid" block for the delivery bar. If you used the AI generator, you likely have one. If not, add a new Custom Liquid block.
  - Paste the exact same code as above into the Liquid code box.
  - Important: You'll need to modify the first
    line slightly to ensure the social icons display correctly and the bar integrates well with your header. Change:
    to:
  - Adjust Padding (for top bar): For a flush look that matches your announcement bar, scroll down to the "Padding" settings for this Custom Liquid block and set both Top and Bottom padding to 0.
  - Handle the Old Bar: Yes, you can delete the AI-generated "Delivery announcement" section you were originally using if it's causing conflicts or not needed anymore.
  - Add Social Media Icons:
    - Click the Theme settings gear icon (usually bottom-left) in the theme editor.
    - Select Social media.
    - Paste your social media links into the relevant fields. Only the ones you fill in will be displayed.
  - Save Your Changes: Remember to click Save after each set of changes!
  The code dynamically calculates the delivery date. It considers a 4 PM cutoff (data-cutoff="16:00"), 3 dispatch days (data-dispatch-days="3"), and 3 delivery days (data-delivery-days="3"). Crucially, it skips weekends for dispatch days and only Sundays for delivery days, just like Tammy needed. It's a robust solution for managing those shipping expectations!
  
  Supercharging Your Product Cards: Previews, Performance, and Personalization
  
  Tammy also brought up a fantastic point about her "What's Included?" product cards. She noticed they were a bit slow to load, and she wanted small preview images next to the text to make it more engaging. Plus, she needed the ability to feature different products on these cards for each listing. This is where Shopify's metafields really shine!
  
  Step-by-Step: Adding Dynamic Product Previews with Metafields
  
  This approach lets you hand-pick related products for each product page, showcasing them with small, clickable previews.
  1. Create a Product Metafield for "Included Products":
    - From your Shopify admin, go to Settings, then Custom data (or "Metafields and metaobjects" in older interfaces), then click Products.
    - Click Add definition.
    - Name it Included products. The Namespace and key will auto-fill (e.g., custom.included_products).
    - Under Type, select Product, then change "One product" to List of products.
    - Click Save.
  2. Assign Products to Your Metafield:
    - Go to Products in your Shopify admin and open a product listing.
    - Scroll down to the Metafields section and click on Included products.
    - Select the products you want to feature as "what's included" for that specific listing. Repeat for each relevant product.
    - Click Save.
  3. Add the Preview Images Custom Liquid Block:
    - Go back to the theme editor for your Product page.
    - Under Product information, add another Custom Liquid block.
    - Drag this new block directly under your "What's Included?" text link.
    - Delete any old code and paste this into the Liquid code box:
```
{%- assign items = product.metafields.custom.included_products.value -%}
{%- if items != blank -%}
  
    {%- for p in items -%}
      {%- if p.featured_image -%}
        
      {%- endif -%}
    {%- endfor -%}
  
{%- endif -%}
```
    - Click Save. Now, customers will see small, clickable product previews that open your "What's Included?" pop-up!
  Addressing Product Card Image Size and Performance
  
  Tammy also noted that her main product card images were too large, contributing to a slow pop-up experience. This is a super common issue! While the AI-generated code for the product cards (which Tammy kindly shared in the thread) does use product.featured_image | image_url: width: 900, ensuring your original images are optimized before upload is always the first line of defense. Ploqo hit the nail on the head by suggesting re-uploading card photos smaller (aim for about 800px wide and under 200 KB each).
  
  For fine-tuning the display size of the product card images within the AI-generated section, you'd typically look at the .ai-product-cards-{{ ai_gen_id }}__media CSS rules. The code snippet provided by Tammy shows:
```
.ai-product-cards-{{ ai_gen_id }}__media { display:block; width:100%; aspect-ratio:{{ block.settings.image_ratio }}; overflow:hidden; background:#f3eef3; }
.ai-product-cards-{{ ai_gen_id }}__media img,.ai-product-cards-{{ ai_gen_id }}__media svg { display:block; width:100%; height:100%; object-fit:cover; }
```
  And in the schema, there are settings for image_ratio and mobile_image_ratio. Adjusting these theme editor settings, or even the width: 900 in the Liquid code, can help control the displayed size. If you're looking to start a Shopify store or optimize an existing one, remember that image optimization is crucial for page speed.
  
  It's awesome to see how the community comes together to tackle these specific coding and customization challenges. With a bit of custom Liquid, smart use of metafields, and some good old-fashioned image optimization, you can really elevate your store's user experience. Keep those questions coming, and let's keep building amazing Shopify stores together!