Mastering Your Shopify Delivery Bar & Product Cards: Community-Driven Code Solutions

Hey everyone! Ever found yourself wrestling with a piece of AI-generated code or a custom feature that's almost perfect but just needs a little tweak? We've all been there. It's a common story in the Shopify community, and a recent thread started by Tammy_29 perfectly illustrates how valuable those discussions can be. She was looking to fine-tune her store's delivery bar and product cards, and the community, especially fellow expert Ploqo, really stepped up with some fantastic, actionable advice. Let's dive into what we learned from their journey, particularly if you're running on the Dawn theme or dealing with similar customizations.

Customizing Your Delivery Countdown Bar

The Initial Setup & Alignment Challenge

Tammy's AI-generated delivery bar on her homepage wasn't perfectly centered, and she wanted to replicate it on product pages. This is a classic case where AI gives you a great start, but the human touch is needed for perfection. Ploqo jumped in with a solid Custom Liquid solution that uses CSS flexbox properties like display:flex, align-items:center, and justify-content:center to ensure everything sits nicely in the middle. The beauty is, once you have the code, you can reuse it.

Implementing the Delivery Bar on Homepage and Product Pages

Here's how to get that consistent delivery bar across your store:

1. Go to your Shopify Admin and navigate to Online Store > Themes.
2. Click Customize on your current theme (most likely Dawn).
   
3. For the Product Page:
   • From the top dropdown, select Products > Default product.
   • Under Product information, click Add block and select Custom Liquid.
     
   • Paste the following code into the Liquid code box. This code includes the styling and script to calculate the countdown and delivery date.
     

     {{ 'component-list-social.css' | asset_url | stylesheet_tag }}
     
       Order within
       0Days
       00Hours
       00Mins
       to get your order by 
       
     {% render 'social-icons' %}
     
     
     

     
   • Drag this block under Buy buttons and click Save.
     
4. For the Homepage (Header):
   • From the top dropdown, select Home page.
   • Under Header, click Add section and select Custom Liquid.
   • Paste the same code into the Liquid code box.
   • Important: Change the first
     line to start like this:

     . This adds a specific class for top bar styling.
     
   • Scroll down to Padding. Set Top and Bottom to 0 to match your announcement bar.
     
   • If you have an old "Delivery announcement" section that was AI-generated, you can now delete or hide it by clicking the bin icon next to it.
     
   • Click Save.

Refining Delivery Date Logic and Social Icons

Tammy quickly realized the initial delivery date calculation was off. This is super important for customer expectations! After some back and forth, Ploqo provided an updated script that correctly implements the following logic for the delivery date:

• Order before 4 PM (the data-cutoff value in the code): That day is Day 1.
• Order after 4 PM (or at the weekend): Monday (next working day) is Day 1.
• Dispatch is on Day 3 (data-dispatch-days="3"). Note: dispatch days only count working days (not Saturday/Sunday).
• Delivery is 3 days after dispatch (data-delivery-days="3"). Note: delivery days count Saturdays but not Sundays.

Tammy also wanted social media icons moved to the left on the top bar and product pages. Ploqo explained that each Custom Liquid block might have its own styling. To move the icons:

1. Open your product page in the theme editor (if not already open).
2. Under Product information, click your Custom Liquid block (the countdown).
3. Find position:absolute;right:3rem within the
4. Click Save.

Addressing Product Card Photo Size

Both Rajweb and Ploqo highlighted that large images can significantly slow down pop-ups and page load times. It's always a good idea to optimize your images for web performance (aim for around 800px wide and under 200KB per image, if possible). Tammy shared the AI-generated product card code, which contains the styling for image sizes. With access to this code, an expert can easily adjust the width and height properties or the object-fit and aspect-ratio in the CSS for classes like .ai-product-cards-{{ ai_gen_id }}__media img to make images smaller without affecting the actual product images.

This thread is a fantastic example of the Shopify community at its best. From initial alignment issues to complex delivery date logic and dynamic product showcases using metafields, store owners like Tammy_29 can achieve highly customized results with a little help and some clever code. Always remember that even AI-generated code can be refined, and tools like metafields are incredibly powerful for creating flexible, scalable content. Don't be afraid to ask for help and dig into the code – that's where the real magic happens on Shopify! If you're looking to start your own online store and dive into these kinds of customizations, consider exploring what Shopify has to offer.