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

      Learn how to import and export your online store's product catalog using a CSV file. This guide covers how to prepare your file for bulk updates and how to manage the import/export process. 1. How to Import Your Products Importing your product ...
    • 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 ...
    • Add a Size Chart to Your Online Store

      Adding a size chart to your online store is a great way to improve the customer experience and reduce the number of returns you receive. This guide will show you how to use the Size Chart & Product Option Descriptions App to add a size chart to your ...
    • Steps to Take to Finish Setting Up Your Store

      Once you have created your Shop account, there are a few final steps to take before you are ready to start selling products. Complete the checklist below to make sure your store settings are complete before you are ready to start accepting orders. To ...
    • Embed Your Shop or Product Category on Your Website

      Once your Shop is set up within Marketing 360®, then you will want to embed your store and products on your website. You can embed your entire store on your site, or you can instead choose to embed individual categories. Regardless of which method ...