I have some problems with the collection page and the product page in the Dawn theme

Technical Q&A

Topic summary

Issue: In the Shopify Dawn theme, the collection and product pages malfunctioned: the “Select Options” button didn’t work, a duplicate inactive button appeared, and products failed to display on the product page.

Initial investigation: The user suspected recent theme customizations, including:

  • Adding a custom product label via card-product.liquid and .xarici-anbar CSS.
  • Styling changes in component-mega-menu.css. Removing these edits did not resolve the problems.

Root cause and fix: The user discovered that core theme files had been accidentally deleted—main-product.liquid (product page template) and quick-add.js (handles the quick add/“Select Options” behavior). Restoring these files resolved all issues.

Context: Dawn is Shopify’s default theme. main-product.liquid defines product page rendering; quick-add.js powers the quick add functionality.

Outcome: Resolved. No further action items or open questions were identified.

Summarized with AI on February 5. AI used: gpt-5.
1

Hello everyone!

I’m using the Dawn theme and I’m having some issues with the collection page and the product page. The “Select Options” button does not work properly, another button appears below it, which does nothing, and the products do not appear on the product page.

test2.png
test2.png1443×719 142 KB

test3.png
test3.png1919×931 91.9 KB

I have tried several ways to fix this. But I did not succeed. I think the problems are caused by the codes I added.

Which are:

Line 36 in card-product.liquid;

<div class="{% if card_product.tags contains 'xarici-anbar' %}xarici-anbar{% endif %} card-wrapper product-card-wrapper underline-links-hover">

Lines 1 to 9 in component-rating.css

.xarici-anbar::after {
  position: absolute;
  content: '';
  background: transparent url(https://cdn.shopify.com/s/files/1/0670/2442/1161/files/xarici_anbar.png?v=1667398840) no-repeat center/contain;
  width: 20%;
  height: 20%;
  top: 0px;
  left: 0px;
}

(I had added these two pieces of code above to create a custom product label)

Lines 58 to 61 in component-mega-menu.css

.mega-menu__link--level-2 {
  font-weight: bold !important; 
  font-size: 1.3rem;
}

this is for:

Xaliq_0-1667479272404.png
Xaliq_0-1667479272404.png1435×589 21.4 KB

But when i delete the codes it doesn’t fix the problems. Please help to solve these problems.

Thanks

2

I found what the problem was.

I had accidentally deleted main-product.liquid and quick-add.js files. I put them back in place and the problem was fixed.