Skip to main content

Installing Rebuy Smart Collections

Step-by-step guide to installing Rebuy Smart Collections on your Shopify theme.

Christian Sokolowski avatar
Written by Christian Sokolowski
Updated this week

Welcome to the Rebuy Smart Collections Installation Guide! This guide will walk you through the process of installing Rebuy Smart Collections on your Shopify theme. We’ll cover the necessary steps to ensure that Smart Collections are properly displayed and functioning on your store.

If you haven’t yet customized your Smart Collections settings, we recommend referring to our guides on all available features before continuing with the installation process. By following these instructions, you'll be able to integrate Rebuy’s powerful collection management tools and create a seamless shopping experience for your customers.


Installing Rebuy Smart Collections on Shopify via App Blocks

Video guide

Step-by-Step Guide:

  1. Log in to Rebuy Admin: Access your Rebuy Admin account.

  2. Enable Collections: Go to the Smart Collections Template & Settings page and toggle Collections on.

  3. Log in to Shopify Admin: Access your Shopify Admin account.

  4. Go to Online Store: Navigate to the Online Store from the admin panel.

  5. Click Customize: Enter the theme editor by clicking Customize.

  6. Select a Collection: Use the drop-down menu to choose your Collections page.

  7. Go to Apps Section: Navigate to the Apps section within the collection.

  8. Add Rebuy Smart Collection Block: Click Add Block, find Rebuy Smart Collection, and add it.

  9. Set to Live & Save: Set the Rebuy Smart Collection to Live and save your changes.

  10. Hide Native Collections: Disable the default Shopify collections in the theme editor.

  11. Refresh & Verify: Refresh the page to ensure Rebuy Smart Collections are live and working.


Installing Rebuy Smart Collections on a Shopify 1.0 Vintage Theme

Step-by-Step Guide:

  1. Log in to Shopify Admin: Access your Shopify Admin account.

  2. Go to Online Store: Navigate to Online Store in the admin panel.

  3. Click Customize: Click the Customize button next to your theme.

  4. Edit Code: Click the three dots and select Edit Code.

  5. Find Main Collection Banner: Search for the collection-template.liquid file in the code editor.

  6. Add Rebuy Code: Paste the provided Rebuy Smart Collections div code.

    1. <div id="rebuy-smart-collections" data-rebuy-shopify-collection-id="{{ collection.id }}"></div>

  7. Save Changes: Click Save to apply your changes.

Note for 1.0 Vintage Themes:

If you are using a 1.0 vintage theme, you will need to hide the native Shopify collections page. You can do this by adding the following CSS code snippet to the Custom CSS section in your Shopify theme editor under the Collections page.

[data-section-id="collection-template"] {
display:none
}

This will hide the default Shopify collections and allow Rebuy Smart Collections to function correctly.

If the CSS code provided does not hide the native collections page, you may need to target the correct element specific to your theme, as not all themes are the same.

How to Find the Correct Element:

  1. Go to Your Storefront
    Open your storefront in a web browser.

  2. Inspect the Page
    Right-click anywhere on the collections page and select Inspect (or press Ctrl+Shift+I on Windows or Cmd+Opt+I on Mac). This will open the Developer Tools panel.

  3. Find the Correct Element
    In the Elements tab of the Developer Tools, look for the section that contains your native collections page. The element you need to target will likely be a <div> or <section> with a class or ID that refers to the collections page (such as #shopify-collection, #collections, or something similar).

  4. Update the CSS
    Once you identify the correct element, copy its class or ID and update the Custom CSS code to hide it. For example:

    [REPLACE WITH YOUR ELEMENT] {
    display:none
    }
  5. Save the Changes
    After updating the CSS, save your changes, and refresh the page to ensure the native collections page is hidden.


FAQs

Q: What if I can't find the collection-template.liquid file in my 1.0 theme?

A: If the collection-template.liquid file doesn't exist in your theme, search for similar files such as collection.liquid or main-collection.liquid. The goal is to find the template responsible for rendering the collections page, and that’s where the code should be inserted.


Q: Is it necessary to remove the native Shopify collections completely for Rebuy Smart Collections to work?

A: No, it’s not mandatory to remove the native Shopify collections completely, but it is recommended if you want to fully replace them with Rebuy Smart Collections. Hiding or disabling the native collections ensures a seamless integration and avoids any confusion for customers.

Did this answer your question?