How to Display both front and back sides of the product using Dawn Theme

Shopify Discussion

Topic summary

A user is setting up a print-on-demand (POD) store with apparel designs printed on both front and back. They want to enable customers to view both sides of the product, ideally through an arrow or toggle at the bottom of the product image.

Proposed Solution:

  • Another user suggests preparing images for both front and back views first
  • Implementation involves three components:
    1. HTML: Add toggle buttons in product template files (templates/product.liquid or sections/product-template.liquid)
    2. CSS: Style the toggle interface
    3. JavaScript: Create functions to switch between front and back images when buttons are clicked

Note: The code examples provided appear corrupted or reversed in the original text, making them difficult to read directly. The general approach involves creating clickable elements that swap the product image source between front and back design files.

Status: Solution provided but not yet confirmed as implemented or tested.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

HI, I’m setting up a POD store and some of my designs have both side of the apparel printed on. How do i make it such that, should the product be selected from the catalogue, the customer is able to scroll between both the front and back sides of the design? Like an arrow at the bottom of the product image to show the customer the design on the other side?

2

Hi,

Prepare your image first after that

Use HTML for the Toggle Feature (at templates/product.liquid or sections/product-template.liquid)

Code example

Use CSS for Styling

Use Javascript Toggle Functionality

Javascript example

function showFront() {
  document.getElementById('product-image').src='{{ 'front-design.jpg' | asset_url }}';
}

function showBack() {
  document.getElementById('product-image').src='{{ 'back-design.jpg' | asset_url }}';
}