Exchange for Other Items: Modify the Credit Banner for In-Store Exchange
Plans: Premium, Enterprise Platform: Shopify
When interacting with different apps and sales channels, Shopify themes behave and function differently. Their design and UI elements modify independently and sometimes collide with the installed apps’ and sales channels’ UI and design elements.
AfterShip Return’s Exchange for other items: In-store Exchange settings redirect your customers to your website to make a new purchase in exchange for a product they want to return with their return credit. A banned at the bottom of the website reminds customers of the total credits they have to buy a new product.
In this tutorial, we will show you:
Problem
Solutions
Closing the credit information banner
Change the cart style
Hide or adjust elements
It is observed in some cases that the credit banner displayed at the bottom of the website overlaps the cart drawer (selected in Shopify theme settings) and hinders the customer experience.
It obstructs the total price and cost breakdown of the new order
It blocks the checkout button and disables the customer from placing the order
There are 3 ways in which this issue can be resolved to give customers the best customer experience.
Customers can simply click the “X” button at the extreme right of the credit information banner to collapse the banner and access the cart drawer completely.
2.a. Steps to change cart style
This problem of the credit banner overshadowing the side cart panel is only prevalent with the Cart drawer style.
Shopify enables merchants to change the style in which their store cart appears after a customer clicks the Add to cart button.
To change the cart type in the Shopify theme settings
Go to Online store > Theme in the Shopify settings
Click Customize
From the side menu, click the paintbrush icon to open the Theme settings
Scroll down to the Cart section and click the Cart type dropdown to select the style of cart you want for your store
By default, the Drawer style will be selected.
Switch the style to Popup notification or Page
Hit Save
2.b. Customer experience
Once you have updated the Cart style, rerun a test return to ensure a smooth user experience.
a. Popup notification: An add-to-cart popup comes up when customers add products to their cart, making it easy for them to checkout.
This is how the new interface will look when an add-to-cart popup notification is selected. Upon clicking View my cart, the customer will be directed to the cart summary page.
b. Page: The cart page with a summary of all the products a customer has added to the cart, a subtotal and a total price for the order, and a Checkout button directing customers to Shopify's secure checkout pages will open.
This is how the new interface will look when a cart page is selected.
CSS is typically the best way to hide or adjust these additional elements
The class ‘aftership-returns-actived’ is added to the </body> when Exchange in your store is enabled
Either moving elements around or simply adding ‘display:none’ to the items you don’t want to show up is sufficient
For any further questions or help, please contact our chat support team
Overview
When interacting with different apps and sales channels, Shopify themes behave and function differently. Their design and UI elements modify independently and sometimes collide with the installed apps’ and sales channels’ UI and design elements.
AfterShip Return’s Exchange for other items: In-store Exchange settings redirect your customers to your website to make a new purchase in exchange for a product they want to return with their return credit. A banned at the bottom of the website reminds customers of the total credits they have to buy a new product.
What you’ll learn
In this tutorial, we will show you:
Problem
Solutions
Closing the credit information banner
Change the cart style
Hide or adjust elements
Problem
It is observed in some cases that the credit banner displayed at the bottom of the website overlaps the cart drawer (selected in Shopify theme settings) and hinders the customer experience.
It obstructs the total price and cost breakdown of the new order
It blocks the checkout button and disables the customer from placing the order
Solutions
There are 3 ways in which this issue can be resolved to give customers the best customer experience.
1. Closing the credit information banner
Customers can simply click the “X” button at the extreme right of the credit information banner to collapse the banner and access the cart drawer completely.
2. Change the cart style
2.a. Steps to change cart style
This problem of the credit banner overshadowing the side cart panel is only prevalent with the Cart drawer style.
Shopify enables merchants to change the style in which their store cart appears after a customer clicks the Add to cart button.
To change the cart type in the Shopify theme settings
Go to Online store > Theme in the Shopify settings
Click Customize
From the side menu, click the paintbrush icon to open the Theme settings
Scroll down to the Cart section and click the Cart type dropdown to select the style of cart you want for your store
By default, the Drawer style will be selected.
Switch the style to Popup notification or Page
Hit Save
2.b. Customer experience
Once you have updated the Cart style, rerun a test return to ensure a smooth user experience.
a. Popup notification: An add-to-cart popup comes up when customers add products to their cart, making it easy for them to checkout.
This is how the new interface will look when an add-to-cart popup notification is selected. Upon clicking View my cart, the customer will be directed to the cart summary page.
b. Page: The cart page with a summary of all the products a customer has added to the cart, a subtotal and a total price for the order, and a Checkout button directing customers to Shopify's secure checkout pages will open.
This is how the new interface will look when a cart page is selected.
3. Hide or adjust elements
CSS is typically the best way to hide or adjust these additional elements
The class ‘aftership-returns-actived’ is added to the </body> when Exchange in your store is enabled
Either moving elements around or simply adding ‘display:none’ to the items you don’t want to show up is sufficient
//hide add to cart
.aftership-returns-actived .other-add-to-cart-button{
display:none
}
//hide help chat
.aftership-returns-actived .help-chat{
display:none
}
//change the height of the cart drawer so that it is not obscured by the credit banner
.aftership-returns-actived #CartDrawer{
height: calc(100% - 72px);
}For any further questions or help, please contact our chat support team
Updated on: 12/09/2023
Thank you!