Shop Now: On-Store Optional Setup (Embedded)

OVERVIEW

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

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

Tip: Loop highly recommends having a developer or engineer present for these customizations.

In this article:

Modify the shopper experience

Some functions typically available to shoppers may conflict with On-Store and the shoppers’ grasp of their return options. Loop suggests changing these functions in the store code to prevent confusion, simplify the checkout process, and clarify the On-Store journey while Loop runs.
Loop's recommended modifications include:
  • Hide any alternative payment methods the store offers with 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 the 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 shopper enters a site, they distract the shopper 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 the store’s code. Elements are smaller parts of code making up the store's overall On-Store code.

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

AfterPay and PayPal element examples.

Adjust elements

After activating On-Store, Loop added a Class to the store’s code called “.loop-returns-activated”. This parent Class contains all the elements merchants 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 example code below shows these places at "ANY ELEMENT CLASSIFIER" and after: 
.loop-returns-activated <ANY ELEMENT CLASSIFIER> {
display: none !important;
}
Note: The code will contain the store’s specific identifiers for the elements being adjusted, rather than the wording “ANY ELEMENT CLASSIFIER”.
Play the video above or review the written instructions below for an example of how to hide an element.

Visualize the .loop-returns-activated Class

To hide elements, first bring the “.loop-returns-activated” Class into the theme's code. If a merchant's 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 the On-Store theme.

    Note: If editing a previously published On-Store theme, do the steps below for the current theme. If making changes to a copy of the 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 the theme (a set of three periods) > Edit code.

    "Edit code" button on a Shopify theme.

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

    Locating the "theme.liquid" file.

  5. Look for “<style>” and “</style>” tags in the code by scrolling or using the finder tool (Control F for Windows, Command F for Mac). Elements will be edited 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). Confirm that its placement reflects the snippet under Step 7, then proceed to Step 8.
  7. Copy and paste the snippet below under the " <head> " tag in the code:
   <style>
     .loop-returns-activated {
     //where the elements will live 
   }
   </style>

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

    Save button in the upper right-hand corner of the Shopify theme editor.

Hide the elements

Now, add and adjust any elements within the “.loop-returns-activated” Class, such as those listed under the “ Modify the shopper experience” heading. Below is an example of hiding an alternative payment method:
  1. Open a view of the store in a separate tab or window.
  2. Click on a product as if to review before adding to the cart.

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

    Example of an alternative payment element.
  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.

    Class for the alternative payment element in the Inspector Tool.
  6. Go back to the theme.liquid code file and paste the previously copied Class or ID 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
  1. Change “display:” to “none !important;” to hide any chosen elements. 
.loop-returns-activated .shop-pay-logo{
    display: none !important;
}
  1. Click Save in the upper right corner of the theme editor window.

Note: Merchants can also move these elements around in the code to change where they appear. Again, these actions turn out best with a developer's help.

Tip: To hide an element by way of JavaScript, developers can add the " LoopOnstore.isActive() " flag to any JavaScript code running in their Shopify theme (Shopify > Sales Channels > Online Store > ellipsis button for desired theme > Edit Code > theme.liquid).

Another example

A merchant wants to remove the Shop Pay button and wording from their product pages because they don't want the Shop Pay button to conflict with the On-Store experience.

Add to Cart option for a product, with a Shop Pay button and text underneath.
Add to Cart option for a product, with Shop Pay button and text beneath.

The merchant would right-click on the page, then click Inspect. The Inspector Tool would show them identifiers for each element making up the Shop Pay section. The image below shows how the Shop Pay button is only one element of all the Shop Pay text on that page.

Inspector Tool highlighting the HTML code for the Shop Pay button.
Inspector Tool highlighting the HTML code for the Shop Pay button.

This article has explained that merchants can nest whichever selectors or elements they want to hide under a .loop-returns-activated CSS rule (CSS means "Cascading Style Sheets", a programming language). Here, the merchant would have to hide multiple elements, since the Class for the Shop Pay button, .shopify-payment-button, would only hide the button but not the rest of the Shop Pay text.

Important: Merchants must create a brand new CSS block for every element they want to hide.

Configure Shopify script discounts

Important: Currently, only cart and order level discounts are compatible with On-Store. Due to script discount structure and variability, support is case by case. Loop cannot guarantee support on script discounts on the line-item level, but will help with configuration where possible.


For questions or help, please contact support@loopreturns.com.

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

How it works

  1. The shopper 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 Loop's system.

Setup instructions

To learn how to configure Shopify script discounts, follow the video below, or review the written instructions underneath it.

