Product page

Size guide

Add a size guide to your product page to help customers find the right size.

Set Up

1. From Shopify admin, go to Online Store → Themes.
2. Click Edit theme, then open a product template.
3. Select (+) Add block, then choose Variant picker.
4. Inside the Variant picker, select your Size chart page.
5. Click Save

---

Edit term size reference

IMPORTANT

The size chart feature only supports the languages that the theme is currently translated into. If you need it in an unsupported language, you must translate the content manually.

1. From Shopify admin, go to Online Store → Themes.
2. Click •••, then click Edit default theme content
3. Open the OpenThinking tab.
4. Go to Variants.
5. Change Size to your desired language.
6. Click Save

---

Dynamic Size Charts

To use different size charts for different products, you can set up Metafields. This allows each product to display a unique size chart dynamically.

Step ①

To begin, you must create a page reference metafield definition for your product pages. The product metafield links to a specific page and can be customized for each product.

1. From your Shopify admin, go to Settings → Metafields and metaobjects
2. In the Metafield definitions section, click Products
3. Click Add definition
4. In the Name field, enter Size chart
5. Click ⊕ Select type
6. Select Page from the drop-down menu. *One page is selected by default
7. Click Save

Step ②

You need to create a page with the size chart content that the metafield references.

1. From your Shopify admin, go to Online Store → Pages
2. Click Add page
3. In the Title field, enter Size chart, and then add the size chart information in Content.
4. In the Visibility section, set the page as Visible
5. Click Save

Step ③

Reference the page and apply the product template to specific products

1. From your Shopify admin, go to Products.
2. Click the product that you want to add a page reference to.
3. In the Product metafields section, click Size chart page reference, and then click Select pages and select the Size chart page.
4. In the Theme template section, select the Size chart product page template that you created.
5. Click Save

Step ④

When you add a page reference to a specific product, the information from that page displays only with that product.

1. From Shopify admin, go to Online Store → Themes

2. Click Edit theme next to the theme that you want to customize.

3. From the Home page drop-down menu at the top of the editor, click Products → Default product, and then open the Product page section.

4. Locate and open the Variant picker block (as in the setup above)

   NOTE

   Here instead of selecting a page, click Connect dynamic source then select the metafield you created.

5. Next to Page, click the dynamic source icon, and then click to select the page reference metafield that you created.

---

Product siblings

Product siblings are related products displayed as swatches on the product page. Merchants can link products as alternatives, similar to variants. Some prefer managing inventory by creating separate products for each color, ensuring each color appears as an individual product in collections.

The Product list block enables seamless switching between sibling/related products as if they are the same product. This functionality mimics a swatch variant picker, making it seem like users are selecting colors, but they are actually navigating to a separate product.

IMPORTANT

The setup of this feature is not supported by our complimentary support.

Using Metafields to Link Products

The Product siblings block can utilize dynamic content such as metafields to display linked sibling products. You can create a new metafield of type Product list or use an existing metafield, such as Complementary products, managed through the Shopify Search & Discovery app.

Add a Custom Product List Metafield

1. From your Shopify admin, go to Settings → Custom data → Metafield definitions.

2. Click Products, then Add definition

3. Here are the fields to fill in:

   • Name: Product siblings
   • Namespace and key: openthinking.product_siblings
   • Type select Product → List of products
   🖼️ Screenshot

   

4. Click Save

OPTIONAL

Create a Text metafield to store the heading for the Product siblings block.

Featured image metafield

To show a featured image instead of the product thumbnail, use a metafield with the type Image to store the desired image. If the metafield is empty or missing, the default product thumbnail will be shown instead.

1. From your Shopify admin, go to Settings → Custom data → Metafield definitions.

2. Click Products, then Add definition

3. Here are the fields to fill in:

   • Name: Product siblings image
   • Namespace and key: openthinking.product_siblings_featured_image
   • Type select Media → Image (File)
   🖼️ Screenshot

   

4. Click Save

Next, simply open the product you want to have a custom featured image and add the desired image to the Product siblings image metafield.

---

Assign Sibling Products to a Product

Step ①

1. From your Shopify admin, go to Products.
2. Select the product you want and scroll to the Product metafields section.
3. Click the newly created Product siblings metafield, then Select products.
4. Add all sibling products you want to display.
5. Click Save

Step ②

NOTE

You will need to update the metafields for each product you want to display siblings for. You can do this by using the Bulk Editor or by updating the metafields manually.

---

Link the Metafield to the Product Siblings Block

1. From Shopify admin, go to Online Store → Themes
2. Click Edit theme, then open the Product template.
3. Select (+) Add block, then select the Product list block from the list.
4. Click Dynamic content button, then select the new Product siblings metafield.
5. Click Save

🖼️ Screenshot

WARNING

If no products are assigned to the Product siblings metafield, the Product list block will not display. Make sure that you are viewing a product that has siblings assigned to it!!!

---

Pre-order

Pre-order lets you show a "Pre-order" button on product pages and product cards instead of the usual "Add to cart" button. This is useful for items that aren't available yet but will be soon.

1. From your Shopify admin, go to Products.

