Edit Gift Messages etc on Multiship and Cart Page in Giftship

Introduction: This guide will walk you through the process of enabling the ability to edit product options on both your single address cart page and multiship, enhancing your customers’ shopping experience.

This feature empowers you to modify various Giftship product options, such as gift messages and date pickers, as well as standard Shopify product options like quantities and variants, directly from the Multiship landing page and the cart page with minimal theme adjustments.

Our support guide provides step-by-step instructions to seamlessly implement this feature, ensuring a more enjoyable shopping experience for your customers.

Let’s dive into enabling the “Edit” functionality on your theme’s single address cart page:

Step 1: Duplicate Your Production Theme

Before making any changes, it’s crucial to create a duplicate of your production theme. This enables you to test the modifications without impacting your live store.

Step 2: Locate Your Cart Loop

In most Shopify themes, you can find the cart loop in the “cart-items.liquid” file. Here’s where you’ll make the necessary adjustments to add the “Edit” button for each item in the cart.

Step 3: Find the Cart Loop

Within the “cart-items.liquid” file, you’ll come across the following line of code:

{%- for item in cart.items -%}

Step 4: Add the “Edit” Button Code

Below the line of code identified in Step 3, insert the following code snippet while ensuring you retain the existing code:

{%- for property in item.properties -%}
{%- endfor -%}

<a role="button" href="javascript:void(null)" class="gs__edit-options" data-product-json='{"handle":"{{ item.product.handle }}"}' data-line-id="{{ item.key }}" data-product-id="{{ item.product_id }}" data-variant-id="{{ item.variant_id }}" data-product-title="{{ item.title }}">Edit</a>

This snippet will create an “Edit” button for each item in the cart, allowing your customers to easily modify their product options as needed.

Step 5: Add Custom CSS

You can include the CSS in your theme’s CSS file. However, if you prefer not to make that change, we recommend editing the “theme.liquid” file and placing the code just before the closing </body> tag:

{% if template.name == 'cart' %}
{% style %}
.gs__edit-options {
  color: var(--gs-accent-color, #97c8da);
  text-decoration: underline;
}
.gs__edit-options:hover {
  color: var(--gs-brand-color, #000000);
  text-decoration: none;
}
{% endstyle %}
{% endif %}

Conclusion:

By following these straightforward steps, you can offer your customers a more intuitive and convenient shopping experience.

If you encounter any issues or have further questions during the implementation process, please feel free to reach out to our support team. We’re here to assist you every step of the way.