With Shopney’s Design Editor, you can customize key pages of your mobile app to match your brand’s style and improve usability. You have full control over how products, collections, and key pages are displayed to create a seamless and intuitive shopping experience.
You can personalize the collection pages to showcase products more effectively, optimize the product pages to highlight key details, enhance the cart page for a faster checkout process, and refine the search page to make product discovery effortless.
By making the most of Shopney’s customization options, you can:
• Align your app’s design with your brand identity
• Create a smooth and intuitive shopping experience
• Make products easier to find and explore
• Highlight promotions and featured items effectively
• Adapt layouts for seasonal campaigns and trends
• Keep your app structured and easy to use on every page
Let’s go through how you can customize the 4 different sections on your app with Themes and individual settings.
Accessing the Customization Section
In your Shopney Dashboard, go to the Design tab and select the fourth option from the left-hand menu to open the Customization section.
Explore Theme Options and Customize Them
With our Themes feature, you can customize the look of your collection and product pages with 7 different theme options, finding the best fit for your app’s visual layout.
From the sections below, you can choose a theme (1) with just one click and change the individual theme settings (2) to further customize your app. Since product presentation plays a key role in purchase decisions, please check out the relevant article here to learn how to select the best theme.
🛎️ Reminder
You can preview the theme changes you’ve made by following the guide here. |
Now, let’s go through how you can further customize the 4 different sections on your app with individual settings.
1. Customizing the Collection Page
The settings you adjust below this section apply only to your collection pages, where your products are listed. These settings will help you boost in-app engagement, drive more conversions, and maximize sales by creating a smoother shopping experience tailored to your business needs.
1.1. Image Display Options
With this setting, you can choose between the 3 display options to change how your product images are scaled on collection pages to find the best fit for your app.
Here's a visual guide to help you understand how the 3 display options affect your product images on collection pages.
1. Fill: This option fills the entire image display area, even if it means cropping the edges of the product image. As shown in the first example, the display area is completely covered, leaving no empty space.
2. Fit: This option keeps all edges of the product image visible within the display frame. In the second example above, you can see that the full image remains intact, without any cropping.
3. Square: This option displays images in a square frame. It works best if your product images are neither too vertical nor too horizontal, giving your collection page a clean and organized appearance, as shown in the third example.
1.2. Show Quick Add to Cart
With this setting, you can add the Add to Cart button to your collection pages, allowing customers to add items to their cart instantly without visiting the product page.
Here's how it would look when this setting is enabled.
1.3. Show Quick Sort
With this setting, you can add a sorting section at the top of your collection pages, allowing your customers to quickly sort products by Best Sellers, Featured, and Newest.
Here's how it would look when this setting is enabled.
1.4. Show Vendor
With this setting, you can show vendor names for your products on collection pages.
Here's how it would look when this setting is enabled.
1.5 Hide Sold-Out Products
With this setting, you can make out-of-stock products invisible in the app. When inventory tracking is enabled in your Shopify store, this setting automatically tracks product stocks and hides them from the app.
📌 Important Note
To ensure this setting works, verify that inventory tracking is enabled in your Shopify admin panel. If you're unsure how to do this, you can refer to this Shopify article. |
2. Customizing the Product Page
The settings you adjust below this section apply only to your product pages where product details are displayed. These settings will help you present product information more effectively, build customer confidence, and drive more sales by enhancing the shopping experience.
2.1. Image Display Options
With this setting, you can choose between the 3 display options for your product images on the product pages as well. The Fill, Fit, and Square options work the same way as on the collection pages.
Here's a visual guide to help you understand how the 3 display options affect your product images on product pages.
2.2. Show Vendor
With this setting, you can enable the vendor name for your product pages as well.
Here's how it would look when this setting is enabled:
2.3. Show SKU
With this setting, you can show SKUs on your product pages. SKUs (Stock Keeping Units) are alphanumeric codes used to identify products and manage inventory.
Here's how it would look when this setting is enabled:
2.4. Show Unit Price
With this setting, you can display the price per unit on product pages. This feature is specifically relevant for merchants selling in Germany.
Here's how it would look when this setting is enabled.
2.5. Hide Quantity Selector
With this setting, you can hide the quantity selector on your product pages, which is shown by default. While the quantity selector feature is useful, it might not be necessary if your products have limited stock.
Here's a visual guide to help you understand how product pages look with this setting disabled and enabled.
2.6. Variant Selector Type
With this setting, you can change the product variant selector to appear as a block or a dropdown menu. This section is where users select a product variant on the product pages.
Here's a visual guide to help you understand how block and dropdown options for product variant selectors would look on product pages.
2.7. Hide Out of Stock Variants
With this setting, you can hide out-of-stock product variants. By default, out-of-stock variants are displayed in a pale-grey color. Enabling this setting will remove them from view entirely.
Here's a visual guide to help you understand how product pages look when this setting is enabled or disabled.
📌 Important Note
If your products have multiple variant options set up on your Shopify store, this setting will not function properly. |
2.8. Show Buy Now Pop-Up
With this setting, you can enable a pop-up to give your customers the choice to either go to their cart or continue shopping after adding a product to the cart.
Here's how it would look when this setting is enabled.
💡 Tip
You can customize the button and text colors for the Buy Now Pop-Up by contacting our support team and requesting the changes you'd like to make. |
2.9. Show Recommended Products
With this setting, you can add a product recommendations section to your product pages. Displaying suggested products helps customers discover more items and can boost your store's sales.
📌 Important Note
The data source for these product recommendations is Shopify. If you're unsure how to set them up, you can refer to this Shopify article. |
Here's how it would look when this setting is enabled.
2.10. Show Recently Viewed Products
With this setting, you can display a recently viewed products section on the product pages. Displaying recently viewed products is a powerful tool for potentially boosting cart value.
Here's how it would look when this setting is enabled.
2.11. Enable Augmented Reality
With this setting, you can display 3D models of your products on product pages. This feature supports products that are already compatible with Shopify AR in your online store.
📌 Important Note
To make use of the Augmented Reality setting, you need to have the 3D models set up for your products on your Shopify store. For more information, you can refer to the dedicated article here. |
2.12. Show Inventory Quantity
With this setting, you can display stock information on product pages (1). You can also set a specific threshold to show inventory details below a certain stock level (2). Lastly, instead of displaying the exact stock quantity, you can choose to show a "Low Stock!" warning text (3).
Here's a visual guide to how remaining stock information or low-stock warning text will appear on your product pages.
📌 Important Note
To ensure this setting works, verify that inventory tracking is enabled in your Shopify admin panel. If you're unsure how to do this, check out this Shopify article. |
2.13. Payment Installment Options
With this setting, you can enable the payment installments section on the product pages. After enabling the setting, you can choose between different options to show installment plans to your customers.
📌 Important Note
To ensure the setting works, you need to have the selected payment installment set up on your Shopify store first. For more details, you canrefer to the dedicated article here. |
Here's how it would look when this setting is enabled.
2.14. Show Tabs
With this setting, you can add tabs to your product pages, allowing you to display additional information beyond the product description. You can use Global Tabs to show the same tabs across all products or Unique Tabs to display product-specific information.
After enabling the setting, you will need to set up the tabs you want to display with the Configure button. For more details on how you can set up the tabs feature, you can refer to the dedicated articles of Global Tabs here, and Unique Tabs here.
Here's how it would look when this setting is enabled.
2.15. Enable Pre-Order & Coming Soon
With this setting, you can enable the Pre-Order feature, allowing you to collect orders and generate revenue for products before they enter your inventory, just like in-stock items.
And with the Coming Soon feature, you can showcase products in your mobile app before they become available, helping to build anticipation and demand in advance.
After enabling the setting, you will need to set up which products want to use the Pre-Order and Coming Soon feature for, with the Configure button. For more details on how you can set up the feature, you can refer to the dedicated article here.
Here's how it would look when this setting is enabled.
2.16. Enable Products Labels & Badges
With this setting, you can enable the Product Labels & Badges feature, highlighting special, discounted, or popular products to attract customer attention and boost visibility. These labels enhance product engagement, making it easier for customers to spot key items in your store.
After enabling the setting, you can click on the Configure button to set up labels or badges, customize their design, placement, and positioning to align with your brand. For more details on how you can set up the feature, you can refer to the dedicated article here.
Here's how it would look when this setting is enabled.
3. Customizing the Cart Page
The settings you adjust below this section apply only to your cart page, where customers can see the products added to their cart and proceed to checkout. These settings will help you streamline the checkout process, reduce friction, and build trust by providing key information in advance, leading to higher conversion rates and increased sales.
3.1. Highlight Payment Options
With this setting, you can highlight payment options on the cart page, informing customers about available payment methods before they proceed to checkout. All payment options will still be available at checkout, even if they aren’t highlighted. For more details, you can refer to the dedicated article here.
📌 Important Note
This feature only highlights payment options already available in your online store. If a payment option is not active there, enabling this setting will not make it available in your mobile app. |
Here's how it would look when this setting is enabled.
3.2. Enable Cross-Sell Widget
With this setting, you can enable the Cross-Sell Widget on the cart page, showcasing products your customers may be interested in and increasing total order value. This feature allows you to highlight specific collections (1), wishlists (2), and recently viewed products (3) to encourage additional purchases. For more details, you can refer to the dedicated article here.
Additionally, you can even display personalized product recommendations (4) based on the items in the cart, by making use of the relevant integration. For more details on the relevant integration, you can refer to the dedicated article here. Lastly, you have the option of showing the Cross-Sell Widget only when the cart is empty (5).
Here's a visual guide to help you understand how the Cross-Sell Widget would look when enabled.
4. Customizing the Search Page
The settings below apply only to your app’s search page, where customers can look up the products they want. These settings will help you drive engagement, improve navigation, and increase conversions by highlighting specific products and offering multiple ways to search.
4.1. Enable Collection Suggestion
With this setting, you can enable the Collection Suggestion feature, allowing you to highlight specific collections on the search page. This helps customers browse your store more easily, find products faster, and enjoy a smoother shopping experience, ultimately increasing purchase completion rates.
After enabling the setting, you can click on the Select button to configure which collections you want to highlight. For more details on how you can set up the feature, you can refer to the dedicated article here.
Here's how it would look when this setting is enabled.
4.2. Enable Barcode/QR Scanner
With this setting, you can enable the Barcode/QR Scanner feature to let customers quickly scan products and access details, enhancing both in-store and mobile shopping. This makes offline shopping easier and encourages more purchases, boosting your store’s sales potential. For more details on the feature, you can refer to the dedicated article here.
Here's how it would look when this setting is enabled.
Now that you’ve explored all the customization options, you’re ready to fine-tune your app’s design and functionality to match your store’s needs. From enhancing navigation to optimizing product displays, every adjustment helps create a seamless shopping experience. Start customizing today to elevate user engagement, boost conversions, and make your brand stand out!
Watch the Video Tutorial
You can watch our step-by-step video tutorial for a more in-depth understanding of the customization options for your mobile app.
Need Help?
If you encounter any issues, our support team is here to assist you:
Contact our support team via live chat in your Shopney dashboard.
Visit our Help Center.