How to remove shopify installments messaging on collection pages

Store Design
,
1

Hello all,

I’m looking to see if someone could help me with how to remove the shop pay installment messaging on collection pages for mobile devices. I don’t want to remove the shop pay capability, just the messaging. On mobile it is so big and bumps the add to cart button down way too far. It is not visible on desktop.

Example collection page: https://homeworx.shop/collections/weekend-getaway

2

To remove the Shop Pay installment messaging on collection pages for mobile devices without affecting the Shop Pay capability itself, you’ll need to make some changes to the code of your website. Here’s a general guide on how to achieve this:

  1. Access your website’s code: Depending on the platform or content management system you’re using, this process may vary. You’ll need to locate the relevant theme files or templates to make the necessary modifications. It’s always a good idea to create a backup before making any changes.

  2. Find the code for the collection pages: Look for the file or template responsible for rendering the collection pages. This is typically named something like “collection.liquid” or “collection-template.liquid” in platforms like Shopify or “archive-product.php” in WordPress.

  3. Locate the Shop Pay installment messaging code: Within the collection template, search for the code that generates the Shop Pay installment messaging. It might be in the form of a snippet or a section that includes the necessary HTML and CSS.

  4. Modify the code to hide the messaging on mobile devices: To remove the messaging on mobile devices, you’ll need to add a media query in the CSS code. Find the section that controls the styling of the messaging and add the following CSS:

@media (max-width: 767px) {
  /* Hide Shop Pay installment messaging on mobile devices */
  .shop-pay-installments {
    display: none;
  }
}

Make sure to adjust the max-width value to match the breakpoint where your site switches to mobile layout. In the example above, it’s set to 767 pixels, which is a common breakpoint.

  1. Save the changes and test: Save the modified code, and if applicable, upload it back to your website. Make sure to test the changes on a mobile device to verify that the Shop Pay installment messaging is now hidden, while the Shop Pay functionality remains intact.