Help
Log in

Advanced product and collections display customizations for the Shopify plugin

These advanced settings help you customize your storefront on WordPress, personalize your business brand, and enhance your customers' buying experience.

On this page

Shopify plugin and Shopify storefront components

The Shopify plugin is built with Shopify Storefront Web Components. The following components are used as the building blocks of your Shopify storefront:

  • Product Card Component: This component displays individual product information, typically displayed on product listings or collection pages. It often includes elements such as the product image, title, price, and an Add to cart button.
  • Product Quick View Modal Component: This component displays a modal over the existing content with product details, an Add to cart button, and a link to view full product details.
  • Product Detail Page Component: This component displays a single product, with full product details. Each product detail page component has a unique URL.
  • Collection Component: This component displays collections of products that you have created.

Shopify products and collections display customization

The default Shopify storefront components on your plugin have tools to help create a seamless shopping experience. You also have the flexibility to customize the display of these components to align with your specific brand identity and design requirements.

To undertake such customizations, you must have access to modify your WordPress theme files and directories. The process involves creating a dedicated folder within your active WordPress theme's directory.

Steps:

  1. Create the Shopify folder: Begin by creating a new folder named Shopify directly within your active theme's directory. This folder serves as the central location for your custom component overrides.
  2. Override Individual Components: To modify a specific component, add a PHP file with a designated name inside the newly created Shopify folder. The naming convention for these override files is crucial for the plugin to recognize and apply your custom versions:
    • To override the Product Card Component, create a PHP file named product-card.php within the Shopify folder.
    • To override the Product Quick View Modal Component, create a PHP file named modal.php within the Shopify folder.
    • To override the Product Detail Page Component, create a PHP file named pdp.php within the Shopify folder.
    • To override the Collection Component, create a PHP file named component.php within the Shopify folder.

After your custom PHP file is created, the plugin disregards its default component file for that specific element. You can implement any code within these override files, from static HTML blocks to complex PHP logic.

Although it's highly recommended to leverage the Shopify Storefront Web Components (as utilized in the default plugin structure) for consistency and access to built-in Shopify functionalities, you aren't limited to them. You can integrate other methods for fetching and displaying product and collection data, allowing for advanced customizations.

For more information and best practices, refer to WordPress plugin developer documentation.

Shopify products and collections rewrites

When you publish a product or a collection on Shopify, each product and collection has a unique URL. By default, these URLs are created with your Shopify domain. With the rewrites function, you can access those unique URLs with your public WordPress domain.

Steps:

  1. From the Shopify plugin, go to Settings.
  2. In the Advanced tab, ensure the two checkboxes in the Shopify links rewrites section are activated.
  3. Go to Permalink.
  4. Click Save to apply this new rule.
  5. Go to your Shopify admin, and then navigate to the product or collection detail page that you want to create a WordPress link for.
  6. In the search engine listing card, there is a URL displayed that links customers directly to your product or collection. For example: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
  7. Add products/huskee-reusable-cup at the end of your WordPress site URL. For example: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Customize your product card behavior

With Shopify storefront components, there are two product detail card types:

  1. Quick view: When hovering on the product card, the customer has an option to Quick Shop. When clicked, the product details are displayed in a popup or modal style over existing content in the background.
  2. Detailed product page: When a customer clicks on the product card, such as on the image or product name, product details display in a full page view with a unique URL.

You can change this setting to display either a quick view only, a detailed product page only, or both.

Steps:

  1. From the Shopify plugin in WordPress, go to Settings.
  2. From the Advanced tab, go to the Product View section.
  3. Choose the option that works best for your store.
  4. Click Save.