This guide will walk you through creating an interactive "Shop by Effect" content slice on your website using Prismic. This allows customers to easily browse and shop for products based on desired effects like "Relax," "Energy," or "Sleep."
Prerequisites
Before you begin, ensure you have correctly set up your product tags (e.g., Effect, Flavor, General) in Treez. These tags are essential for filtering products on your website. For more information click here.
You will also need to create or source images or graphics for each effect you want to display (e.g., an image for Relax, Sleep, Energy, Creative, etc.).
Step-by-Step Instructions
Step 1: Choose and Configure the Slice
Navigate to the Prismic page where you want to add the "Shop by Effect" section, typically the ‘Homepage’.
Add a new slice. Choose one of the ImageGallery slice types based on your desired layout. For this example, we will use the ImageGallery: Image Grid Without Tabs.
Fill in the main slice configuration fields, such as the main Title, Header, Background Color, Text Colors, and any Size/Dimension settings to match your page design.
Step 2: Add an Effect to the Gallery
This section involves adding each effect as an item within the gallery.
In the slice editor, click the Add item in repeatable zone button to create the first entry.
Upload the Image: Add the corresponding graphic for your effect (e.g., the "Relax" image) in the Gallery Image field.
Add a Title: Fill in the Title Caption with the name of the effect (e.g., "Relax").
Configure the Link (CTA Link Caption): This is the most critical step. You need to get the specific URL that filters your shop page for this effect.
Open your website's /shop page in a new browser tab.
Open the product filters and scroll to the "Effect" section.
Select the effect you are configuring (e.g., check the box for "Relax").
Look at the URL in your browser's address bar. Copy the entire string that comes after your domain name, starting with /shop. In this example, it will be
/shop?generals=RELAX.
Go back to Prismic and paste this URL into the CTA Link Caption field.
Configure Other Settings: Fill in any other optional fields as needed, such as Alt text for the image or a Description Caption.
Step 3: Repeat for All Effects
Click Add item in repeatable zone again and repeat the process from Step 2 for each additional effect you want to display in the gallery (e.g., Sleep, Energy, Creative).
Step 4: Save and Publish
Once you have added all your effects, click Save and then Publish. Voila, your changes are now live on your site!
Additional Uses
This same process can be used to create shoppable sections based on other attributes. Simply filter by a different tag on your /shop page to get the correct URL.
Examples:
Shop by Flavor: Filter by a specific flavor and use the corresponding URL.
Shop By General: Use a "General" tag like 'Staff Picks' or 'Best Sellers' and link to that filtered view.