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 occuring 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!