We recently came across an interesting question on the Shopify Community Forum: a merchant wanted to let customers add a gift box to their products. This is actually a pretty common need, especially during holidays or for stores that often sell items as presents.

There are already several ways to achieve this. For example, you could install an upsell app or a product bundle app, and then set the gift box as a separate product. Those work well, but if you prefer not to rely on apps, there’s another option: you can add this feature directly into your theme with a bit of custom code.

And it doesn’t have to stop at just a gift box. The same method can also be used for services or any kind of add-on fee that you’d like to offer alongside your products.

Here’s how you can set it up in the Dawn theme:

Step 1: Open Your Theme Code Editor

From your Shopify admin, go to Online Store > Themes, then click Edit code on your current theme.

Step 2: Create a New Snippet for the Gift Box

Inside the snippets folder, create a new file and name it gift_box.liquid. Paste your custom code for the gift box option into this file.

{%- liquid
  assign product = block.settings.product
  assign title = block.settings.giftbox_title
  assign color_scheme = section.settings.color_scheme
  assign variant = product.variants[0]
-%}
<div style="border: #ccc solid 1px; padding: 10px 10px">
  <div>
    {{ title }}
  </div>
  <div style="display:flex; border-top: #ccc solid 1px; align-items: center ">
    {%- if product != blank -%}
       <div style="border: #E5E1DF solid 1px; padding: 8px 8px; display: flex; align-items: center;">
                    {%- if product.featured_media != blank -%}
                      <img
                        class="predictive-search__image"
                        src="{{ product.featured_media | image_url: width: 100 }}"
                        alt="{{ product.featured_media.alt | escape }}"
                        width="50"
                        height="{{ 50 | divided_by: product.featured_media.preview_image.aspect_ratio }}"
                        style="display: block;"
                      >
                    {%- endif -%}

    </div>
    <div style="padding: 10px 10px">
      <strong>{{ product.title }}</strong><br>
      {{ product.price | money_with_currency }}
    </div>
    <div style="flex-grow:2; justify-items: end">
         <product-form
            class="product-form"
            data-section-id="{{ block.id }}"
          >
            {%- form 'product',
              product,
              id: product_form_id,
              class: 'form',
              novalidate: 'novalidate',
              data-type: 'add-to-cart-form'
            -%}
              <input
                type="hidden"
                name="id"
                value="{{ variant.id }}"
                {% if variant.available == false
                or product.selected_or_first_available_variant == null
                %}
                disabled
                {% endif %}
                class="product-variant-id"
              >
                <button type="submit" class="color-{{ color_scheme }}" style=" width: 50px; height: 50px; cursor: pointer">{{- 'icon-plus.svg' | inline_asset_content -}}</button>
            {%- render 'loading-spinner' -%}
            {%- endform-%}
        </product-form>
   </div>
  {%- endif -%}
  </div>

</div>

Copy

Step 3: Insert the Snippet Into the Product Template

Open the file main-product.liquid in the sections folder.

• Wrap the snippet inside a blocks property.

• Be careful not to leave a trailing comma at the end of the element before adding this new block.

    {
      "type": "giftbox",
      "name": "GiftBox",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "Subscribe to our [Shinetech Changchun](https://www.youtube.com/@ShinetechShopidev)"
        },
        {
          "type": "product",
          "id": "product",
          "label": "Gift box product"
        },
        {
          "type": "text",
          "id": "giftbox_title",
          "label": "Gift box title",
          "default": "Add a gift box?"
        },        
      ]
    }Copy

Step 4: Render the Gift Box Snippet

Still in main-product.liquid, add the render code for your gift box snippet in the right place:

              {%- when 'giftbox' -%}
                {% render 'gift_box', block: block %}Copy

Step 5: Add the Gift Box Block in the Theme Editor

Go back to your Theme Editor, navigate to a product page, and you’ll see the new block option available under Product Information. Add it, adjust the settings as needed, and save your changes.

That’s it! Your product page now offers customers the option to add a gift box (or any other service you want to upsell). It’s a clean solution that doesn’t require extra apps, keeps your storefront lightweight, and gives you the flexibility to customize add-ons however you like.