Moving the "sold out enquire now" button location

Moving the "sold out enquire now" button location

bridget
Visitor
2 0 0

Hi There, just wanting some help with moving a "sold out" button to a different location. (as per screenshot below)

We are using the Studio theme 2.0

 

Thanks!Screenshot 2024-07-11 124732.jpg

Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
10096 2007 2058

Hi @bridget 

Please go to Online Store > Themes > Edit code > open them.liquid file, add this code after <head>

.card--card.card--media> .card__content .card__badge {
    display: flex !important;
}
.card__inner .card__content .card__badge { 
    display: none !important; 
}

Screenshot 2024-07-11 at 09.59.48.png

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

INA_MSWEB
Shopify Partner
1281 144 166

Hi @bridget 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

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

bridget
Visitor
2 0 0

Thanks Ina.

 

Just trying to locate the code. Do you thinks its this part, thats highlighted?

 

 

 

bridget_0-1721775768658.png