Shop Now: On-Store Setup (Continued)

There are several factors for merchants to consider when customizing their Shop Now: On-Store platform. These can range from third-party overlaps, payment and checkout options, information given to or withheld from customers, and more.

This article includes optional steps merchants can choose to take to tailor their customers’ On-Store experience further. For initial integration instructions or a general On-Store overview, please refer to the original Shop Now: On-Store article. 

In this article:

• Modify the customer experience
  • What are elements?
  • Adjust elements
    • Visualize the Class
    • Hide the elements
• Configure Shopify script discounts
  • How it works
  • Setup instructions
• Update other customizations
  • Preserve items in the cart
  • Customize the Shop Now redirect
  • Change the styling
• Test and publish your changes
• FAQ

Modify the customer experience

Some functions that are typically available to your customers may conflict with On-Store interactions and distract from your customers’ understanding of their return options. We recommend modifying these functions’ elements in your store code to prevent confusion, make the checkout process easier, and simplify the On-Store journey while Loop runs.

Our recommended modifications include:

• Hide any alternative payment methods you offer alongside the typical Shopify checkout such as AfterPay, Google Pay, Apple Pay, and PayPal. These options are not compatible with Loop’s On-Store experience. This also applies to any buttons or options that offer a Home Try-On program.
• Alter or hide help chat widgets on your website, as these conflict with the On-Store credit banner. 
• Adjust any mobile checkout or add-to-cart buttons, as these conflict with the On-Store experience.
• Deactivate special offer pop-ups and discount code options. Although it’s common to show these when a customer enters a site, they distract the customer from adding products to their cart. In addition, these discounts will not apply to items purchased through the On-Store experience.

What are elements?

The best way to modify the functions above is to hide or change their respective elements in your store’s code. Simply put, elements are a single part of a larger group. In this case, the larger group is the code making up your On-Store theme. 

For example: If your store offers alternate payment options such as the ones mentioned above, each option may have a button that customers can click to continue their payment (for example, the image below). Each button is an element within your store’s code.

Adjust elements

After activating On-Store, Loop added a Class to your store’s code called “.loop-returns-activated”. This parent Class contains all the elements you can modify, separated by hyphens (-). Each element also has a) a place to add its identifier, either a Class or ID, and b) a place showing its display parameters. The screenshot below shows these places in bold:

<span style="background-color: initial; font-family: inherit; font-weight: normal;">.loop-returns-activated <ANY ELEMENT CLASSIFIER> {   

display: none !important;

}<br></span>

Play the video above or review the written instructions below for an example of how to hide an element.

Visualize the Class

To hide the elements you choose, you must first bring the “.loop-returns-activated” Class into your theme’s code. If your developers know where the back-end style sheet is, they can add the class there. Otherwise, follow the instructions below:

1. Go to Shopify admin > Sales channels > Online Store.

2. Find your On-Store theme.

   If you are editing an On-Store theme you already published, do the steps below for your current theme. If you are making changes to a recently created On-Store theme before publishing it, do the steps below for the relevant theme under the "Theme Library" section.

3. Click the ellipsis button on your theme (a set of three periods) > Edit code.

   

4. Under the Layout folder, click the file titled “theme.liquid".

   
   

   

5. Look for “<style>” and “</style>” tags in the code by scrolling or using your finder tool (Control F for Windows, Command F for Mac). You will edit elements between these style tags.

   If style tags are present, go to Step 6.

   If style tags are NOT present, go to Step 7.

6. Copy and paste ".loop-returns-activated" right after the <style> tag (the first style tag). Its placement should look like the snippet under Step 7.
7. Copy and paste the snippet below under the " <head> " tag in your code:

   <style>
     .loop-returns-activated {
     //where the elements will live 
   }
   </style>

8. Click Save in the upper right corner of your theme editor window.

   

Hide the elements

Now you can add and adjust any elements to your liking within the “.loop-returns-activated” Class, such as those listed under the “Modify customer experience” heading. Below is an example of hiding an alternative payment method:

1. Open a view of your store in a separate tab or window.
2. Click on a product as if to review before adding to your cart.

3. On this product page, right-click on your chosen element in the checkout view (for example, the Shop Pay button below).

   

4. Click Inspect.

5. Copy the Class or ID highlighted in the Inspector Tool. In rare cases, the identifier for this element could also be a tag within the code.

   