2. Click the product that you want to make available for preorder.

3. In the Tags section, type preorder, then press Enter.

   WARNING

   The tag must match exactly: preorder (lower case, no spaces, no dashes).

4. Scroll down to the Inventory section.

5. Check the Continue selling when out of stock checkbox.

   WARNING

   If not enabled, Bullet will show a "Sold out" button instead.

6. Click Save

IMPORTANT

This is a basic workaround that works for most situations. For a full-featured pre-order system, consider using a third-party app or creating a custom solution.

Also, review Shopify’s pre-order requirements to stay compliant.

---

Variant gallery v6.2 and above

Shopify allows you to assign one featured image to each variant. It does not provide a native way to assign a complete image set to a variant.

For example, a T-shirt might be available in Black and Silver, with five images showing each color. Without variant galleries, all ten images remain visible regardless of the selected color. Variant gallery lets Bullet show only the relevant image set.

This feature uses a group identifier at the end of each image's alt text. When a shopper selects a variant, its featured image identifies the group and Bullet displays every image with the same identifier.

IMPORTANT

Variant galleries require manual setup for each product. For stores with a very large catalog, consider using a dedicated variant image app or separating each style into its own product.

1. Choose the product option

Identify the option that should control the gallery. This is usually Color, but it can also be an option such as Material, Scent, or Style.

For this example, the product uses a Color option with Black, Silver, and Deep blue values.

2. Create the group identifiers

Create one hashtag identifier for each image group. We recommend combining the option name and value so the groups remain easy to recognize.

Option	Value	Recommended identifier
Color	Black	#color-black
Color	Silver	#color-silver
Color	Deep blue	#color-deep-blue

Use the following rules:

• Begin the identifier with one #
• Use letters (A–Z), numbers (0–9), hyphens, or underscores only
• Replace spaces with a hyphen or underscore: #color-deep-blue or #color_deep_blue
• Use only one group identifier per image
• Use the same identifier consistently for every image in the group

IMPORTANT

Identifiers containing spaces, additional hashtags, or other symbols are invalid. Images with an invalid identifier will not be included in the group.

3. Add identifiers to the image alt text

1. From Shopify admin, go to Products
2. Open the product you want to edit
3. In the Media area, select an image
4. Click Add alt text or edit the existing alt text
5. Write a useful image description, followed by the group identifier: Black T-shirt, front view #color-black
6. Save the alt text
7. Repeat for every image in each group

For example:

Image	Alt text
Black front	Black T-shirt, front view #color-black
Black back	Black T-shirt, back view #color-black
Silver front	Silver T-shirt, front view #color-silver
Deep blue detail	Deep blue T-shirt, fabric detail #color-deep-blue

The text before the hashtag remains the image's accessible alt text. Bullet removes the group identifier from the alt text rendered on the storefront.

4. Assign the featured images

Each variant must have a featured image containing the correct group identifier. The featured image acts as the anchor that tells Bullet which image group to display.

Variants belonging to the same group can use the same featured image. For example, Black / Small, Black / Medium, and Black / Large can all use the same image tagged with #color-black.

IMPORTANT

Filtering starts only when the selected variant's featured image has a valid group identifier. If it has no identifier, has an invalid identifier, or has no featured image, the complete product gallery remains visible.

5. Enable the variant gallery

1. From Shopify admin, go to Online store > Themes
2. Click Edit theme
3. Open a product template and select the Product page section
4. Enable Variant gallery
5. Click Save

Preview the product and select different variants. The gallery will show images with the matching hashtag, together with any shared images that do not have a hashtag.

---

FAQ

What happens if a product does not use image groups?

All product media remains visible. Enabling Variant gallery does not filter a product unless the selected variant's featured image contains a valid group identifier.

How do I show an image in every variant gallery?

Leave the image alt text without a # group identifier. Untagged images are shared and appear alongside every valid image group.

What if an option or value contains multiple words?

Replace every space with a hyphen or underscore. For example, use #color-deep-blue or #color_deep_blue for Deep blue. Do not write #color-deep blue.

Does the identifier need to match the option name and value?

No. Bullet matches the identifier on the selected variant's featured image with the identifiers on the other product images. Using a format such as #color-black is recommended because it makes the groups easier to manage.

Can I keep meaningful image alt text?

Yes. Write the image description first and place the group identifier at the end. Bullet uses the identifier for grouping but removes it from the alt text rendered on the storefront.

Is this suitable for a large product catalog?

The setup is manual, so it can become time-consuming across a large inventory. In that case, consider a dedicated variant image app or separate products connected through the Product siblings feature.

How do I link other products as clickable swatches?

Linking other products as variant swatches is supported through Shopify Combined Listings app, which is exclusively available for Shopify Plus merchants. If you have a Shopify Plus subscription, you can use this functionality right away. In alternative you can use the "Product siblings" block.

How do I show different content per product?

You can show different content per product by using metafields. Metafields let you store custom information for each product—like care instructions, shipping rates, etc., and display that information in blocks such as the Collapsible tabs on your product page.

We have a helpful guide on this here: Using metafields with Etheryx