Brooklyn Theme missing social share buttons

Solved
hugon789
Excursionist
20 0 5

Hi everyone,

I'm using Brooklyn theme and have enabled social share options in theme settings in my product page. Why aren't those buttons showing up?

Shop URL: https://fxpopup.com/ 

Thanks.

Social sharing.jpg

Accepted Solution (1)

Accepted Solutions
Trevor
Community Moderator
Community Moderator
3210 432 736

This is an accepted solution.

@hugon789 

Find the following code: 


<div class="product-single__add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">
<button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
<span class="btn__text">
{% if current_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}

</div>

Paste the code under the closing </div> - In my example below, that would be line 244

04-37-8651-8654

 

Just remember to remove the previous code or you'll see the buttons appear twice. 

Trevor | Community Moderator @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 6 (6)
Trevor
Community Moderator
Community Moderator
3210 432 736

@hugon789 

The buttons should be appearing automatically based on what I can see in my test store. Did you create a new product page template for your theme? Or did you change the coding of the theme? 

It may have been removed if you have made any changes, but adding it back into the template should resolve the issue. The code is: 

{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
{% endif %}

Let me know if that works

Trevor | Community Moderator @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

hugon789
Excursionist
20 0 5

It worked. Thank you very much.

Mind if I ask if there's a way to place those buttons at a higher position? Like under the "Buy Now" button? Thank you. 

Trevor
Community Moderator
Community Moderator
3210 432 736

This is an accepted solution.

@hugon789 

Find the following code: 


<div class="product-single__add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">
<button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
<span class="btn__text">
{% if current_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}

</div>

Paste the code under the closing </div> - In my example below, that would be line 244

04-37-8651-8654

 

Just remember to remove the previous code or you'll see the buttons appear twice. 

Trevor | Community Moderator @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

hugon789
Excursionist
20 0 5

It worked like magic. Thank you very much. 

Just one extra question: Is there a way to increase the size of these buttons? Thank you again.

Trevor
Community Moderator
Community Moderator
3210 432 736

@hugon789 

Adding a new line of code to the CSS file would be the best route as the file can't be reverted to older versions. Adding a new line will make it easier to edit/remove should any changes need to be made. 

The size of the buttons is connected to the font, so adding the following snippet to the bottom of the "theme.scss.liquid" file under the "Assets" folder will do the trick. Change the value to increase/decrease the size. 

.social-sharing span {
   font-size: 20px;
}

 

Trevor | Community Moderator @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

hugon789
Excursionist
20 0 5

Thanks for the help!