Use Your Shop App Store as a Catalog

Use Your Shop App Store as a Catalog

If you're just getting started with your site, follow the process here here to building a shop page. 

To use the Shop App as a catalog, make sure you don't embed the Shopping Cart widget. If you've already embedded it, take a quick moment and remove it.

 

To turn your online store into an online catalog:

  1. On the left-hand sidebar of your Shop App dashboard, click Shipping & Pickup to review your shipping methods. Disable all shipping methods if any are active.
  2. On the left-hand sidebar, click Payment to review your payment options. Disable all payment options if any are active.
  3. On the left-hand sidebar, click Design, then hide e-commerce elements like Buy Now buttons and Add to Bag buttons in the product list and product pages in Design section in your Shop App dashboard:
      • Disable Price and Buy Now elements on product list by choosing the Do Not Show option for them in the Product Card details and layout section:
        shop-app-catalog-01-hide-price-design.jpg
      • Hide Price and Qty box in product details pages by unchecking these elements in the Sidebar section:
        shop-app-catalog-02-hide-price-design.jpg
      • Hide other unnecessary elements like Store Footer (where "track orders", "shopping bag" and "sign in" buttons are displayed) and Sign In link:
        shop-app-catalog-03-hide-price-design.jpg
  4. To fully customize the store to only function as a catalog, you'll need to create a new CSS theme:
    shop-app-catalog-04-css-theme.jpg
  5. Create a new CSS theme for your store and title it 'catalog only'.
    shop-app-catalog-05-css-theme.jpg
  6. Paste the code below. Be sure to save your code, then click activate.
    /* remove cart quantity, price, and total from left column of cart */
    .ec-size .ec-store .ec-cart-item__count,
    .ec-size .ec-store .ec-cart-item__price,
    .ec-size .ec-store .ec-cart-summary { display: none; }
    .product-details-module.product-details__action-panel.details-product-purchase {display: none;}
  7. The last step is to use the Store Label Editor. Click Settings > Edit Store Labels to add custom text to your store. The ways you customize the text in your store are 100% up to you and depend on the verbiage you'd like to display. To learn more about using the Store Label Editor, click here to read the full article.

    • Related Articles

    • Import and Export Store Products

      You can import and export your store's catalog on your Shop app. This makes it easy to make bulk updates to products and categories. Import your products If you would like to bulk-upload products to your store, you can enter your product details in a ...

    • Use Advanced CSS to Style Your Store

      You can easily customize the look and feel of your Shop by using Cascading Style Sheets (CSS). How to Add Custom CSS To add custom styles to your store: Click Design from your Shop App dashboard. Next, click Create Theme to start your new, unique ...

    • How to Find Your Shop App Store ID

      To quickly view your Shop App Store ID, you can hover over the My Profile link in your dashboard and view the URL that's previewed in the bottom left corner of your browser. The Store ID will be directly after '/store/' in the URL.

    • Download the Shop Mobile App

      The Shop mobile app is available on the Apple Store and Google Play Store. The app lets you set up, edit and manage your store when you’re away from your desk. You can add new products with the snap of a pic, accept payments and manage orders, and ...

    • Add a Size Chart to Your Store

      Adding a size chart to your store can help reduce the number of returns you receive and give your customers a better online shopping experience. Learn how to add a size chart to your online store’s products. Download the Size Chart & Product Option ...