Add to Cart Button - Change colour depending on product

Store Design
, ,

Topic summary

Goal: Make the “Add to Cart” button color match each product in a Shopify “Taste” theme where all 10 products use the Default Product template.

Proposed approaches:

  • Multiple product templates: Create separate product templates per desired button color, then assign each product to its matching template. Simple to manage for a small catalog (10 products).
  • Global CSS in theme.liquid: Edit theme.liquid (inside the ) to add custom CSS for button background colors. Instructions mention duplicating a code snippet, adjusting the href link and background-color for each case, but the actual code is not visible in the post text.

Notes on terms:

  • Product template: The layout file a product page uses; can be duplicated/assigned per product.
  • theme.liquid: The main theme layout file where global assets/CSS can be included.
  • Metafields: Custom product fields for storing data (e.g., a color value) to drive dynamic styling; suggested by OP but not addressed in replies.

Status/next steps:

  • No confirmed resolution. Two viable paths offered; metafields-based solution not provided. Screenshots/code are central, but the code snippet is missing in the thread text. URL shared: https://lacelabs.co.uk
Summarized with AI on December 28. AI used: gpt-5.
3

Hey @bskill ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Make copies of this code and change the link between href=“{link}” and change the background-color setting to whatever colour you like.

ThePrimeWeb_1-1716395401001.png
ThePrimeWeb_1-1716395401001.png802×218 13.1 KB

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1716395306111.jpeg
ThePrimeWeb_0-1716395306111.jpeg1253×933 87.9 KB