Custom Buy Box & Subscription Integration in Shopify Theme for Pet Products Store
GIVE A SH!T is an eco-conscious brand that cares about both pets and the planet. They focus on creating eco-friendly products like compost-certified dog poop bags, cat litter bags, and wipes that help pet owners make sustainable choices every day. Instead of offering just another set of pet care items, GIVE A SH!T puts the environment at the center of everything they do. Their products are designed to reduce waste and give customers an option that feels responsible as well as practical.
The brand has built a loyal audience of pet owners who want convenient solutions without giving up on their values. Customers look to GIVE A SH!T not only for reliable products but also for a shopping experience that reflects the same simplicity and care. As their product line grew, so did the need for their online store to keep pace with customer expectations. The website had to support different product pack sizes, flexible purchasing options, and a design that stayed consistent with the brand’s eco-friendly identity.
For GIVE A SH!T, the goal has always been bigger than just selling; it’s about building trust and making sustainable living easier for everyday households. That commitment is what guided the work on their Shopify store, where we focused on creating a smooth, user-friendly system that matched their values while also preparing the business for growth.
Client Requirement
From the beginning, the client made it clear: they didn’t just need a functional store, they needed a smarter way for customers to shop.
Here’s what they were looking for in detail:
Pack Size Options: For poop bags and cat litter bags, customers should be able to choose between 1-pack, 2-pack, or 3-pack. For wipes, the options needed to be 1-pack, 2-pack, or 4-pack.
Subscription Toggle: Many of their customers prefer regular deliveries. So, a clear option between “One-Time Purchase” and “Subscribe & Save” was essential. This had to integrate seamlessly with their subscription app (Loop Subscriptions).
Guided Buy Box Flow: Instead of overwhelming customers, the process had to be step-by-step: first pick the pack size, then quantity, then purchase type.
Design Consistency: The buy box had to look like it belonged to the brand, not a bolted-on feature. Smooth, branded, and on-theme were non-negotiable.
Mobile Optimization: A large part of their traffic comes from mobile users, so the design needed to load quickly and work perfectly on smaller screens.
Future-Proofing: The client didn’t want to depend on developers for every product change. They wanted a modular setup that could be reused for future products.
At the core, their main need was this: “Give us a buy box that’s smart, branded, fast, and flexible.”
Project Goal
Our goal was to transform their product pages with a custom buy box that:
- Allowed easy selection of product packs.
- Integrated subscriptions without friction.
- Delivered a guided flow that increased clarity and reduced drop-offs.
- Could be reused and managed dynamically using Shopify’s native tools.
We also aimed to balance two important aspects: keeping the design on-brand and ensuring the build was lightweight so site performance wouldn’t be compromised.
Tech Stack
Backend: Shopify
Frontend: Shopify Theme (Liquid, HTML, CSS, JavaScript)
Extensions: Loop Subscriptions App
Others: Shopify product metafields, Shopify Add-to-Cart API
Solution
The project’s success depended on building something simple for the customer yet powerful under the hood. Here’s how we tackled it:
Step 1: Custom Packs Section Using Metafields and Theme Customizer
To meet the client’s need for flexible pack selection across different products, we built a custom packs section for each product template. This section was powered by Shopify metafields and enhanced with theme customizer settings, giving the client full control over which products display pack options.
Instead of hardcoding pack sizes or duplicating templates, we used metafields to dynamically store and retrieve pack configurations like 1-pack, 2-pack, or 3-pack for poop bags, and 1-pack, 2-pack, or 4-pack for wipes. These values are pulled into the Buy Box and rendered based on the product’s specific setup.
What made this approach especially powerful was the ability to toggle visibility of the packs section per product. Through the theme customizer, the client can easily show or hide the pack selector for any product no code changes required. This means:
Dynamic control – Easily managed from the Shopify admin
Scalable structure – Works across multiple products and templates
Clean implementation – No plugin clutter, just native Shopify tools
Modular design – Reusable for future product launches or updates
This setup ensures that each product page remains lean, relevant, and tailored to its specific buying options while giving the client the flexibility to manage everything independently.
Step 2: Custom Buy Box Flow
We designed a two-step selection flow:
Choose Quantity/Packs – They select how many packs they want
Choose Purchase Type – Finally, they choose between one-time or subscription
This flow was built using vanilla JavaScript and Liquid, with clean CSS styling to match the brand. We added subtle animations, hover effects, and visual cues to make the experience feel polished and intuitive. The layout is responsive and adapts beautifully to mobile screens.
Step 3: Subscription Integration
We integrated Loop Subscriptions directly into the Buy Box. Users can toggle between “One-Time Purchase” and “Subscribe & Save,” and choose their delivery frequency (e.g., every 2, 3, 4, or 6 months).
We ensured:
- The subscription toggle is clear and accessible
- The integration works with the Add to Cart API
- The UI reflects the benefits of subscribing (e.g., discounted price, free shipping, skip or cancel anytime)
This not only improved UX but also encouraged more users to opt for subscriptions, boosting recurring revenue for the brand.
Step 4: Mobile Optimization
Knowing that most of GIVE A SH!T’s traffic comes from mobile, we built everything with a mobile-first mindset. The Buy Box is:
- Touch-friendly and easy to navigate
- Fast-loading with minimal scripts
- Responsive across devices and screen sizes
We tested the experience on multiple devices to ensure consistency and usability. The layout adapts seamlessly, and the selection flow remains intuitive even on smaller screens.
Step 5: Conversion Enhancements
Beyond the technical build, we added conversion-friendly elements:
- Clear pricing breakdowns (e.g., “$0.11/bag”)
- Highlighted subscription perks
- Trust signals like eco-certifications and donation impact
- Visual emphasis on the brand’s mission and values
These subtle cues help reinforce the brand’s credibility and encourage users to complete their purchase. We also made sure the call-to-action buttons were prominent and accessible.
Final Words
Working on GIVE A SH!T’s project was a reminder that good development is never just about code. It’s about creating an experience that feels effortless to the end user while staying manageable for the client in the long run.
The new buy box structure gave GIVE A SH!T exactly what they needed: a system that was fast, intuitive, and scalable. Customers now enjoy a smoother path to purchase, and the client has the flexibility to update or expand the feature as their product line grows.
By building this natively with Shopify’s tools, we avoided plugin bloat, kept the site fast, and gave the brand a long-term solution, not a temporary fix.
Client Feedback
