Get a free audit

Product page

Last updated Theme version 1.0.0

Press / to search. Use the arrow keys and Enter to open a result.

All guides
On this page

The product page is where shoppers decide. In Rawnaq it is built from blocks, so you choose which pieces to show and in what order: title, price, options, buy buttons, delivery notes, size guide and more.

To edit it, open Online Store > Themes > Customize, then use the page picker to choose Products > Default product. Pick any product to preview with. The section on the left is called Product information, and the blocks are listed under it. Drag blocks to reorder them, click one to edit it, and use Add block to add more. Blocks marked as limited can be added once.

Product page settings

Select Product information to change the whole page:

  1. Color scheme
  2. Show breadcrumbs: the Home > Collection > Product trail.
  3. Show previous and next product links: shown when the shopper arrives from a collection.
  4. Keep product info in view while scrolling: on desktop, the information column stays visible while the photos scroll.
  5. Show sticky add to cart bar: a slim bar with the price and an add to cart button appears after the shopper scrolls past the main buy button.
  6. Update the URL when a variant is selected: keeps the chosen size or color in the address bar so the link can be shared.
  7. Top padding and Bottom padding.

Under Media in Product information:

  1. Gallery layout:
    • Two column grid: photos in two columns, the most editorial look.
    • Stacked: one large photo above the next.
    • Thumbnails below: a large photo with thumbnails underneath.
    • Thumbnails beside: a large photo with thumbnails at the side.
    • Carousel: swipe through photos one at a time.
  2. Media width on desktop: 40 to 70 percent of the page.
  3. Gallery position: Start or End.
  4. Media shape: Natural, Square or Portrait.
  5. Zoom: Open full screen, Magnify on hover or No zoom.
  6. Group images by variant: see below.
  7. Loop and mute videos

The gallery supports images, videos hosted by Shopify, YouTube and Vimeo videos, and 3D models. A 3D model with augmented reality gives shoppers a view in their space option on supported phones.

Group images by color

When a product comes in colors, shoppers expect to see only the photos of the color they picked. Rawnaq can do that.

  1. In Shopify admin, open the product and upload all photos. Put the photos in order, with each color's photos together: all photos of Black, then all photos of Sand, and so on.
  2. Assign a variant image to each color. Open each variant (or the color group of variants) and choose the first photo for that color as its image.
  3. In the theme editor, select Product information and turn on Group images by variant.
  4. Preview. Choosing a color now shows only that color's photos.

Good to know

  • The first photo of a color is the one you assigned as the variant image. The photos that follow it, up to the next color's variant image, belong to that color.
  • If your products do not have a different image for each color, leave Group images by variant off. It only works when there is more than one variant image.
  • Write alt text for each photo. See Performance and accessibility.

The product blocks

Text, Vendor, Title

  • Text: a line of text, with Style Body, Subtitle or Small caps.
  • Vendor: the brand name. Add once.
  • Title: the product name, Size Small, Medium or Large, with Show badges to show sale or new badges next to it.

Price

Price shows the price, a compare at price when there is a discount, and the unit price when you set one. Options: Show saving, Show tax and shipping note, and Show installments message, which shows the Shop Pay Installments message when it is available to you.

Rating

Rating shows stars from a review app that fills Shopify's standard product rating metafields. Most major review apps do. Without such an app, nothing shows. Clicking the stars scrolls to a section on the page. Set Reviews section ID to scroll to to match the Anchor ID of the app's reviews section (the Apps section) further down the page. By default the rating block scrolls to an ID called reviews.

SKU

Shows the SKU and, with Show barcode, the barcode.

Inventory

Shows how much stock is left. Options: Low stock message at (0 to 50), Show the number left and Show low stock bar. Set the threshold to 0 to hide the message.

Variant picker

Shows the options (size, color and so on). Settings:

  1. Style: Buttons or Dropdown.
  2. Swatch shape: Circle, Square or None. Swatches use the colors and images set on your product option values.
  3. Under Size guide: Size guide page and Size option names.

The picker marks combinations that are sold out and updates the price, photos and URL as the shopper chooses. It is built for products with many variants (up to 2048) and supports combined listings.

Color swatches

Rawnaq uses the swatches built into Shopify, so there is nothing extra to install.

  1. In Shopify admin, open the product and select the Color option.
  2. For each color value, choose a swatch: a color, or an image (useful for patterns and fabrics).
  3. Save. The swatches appear on the product page, on product cards and in color filters.

If you cannot find the swatch choice, set the product's category first. Shopify offers swatches for options that are linked to category attributes such as color. Use the same color names across all products so filters stay tidy.

Size guide

  1. Create a page with your measurements: Online Store > Pages > Add page. A table works well. Name it Size guide.
  2. In the Variant picker block, set Size guide page to that page.
  3. Leave Size option names empty to use common size names in many languages (for example Size, Taille, المقاس), or type your own option names separated by commas.
  4. A Size guide link now appears next to the size option and opens the page in a popup.

You can also add a Popup link block anywhere on the product page. It has a Link label, a Popup page and an Icon. Use it for shipping information, care instructions or any page.

Quantity selector and Buy buttons

