How to customize Shopify sections with Replo's export section feature

Last updated: June 26, 2024

This guide will help you use Replo to customize individual product pages using the product template feature within your Shopify theme.

Requirements

You will need access to your store’s:

  1. Shopify - Your e-commerce platform. Make sure you have theme and product catalog editing access.

  2. Replo - A tool to customize and enhance Shopify product pages.

Video Walkthrough

Walkthrough

  1. Understanding the Basics:

    • Replo allows you to customize individual product pages using the product template feature within your Shopify theme.

    • While full product page functionality is in development, the current method involves using the export to section functionality.

  2. Setting Up in Shopify:

    • Navigate to your product catalogs in Shopify.

    • For each product, you can select which product template you want to use.

    • By default, it is set to the default product template.

    • To find and customize the template, go to Online Store > Customize theme > Products > Default product template.

  3. Creating a Custom Template in Shopify:

    • Create a placeholder for the Replo customized template.

    • Name it appropriately, for instance, "Demo_Export_to_Sections".

    • This will duplicate the default product template, which will serve as the base for our custom template.

  4. Customizing the Template:

    • Adjust elements as needed. For example, you can change the position of the price or add new sections.

    • Use Replo to further customize the template. For instance, if you want to add a specific section from Replo, export it to Shopify.

  5. Integrating with Replo:

    • In Replo, select the element or section you want to export to Shopify.

    • Use the "Export to Section" feature and name it appropriately.

    • To do so, right click the section you want to use in Shopify > Click Export to Sections

    • You will be taken to the Sections tab within the Replo Editor.

    • Make the design changes you want.

    • Once finished with the changes, hit publish.

    • Once done, go back to Shopify, refresh, and you should see the exported section available to add in your sections list dropdown within the Shopify Theme Editr.

  6. Assigning the Custom Template:

    • Go back to your product catalog in Shopify.

    • For the desired product, scroll down and select the custom template you created from the theme template dropdown.

    • Save changes and visit the product page to see the custom template in action.

Final Notes:

  • This method is especially useful for stores with a smaller catalog or specific collections that need a custom template.

  • For larger catalogs, it might be more efficient to wait for full product page support in Replo.

FAQ

  1. Can I use this method for all my products?

    • Yes, but it's more efficient for smaller catalogs or specific collections.

  2. How often is the Replo feature updated?

    • Updates are rolled out periodically. Stay tuned for the full product page functionality.

Example of Customizing a Product Page

See a live example here.

example screenshot