This functionality is available for the Product Listing page only. Product Listing Page is where you will see all products within a set collection. We will be releasing the other core app pages soon! Ensure you subscribe to get the latest updates!
Before you start
App studio - Product Listing Page is available on all plans
App Studio provides a number of tools to help you customize your pages and reflect your brand styles. If you are looking for more extensibility, App Studio has a code editor to help you add more functionality and ensure your pages are best in class.
How to access App Studio - Product Listing Page?
We are actively migrating merchants to our new App Studio platform. If you do not have access to your Tapcart Dashboard's Product Listing Page, please contact our support team.
Ensure you are on the mobile (iOS & Android) version 12.6.0+
Designing your Product Listing Page
You will notice the first collection is displayed on your product listing page. With our product listing collection dropdown, you are able to search and select any collection you would like displayed.
Not seeing a particular collection? Make sure your Shopify collections are set to the Tapcart Sales Channel.
Show Page Title
Allows you to hide or show the Collection name on the header.
Hover over the products and tap to open the light box view. This view will allow you to use our Right Rail and begin customizing your Product Listing Page!
Grid - Columns
You can decide on the number of columns your products display as by default (1,2, or 3 columns) and/or allow the user to choose. If you would like the user to choose their own preference, you will need to turn User Column Selection on.
Product Image
You have the ability to customize corner size and allow for images with multiple variants to be swipeable on the Product Listing Page.
Price
You have the ability to update size and alignment of price.
Product Title
You have the ability to update size, lower/uppercase, and alignment of the product title. For longer product titles, if you wish to wrap long titles to the next line, turn Wrap Text on.
Quick Add
You have the ability to update size, lower/uppercase, and alignment of Quick Add. You can also update the corner size to match your product image. To disable Quick Add functionality, tap on the eye icon.
If you would like to change the “Quick Add” text, please Customize Your Block. (add link)
Favorites Icon (also known as Wishlist)
You have the ability to update the area that you wish to show the favorite icon, update corner size for when the background icon is showing, or turn off the icon background. You also have more icons to choose from or better yet, upload your own to use!
Note: To enable Wishlist, ensure you have Tapcart Wishlist or Swym connected via your Integrations.
Miscellaneous
The eye icon allows you to hide or show the components on the Product Listing Page.
Search Functionality: As long as your search integration is connected via Integration page, your Sort & Filtering functionality will work as is. Sort & Filter will be customizable soon!
Supporting color swatches on Product Listing page:
Product Swatches: We have UI components available to use when building color swatches via our code editor (leveraging type aheads to pull in color swatch component). It will look like this as a starting point and users can update the design
Color codes
Image
Other options merchants can leverage out of the box are overflow type:
Horizontal scroll (example above: color codes)
Wrap (example above: image)
Saving and Publishing
Saving allows you to keep your changes available within the Product Listing Dashboard however you will need to Publish before your changes reflect on your app.
There are more customizations you would like to build on your Product Listing Page?