Quantity selector shows the quantity field. If your store uses quantity rules or volume pricing from Shopify, the selector follows them.

Buy buttons holds the add to cart button and the extras:

  1. Show dynamic checkout buttons: Shop Pay, Apple Pay and other methods available to the shopper.
  2. Show gift card recipient form: for gift card products, lets the buyer send the card to someone else with a message and a send date.
  3. Show WhatsApp order button: opens WhatsApp with the product name and link. It uses the number in Theme settings > Chat and contact > WhatsApp number.
  4. Show back in stock request: sold out variants show an email form. Requests arrive as contact form messages tagged back-in-stock.
  5. Show pickup availability: see below.

When an item has no stock but you allow selling it anyway, the button reads Pre-order and a short note says the item ships when it is back in stock. This happens automatically.

Subscriptions

If you install a subscription app that creates selling plans, shoppers see a choice between buying once and subscribing, with the plan details, right above the add to cart button. The selling plan carries through to the cart and the order. You manage the plans in the subscription app.

Gift cards

  1. In Shopify admin, add a gift card product (Products > Gift cards, or a product with the gift card type).
  2. Keep Show gift card recipient form on in the Buy buttons block.
  3. Customers receive a gift card page with a QR code and, where supported, an Add to Apple Wallet link. See Blog and pages.

Back in stock

When a variant is sold out, the Buy buttons block shows an email form. Requests arrive as contact form messages tagged back-in-stock. Check your store email and the Customers list, and write to the shopper when the item returns. If you prefer an app that restocks automatically, install one and turn this setting off.

Pickup availability

Shows whether the product can be collected at your locations. It needs local pickup turned on for a location in Settings > Shipping and delivery > Local pickup. Without pickup locations nothing shows. Switch Show pickup availability on or off in the Buy buttons block.

Description and tabs

  • Description: the product description. Turn on Show as a collapsible tab to fold it, and Open by default to start it open.
  • Collapsible tab: a tab you write yourself, such as Shipping and returns. Set Heading, an Icon, and the content with Text, or fill it from a page with Page content, or use Custom Liquid. Open by default is optional. Add as many as you need.

Icons, delivery and urgency

  • Icons with text: up to four short promises with icons (for example Free shipping, 30 day returns, Secure checkout). Choose Row or List as the Layout.
  • Delivery estimate: shows a delivery window. Set Earliest delivery, in days and Latest delivery, in days, and an optional Cutoff note such as "Order before 2 pm". It is an estimate that you promise yourself. It does not read your carrier rates.
  • Countdown: a timer for an offer. Set the End date and End time, and use Product tag to show it only on products with that tag.
  • Share: a share button with a Link label.

Complementary products

Shows products that go well with this one, such as "Complete the look". Choose them in Shopify's free Search & Discovery app, under Recommendations. Set Heading and Products to show (1 to 6).

Custom fields

A Custom field block collects a personal detail from the shopper, such as a gift message or an engraving. The answer is saved with the item in the cart and on your order.

  1. Add a Custom field block.
  2. Set Field label (for example Engraving).
  3. Choose a Field type: Single line text, Multi line text, Dropdown, Checkbox or Date.
  4. For a dropdown, list the choices in Dropdown choices, separated by commas.
  5. Optional: Placeholder, Help text, Character limit (0 means no limit) and Required.
  6. Add one block per field.

Specifications from metafields

The Specifications block shows a neat label and value table, such as Material, Fit, Care and Origin. Each product can show its own values by connecting them to product metafields.

  1. In Shopify admin go to Settings > Custom data > Products and add a metafield definition for each detail, for example Material (single line text).
  2. Fill in the values on each product, in the Metafields area at the bottom of the product page.
  3. In the theme editor, add the Specifications block. Set the Heading and the labels (Label 1 to Label 8).
  4. For each value field (Value 1 to Value 8), click the small dynamic source icon and choose the matching metafield.
  5. Empty rows are hidden for products that do not have a value. You can add the block twice, for example Details and Care.

Custom Liquid, Divider and apps

  • Custom Liquid: advanced. Paste app snippets or code.
  • Divider: a thin line between blocks.
  • Apps with app blocks can be added under Add block.

Quick view

Quick view opens a product in a popup from any product card, so shoppers can pick a size and add to cart without leaving the page. Turn it on in Theme settings > Product cards > Enable quick view. To adjust the popup, choose the Quick view template in the page picker and change Media shape or Show dynamic checkout buttons. The quick view icon is shown on larger screens.

Reviews, recommendations and recently viewed

Below the product, the template shows Product recommendations and Recently viewed. Edit their heading, layout and product count like any section. To add an app's review widget, add an Apps section on the product page and give it an Anchor ID that matches the rating block.

Good to know

  • Start with a simple order of blocks: Vendor, Title, Rating, Price, Variant picker, Quantity selector, Buy buttons, Icons with text, Description, Collapsible tabs. Add the rest only if you need them.
  • Use between four and eight photos per product, and include one showing the product worn or in use.
  • Put shipping and returns answers on the product page. It lifts confidence at the moment of purchase.
  • Changes to this template apply to all products. To give some products a different layout, create another product template (in the page picker, Create template) and assign it to those products.

Still stuck? Contact support