Theme Log Vol. 2 – Customization Round-Up (2025-05-11)

[RobDukarski]

Welcome to Theme Log!

Theme Log is a series where we share weekly theme customizations, patterns, and cool Liquid tricks.

If you missed last week’s feel free to check it out here.

This week was a bit different with the Mother’s Day holiday occurring here in the US so I figured I would post toward the end of the day instead. Also, Happy Mother’s Day to anyone that celebrated!

Without further ado let’s kick this week off with specific customizations where you did things outside the box. Think of times where you utilized platform features & functionality in an unconventional way to introduce new features & functionality for customers.

Note, I will work on trying to figure out a better format for these topic starter posts. If you have any ideas feel free to share, this is for the community! I will also share something I worked on this past week tomorrow!

Got a trick? Did you build something cool?

If you have done something cool with any Online Store 2.0 theme, reply below with a snippet or a screenshot. Bonus points for sharing reusable code blocks!

---

If you are sharing something please try to adhere to this format for easy consumption:

# Add multiple products to cart on form submission [Short Name or Goal]

---
## :straight_ruler: Objective:
Briefly describe what you were trying to do (e.g., Add a trial upsell product with the purchase of another product).

---
## :clipboard: Affected Files:
List any theme files affected (e.g., buy-buttons.liquid, theme.js)

Modified:
- `snippets/buy-buttons.liquid`

Added:
- `snippets/trial-product-upsell.liquid`

---
## :light_bulb: Snippet/Explanation:
Use a code block for Liquid/JS/CSS and a short paragraph on how it works.

---

You can include multiple products in one product form and generally have them all add on submit (if native or `FormData` via Cart AJAX API).

[details="Code Snippet"]
```liquid
<input
  type="hidden"
  name="items[][id]"
  value="{{ product.selected_or_first_available_variant.id }}"
>
<input
  type="hidden"
  name="items[][quantity]"
  value="1"
>
{% if product.requires_selling_plan %}
<input
  type="hidden"
  name="items[][selling_plan]"
  value="{{ product.selected_or_first_available_variant.selected_or_first_available_selling_plan_allocation.selling_plan.id }}"
>
{% endif %}```
[/details]

---
## :test_tube: Notes/Tips:
Any edge cases, mobile quirks, or performance tips.

---
## :camera_with_flash: Screenshots / Before & After:
Use image embeds to showcase your positive impact visually. Be sure to include them in a `details` to keep things organized!

[details="Preview Experience"]
[/details]

Otherwise feel free to reply to others and connect further about whatever they share!

[RobDukarski]

I had this wrote up this morning but forgot to click “Reply” as I had to switch gears and start my workday.

Multiple Accelerated Checkout Buttons on PDP

---

Objective:

The goal was to have multiple accelerated checkout buttons on the PDP that would be like “buy now” buttons but work for the various enabled available accelerated checkouts that Shopify supports.

---

Affected Files:

List any theme files affected (e.g., buy-buttons.liquid, theme.js)

Modified:

• snippets/pdp-blocks.liquid

---

Snippet/Explanation:

Shopify provides a way that can be used to display a single accelerated checkout button within a product form but they also provide one for “cart” usage that can display all enabled accelerated checkout buttons. The following is just the basic code Shopify provides but I explain in more details within the Notes/Tips section.

Code Snippet

{% assign additional_checkout_buttons = true %}
{% if additional_checkout_buttons %}
  <div class="additional-checkout-buttons--vertical">
    {{ content_for_additional_checkout_buttons }}
  </div>
{% endif %}

---

Notes/Tips:

• The above code should load in the accelerated checkout buttons only if there is at least one item in the cart.
  • I am unsure if there are any other requirements involved there.
• The buttons will only “checkout” what is already in the cart rather than just the product from the PDP.
• Aside from the above snippet I added some CSS to block pointer-events on the buttons so that I could add a click event listener to the parent container that first clears the cart and submits the current product form to the cart so that it is the only item in the cart.
• That additional JS also found the element at the point, and triggered a click event on its associate button, which worked for Shop Pay & Google Pay, but not PayPal.
• For PayPal, as it is within an iframe, I simply did not block the pointer-events for it and it seemed to work.
  • Note, because of the nature of the approach it suggests there could be a race condition between when the cart clears/adds and when PayPal actually handles the checkout request so it may not always work.
• Shop Pay can be easily created as a faux button with the /checkout?payment=shop_pay approach (triggered after the cart is cleared & product added or via a cart permalink itself).
  • It would be great if someone from Shopify could add similar functionality for the other supported accelerated checkout buttons, and also to allow more than one to display if the merchant wants.
• As the goal is still to have accelerated checkout buttons displayed, we decided to just create faux buttons instead & have the others just link to checkout where the customers could then checkout from there.

---

Screenshots / Before & After:

No screenshots for this one.

[Liam-Shopify]

Love seeing these roundups of advice!!