Deactivate zoom and widget on specific product template

Store Design
, , ,

Topic summary

Goal: Disable the image zoom and a specific widget on only one product page template in a Shopify store.

Key details:

  • Widget to hide: a button with selector button.artplacer-button.en.btn.btn-7.btn--full.btn-theme.product-form__cart-submit.
  • Target: hide on template product-template-1.liquid (e.g., “A Roll of Backgammon”) but keep visible on product-template-7.liquid (e.g., “Beauty”).

Actions taken:

  • Initial CSS suggested to hide the button globally via Theme Customizer. Saving issues appeared; then advised to add CSS directly in Assets (e.g., base.css).
  • Global CSS worked but hid the widget on all product pages, which wasn’t desired.

Final solution:

  • Scoped CSS using the template section ID:
    body:has(#shopify-section-product-template-1) button.artplacer-button.en.btn.btn-7.btn--full.btn-theme.product-form__cart-submit { display: none; }
  • This hides the widget only on the specified product template and keeps it visible elsewhere.

Notes:

  • Image zoom deactivation was acknowledged as more complex and was not provided; remains unresolved.
  • Screenshots of the Theme Customizer, code editor, and alerts were shared but are not essential to the solution.

Status: Partially resolved (widget scoped correctly; zoom still open).

Summarized with AI on January 7. AI used: gpt-5.
8

Ah okay. I understand. Then try this please

body:has(#shopify-section-product-template-1) button.artplacer-button.en.btn.btn-7.btn--full.btn-theme.product-form__cart-submit {
    display: none;
}
1 Like