6. Go back to your code and paste the Class or ID you copied next to “ .loop-returns-activated ”. Remember to add a period (.) before a Class, and a hash (#) before an ID.

.loop-returns-activated .shop-pay-logo

7. Change “display:” to “none !important;” to hide the elements you choose.

.loop-returns-activated .shop-pay-logo{
    display: none !important;
}

8. Click Save in the upper right corner of your theme editor window.

Configure Shopify script discounts

Loop’s Shop Now: On-Store experience can use a merchant’s existing Shopify scripts to determine proper discounts for customers’ On-Store orders.

How it works

1. The customer adds items to their cart through the On-Store experience.
2. The On-Store code sends any products and applicable discounts from the Shopify cart to Loop’s core API endpoint.
3. Loop’s core interprets new cart prices and translates them to discounts in our system.

Setup instructions

Follow the GIF (graphics interchange format) visual below, or review the written instructions underneath it, to learn how to configure Shopify script discounts.

To set up discount scripts in On-Store: 

1. Again scroll to the bottom of your "theme.liquid" file code in Shopify admin.
2. Find the “LoopOnstore.init” call you added in the original setup instructions. 
3. Beneath the key and attach fields, add “full: true,” so that your On-Store snippet reflects the code below:

<script>
   LoopOnstore.init ({
     key: 'example api key',
     attach: 'example attach value',
     full: true,
});
</script>

4. Click Save in the upper right corner of your theme editor window.

Update other customizations

Preserve items in the cart

On-Store sends customers to Loop to finish their returns once they click “checkout” in their cart on your website. If customers use the back button in their browsers to return to your shop, their carts show as empty by default, even though the products they selected are still in Loop. If you think a cleared cart may confuse customers, you can alter your On-Store code to keep the products visible in your website’s cart.

Follow the GIF above or review the written instructions below for an example of how to preserve items in your store's cart.

To preserve items in your store's cart:

1. Go back to the “theme.liquid” file you’ve been modifying in Shopify’s theme editor.
2. Scroll to the bottom of the code.
3. Find the “LoopOnstore.init” call you added in the original setup instructions. 
4. Add “ preserveCart: true, ” under the key and attach fields so that the snippet looks like this:

<script 
src="https://cdn.jsdelivr.net/npm/@loophq/onstore-sdk@latest/dist/loop-onstore-sdk.min.js"></script>
<script>
 	LoopOnstore.init({
 		key: "example API key",
 		attach: "example attach value",
 		preserveCart: true,
 	});
</script><br>

5. Click Save in the upper right corner of your theme editor window.

Customize the Shop Now redirect  

By default, Shop Now directs customers to your website’s home page. If you want to lead customers to a specific collection on your site instead, you can use Loop’s event listeners to change that customer redirect.

Please review the Events section of the On-Store software development kit (SDK) article, specifically information about adding event listeners for “Loop:Activated” events. Then, copy the code below, paste it into your “theme.liquid” file on Shopify, and replace “your-collection-name” with the name of your collection:

document.addEventListener('Loop:Activated', () => {
window.location.href='collections/{your-collection-name}'});

Change the styling

Although default styles apply to functions such as the checkout button or the credit banner, you can alter these to suit your brand’s needs through more code customization. For more information, please reference the Styling section in the On-Store SDK article.

You can also right-click your credit banner and select Inspect to learn which Classes apply to the banner’s code. To add more code to the snippet Classes on the credit banner, you can work with a developer or contact support@loopreturns.com.

Test and publish your changes

Once you’ve made all desired changes to your code, be sure to test the changes by way of these testing instructions. Once testing is successful, follow the publishing instructions to apply the changes to your living theme.

FAQ

Can I still edit my theme in these ways, even though I’ve already integrated Shop Now: On-Store? Absolutely! Loop recommends you save a backup of your previous theme and test the On-Store experience thoroughly after making any changes. Refer to the “Test your work” section of the original setup article for instructions.

I made a theme change and now my Checkout button isn’t working correctly through the Shop Now: On-Store experience. What should I do? Review the steps for “Set up a development theme in Shopify“ and “Add a snippet to the development theme“ from the original setup article. If the problem continues, please contact your Merchant Onboarding Manager or support@loopreturns.com.

If you have any questions, please contact your Merchant Onboarding Manager or support@loopreturns.com.