Theme Changes for Checkout V2

We’ve made some changes to our checkout process to improve it’s design and usability, ultimately making it better for your buyers. Part of the improvements mean we’ve made some changes to the Design and Pages themes.

If you’ve customized one of the themes or created your own, you’re going to need to make some styling changes. The changes are very minor and are related to the {{mini_cart}} functionality.

Before

<tbody class="cart-items js-cart-items">
	<tr class="js-cart-item-...">
		<td class="cart-item-col-remove">
			<div class="collapse in" aria-expanded="true">
				<div>
					<button type="button" class="..." data-cart-row-id="...">
						<span>Remove</span>
					</button>
				</div>
			</div>
		</td>
		<td class="cart-item-col-title">
			<div class="collapse in" aria-expanded="true">
				<div>
					<a href="...">Item Name</a>
					<small>Variant Name</small>
				</div>
			</div>
		</td>
		<td class="cart-item-col-total">
			<div class="collapse in" aria-expanded="true">
				<div class="cart-item-total">
					<span class="js-cart-item-quantity">1</span> × $49.99
				</div>
			</div>
		</td>
	</tr>
</tbody>

Basically we’ve reduced the markup, removing extra bloat. The nested divs for the animation when adding/removing items from the cart aren’t needed any more. We’ve also removed extra classnames for columns since there’s only three columns, you can use :first-child and :last-child to access the first and last cells. If you had any animation setup for the cart items, it would probably need editing also.

After

<tbody class="cart-items js-cart-items">
	<tr class="js-cart-item-...">
		<td>
			<button type="button" class="..." data-cart-item-remove="...">
				<span>Remove</span>
			</button>
		</td>
		<td class="break-word">
			<a href="...">Item Name</a>
			<small>Variant Name</small>
		</td>
		<td>
			<span class="js-cart-item-quantity">1</span> × $24.99
		</td>
	</tr>
</tbody>

Was this helpful?

0 0