To set up discount scripts in On-Store: 

  1. If the theme customizer is not open, go to Shopify admin > Sales channels > Online Store.

  2. Find the On-Store theme being edited and click the Customize button.

    Example On-Store theme with Customize button on the right.

  3. On the left, click the App Embeds button.


    App embeds button on the left of the Customize view of store theme.

  4. Click the carrot next to On-Store SDK Integration to expand the information underneath.

    Expansion carrot to the left of the store name on the theme customization page.

  5. Scroll down to the checkbox labeled "Enable script discount handling."

    "Enable script discount handling" box, unchecked.

  6. Check the "Enable script discount handling" box.

    "Enable script discount handling" box, checked.

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

    Save button in the upper right corner of the Shopify theme customizer window.

Note: If clicking between browser windows, and the checkbox has trouble showing (even after saving), please refer to the "toggle or checkbox" section of the On-Store Troubleshooting article.


Update other customizations

Preserve items in the cart

On-Store sends shoppers to Loop to finish their returns once they click “checkout” in their cart on the website. From there, if shoppers use a back button or a back arrow to return to the shop, their carts will show as empty by default, even though the products they selected are still in Loop.
If a cleared cart sounds like it may confuse shoppers, merchants can alter their On-Store code to keep the products visible in their website's cart.

Important: Even preserved carts will not show when clicking the browser’s back arrow, as the browser arrows are separate from Loop’s software and therefore are not included in Loop’s configuration abilities. To see preserved carts when clicking back to the store, click Loop's back button instead, as shown by the image below.

Green arrow points to Loop's back button and says "Click this." Red arrow points to browser's back button and says "Don't click this."

To preserve items in the store's cart:

  1. Ensure the Shopify theme customizer is open (refer to the instructions above).
  2. Click the app embeds icon, then expand the On-Store SDK Integration section.

  3. Scroll down to the checkbox labeled "Preserve cart (Recommended)".

    "Preserve cart (Recommended)" box, unchecked.

  4. Check the "Preserve cart (Recommended)" box.

    "Preserve cart (Recommended)" box, checked.

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

    Save button in the upper right corner of the Shopify theme customizer window.

Note: If clicking between browser windows, and the checkbox has trouble showing (even after saving), please refer to the "toggle or checkbox" section of the On-Store Troubleshooting article.


Customize the Shop Now redirect 

By default, Shop Now directs shoppers to the website’s home page. If, instead, the merchant wants shoppers led to a specific collection on the site for the Shop Now experience, they can use Loop’s event listeners to change that shopper redirect.
Important: Before using the event listener to edit the redirect, check your partnered apps and third parties to ensure they won't interfere with the event listener.
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 the “theme.liquid” file on Shopify, and replace “your-collection-name” with the name of the store's collection: 
document.addEventListener('Loop:Activated', () => {

window.location.href='collections/{your-collection-name}'});

For help with this customization, please contact support@loopreturns.com.


Replace the checkout button

Merchants can customize their checkout buttons to lead shoppers back to the Loop returns experience while the shoppers are in the On-Store flow. To do this:

  1. Refer to the instructions above to open the Shopify theme customizer and expand the On-Store options under app embeds.

  2. Scroll down to the checkbox labeled "Replace checkout button."

    "Replace checkout button" box, unchecked.

  3. Check the "Replace checkout button" box.

    "Replace checkout button" box, checked.

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

    Save button in the upper right corner of the Shopify theme customizer window.

Note: If clicking between browser windows, and the checkbox has trouble showing (even after saving), please refer to the "toggle or checkbox" section of the On-Store Troubleshooting article.

Refer to the initial setup article for a reminder on how to enter an existing or chosen checkout button selector (attach value) into the "Checkout Button Selector" field above this checkbox.


Change the styling

Although default styles apply to functions such as the checkout button or the credit banner, merchants can alter these to suit their brand’s needs, as well, through the Shopify theme customization tool (refer to the instructions above).

After expanding On-Store SDK Integration in the app embeds, scroll to the bottom of the sidebar. There will be options for styling the credit banner and its contents. This styling can also help prevent items overlapping on the website so that each shopper's experience is as clean as possible.

Styling options in the left sidebar of the Shopify theme customizer, including credit banner text, credit value font size, credit banner alignment, and others.

Tip: Make sure to click the the "Show On-Store bar" checkbox so that the theme shows all styling changes for testing purposes before saving.

"Show On-Store bar" checkbox in Shopify theme customizer.
On-Store bar showing on theme after clicking "Show On-Store bar."

Test and publish your changes

After making all desired changes to the store 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 the 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 O-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“ from the original setup article. If the problem continues, please contact your Merchant Onboarding Manager or support@loopreturns.com.

For further questions, please contact your Merchant Onboarding Manager or support@loopreturns.com.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles