Moving the "sold out enquire now" button location

Store Feedback

Topic summary

A user seeks help relocating the “Sold Out” button on their Shopify store using Studio theme 2.0. They’ve provided a screenshot showing the current button placement.

Proposed Solutions:

  • CSS approach: One responder suggests adding custom CSS code to the theme.liquid file within the <head> section to hide or reposition the button using display properties.

  • Template editing approach: Another responder provides detailed steps to modify the product template files (product-grid-item.liquid or product-card.liquid) by:

    • Locating the HTML code for the “Sold Out” button
    • Moving it to the desired position in the template structure
    • Adjusting CSS styling to ensure proper appearance
    • Previewing and saving changes

Current Status:

The user is attempting to locate the relevant code section and has shared a screenshot asking for confirmation if they’ve found the correct part to modify. The discussion remains ongoing as they work through implementation.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
3

Hi @bridget_15 Thank you for reaching out for assistance with your Shopify store. Based on the screenshot provided, it appears that you would like to relocate the “Sold Out” button to a different position within your product listing on the Studio theme 2.0. Here are the steps to achieve this:

  1. Go to your Shopify Admin panel.
  2. Navigate to Online Store > Themes.
  3. Click on Actions next to your current theme and select Edit code.
  4. In the code editor, find the section containing your product template files. This is usually found in the Sections or Snippets folder.
  5. Look for a file named something similar to product-grid-item.liquid or product-card.liquid.
  6. Locate the code responsible for displaying the “Sold Out” button. This might look something like {% if product.available %} or similar logic for handling sold-out states.
  7. Adjust the HTML structure to move the button to your desired location. For example, if you want the button to appear above the product title, ensure the button’s HTML code is placed above the title’s code.
  8. After relocating the button, you might need to adjust the CSS to ensure it looks appropriate in its new position. This can be done in the theme.scss.liquid or theme.css file within the Assets folder.
  9. Add or modify CSS rules to style the “Sold Out” button accordingly.
  10. Save the changes you made to the theme files.
  11. Preview your store to ensure the button is correctly positioned and styled.

Please let me know if you need further assistance or if there are any specific details you would like to address.

Best regards,

Ina